MathTrainer/index.html at main · limafresh/MathTrainer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="theme-color" content="rgb(36, 31, 49)">

		<title>Math trainer</title>

		<link rel="icon" type="image/png" href="assets/icon.png">
		<link rel="stylesheet" href="style.css">

		<script src="script.js" defer></script>
	</head>
	<body>
		<div id="main">
			<header>
				<button id="open-sidebar">&#x2630</button>
				<span id="mode-name"></span>
			</header>

			<span id="example">2+2=</span>
			<input id="answer-input" type="text" placeholder="Enter the answer..." inputmode="numeric">
			<button id="check">CHECK</button>
			<button id="skip">Skip this example</button>

			<div id="counters">
				<div>
					<span id="skipped-text">Skipped examples: </span>
					<span id="skipped">0</span>
				</div>
				<div>
					<span id="solved-text">Solved examples: </span>
					<span id="solved">0</span>
				</div>
				<div>
					<span id="mistakes-text">Mistakes: </span>
					<span id="mistakes">0</span>
				</div>
			</div>
		</div>

		<div hidden id="sidebar-overlay" class="overlay"></div>
		<div id="sidebar">
			<button id="close-sidebar">&times;</button>
			<div id="mode-buttons"></div>
			<a id="github" href="https://github.com/limafresh/MathTrainer">GitHub</a>
		</div>

		<div hidden id="correctly-overlay" class="overlay notification">
			<span id="correctly">Correctly</span>
		</div>

		<div hidden id="wrongly-overlay" class="overlay notification">
			<span id="wrongly">Wrongly</span>
			<div id="correct-answer-div">
				<span id="correct-answer-text">Correct answer: </span>
				<span id="correct-answer">0</span>
			</div>
		</div>

		<audio id="correctly-sound" preload="auto">
			<source src="assets/bell.wav" type="audio/wav">
		</audio>

		<audio id="wrongly-sound" preload="auto">
			<source src="assets/losetrumpet.wav" type="audio/wav">
		</audio>
	</body>
</html>