diff --git a/controllers/mathe.php b/controllers/mathe.php new file mode 100644 index 0000000..0693a61 --- /dev/null +++ b/controllers/mathe.php @@ -0,0 +1,3 @@ + + + + + Mathespiel + + + + +
+

Schreibe die richtige Zahl oder das richtige Rechenzeichen in die Lücke

+
+ +

Da gab es einen Fehler

+
+
+

+ + +
+ + + \ No newline at end of file diff --git a/router.php b/router.php index 9738e59..fa62ee7 100644 --- a/router.php +++ b/router.php @@ -6,6 +6,7 @@ $routes = [ '/about' => 'controllers/about.php', '/contact' => 'controllers/contact.php', '/mission' => 'controllers/mission.php', + '/mathe' => 'controllers/mathe.php' ]; function routeToController($uri, $routes) { diff --git a/script.js b/script.js new file mode 100644 index 0000000..319a947 --- /dev/null +++ b/script.js @@ -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 = ` ${randomOperator} ${num2} = ${solution}`; + } else if (randomVar == 2) { + answerValue = num2; + question.innerHTML = `${num1} ${randomOperator} = ${solution}`; + } else if (randomVar == 3) { + answerValue = randomOperator; + operatorQuestion = true; + question.innerHTML = `${num1} ${num2} = ${solution}`; + } else { + answerValue = solution; + question.innerHTML = `${num1} ${randomOperator} ${num2} = `; + } + + //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"); +}; \ No newline at end of file diff --git a/script2.js b/script2.js new file mode 100644 index 0000000..0b51861 --- /dev/null +++ b/script2.js @@ -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 = ` ${randomOperator} ${num2} = ${solution}`; + } else if (randomVar == 2) { + answerValue = num2; + question.innerHTML = `${num1} ${randomOperator} = ${solution}`; + } else if (randomVar == 3) { + answerValue = randomOperator; + operatorQuestion = true; + question.innerHTML = `${num1} ${num2} = ${solution}`; + } else { + answerValue = solution; + question.innerHTML = `${num1} ${randomOperator} ${num2} = `; + } + + //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"); +}; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..693cd7b --- /dev/null +++ b/style.css @@ -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; + } \ No newline at end of file diff --git a/views/mathe.view.php b/views/mathe.view.php new file mode 100644 index 0000000..3bd0e68 --- /dev/null +++ b/views/mathe.view.php @@ -0,0 +1,20 @@ + + + +
+
+
+

Schreibe die richtige Zahl oder das richtige Rechenzeichen in die Lücke

+
+ +

Da gab es einen Fehler

+
+
+

+ + +
+ +
+
+ \ No newline at end of file diff --git a/views/partials/nav.php b/views/partials/nav.php index ca1c323..d90aa3b 100644 --- a/views/partials/nav.php +++ b/views/partials/nav.php @@ -16,6 +16,8 @@ Our Mission + Mathe +