-
Notifications
You must be signed in to change notification settings - Fork 0
/
quiz.html
115 lines (99 loc) · 6.59 KB
/
quiz.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play : : Quizmo</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<div class="container">
<div class="preloader">
<span></span>
<span></span>
</div>
<div class="quiz__board">
<div class="quiz__status--container flex-column flex-center">
<div>
<h4 class="quiz__progress">Progress: <span>0</span>%</h4>
<div class="quiz__progress--bar-outer">
<div class="quiz__progress--bar"></div>
</div>
</div>
<div class="quiz__info--container">
<p>Q : <span class="current">-</span> / <span class="total">-</span></p>
</div>
</div>
<hr>
<h3 class="question" oncontextmenu="return false;"></h3>
<hr>
<options></options>
<hr>
<div class="quiz__status--container flex-column flex-center no-margin" bottom>
<button class="btn btn--info no-margin">
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
<path
d="M 24 4 C 12.972066 4 4 12.972074 4 24 C 4 35.027926 12.972066 44 24 44 C 35.027934 44 44 35.027926 44 24 C 44 12.972074 35.027934 4 24 4 z M 24 7 C 33.406615 7 41 14.593391 41 24 C 41 33.406609 33.406615 41 24 41 C 14.593385 41 7 33.406609 7 24 C 7 14.593391 14.593385 7 24 7 z M 24 14 A 2 2 0 0 0 24 18 A 2 2 0 0 0 24 14 z M 23.976562 20.978516 A 1.50015 1.50015 0 0 0 22.5 22.5 L 22.5 33.5 A 1.50015 1.50015 0 1 0 25.5 33.5 L 25.5 22.5 A 1.50015 1.50015 0 0 0 23.976562 20.978516 z" />
</svg>
</button>
<div class="quiz__info--container">
<p>Score : <span class="score">0</span></p>
</div>
</div>
<!-- Option Markup -->
<!-- <div class="option__container" data-option="1">
<p class="option__select--icon">A</p>
<p class="option__text">Food</p>
</div> -->
</div>
</div>
<!-- Quiz Summary Modal -->
<div class="modal-overlay">
<div class="modal" quiz-summary>
<!-- Not necessary -->
<!-- <a class="close-modal">
<svg viewBox="0 0 20 20">
<path fill="#000" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
</svg>
</a> -->
<div class="modal-content">
<div class="flex-center flex-column">
<h2 class="final-score">0</h2>
<div style="height: 135px;">
<form autocomplete="off">
<input type="text" class="username" placeholder="Username">
<button class="btn btn--secondary save" disabled>Save</button>
</form>
<div class="user__details flex-row flex-center">
<div>
<h3>NAME</h3><span username></span>
</div>
<div>
<h3>SCORE</h3><span score></span>
</div>
</div>
</div>
<div class="quiz__actions">
<!-- 'Restart' button -->
<a href="javascript:;" class="btn btn--primary restart">
<!-- <svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><path d="M 24 5 C 16.838262 5 11 10.838262 11 18 L 11 29.878906 L 7.5605469 26.439453 A 1.50015 1.50015 0 0 0 6.484375 25.984375 A 1.50015 1.50015 0 0 0 5.4394531 28.560547 L 11.310547 34.431641 A 1.50015 1.50015 0 0 0 13.697266 34.423828 L 19.560547 28.560547 A 1.50015 1.50015 0 1 0 17.439453 26.439453 L 14 29.878906 L 14 18 C 14 12.459738 18.459738 8 24 8 C 26.59565 8 28.93698 8.9889501 30.71875 10.609375 A 1.50015 1.50015 0 1 0 32.736328 8.390625 C 30.432098 6.2950499 27.36235 5 24 5 z M 35.476562 12.978516 A 1.50015 1.50015 0 0 0 34.300781 13.578125 L 28.439453 19.439453 A 1.50015 1.50015 0 1 0 30.560547 21.560547 L 34 18.121094 L 34 30 C 34 35.540262 29.540262 40 24 40 C 21.40435 40 19.06302 39.01105 17.28125 37.390625 A 1.50015 1.50015 0 1 0 15.263672 39.609375 C 17.567902 41.70495 20.63765 43 24 43 C 31.161738 43 37 37.161738 37 30 L 37 18.121094 L 40.439453 21.560547 A 1.50015 1.50015 0 1 0 42.560547 19.439453 L 36.689453 13.568359 A 1.50015 1.50015 0 0 0 35.476562 12.978516 z"/></svg> -->
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
<path d="M 24 6 C 23.048235 6 22.141037 6.095179 21.275391 6.2265625 A 1.50015 1.50015 0 1 0 21.724609 9.1914062 C 22.492963 9.0747896 23.247765 9 24 9 C 32.3024 9 39 15.6976 39 24 C 39 32.3024 32.3024 39 24 39 C 15.6976 39 9 32.3024 9 24 C 9 20.065743 10.527501 16.519538 13 13.849609 L 13 17.5 A 1.50015 1.50015 0 1 0 16 17.5 L 16 10.5 A 1.50015 1.50015 0 0 0 14.5 9 L 7.5 9 A 1.50015 1.50015 0 1 0 7.5 12 L 10.605469 12 C 7.7471496 15.184124 6 19.390676 6 24 C 6 33.9236 14.0764 42 24 42 C 33.9236 42 42 33.9236 42 24 C 42 14.0764 33.9236 6 24 6 z" />
</svg>
</a>
<!-- 'Go To Home' button -->
<a href="/" class="btn btn--primary">
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
<path d="M 23.951172 4 A 1.50015 1.50015 0 0 0 23.072266 4.3222656 L 8.859375 15.519531 C 7.0554772 16.941163 6 19.113506 6 21.410156 L 6 40.5 C 6 41.863594 7.1364058 43 8.5 43 L 18.5 43 C 19.863594 43 21 41.863594 21 40.5 L 21 30.5 C 21 30.204955 21.204955 30 21.5 30 L 26.5 30 C 26.795045 30 27 30.204955 27 30.5 L 27 40.5 C 27 41.863594 28.136406 43 29.5 43 L 39.5 43 C 40.863594 43 42 41.863594 42 40.5 L 42 21.410156 C 42 19.113506 40.944523 16.941163 39.140625 15.519531 L 24.927734 4.3222656 A 1.50015 1.50015 0 0 0 23.951172 4 z M 24 7.4101562 L 37.285156 17.876953 C 38.369258 18.731322 39 20.030807 39 21.410156 L 39 40 L 30 40 L 30 30.5 C 30 28.585045 28.414955 27 26.5 27 L 21.5 27 C 19.585045 27 18 28.585045 18 30.5 L 18 40 L 9 40 L 9 21.410156 C 9 20.030807 9.6307412 18.731322 10.714844 17.876953 L 24 7.4101562 z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="js/quiz.js"></script>
<script src="js/party.min.js"></script>
</body>
</html>