-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
189 lines (181 loc) · 5.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/reset.css" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./assets/style.css" />
<title>!Pop Quiz!</title>
</head>
<body>
<!-- top of page; header -->
<header class="container-fluid mb-2 mt-2 p-2">
<div class="row mx-auto">
<!-- timer section -->
<div
class="col-auto my-auto mr-auto ml-1 rounded custom-border"
id="custom-timer"
>
Time: 60
</div>
<!-- main title at start -->
<div class="col-sm-8 my-auto mx-auto rounded" id="custom-header">
<h1 class="noselect">Test your JavaScript knowledge</h1>
</div>
<!-- score display section -->
<div
class="col-auto my-auto mr-1 ml-3 rounded custom-border"
id="custom-score"
>
Score: 000
</div>
</div>
</header>
<!-- main; holds the start quiz section and Q&A display -->
<main>
<div class="container-fluid mt-2 px-2 pt-2">
<!-- start button row -->
<!-- will hide upon starting the quiz -->
<div class="row mx-auto rounded">
<div class="col my-auto rounded">
<button
class="rounded mx-auto custom-border button noselect"
id="start-button"
type="button"
>
START QUIZ
</button>
</div>
</div>
</div>
<!-- Question Display -->
<div class="container px-2" id="question-display">
<div class="row mx-auto rounded mb-3">
<div class="col my-auto rounded">
<h2
class="rounded noselect mx-auto p-2 custom-border"
id="quiz-question"
></h2>
</div>
</div>
<!-- 4 rows of answer choices -->
<!-- to be populated -->
<div class="row">
<div class="col-sm my-auto">
<p
class="answer-item noselect mx-auto p-2 rounded custom-border"
id="answer1"
></p>
</div>
</div>
<div class="row">
<div class="col-sm my-auto">
<p
class="answer-item noselect mx-auto p-2 rounded custom-border"
id="answer2"
></p>
</div>
</div>
<div class="row">
<div class="col-sm my-auto">
<p
class="answer-item noselect mx-auto p-2 rounded custom-border"
id="answer3"
></p>
</div>
</div>
<div class="row">
<div class="col-sm my-auto">
<p
class="answer-item noselect mx-auto p-2 rounded custom-border"
id="answer4"
></p>
</div>
</div>
</div>
</main>
<!-- transparent black background -->
<div class="position-absolute" id="overlay-background"></div>
<!-- game over pop up section of the application -->
<section
class="container-fluid position-absolute p-2 rounded custom-border"
id="game-over"
>
<!-- game over score row -->
<div class="row mb-3" id="game-over-splash">
<div class="col">
<span
id="game-over-score"
class="custom-border px-2 color-change-score"
></span>
</div>
</div>
<!-- enter name row -->
<form id="name-form">
<div class="form-group form-row">
<span class="custom-border col-sm-3 my-auto rounded"
>Enter Name:</span
>
<div class="col-sm-6">
<input
type="text"
class="form-control form-control-sm mt-2 mb-2"
id="userName"
placeholder="Your Name"
/>
</div>
<button
type="button"
class="custom-border rounded col-sm-3 p-1"
id="submit-btn"
>
Submit
</button>
</div>
</form>
<!-- scores list! -->
<div class="row" id="score-list">
<div class="col">
<hr class="dashedLine mt-0 rounded" />
<span class="mx-auto color-change">user -- // -- score</span>
<ul id="dynamic-list" class="mx-auto underOverLine"></ul>
</div>
</div>
<!-- row of buttons; clear scores and retake quiz -->
<div class="row" id="go-again">
<div class="col-sm-6 my-3 px-0">
<span
class="noselect rounded custom-border py-1 px-4"
id="clear-scores"
>
clear
</span>
</div>
<div class="col-sm-6 my-3 px-0">
<span
class="noselect rounded custom-border py-1 px-4"
id="retake-quiz"
>
retake
</span>
</div>
</div>
</section>
<!--footer holds the instructions; possible score list bypass -->
<footer class="container-fluid mt-4" id="footer">
<div class="row">
<div class="col-sm-12 text-center instructions">
Answer as many questions until the timer expires.<br />
Each wrong answer will subtract some time!
</div>
</div>
</footer>
<script src="./assets/script.js"></script>
</body>
</html>