96 lines
1.9 KiB
HTML
96 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mathematik Lernen</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<h1>Mathematik Lernen</h1>
|
|
|
|
<div id="setup">
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</html> |