-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (67 loc) · 2.48 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>
<head>
<title>Web APIs Challenge: Code Quiz</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" type="text/css" href="./assets/css/style.css" />
</head>
<body>
<header>
<div class="scores">
<!-- this section is fot the high scores -->
<a id="highscores-link">View high scores</a>
</div>
<div id="timer" class="timer">
<!-- this section if for the countdown timer -->
Time: 75
</div>
</header>
</body>
<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 Quiz 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 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/script.js"></script>
</html>