diff --git a/controllers/addition.php b/controllers/addition.php new file mode 100644 index 0000000..90ccc41 --- /dev/null +++ b/controllers/addition.php @@ -0,0 +1,3 @@ + 'controllers/index.php', '/about' => 'controllers/about.php', '/contact' => 'controllers/contact.php', - '/mission' => 'controllers/mission.php', + '/learn' => 'controllers/learn.php', '/mathe' => 'controllers/mathe.php', '/note' => 'controllers/note.php', - '/notes' => 'controllers/notes.php' + '/notes' => 'controllers/notes.php', + '/addition' => 'controllers/addition.php' ]; function routeToController($uri, $routes) { diff --git a/scripts/addition.js b/scripts/addition.js new file mode 100644 index 0000000..f73c37b --- /dev/null +++ b/scripts/addition.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/views/addition.view.php b/views/addition.view.php new file mode 100644 index 0000000..b67c24a --- /dev/null +++ b/views/addition.view.php @@ -0,0 +1,21 @@ + + + +
+
+
+
+

Schreibe die richtige Zahl in die Lücke

+
+ +

Da gab es einen Fehler

+
+
+

+ +
+
+ +
+
+ \ No newline at end of file diff --git a/views/learn.view.php b/views/learn.view.php new file mode 100644 index 0000000..f3bf103 --- /dev/null +++ b/views/learn.view.php @@ -0,0 +1,68 @@ + + + +
+
+
+ +
+ Addieren +
+
Addition
+

+ Übe das Addieren. +

+ + + +
+
+
+
+ +
+ Subtrahieren +
+
Subtraktion
+

+ Übe das Subtrahieren. +

+ +
+
+
+
+ + +
+ Multiplikation +
+
Multiplikation
+

+ Übe das Multiplizieren. +

+ +
+
+
+
+ +
+ Division +
+
Division
+

+ Übe das Dividieren. +

+ +
+
+
+
+ +
+
+ + +
+ \ No newline at end of file diff --git a/views/mathe.view.php b/views/mathe.view.php index 9bceb0c..94cf97e 100644 --- a/views/mathe.view.php +++ b/views/mathe.view.php @@ -1,20 +1,259 @@ - - - -
-
-
-

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

-
- -

Da gab es einen Fehler

-
-
-

- + + -
- -
-
- \ No newline at end of file + + + + + + Demo + + + + +
+ + +
+
+

Schreibe die richtige Zahl in die Lücke

+
+ +

Da gab es einen Fehler

+
+
+

+ + +
+ +
+ + \ No newline at end of file diff --git a/views/mission.view.php b/views/mission.view.php deleted file mode 100644 index decf1e7..0000000 --- a/views/mission.view.php +++ /dev/null @@ -1,12 +0,0 @@ - - - -
-
- -

Now you are on the mission page.

-
- - -
- \ No newline at end of file diff --git a/views/partials/nav.php b/views/partials/nav.php index 71bbc7b..6740088 100644 --- a/views/partials/nav.php +++ b/views/partials/nav.php @@ -14,7 +14,7 @@ Contact - Our Mission + Learn Mathe