diff --git a/MainPage/MainPage.html b/MainPage/MainPage.html index e070af6..4f35cb7 100644 --- a/MainPage/MainPage.html +++ b/MainPage/MainPage.html @@ -30,9 +30,9 @@

Abdelaziz

-
+

Game 5

-

Member 5

+

Mathematik lernen

diff --git a/MainPage/ismail/index.html b/MainPage/ismail/index.html index 8ddba24..be377eb 100644 --- a/MainPage/ismail/index.html +++ b/MainPage/ismail/index.html @@ -1,33 +1,96 @@ - - Mathematik Lernen - + +Mathematik Lernen + + -
-

Mathematik Lernen

+
-
- - - -
+

Mathematik Lernen

-
-

Klicke auf eine Rechenart, um zu beginnen

- - -

-
+
-
- Punktzahl: 0 -
-
+

Was willst du üben?

+ +
+ + + + +
+ +

Wie schwer?

+ +
+ + + +
+ +

Wie viele Fragen?

+ +
+ + + + + +
+ +

+ + + +
+ +
+ +

+

+ +
+ +

+ + + +
+ + + +

+ +
+ +
+Punktzahl: 0 +
+ +
+ +
+ +

+ +
+ +

+ +

Richtig:

+ +

Falsch:

+ + + +
+ +
+ + - \ No newline at end of file diff --git a/MainPage/ismail/script.js b/MainPage/ismail/script.js index 2228e1c..5199d85 100644 --- a/MainPage/ismail/script.js +++ b/MainPage/ismail/script.js @@ -1,52 +1,284 @@ -let num1, num2; -let correctAnswer; -let score = 0; -let currentMode = ""; +let num1 +let num2 +let correctAnswer +let score=0 +let currentMode="" -function setMode(mode) { - currentMode = mode; - generateQuestion(); +let gewaehlteModes=[] +let gewaehltesLevel="" +let gewaehltAnzahl=0 + +let aktFrage=0 +let richtigAnzahl=0 +let falschAnzahl=0 + +let timerZahl=15 +let timerInterval + +let gesperrt=false + +function waehleMode(mode,btn){ + +let index=gewaehlteModes.indexOf(mode) + +if(index==-1){ +gewaehlteModes.push(mode) +btn.classList.add("aktiv") +}else{ +gewaehlteModes.splice(index,1) +btn.classList.remove("aktiv") } -function generateQuestion() { - num1 = Math.floor(Math.random() * 10); - num2 = Math.floor(Math.random() * 10); - - if (currentMode === "addition") { - correctAnswer = num1 + num2; - document.getElementById("question").textContent = - `${num1} + ${num2} = ?`; - } - - if (currentMode === "subtraktion") { - correctAnswer = num1 - num2; - document.getElementById("question").textContent = - `${num1} - ${num2} = ?`; - } - - if (currentMode === "multiplikation") { - correctAnswer = num1 * num2; - document.getElementById("question").textContent = - `${num1} × ${num2} = ?`; - } - - document.getElementById("answer").value = ""; +document.getElementById("btn-mix").classList.remove("aktiv") } -function checkAnswer() { - let userAnswer = Number(document.getElementById("answer").value); - let resultText = document.getElementById("result"); +function waehleAlle(){ - if (userAnswer === correctAnswer) { - resultText.textContent = - "✅ Richtig! Sehr gut! Die Antwort ist " + correctAnswer; - score++; - document.getElementById("score").textContent = score; - } else { - resultText.textContent = - "❌ Falsch! Die richtige Antwort ist " + correctAnswer; - } +gewaehlteModes=["addition","subtraktion","multiplikation"] + +document.getElementById("btn-addition").classList.add("aktiv") +document.getElementById("btn-subtraktion").classList.add("aktiv") +document.getElementById("btn-multiplikation").classList.add("aktiv") +document.getElementById("btn-mix").classList.add("aktiv") + +} + +function waehleLevel(level,btn){ + +gewaehltesLevel=level + +let alleLevel=document.querySelectorAll(".level button") + +for(let i=0;inum1){ +let temp=num1 +num1=num2 +num2=temp +} + +correctAnswer=num1-num2 +document.getElementById("question").textContent=num1+" - "+num2+" = ?" +} + +if(currentMode==="multiplikation"){ +correctAnswer=num1*num2 +document.getElementById("question").textContent=num1+" × "+num2+" = ?" +} + +document.getElementById("answer").value="" +document.getElementById("result").textContent="" +document.getElementById("answer").focus() + +timerStarten() + +} + +function timerStarten(){ + +clearInterval(timerInterval) + +timerZahl=15 + +document.getElementById("timer").textContent="Zeit: "+timerZahl +document.getElementById("timer").style.color="green" + +timerInterval=setInterval(function(){ + +timerZahl-- + +document.getElementById("timer").textContent="Zeit: "+timerZahl + +if(timerZahl<=5){ +document.getElementById("timer").style.color="red" +} + +if(timerZahl<=0){ +clearInterval(timerInterval) +zeitAbgelaufen() +} + +},1000) + +} + +function zeitAbgelaufen(){ + +if(gesperrt)return + +gesperrt=true + +falschAnzahl++ + +document.getElementById("result").textContent="Zeit abgelaufen! Richtig wäre: "+correctAnswer +document.getElementById("result").style.color="orange" + +setTimeout(naechsteOderEnde,2000) + +} + +function checkAnswer(){ + +if(gesperrt)return + +let userAnswer=Number(document.getElementById("answer").value) + +if(document.getElementById("answer").value=="")return + +clearInterval(timerInterval) + +gesperrt=true + +let resultText=document.getElementById("result") + +if(userAnswer===correctAnswer){ + +resultText.textContent="Richtig! Antwort: "+correctAnswer +resultText.style.color="green" + +score++ +richtigAnzahl++ + +document.getElementById("score").textContent=score + +}else{ + +resultText.textContent="Falsch! Richtige Antwort: "+correctAnswer +resultText.style.color="red" + +falschAnzahl++ + +} + +setTimeout(naechsteOderEnde,2000) + +} + +function naechsteOderEnde(){ + +if(aktFrage>=gewaehltAnzahl){ +spielEnde() +}else{ +generateQuestion() +} + +} + +function spielEnde(){ + +clearInterval(timerInterval) + +document.getElementById("spiel").style.display="none" +document.getElementById("endscreen").style.display="block" + +let prozent=Math.round((richtigAnzahl/gewaehltAnzahl)*100) + +document.getElementById("prozent").textContent=prozent+"%" +document.getElementById("end-richtig").textContent=richtigAnzahl +document.getElementById("end-falsch").textContent=falschAnzahl +document.getElementById("end-text").textContent="Du hast "+richtigAnzahl+" von "+gewaehltAnzahl+" richtig" + +if(prozent==100){ +document.getElementById("end-titel").textContent="Perfekt" +document.getElementById("prozent").style.color="gold" +} +else if(prozent>=70){ +document.getElementById("end-titel").textContent="Sehr gut" +document.getElementById("prozent").style.color="green" +} +else if(prozent>=50){ +document.getElementById("end-titel").textContent="Gut gemacht" +document.getElementById("prozent").style.color="orange" +} +else{ +document.getElementById("end-titel").textContent="Weiter üben" +document.getElementById("prozent").style.color="red" +} + +} + +function nochmal(){ + +document.getElementById("endscreen").style.display="none" +document.getElementById("setup").style.display="block" - // 2 Sekunden warten, dann neue Frage - setTimeout(generateQuestion, 2000); } \ No newline at end of file diff --git a/MainPage/ismail/style.css b/MainPage/ismail/style.css index 824b8ab..b0b323c 100644 --- a/MainPage/ismail/style.css +++ b/MainPage/ismail/style.css @@ -1,47 +1,146 @@ -body { - font-family: Arial, sans-serif; - background-color: #f0f8ff; - text-align: center; - margin: 0; - padding: 0; +body{ +font-family:Arial,sans-serif; +background:#f0f8ff; +text-align:center; +margin:0; +padding:0; } -.container { - margin-top: 50px; +.container{ +margin-top:40px; } -h1 { - color: #333; +h1,h2{ +color:#333; } -button { - padding: 10px 20px; - margin: 5px; - border: none; - border-radius: 8px; - background-color: #4CAF50; - color: white; - cursor: pointer; - font-size: 16px; +button{ +padding:10px 20px; +margin:5px; +border:none; +border-radius:8px; +background:greenyellow; +color:white; +cursor:pointer; +font-size:16px; } -button:hover { - background-color: #45a049; +button:hover{ +background:greenyellow; } -input { - padding: 10px; - font-size: 16px; - width: 150px; - margin-top: 10px; +.mode button{ +background:green; } -.question-box { - margin-top: 30px; +.mode button.aktiv{ +background:#1a7a1e; +border:3px solid black; } -.score { - margin-top: 20px; - font-size: 20px; - font-weight: bold; +.level button{ +background:#2196F3; +} + +.level button:hover{ +background:blue; +} + +.level button.aktiv{ +background:darkblue; +border:3px solid black; +} + +.anzahl button{ +background:orange; +} + +.anzahl button:hover{ +background:orange; +} + +.anzahl button.aktiv{ +background:brown; +border:3px solid black; +} + +#start-button{ +background:red; +font-size:18px; +padding:12px 30px; +margin-top:10px; +} + +#start-button:hover{ +background:red; +} + +input{ +padding:10px; +font-size:16px; +width:150px; +margin-top:10px; +border:2px solid gray; +border-radius:5px; +} + +.question-box{ +margin-top:20px; +} + +.score{ +margin-top:20px; +font-size:20px; +font-weight:bold; +} + +#timer{ +font-size:22px; +font-weight:bold; +color:green; +margin-top:10px; +} + +#result{ +font-size:18px; +font-weight:bold; +margin-top:10px; +} + +#fortschritt-text{ +font-size:16px; +color:gray; +margin-top:5px; +} + +#endscreen{ +display:none; +margin-top:30px; +} + +#prozent{ +font-size:52px; +font-weight:bold; +color:green; +} + +#nochmal-button{ +background:green; +font-size:18px; +padding:12px 28px; +margin-top:15px; +} + +#setup{ +margin-top:20px; +} + +#spiel{ +display:none; +margin-top:20px; +} + +#fehler{ +color:red; +font-weight:bold; } \ No newline at end of file