-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
75 lines (66 loc) · 2.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Timed Coding Quiz</title>
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<header>
<div class="scores">
<a id="highscores-link">View high scores</a>
</div>
<div id="timer" class="timer">
Time: 75
</div>
</header>
<section id="start-container" class="start-quiz">
<h1>Welcome to JavaScript Quiz Challenge</h1>
<p>
You have 75 seconds to try to get the highest score by answering five
series of JavaScript questions. Incorrect answers will penalize your
time by ten seconds. Your total score will be your time after you
answer the last question. Click start when you are ready.
</p>
<div class="controls">
<button id="start-btn" class="start-btn">Start Quiz</button>
</div>
</section>
<section id="question-container" class="hide">
<h1 id="question">Question</h1>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
<h2 id="check-answer" class="correct-wrong hide"></h2>
<div class="controls">
<button id="next-btn" class="next-btn hide">Next</button>
</div>
</section>
<section id="score-container" class="hide">
<form id="submit-form">
<h3 id="your-score"></h3>
<label id="initials-label">Enter your initials to save the score:</label>
<input type="text" id="initials-field" maxlength="3" placeholder="Enter your initials" />
<button id="submit-btn">Submit</button>
</form>
</section>
<section id="highscores" class="highscores-container hide">
<div id="high-scores">
<h1 class="centered">Leaderboard</h1>
<div id="highscore" class="highscore highscore-list">
</div>
<div class="controls">
<button id="restart-btn">Restart</button>
<button id="clear-btn">Clear Scores</button>
</div>
</div>
</section>
<script src="./assets/js/questions.js"></script>
<script src="./assets/js/logic.js"></script>
</body>
</html>