-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (74 loc) · 2.58 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
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav class="navbar">
<button class="btn btn-outline-primary float-left" id="highscore-button">
View Highscores
</button>
<div class="text-right">Time Left: <span id="timer"></span></div>
</nav>
<div class="container" id="home-page">
<h1>Javascript Code Quiz!</h1>
<p>
Get ready to test your knowledge in Javascript. You will be asked
several questions against a clock shown in the upper right corner. Every
question you get wrong subtracts 15 seconds from the clock. Your final
score is the amount of time you have left. Press 'start quiz' to begin.
Good luck!
</p>
<button class="btn btn-primary" id="start-button">Start Quiz</button>
</div>
<div class="d-none" id="question-page">
<h2 id="question"></h2>
<div id="answers" class="btn-group-vertical"></div>
<h3 id="correctness"></h3>
</div>
<div class="d-none" id="score-page">
<h1>Your Score:</h1>
<h3 id="score"></h3>
<form class="container">
<ul class="list-inline">
<li class="list-inline-item">
<label class="font-weight-bold">Initials:</label>
</li>
<li class="list-inline-item">
<input
type="text"
class="form-control mb-2 mr-sm-2"
id="initials"
maxlength="3"
/>
</li>
<li class="list-inline-item">
<button type="submit" class="btn btn-primary" id="submit-button">
Submit
</button>
</li>
</ul>
</form>
</div>
<div class="container d-none" id="highscore-page">
<h1>High Scores:</h1>
<ul class="list-group font-weight-bolder mb-2" id="highscores"></ul>
<button class="btn btn-primary" id="back-button">Go Back</button>
<button class="btn btn-primary" id="clear-button">
Clear Highscores
</button>
</div>
<script src="./script.js" async defer></script>
</body>
</html>