last edit

This commit is contained in:
Ismail Amara
2026-03-05 13:01:44 +01:00
parent cc3a5984e8
commit 01759611fd
4 changed files with 493 additions and 99 deletions

View File

@@ -30,9 +30,9 @@
<p>Abdelaziz</p> <p>Abdelaziz</p>
</div> </div>
<div class="game-card" onclick="location.href='member5/game.html'"> <div class="game-card" onclick="location.href='ismail/index.html'">
<h2>Game 5</h2> <h2>Game 5</h2>
<p>Member 5</p> <p>Mathematik lernen</p>
</div> </div>
</div> </div>
</body> </body>

View File

@@ -1,33 +1,96 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Mathematik Lernen</title> <title>Mathematik Lernen</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Mathematik Lernen</h1>
<div class="mode"> <h1>Mathematik Lernen</h1>
<button onclick="setMode('addition')">Addition</button>
<button onclick="setMode('subtraktion')">Subtraktion</button>
<button onclick="setMode('multiplikation')">Multiplikation</button>
</div>
<div class="question-box"> <div id="setup">
<h2 id="question">Klicke auf eine Rechenart, um zu beginnen</h2>
<input type="number" id="answer" placeholder="Deine Antwort">
<button onclick="checkAnswer()">Überprüfen</button>
<p id="result"></p>
</div>
<div class="score"> <h2>Was willst du üben?</h2>
Punktzahl: <span id="score">0</span>
</div> <div class="mode">
</div> <button id="btn-addition" onclick="waehleMode('addition', this)">Addition</button>
<button id="btn-subtraktion" onclick="waehleMode('subtraktion', this)">Subtraktion</button>
<button id="btn-multiplikation" onclick="waehleMode('multiplikation', this)">Multiplikation</button>
<button id="btn-mix" onclick="waehleAlle()">Mix</button>
</div>
<h2>Wie schwer?</h2>
<div class="level">
<button onclick="waehleLevel('leicht', this)">Leicht (1-10)</button>
<button onclick="waehleLevel('mittel', this)">Mittel (1-50)</button>
<button onclick="waehleLevel('schwer', this)">Schwer (1-100)</button>
</div>
<h2>Wie viele Fragen?</h2>
<div class="anzahl">
<button onclick="waehleAnzahl(5, this)">5</button>
<button onclick="waehleAnzahl(10, this)">10</button>
<button onclick="waehleAnzahl(15, this)">15</button>
<button onclick="waehleAnzahl(20, this)">20</button>
<button onclick="waehleAnzahl(30, this)">30</button>
</div>
<p id="fehler"></p>
<button id="start-button" onclick="spielStarten()">▶ Starten!</button>
</div>
<div id="spiel">
<p id="fortschritt-text"></p>
<p id="timer"></p>
<div class="question-box">
<h2 id="question"></h2>
<input type="number" id="answer" placeholder="Deine Antwort">
<br>
<button onclick="checkAnswer()">Überprüfen</button>
<p id="result"></p>
</div>
<div class="score">
Punktzahl: <span id="score">0</span>
</div>
</div>
<div id="endscreen">
<h2 id="end-titel"></h2>
<div id="prozent"></div>
<p id="end-text"></p>
<p>Richtig: <b id="end-richtig"></b></p>
<p>Falsch: <b id="end-falsch"></b></p>
<button id="nochmal-button" onclick="nochmal()">Nochmal spielen</button>
</div>
</div>
<script src="script.js"></script>
<script src="script.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,52 +1,284 @@
let num1, num2; let num1
let correctAnswer; let num2
let score = 0; let correctAnswer
let currentMode = ""; let score=0
let currentMode=""
function setMode(mode) { let gewaehlteModes=[]
currentMode = mode; let gewaehltesLevel=""
generateQuestion(); 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() { document.getElementById("btn-mix").classList.remove("aktiv")
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 = "";
} }
function checkAnswer() { function waehleAlle(){
let userAnswer = Number(document.getElementById("answer").value);
let resultText = document.getElementById("result");
if (userAnswer === correctAnswer) { gewaehlteModes=["addition","subtraktion","multiplikation"]
resultText.textContent =
"✅ Richtig! Sehr gut! Die Antwort ist " + correctAnswer; document.getElementById("btn-addition").classList.add("aktiv")
score++; document.getElementById("btn-subtraktion").classList.add("aktiv")
document.getElementById("score").textContent = score; document.getElementById("btn-multiplikation").classList.add("aktiv")
} else { document.getElementById("btn-mix").classList.add("aktiv")
resultText.textContent =
"❌ Falsch! Die richtige Antwort ist " + correctAnswer; }
}
function waehleLevel(level,btn){
gewaehltesLevel=level
let alleLevel=document.querySelectorAll(".level button")
for(let i=0;i<alleLevel.length;i++){
alleLevel[i].classList.remove("aktiv")
}
btn.classList.add("aktiv")
}
function waehleAnzahl(anzahl,btn){
gewaehltAnzahl=anzahl
let alleAnzahl=document.querySelectorAll(".anzahl button")
for(let i=0;i<alleAnzahl.length;i++){
alleAnzahl[i].classList.remove("aktiv")
}
btn.classList.add("aktiv")
}
function spielStarten(){
if(gewaehlteModes.length==0){
document.getElementById("fehler").textContent="Bitte eine Rechenart wählen"
return
}
if(gewaehltesLevel==""){
document.getElementById("fehler").textContent="Bitte eine Schwierigkeit wählen"
return
}
if(gewaehltAnzahl==0){
document.getElementById("fehler").textContent="Bitte Anzahl Fragen wählen"
return
}
score=0
aktFrage=0
richtigAnzahl=0
falschAnzahl=0
document.getElementById("score").textContent=0
document.getElementById("setup").style.display="none"
document.getElementById("spiel").style.display="block"
document.getElementById("endscreen").style.display="none"
generateQuestion()
}
function generateQuestion(){
gesperrt=false
aktFrage++
document.getElementById("fortschritt-text").textContent="Frage "+aktFrage+" von "+gewaehltAnzahl
let zufallIndex=Math.floor(Math.random()*gewaehlteModes.length)
currentMode=gewaehlteModes[zufallIndex]
let maxZahl=10
if(gewaehltesLevel=="mittel")maxZahl=50
if(gewaehltesLevel=="schwer")maxZahl=100
num1=Math.floor(Math.random()*maxZahl)+1
num2=Math.floor(Math.random()*maxZahl)+1
if(currentMode==="addition"){
correctAnswer=num1+num2
document.getElementById("question").textContent=num1+" + "+num2+" = ?"
}
if(currentMode==="subtraktion"){
if(num2>num1){
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);
} }

View File

@@ -1,47 +1,146 @@
body { body{
font-family: Arial, sans-serif; font-family:Arial,sans-serif;
background-color: #f0f8ff; background:#f0f8ff;
text-align: center; text-align:center;
margin: 0; margin:0;
padding: 0; padding:0;
} }
.container { .container{
margin-top: 50px; margin-top:40px;
} }
h1 { h1,h2{
color: #333; color:#333;
} }
button { button{
padding: 10px 20px; padding:10px 20px;
margin: 5px; margin:5px;
border: none; border:none;
border-radius: 8px; border-radius:8px;
background-color: #4CAF50; background:greenyellow;
color: white; color:white;
cursor: pointer; cursor:pointer;
font-size: 16px; font-size:16px;
} }
button:hover { button:hover{
background-color: #45a049; background:greenyellow;
} }
input { .mode button{
padding: 10px; background:green;
font-size: 16px;
width: 150px;
margin-top: 10px;
} }
.question-box { .mode button.aktiv{
margin-top: 30px; background:#1a7a1e;
border:3px solid black;
} }
.score { .level button{
margin-top: 20px; background:#2196F3;
font-size: 20px; }
font-weight: bold;
.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;
} }