-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (145 loc) · 6.87 KB
/
index.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Data -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts & Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;500;900&display=swap" rel="stylesheet">
<!-- Title -->
<title>SwissTopoLearner</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" href="images/logo.png">
</head>
<body>
<!-- Title -->
<div class="title">
<!-- Angaben ohne Gewähr -->
<div class="version">Angaben ohne Gewähr</div>
<!-- Title -->
<div class="name">Swiss Topo Learner</div>
<!-- Credit -->
<div class="credit" id="credit">Version 2.1 <br> created by <a href="https://github.com/Sprudeel">@Sprudeel</a></div>
</div>
<!-- Content -->
<div class="content">
<div class="menu" id="99">
<!-- Choose Mode Menu -->
<div class="choosemode">Modus auswählen <span title="Wähle einen Modus aus der Liste aus! 
 1. Endless - Zufällige Fragen und endlos! 
 2. Speed - 1 Minute Zeit um möglichst viel zulösen! 
 3. Learn - Alle Fragen einmal! 
 4. Kartei - Beginne mit Karteikarten zu lernen!"class="material-icons md-small png">help_outline</span></div>
<!-- Container of Mode Buttons for Grid -->
<div class="container-mode">
<!-- Endless Mode Button -->
<button id="101" class="mode" onclick="setMode('endless', '101')">Endless</button>
<!-- Speed Mode Button -->
<button id="102" class="mode"onclick="setMode('speed', '102')">Speed</button>
<!-- Learn Mode Button -->
<button id="103" class="mode"onclick="setMode('learn', '103')">Learn</button>
<!-- Karteikarten Mode Button -->
<button id="104" class="mode"onclick="setMode('kartei', '104')">Kartei</button>
</div>
<!-- Container of Subject Buttons -->
<div class="choosemode">Thema auswählen <span title="Wähle was genau du lernen möchtest (selbst erklärend)" class="material-icons md-small png">help_outline</span></div>
<!-- Kantone -->
<button id="201" class="choose" onclick="setSubject('kantone', '201')">Kantone</button>
<br>
<!-- Städte -->
<button id="202" class="choose" onclick="setSubject('staedte', '202')">Städte</button>
<br>
<!-- Pässe -->
<button id="203" class="choose" onclick="setSubject('paesse', '203')">Pässe</button>
<br>
<!-- Seen -->
<button id="204" class="choose" onclick="setSubject('seen', '204')">Seen</button>
<br>
<!-- Flüsse -->
<button id="205" class="choose" onclick="setSubject('fluesse', '205')">Flüsse</button>
<br>
<!-- Berge, Gebirge -->
<button id="206" class="choose" onclick="setSubject('berge', '206')">Berge, Gebirge</button>
<br>
<!-- Spezielle Gebiete -->
<button id="207" class="choose" onclick="setSubject('special', '207')">Spezielle Gebiete</button>
<br>
<!-- Close Menu Button -->
<button id="300" class="close" onclick="hideMenu()"><span class="material-icons md-18 png">chevron_left</span>Menu schliessen</button>
</div>
<!-- Container of Question -->
<div class="game" id="69">
<!-- Image -->
<div class="image">
<img id="1000" src="images/normal.jpg" alt="">
</div>
<!-- Input, Check Solution and Show Solution -->
<div id="check" class="input">
<input type="" placeholder="Lösung?" id="420"> <button class="submit" id="421" onclick="checkSolution()">Check</button>
<br> <div id="222"><button class="submit" onclick="showSolution()">Lösung Anzeigen</button></div>
</div>
<!-- Buttons for Karteikarten Mode! -->
<div id="kartei">
<button id="2001" onclick="evalKartei('again')" class="submit kart">Nochmals</button><button id="2002" onclick="evalKartei('learned')" class="submit kart">Kann Ich!</button>
</div>
</div>
<!-- Info Menu -->
<div class="info" id="800">
<!-- Correctly Solved -->
<div class="info1">
<div class="subtitle">
<h3>
<span class="subtitle" id="333">Korrekt gelöst</span>
</h3>
</div>
<div class="correct-container" id="500">
<p id="502" style="color: red; text-align: center;">keine</p>
<p id=501></p>
</div>
</div>
<!-- Stopwatch -->
<div class="info2">
<div class="subtitle">
<h3>
<span class="subtitle">Stoppuhr</span>
</h3>
</div>
<div class="currenttime" id="690">00:00:00</div>
<div class="timebtn">
<button id="555" class="close pad" onclick="startTimer()">Start / Pause</button>
<button id="556" class="close pad" onclick="resetTimer()">Reset</button>
</div>
</div>
<!-- Date & Time -->
<div class="info3">
<div class="subtitle">
<h3>
<span class="subtitle">Datum und Zeit</span>
</h3>
</div>
<div class="time" id="600"></div>
<!-- Hide Info -->
<button id="300" class="close" onclick="hideInfo()">Info schliessen<span class="material-icons md-18 png">chevron_right</span></button>
</div>
</div>
</div>
<!-- Expand Menu -->
<div id="400">
<button class="expand" onclick="expandMenu()">
<span class="material-icons md-18 png">chevron_right</span>
</button>
</div>
<!-- Expand Info -->
<div id="700">
<button class="expand2" onclick="expandInfo()">
<span class="material-icons md-18 png">chevron_left</span>
</button>
</div>
<div id="overlay">
</div>
</body>
<script src="index.min.js"></script>
<script src="source.js"></script>
</html>