-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (58 loc) · 2.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./assests/styles/style.css" rel="stylesheet">
<title>Javascript Quiz</title>
</head>
<body>
<!-- INITIAL MENU SCREEN SECTION -->
<section id="initial-screen-section">
<h1 id="initial-title-h1">Javascript Fundamentals Quiz</h1>
<div id="initial-desc">
<span id="initial-span">You have a timer constantly counting down. You will be asked random Javascript fundamentals questions.
Get questions right, the timer goes up. Get them wrong, and the timer will go down. You have 30 seconds initally, good luck.
</span>
</div>
<button id="initial-button">START</button>
</section>
<!-- MAIN GAME SECTION -->
<section id="game-content-section">
<span id="game-question"></span>
<button id="answer1" class="answer-button"></button>
<button id="answer2" class="answer-button"></button>
<button id="answer3" class="answer-button"></button>
<button id="answer4" class="answer-button"></button>
</section>
<!-- GAME OVER SECTION -->
<section id="end-game-section">
<span id="score-span">Score</span>
<span id="time-score"></span>
<span id="correct-score"></span>
<span id="incorrect-score"></span>
<span id="retry-button">RETRY</span>
</section>
<!-- INITIALS FORM FOR ENTERING SCORE -->
<section id="initials-form">
<form>
<input id="initials-input" placeholder="enter initials">
<input id="submit-button" type="submit" value="SUBMIT SCORE">
</form>
<span id="status-element"></span>
</section>
<!-- HIGHSCORES DISPLAY SECTION -->
<section id="highscores-section">
<span id="highscores-title" class="">HIGHSCORES</span>
<span id="highscore1">#1 - NO SCORE YET</span>
<span id="highscore2">#2 - NO SCORE YET</span>
<span id="highscore3">#3 - NO SCORE YET</span>
<span id="highscore4">#4 - NO SCORE YET</span>
<span id="highscore5">#5 - NO SCORE YET</span>
</section>
<!-- COUNTDOWN TIMER DURING GAME -->
<span id="time"></span>
<script src="./assests/scripts/main.js" type="module"></script>
</body>
</html>