last edit
This commit is contained in:
Ismail Amara
@@ -1,33 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mathematik Lernen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta charset="UTF-8">
|
||||
<title>Mathematik Lernen</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>Mathematik Lernen</h1>
|
||||
<div class="container">
|
||||
|
||||
<div class="mode">
|
||||
<button onclick="setMode('addition')">Addition</button>
|
||||
<button onclick="setMode('subtraktion')">Subtraktion</button>
|
||||
<button onclick="setMode('multiplikation')">Multiplikation</button>
|
||||
</div>
|
||||
<h1>Mathematik Lernen</h1>
|
||||
|
||||
<div class="question-box">
|
||||
<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 id="setup">
|
||||
|
||||
<div class="score">
|
||||
Punktzahl: <span id="score">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Was willst du üben?</h2>
|
||||
|
||||
<div class="mode">
|
||||
<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>
|
||||
</html>
|
||||
@@ -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;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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user