-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
381 lines (354 loc) · 17.3 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Maths Quiz" />
<meta property="og:url" content="https://maths-quiz.pages.dev/" />
<meta
property="og:description"
content="Join the Leaderboard and show your maths skill."
/>
<meta property="og:type" content="website" />
<meta property="og:image" itemprop="image" content="https://maths-quiz.pages.dev/src/img/math-time.jpg" />
<meta
name="description"
content="Join the Leaderboard and show your skill."
/>
<link rel="icon" href="/dist/assets/logo.9ba7da5d.svg" />
<title>Maths Quiz</title>
<script type="module" crossorigin src="/dist/assets/index.519a02bd.js"></script>
<link rel="stylesheet" href="/dist/assets/index.40e6ab88.css">
</head>
<body>
<!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="trophy" viewBox="0 0 576 512">
<title>Trophy</title>
<path
fill="currentColor"
d="M572.1 82.38C569.5 71.59 559.8 64 548.7 64h-100.8c.2422-12.45 .1078-23.7-.1559-33.02C447.3 13.63 433.2 0 415.8 0H160.2C142.8 0 128.7 13.63 128.2 30.98C127.1 40.3 127.8 51.55 128.1 64H27.26C16.16 64 6.537 71.59 3.912 82.38C3.1 85.78-15.71 167.2 37.07 245.9c37.44 55.82 100.6 95.03 187.5 117.4c18.7 4.805 31.41 22.06 31.41 41.37C256 428.5 236.5 448 212.6 448H208c-26.51 0-47.99 21.49-47.99 48c0 8.836 7.163 16 15.1 16h223.1c8.836 0 15.1-7.164 15.1-16c0-26.51-21.48-48-47.99-48h-4.644c-23.86 0-43.36-19.5-43.36-43.35c0-19.31 12.71-36.57 31.41-41.37c86.96-22.34 150.1-61.55 187.5-117.4C591.7 167.2 572.9 85.78 572.1 82.38zM77.41 219.8C49.47 178.6 47.01 135.7 48.38 112h80.39c5.359 59.62 20.35 131.1 57.67 189.1C137.4 281.6 100.9 254.4 77.41 219.8zM498.6 219.8c-23.44 34.6-59.94 61.75-109 81.22C426.9 243.1 441.9 171.6 447.2 112h80.39C528.1 135.7 526.5 178.7 498.6 219.8z"
/>
</symbol>
<symbol id="shield" viewBox="0 0 512 512">
<title>Shield</title>
<path
fill="currentColor"
d="M256-.0078C260.7-.0081 265.2 1.008 269.4 2.913L457.7 82.79C479.7 92.12 496.2 113.8 496 139.1C495.5 239.2 454.7 420.7 282.4 503.2C265.7 511.1 246.3 511.1 229.6 503.2C57.25 420.7 16.49 239.2 15.1 139.1C15.87 113.8 32.32 92.12 54.3 82.79L242.7 2.913C246.8 1.008 251.4-.0081 256-.0078V-.0078z"
/>
</symbol>
<symbol id="user" viewBox="0 0 448 512">
<!-- <title>User</title> -->
<path
fill="currentColor"
d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"
/>
</symbol>
<symbol id="magic-trick" viewBox="0 0 576 512">
<title>Tips and Tricks</title>
<path
fill="currentColor"
d="M248.8 4.994C249.9 1.99 252.8 .0001 256 .0001C259.2 .0001 262.1 1.99 263.2 4.994L277.3 42.67L315 56.79C318 57.92 320 60.79 320 64C320 67.21 318 70.08 315 71.21L277.3 85.33L263.2 123C262.1 126 259.2 128 256 128C252.8 128 249.9 126 248.8 123L234.7 85.33L196.1 71.21C193.1 70.08 192 67.21 192 64C192 60.79 193.1 57.92 196.1 56.79L234.7 42.67L248.8 4.994zM427.4 14.06C446.2-4.686 476.6-4.686 495.3 14.06L529.9 48.64C548.6 67.38 548.6 97.78 529.9 116.5L148.5 497.9C129.8 516.6 99.38 516.6 80.64 497.9L46.06 463.3C27.31 444.6 27.31 414.2 46.06 395.4L427.4 14.06zM461.4 59.31L356.3 164.3L379.6 187.6L484.6 82.58L461.4 59.31zM7.491 117.2L64 96L85.19 39.49C86.88 34.98 91.19 32 96 32C100.8 32 105.1 34.98 106.8 39.49L128 96L184.5 117.2C189 118.9 192 123.2 192 128C192 132.8 189 137.1 184.5 138.8L128 160L106.8 216.5C105.1 221 100.8 224 96 224C91.19 224 86.88 221 85.19 216.5L64 160L7.491 138.8C2.985 137.1 0 132.8 0 128C0 123.2 2.985 118.9 7.491 117.2zM359.5 373.2L416 352L437.2 295.5C438.9 290.1 443.2 288 448 288C452.8 288 457.1 290.1 458.8 295.5L480 352L536.5 373.2C541 374.9 544 379.2 544 384C544 388.8 541 393.1 536.5 394.8L480 416L458.8 472.5C457.1 477 452.8 480 448 480C443.2 480 438.9 477 437.2 472.5L416 416L359.5 394.8C354.1 393.1 352 388.8 352 384C352 379.2 354.1 374.9 359.5 373.2z"
/>
</symbol>
<symbol
id="cross"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<title>Close</title>
<path
fill="currentColor"
d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
/>
</symbol>
<symbol id="gear" viewBox="0 0 512 512">
<title>Settings</title>
<path
fill="currentColor"
d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
/>
</symbol>
<symbol id="github" viewBox="0 0 496 512">
<!-- <title>Github</title> -->
<path
style="opacity: 0.9"
fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
/>
<symbol
id="warning"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<title>Warning Icon</title>
<path
fill="currentColor"
d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"
/>
</symbol>
</symbol>
</svg>
<section class="start-container active">
<div class="start-btn">
<button id="startBtn">Start Quiz</button>
</div>
<div class="leaderboard-btn">
<button id="leaderboardBtn">Leaderboard</button>
</div>
<div class="extras">
<div
class="github"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Open on Github"
>
<a href="https://github.com/Blank-09/Maths-Game" target="_blank">
<svg width="34" height="34">
<use xlink:href="#github"></use>
</svg>
</a>
</div>
<div class="user-settings">
<div
class="user"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="User"
>
<svg width="18" height="18">
<use xlink:href="#user"></use>
</svg>
</div>
<!-- <div class="settings">
<svg width="18" height="18">
<use xlink:href="#gear"></use>
</svg>
</div> -->
</div>
</div>
</section>
<section class="window user-details">
<nav class="nav">
<div class="title">User Details</div>
<svg class="close-btn" id="userDetailsExitBtn" width="20" height="20">
<use xlink:href="#cross"></use>
</svg>
</nav>
<main>
<div>
<div class="key">Your Name:</div>
<div class="value" id="usernameText">(Unknown)</div>
</div>
<div>
<div class="key">Your Highscore:</div>
<div class="value" id="highscoreText">----</div>
</div>
<div>
<div class="key">Average Score:</div>
<div class="value" id="averageScoreText">----</div>
</div>
<div>
<div class="key">No of Times Played:</div>
<div class="value" id="noOfTimesPlayedText">--</div>
</div>
<br />
<div>
<div class="key">Your Rank:</div>
<div class="value">#<span id="rankText">--</span></div>
</div>
</main>
<footer class="place-items-end d-none">
<button class="btn btn-primary" id="updateNameBtn">Update Name</button>
</footer>
</section>
<section class="window leaderboard-container">
<nav class="nav">
<span class="title">Leaderboard</span>
<svg class="close-btn" id="rankListExitBtn" width="20" height="20">
<use xlink:href="#cross"></use>
</svg>
</nav>
<!-- <select class="timing d-none">
<option value="0">All time</option>
<option value="1">This week</option>
<option value="2">This month</option>
</select> -->
<div class="rank-list">
<div class="loading" role="status">
<div class="online-status-text">
<div class="spinner-border"></div>
</div>
<div class="offline-status-text">
<!-- $yellow: #fdb539, $red: #fd3939 -->
<svg style="color: #fd3939" width="80" height="80">
<use xlink:href="#warning"></use>
</svg>
<br />
Oops! You're Offline
</div>
</div>
<div class="list"></div>
</div>
</section>
<section class="window settings-container">
<nav>
<div class="title">Settings</div>
<svg class="close-btn" id="settingsExitBtn" width="20" height="20">
<use xlink:href="#cross"></use>
</svg>
</nav>
<main>hahdha</main>
<footer class="place-items-end">
<button class="btn btn-primary-outlined" id="tips-n-tricks">
Tips & Tricks
</button>
<button class="btn btn-primary">Continue</button>
</footer>
</section>
<section class="window register-container">
<nav>
<span class="title"> Register Username </span>
<svg class="close-btn" id="registerDivExitBtn" width="20" height="20">
<use xlink:href="#cross"></use>
</svg>
</nav>
<main>
<div class="loading" role="status">
<div class="online-status-text">
<div class="spinner-border"></div>
<div>Saving, Please Wait!</div>
</div>
<div class="offline-status-text">
<svg style="color: #fd3939" width="80" height="80">
<use xlink:href="#warning"></use>
</svg>
<br />
Oops! You're Offline
</div>
</div>
<div class="input-container">
<div class="input-text">
<input
type="text"
id="registerNameInputBox"
placeholder="Enter Your Name"
/>
</div>
<div class="input-button">
<button id="registerNameInputBtn">Save 'n' Start</button>
</div>
</div>
</main>
</section>
<section class="window update-container">
<nav>
<span class="title"> Update Username </span>
<svg class="close-btn" id="usernameDivExitBtn" width="20" height="20">
<use xlink:href="#cross"></use>
</svg>
</nav>
<main>
<div class="loading" role="status">
<div class="online-status-text">
<div class="spinner-border"></div>
<div>Saving, Please Wait!</div>
</div>
<div class="offline-status-text">
<svg style="color: #fd3939" width="80" height="80">
<use xlink:href="#warning"></use>
</svg>
<br />
Oops! You're Offline
</div>
</div>
<div class="input-container">
<div class="input-text">
<input
type="text"
id="usernameInputBox"
placeholder="Enter Your New Name"
/>
</div>
<div class="input-button">
<button id="usernameInputBtn">Change Name</button>
</div>
</div>
</main>
</section>
<section class="window instructions-container">
<nav>
<span class="title">Things You Need to Know</span>
<svg class="close-btn" id="quitBtn" width="20" height="20">
<use xlink:href="#cross"></use>
</svg>
</nav>
<main>
<ol class="list">
<li>You will have only <span>15 seconds</span> per each question.</li>
<li>You can't select any option once time goes off.</li>
<li>You can't exit while you're playing the Quiz.</li>
<li>Your score won't update when you're offline.</li>
<li>If you're a beginner, try using Tips & Tricks</li>
</ol>
</main>
<footer class="place-items-end">
<!-- <button class="btn btn-primary-outlined" id="tips-n-tricks">
Tips & Tricks
</button> -->
<button class="btn btn-primary" id="continueBtn">Continue</button>
</footer>
</section>
<section class="window quiz-box">
<nav>
<div class="title">Maths Quiz</div>
<div class="time-line" id="timeLine"></div>
<div class="pill">
<div id="timeLeftText" style="padding-right: 0.7rem">Time Left</div>
<div class="pill-badge" id="timeLeftNoText">00</div>
</div>
</nav>
<main>
<div id="questions">
<p class="operand">12</p>
<span class="operator">X</span>
<p class="operand">12</p>
</div>
<ul class="option-list" id="optionList">
<li class="option">144</li>
<li class="option">232</li>
<li class="option">32</li>
<li class="option">89</li>
</ul>
</main>
<footer>
<div class="pill">
<div>Points</div>
<div class="pill-badge" id="pointsNoText">0</div>
</div>
<button class="btn btn-primary" id="showResultsBtn">
Show Results
</button>
</footer>
</section>
<section class="window result-box">
<div class="icon">
<img src="/dist/assets/crown.ac8a501c.png" alt="Crown Image" />
</div>
<div class="complete-text" id="completeText">
You’ve Completed the Quiz
</div>
<div class="score-text" id="scoreText">You scored 321</div>
<div class="buttons-container">
<div class="pill">
<div>Highscore</div>
<div class="pill-badge" id="highScoreText">0</div>
</div>
<button class="btn btn-primary-outlined" id="replayBtn">
Replay Quiz</button
><button class="btn btn-primary" id="exitQuizBtn">Exit Quiz</button>
</div>
</section>
</body>
</html>