-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (123 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Quiz</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<nav>
<div id='high-score'>View Highscores</div>
<div id='time'>Time: </div>
</nav>
<section id='welcome' class='box slide active-slide'>
<h1><strong>Coding Quiz Challenge</strong></h1>
<p>
Test your coding knowledge in this short quiz. You will have 60 seconds to answer all questions, and will lose 5 seconds for every incorrect choice. Click Start to begin.
</p>
<button id="start" type="button" class="btn btn-lg">Start Quiz</button>
</section>
<section id='question-1' class='box slide'>
<h1>Question 1</h1>
<p>
What does 'HTML' stand for?
</p>
<article class="btn-grid">
<button class="btn question1 option-btn" type="button">
<label>Hypertext Markdown Language</label></button>
<button class="btn question1 option-btn" type="button">
<label>High Top Middle Low</label></button>
<button class="btn question1 correct option-btn" type="button">
<label>Hypertext Markup Language</label></button>
<button class="btn question1 option-btn" type="button">
<label>Highlighting The Markdown Language</label></button>
</article>
</section>
<section id='question-2' class='box slide'>
<h1>Question 2</h1>
<p>
Where would you link your JavaScript file in HTML?
</p>
<article class="btn-grid">
<button class="btn question2 option-btn" type="button">
<label><title></label></button>
<button class="btn question2 correct option-btn" type="button">
<label><script></label></button>
<button class="btn question2 option-btn" type="button">
<label><style></label></button>
<button class="btn question2 option-btn" type="button">
<label><footer></label></button>
</article>
</section>
<section id='question-3' class='box slide'>
<h1>Question 3</h1>
<p>
What is 'var' used for?
</p>
<article class="btn-grid">
<button class="btn question3 option-btn" type="button">
<label>To label a package</label></button>
<button class="btn question3 option-btn" type="button">
<label>To define an object</label></button>
<button class="btn question3 option-btn" type="button">
<label>Video Assistant Refereeing</label></button>
<button class="btn question3 correct option-btn" type="button">
<label>To assign to a variable</label></button>
</article>
</section>
<section id='question-4' class='box slide'>
<h1>Question 4</h1>
<p>
How do you log information in the console?
</p>
<article class="btn-grid">
<button class="btn question4 option-btn" type="button">
<label>event.preventDefault()</label></button>
<button class="btn question4 correct option-btn" type="button">
<label>console.log</label></button>
<button class="btn question4 option-btn" type="button">
<label>console.save</label></button>
<button class="btn question4 option-btn" type="button">
<label>this.log</label></button>
</form>
</section>
<section id='question-5' class='box slide'>
<h1>Question 5</h1>
<p>
How do you find the length of 'var myList = [a, b, c, d]'
</p>
<article class="btn-grid">
<button class="btn question5 option-btn" type="button">
<label>myList.length()</label></button>
<button class="btn question5 option-btn" type="button">
<label>length(myList)</label></button>
<button class="btn question5 option-btn" type="button">
<label>myList.len()</label></button>
<button class="btn question5 correct option-btn" type="button">
<label>myList.length</label></button>
</article>
</section>
<aside class='controls'>
<button id="previous" type="button" class="btn btn-lg">Back</button>
<button id="next" type="button" class="btn btn-lg">Next</button>
<button id="submit" type="button" class="btn btn-lg">Submit</button>
</aside>
<div class="answer-status">
<h4></h4>
</div>
<section id="end" class='box slide'>
<h1>Your Score is: </h1>
<p>
Please input your initials to save your score
</p>
<input id="userInitials" type="text" placeholder="Enter your initials here">
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>