Added some math scripts
This commit is contained in:
Patryk Hegenberg
parent
8c7ac2df36
commit
13490cdad2
9 changed files with 360 additions and 1 deletions
3
controllers/mathe.php
Normal file
3
controllers/mathe.php
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<?php
|
||||||
|
$heading = "Mathe";
|
||||||
|
require "views/mathe.view.php";
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<?php
|
<?php
|
||||||
require 'functions.php';
|
require 'functions.php';
|
||||||
require 'Database.php';
|
require 'Database.php';
|
||||||
//require 'router.php';
|
require 'router.php';
|
||||||
$username = 'appUser';
|
$username = 'appUser';
|
||||||
$password = 'password';
|
$password = 'password';
|
||||||
$config = require('config.php');
|
$config = require('config.php');
|
||||||
|
|
|
||||||
26
mathespiel.html
Normal file
26
mathespiel.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Mathespiel</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h3>Schreibe die richtige Zahl oder das richtige Rechenzeichen in die Lücke</h3>
|
||||||
|
<div id="question"></div>
|
||||||
|
<button id="submit-btn">Bestätigen</button>
|
||||||
|
<p id="error-msg">Da gab es einen Fehler</p>
|
||||||
|
</div>
|
||||||
|
<div class="controls-container">
|
||||||
|
<p id="result"></p>
|
||||||
|
<button id="start-btn">Spiel starten</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -6,6 +6,7 @@ $routes = [
|
||||||
'/about' => 'controllers/about.php',
|
'/about' => 'controllers/about.php',
|
||||||
'/contact' => 'controllers/contact.php',
|
'/contact' => 'controllers/contact.php',
|
||||||
'/mission' => 'controllers/mission.php',
|
'/mission' => 'controllers/mission.php',
|
||||||
|
'/mathe' => 'controllers/mathe.php'
|
||||||
];
|
];
|
||||||
|
|
||||||
function routeToController($uri, $routes) {
|
function routeToController($uri, $routes) {
|
||||||
|
|
|
||||||
93
script.js
Normal file
93
script.js
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
let operators = ["*"];
|
||||||
|
const startBtn = document.getElementById("start-btn");
|
||||||
|
const question = document.getElementById("question");
|
||||||
|
const controls = document.querySelector(".controls-container");
|
||||||
|
const result = document.getElementById("result");
|
||||||
|
const submitBtn = document.getElementById("submit-btn");
|
||||||
|
const errorMessage = document.getElementById("error-msg");
|
||||||
|
let answerValue;
|
||||||
|
let operatorQuestion;
|
||||||
|
|
||||||
|
//Random Value Generator
|
||||||
|
const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
|
||||||
|
const questionGenerator = () => {
|
||||||
|
//Two random values between 1 and 20
|
||||||
|
let [num1, num2] = [randomValue(1, 10), randomValue(1, 10)];
|
||||||
|
|
||||||
|
//For getting random operator
|
||||||
|
let randomOperator = operators[Math.floor(Math.random() * operators.length)];
|
||||||
|
|
||||||
|
if (randomOperator == "-" && num2 > num1) {
|
||||||
|
[num1, num2] = [num2, num1];
|
||||||
|
}
|
||||||
|
|
||||||
|
//Solve equation
|
||||||
|
let solution = eval(`${num1}${randomOperator}${num2}`);
|
||||||
|
|
||||||
|
//For placing the input at random position
|
||||||
|
//(1 for num1, 2 for num2, 3 for operator, anything else(4) for solution)
|
||||||
|
let randomVar = randomValue(1, 3);
|
||||||
|
|
||||||
|
if (randomVar == 1) {
|
||||||
|
answerValue = num1;
|
||||||
|
question.innerHTML = `<input type="number" id="inputValue" placeholder="?"\> ${randomOperator} ${num2} = ${solution}`;
|
||||||
|
} else if (randomVar == 2) {
|
||||||
|
answerValue = num2;
|
||||||
|
question.innerHTML = `${num1} ${randomOperator}<input type="number" id="inputValue" placeholder="?"\> = ${solution}`;
|
||||||
|
} else if (randomVar == 3) {
|
||||||
|
answerValue = randomOperator;
|
||||||
|
operatorQuestion = true;
|
||||||
|
question.innerHTML = `${num1} <input type="text" id="inputValue" placeholder="?"\> ${num2} = ${solution}`;
|
||||||
|
} else {
|
||||||
|
answerValue = solution;
|
||||||
|
question.innerHTML = `${num1} ${randomOperator} ${num2} = <input type="number" id="inputValue" placeholder="?"\>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
//User Input Check
|
||||||
|
submitBtn.addEventListener("click", () => {
|
||||||
|
errorMessage.classList.add("hide");
|
||||||
|
let userInput = document.getElementById("inputValue").value;
|
||||||
|
//If user input is not empty
|
||||||
|
if (userInput) {
|
||||||
|
//If the user guessed correct answer
|
||||||
|
if (userInput == answerValue) {
|
||||||
|
stopGame(`Das war richtig!!`);
|
||||||
|
}
|
||||||
|
//If user inputs operator other than +,-,*
|
||||||
|
else if (operatorQuestion && !operators.includes(userInput)) {
|
||||||
|
errorMessage.classList.remove("hide");
|
||||||
|
errorMessage.innerHTML = "Please enter a valid operator";
|
||||||
|
}
|
||||||
|
//If user guessed wrong answer
|
||||||
|
else {
|
||||||
|
stopGame(`Ups!! Das war leider falsch.`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//If user input is empty
|
||||||
|
else {
|
||||||
|
errorMessage.classList.remove("hide");
|
||||||
|
errorMessage.innerHTML = "Input Cannot Be Empty";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//Start Game
|
||||||
|
startBtn.addEventListener("click", () => {
|
||||||
|
operatorQuestion = false;
|
||||||
|
answerValue = "";
|
||||||
|
errorMessage.innerHTML = "";
|
||||||
|
errorMessage.classList.add("hide");
|
||||||
|
//Controls and buttons visibility
|
||||||
|
controls.classList.add("hide");
|
||||||
|
startBtn.classList.add("hide");
|
||||||
|
questionGenerator();
|
||||||
|
});
|
||||||
|
|
||||||
|
//Stop Game
|
||||||
|
const stopGame = (resultText) => {
|
||||||
|
result.innerHTML = resultText;
|
||||||
|
startBtn.innerText = "Weiter";
|
||||||
|
controls.classList.remove("hide");
|
||||||
|
startBtn.classList.remove("hide");
|
||||||
|
};
|
||||||
96
script2.js
Normal file
96
script2.js
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
//let operators = ["+", "-", "*"];
|
||||||
|
let operators = ["*"];
|
||||||
|
const startBtn = document.getElementById("start-btn");
|
||||||
|
const question = document.getElementById("question");
|
||||||
|
const controls = document.querySelector(".controls-container");
|
||||||
|
const result = document.getElementById("result");
|
||||||
|
const submitBtn = document.getElementById("submit-btn");
|
||||||
|
const errorMessage = document.getElementById("error-msg");
|
||||||
|
let answerValue;
|
||||||
|
let operatorQuestion;
|
||||||
|
|
||||||
|
//Zufallswerte generieren
|
||||||
|
const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
|
||||||
|
const questionGenerator = () => {
|
||||||
|
//Zwei Zufallszahlen zwischen 1 und 20
|
||||||
|
let [num1, num2] = [randomValue(1, 10), randomValue(1, 10)];
|
||||||
|
|
||||||
|
//Zufälliges Rechenzeichen
|
||||||
|
let randomOperator = operators[Math.floor(Math.random() * operators.length)];
|
||||||
|
|
||||||
|
if (randomOperator == "-" && num2 > num1) {
|
||||||
|
[num1, num2] = [num2, num1];
|
||||||
|
}
|
||||||
|
|
||||||
|
//Aufgabe
|
||||||
|
let solution = eval(`${num1}${randomOperator}${num2}`);
|
||||||
|
|
||||||
|
//Eingabe an zufälliger Stelle innerhalb der Aufgabe
|
||||||
|
//(1 für num1, 2 für num2, 3 for Rechenzeichen, alle anderen(4) für Ergebnis)
|
||||||
|
//let randomVar = randomValue(1, 5);
|
||||||
|
let randomVar = randomValue(1, 3);
|
||||||
|
|
||||||
|
if (randomVar == 1) {
|
||||||
|
answerValue = num1;
|
||||||
|
question.innerHTML = `<input type="number" id="inputValue" placeholder="?"\> ${randomOperator} ${num2} = ${solution}`;
|
||||||
|
} else if (randomVar == 2) {
|
||||||
|
answerValue = num2;
|
||||||
|
question.innerHTML = `${num1} ${randomOperator}<input type="number" id="inputValue" placeholder="?"\> = ${solution}`;
|
||||||
|
} else if (randomVar == 3) {
|
||||||
|
answerValue = randomOperator;
|
||||||
|
operatorQuestion = true;
|
||||||
|
question.innerHTML = `${num1} <input type="text" id="inputValue" placeholder="?"\> ${num2} = ${solution}`;
|
||||||
|
} else {
|
||||||
|
answerValue = solution;
|
||||||
|
question.innerHTML = `${num1} ${randomOperator} ${num2} = <input type="number" id="inputValue" placeholder="?"\>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Nutzereingabe prüfen
|
||||||
|
submitBtn.addEventListener("click", () => {
|
||||||
|
errorMessage.classList.add("hide");
|
||||||
|
let userInput = document.getElementById("inputValue").value;
|
||||||
|
//Wenn Eingabe nicht leer
|
||||||
|
if (userInput) {
|
||||||
|
//Bei richtiger Eingabe
|
||||||
|
if (userInput == answerValue) {
|
||||||
|
stopGame(`Das war richtig!!`);
|
||||||
|
}
|
||||||
|
//Wenn der Nutzer ein anderes Rechenzeichen als +,-,* eingibt
|
||||||
|
else if (operatorQuestion && !operators.includes(userInput)) {
|
||||||
|
errorMessage.classList.remove("hide");
|
||||||
|
errorMessage.innerHTML = "Gib bitte ein gültiges Rechenzeichen ein.";
|
||||||
|
}
|
||||||
|
//Bei falscher Antwort
|
||||||
|
else {
|
||||||
|
stopGame(`Ups!! Das war leider falsch.`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//Wenn Nutzereingabe leer ist
|
||||||
|
else {
|
||||||
|
errorMessage.classList.remove("hide");
|
||||||
|
errorMessage.innerHTML = "Die Eingabe darf nicht leer sein.";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//Spiel starten
|
||||||
|
startBtn.addEventListener("click", () => {
|
||||||
|
operatorQuestion = false;
|
||||||
|
answerValue = "";
|
||||||
|
errorMessage.innerHTML = "";
|
||||||
|
errorMessage.classList.add("hide");
|
||||||
|
//Sichtbarkeit Buttons und Controls
|
||||||
|
controls.classList.add("hide");
|
||||||
|
startBtn.classList.add("hide");
|
||||||
|
questionGenerator();
|
||||||
|
});
|
||||||
|
|
||||||
|
//Spiel beenden
|
||||||
|
const stopGame = (resultText) => {
|
||||||
|
rightCounter += 1;
|
||||||
|
result.innerHTML = resultText;
|
||||||
|
startBtn.innerText = "Weiter";
|
||||||
|
controls.classList.remove("hide");
|
||||||
|
startBtn.classList.remove("hide");
|
||||||
|
};
|
||||||
118
style.css
Normal file
118
style.css
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: #33adee;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 31.25em;
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
padding: 5em 3em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
.container h3 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #23234c;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.8em;
|
||||||
|
}
|
||||||
|
.container #submit-btn {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 500;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #33adee;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #1d1d20;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
}
|
||||||
|
#error-msg {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1em;
|
||||||
|
background-color: #ffdde0;
|
||||||
|
color: #d62f2f;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
}
|
||||||
|
.container #question {
|
||||||
|
background-color: #eeedf1;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #23234c;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1.4em 0 1em 0;
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
|
.container input {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 2.35em;
|
||||||
|
color: #23234c;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 0.2em;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom: 0.12em solid #23234c;
|
||||||
|
margin: 0 0.25em;
|
||||||
|
}
|
||||||
|
.container input:focus {
|
||||||
|
border-color: #33adee;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
/*Hide Number Arrows*/
|
||||||
|
.container input[type="number"] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
.container input[type="number"]::-webkit-outer-spin-button,
|
||||||
|
.container input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.controls-container {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #33adee;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#start-btn {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 500;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #23234c;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.8em 1.8em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
}
|
||||||
|
#result {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #23234c;
|
||||||
|
}
|
||||||
|
#result span {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
20
views/mathe.view.php
Normal file
20
views/mathe.view.php
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<?php require ('partials/head.php') ?>
|
||||||
|
<?php require ('partials/nav.php') ?>
|
||||||
|
<?php require ('partials/banner.php') ?>
|
||||||
|
<main>
|
||||||
|
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8 container">
|
||||||
|
<div class="container">
|
||||||
|
<h3>Schreibe die richtige Zahl oder das richtige Rechenzeichen in die Lücke</h3>
|
||||||
|
<div id="question"></div>
|
||||||
|
<button id="submit-btn">Bestätigen</button>
|
||||||
|
<p id="error-msg">Da gab es einen Fehler</p>
|
||||||
|
</div>
|
||||||
|
<div class="controls-container">
|
||||||
|
<p id="result"></p>
|
||||||
|
<button id="start-btn">Spiel starten</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="/script.js"></script>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<?php require ('partials/footer.php') ?>
|
||||||
|
|
@ -16,6 +16,8 @@
|
||||||
|
|
||||||
<a href="/mission" class="<?= urlIs('/mission') ? 'bg-gray-900 text-white' : 'text-gray-300' ?> hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Our Mission</a>
|
<a href="/mission" class="<?= urlIs('/mission') ? 'bg-gray-900 text-white' : 'text-gray-300' ?> hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Our Mission</a>
|
||||||
|
|
||||||
|
<a href="/mathe" class="<?= urlIs('/mathe') ? 'bg-gray-900 text-white' : 'text-gray-300' ?> hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Mathe</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue