-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (152 loc) · 5.59 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
167
168
169
170
<!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>Code Quiz</title>
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<div id="header-div">
<h1>Coding Quiz</h1>
<div id="header-nav">
<button id="home-btn">⌂ Home</button>
<button id="high-score-btn">High Scores</button>
<button id="settings-btn">Settings</button>
<h4 id="timer" style="display:none">10sec</h4>
</div>
</div>
<!-- This "screens" div section contains child divs that are shown and hidden -->
<div id="screens">
<!-- Home Screen ___________________________ -->
<div id="home-screen">
<h2>Welcome to the Coding Quiz!</h2>
<p>This is a quiz to determine your competency with coding.<br>You'll be given <span class="roundel"
id="qty-of-questions">10</span> random questions from a list. <br>
You'll have <span class="roundel" id="time-for-quiz">2 minutes</span> to answer the questions. <br>
You'll get a point for every correct answer, but you'll have <span class="roundel" id="time-deducted">5
seconds</span> deducted
from your time if you get an answer wrong!
</p>
<button class="btn" id="start-btn">Start Quiz</button>
<br></div>
<!-- Question Screen ___________________________ -->
<div id="question-screen">
<div class="question-class">
<h3>Question <span id="questionNo">X</span></h3>
<p id="questionText">This is q1 text<br></p>
<hr><br>
<ol type="A" id="answer-list">
<li><button id="aAnswer" class="aButton" data-value="A">AnswerA</button></li>
<li><button id="bAnswer" class="aButton" data-value="B">AnswerB</button></li>
<li><button id="cAnswer" class="aButton" data-value="C">AnswerC</button></li>
<li><button id="dAnswer" class="aButton" data-value="D">AnswerD</button></li>
<!-- -->
<!-- <li id="correctAnswer"></li> -->
<!-- -->
</ol>
<br>
<p id="course"></p>
</div>
</div>
<!-- Result Screen ___________________________ -->
<div id="result-screen">
<h2>Result</h2>
<table id="result-table">
<tr>
<td>Time Assigned</td>
<td id="timeAssigned">1</td>
</tr>
<tr>
<td>Time Taken</td>
<td id="timeTaken">1</td>
</tr>
<tr>
<tr>
<td>Questions Assigned</td>
<td id="totalQNo">1</td>
</tr>
<tr>
<td>Questions Attempted</td>
<td id="qNo">1</td>
</tr>
<tr>
<td>Score</td>
<td id="thisScore">1</td>
</tr>
</table>
<br>
<div id="submit-high-scores">
<form id="high-score-form">
<label for="hs-name">Enter your name for high score:<br></label>
<input type="text" id="hs-name" placeholder="Your name">
<button class="btn" id="hs-submit-btn">Submit</button>
</form>
</div>
<br></div>
<!-- High Score Screen ___________________________ -->
<div id="high-score-screen">
<h2>High Scores</h2>
<br>
<table id="hs-table">
<tr>
<th id="hsName">Name</th>
<th id="score">Score</th>
</tr>
<tbody id="hsCells">
<tr>
<td>No scores yet</td>
<td>0</td>
</tr>
</tbody>
</table>
<br></div>
<!-- Settings Screen ___________________________ -->
<div id="settings-screen">
<h2>Settings</h2>
<form id="settings-form">
<p>
<label for="question-qty">Number of questions</label>
<input id="question-qty" type="text" /><br><br>
</p>
<p>
<label for="quiz-time">Time allowed for quiz</label>
<input id="quiz-time" type="text" /> minutes<br><br>
</p>
<p>
<label for="deducted-time">Time deducted for a wrong answer</label>
<input id="deducted-time" type="text" /> seconds<br><br>
</p>
<p>Which area(s) do you want your questions to come from?</p>
<div id="settings-checkbox">
<p>
<input class="checkbox" id="question-type1" type="checkbox" checked="true" />
<!-- checked="true" -->
<label for="question-type1">Unit - 1: Web Essentials</label><br>
<input class="checkbox" id="question-type2" type="checkbox" />
<label for="question-type2">Unit - 2: Markup Languages</label><br>
<input class="checkbox" id="question-type3" type="checkbox" />
<label for="question-type3">Unit - 3: JavaScript</label><br>
<!--
<input class="checkbox" id="question-type4" type="checkbox" />
<label for="question-type4">Unit - 4: Function and String in PHP</label><br>
<input class="checkbox" id="question-type5" type="checkbox" />
<label for="question-type5">Unit - 5 Arrays in PHP</label><br>
-->
</p>
</div>
<button class="btn" id="submit-settings-btn">Save Settings</button>
</form>
<br></div>
</div> <!-- end of screens div * * * * * -->
<div id="footer-sec">
<p>Copyright © Reeve Schragger 2022</p>
</div>
<!-- Separate file for Q and As -->
<script src="./assets/js/storeJSON.js"></script>
<!-- Script to run quiz -->
<script src="./assets/js/script.js"></script>
</body>
</html>