-
Notifications
You must be signed in to change notification settings - Fork 0
/
quiz.html
222 lines (179 loc) · 9.81 KB
/
quiz.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DigiTales | E-books</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
<style type="text/css">
body {
background-color: #D9EAFF;
}
</style>
</head>
<body onload="setUpPages()">
<nav class="navbar navbar-expand-sm">
<a href="index.html" class="navbar-brand">
<img src="img/logo.resized.png" alt="logo"/>
DigiTales
</a>
</nav>
<section class="container">
<div id="page1">
<div class="alert alert-warning" role="alert" id="nameGradeSectionAlert">
Please type your Name with your Grade and Section to the proper textboxes.
</div>
<h2 id="bookTitle">How the Leopard Got His Spots</h2>
<p id="direction">
<b>DIRECTION: </b> Ensure you have read the story "How the Leopard Got His Spots"
thoroughly before attempting the quiz. This quiz is designed to test your understanding
and recollection of the story's key events, characters, and themes. Take your time to
think about each question and answer them to the best of your ability. If time allows, go
back and review your answers to ensure they are complete and accurate.
</p>
<form>
<table id="examineeDetails">
<tr>
<td><label for="fname" style="font-size: 14px">Name</label></td>
<td><label for="gradeAndSection" style="font-size: 14px">Grade and Section</label></td>
</tr>
<tr>
<td><input type="text" id="fname" name="fname" class="border border-dark border-2 rounded rounded-4" placeholder="e.g. John Smith"></td>
<td><input type="text" id="gradeAndSection" name="gradeAndSection" class="border border-dark border-2 rounded rounded-4" placeholder="e.g. 1 Sampaguita"></td>
</tr>
</table>
</form>
<div class="text-center">
<button id="startQuizButton" class="btn btn-primary rounded rounded-4 fw-bolder" style="font-size: 25px;" onclick="goToQuestionPage()">START</button>
</div>
</div>
<div id="page2">
<h2 id="page2BookTitle">How the Leopard Got His Spots</h2>
<p><b>1. </b>What was the Leopard's original color in the story? </p>
<form class="lh-lg">
<input type="radio" name="question1" id="q1c1" value="Sandy-yellowish-brownish">
<label for="q1c1">Sandy-yellowish-brownish</label><br>
<input type="radio" name="question1" id="q1c2" value="Greyish-yellowish">
<label for="q1c2">Greyish-yellowish</label><br>
<input type="radio" name="question1" id="q1c3" value="Fulvous golden-yellow">
<label for="q1c3">Fulvous golden-yellow</label><br>
<input type="radio" name="question1" id="q1c4" value="Delicate greyish-fawn">
<label for="q1c4">Delicate greyish-fawn</label>
</form>
<p><b>2. </b>Which animal lived in the High Vedt along with the Leopard? </p>
<form class="lh-lg">
<input type="radio" name="question2" id="q2c1" value="Lions and Elephants">
<label for="q2c1">Lions and Elephants</label><br>
<input type="radio" name="question2" id="q2c2" value="Giraffe and Zebra">
<label for="q2c2">Giraffe and Zebra</label><br>
<input type="radio" name="question2" id="q2c3" value="Tigers and Rhinoceroses">
<label for="q2c3">Tigers and Rhinoceroses</label><br>
<input type="radio" name="question2" id="q2c4" value="Cheetahs and Gazelles">
<label for="q2c4">Cheetahs and Gazelles</label>
</form>
<p><b>3. </b>Why did the Giraffe, Zebra, and other animals leave the High Veldt? </p>
<form class="lh-lg">
<input type="radio" name="question3" id="q3c1" value="To find bette hunting grounds">
<label for="q3c1">To find bette hunting grounds</label><br>
<input type="radio" name="question3" id="q3c2" value="To escape from predators">
<label for="q3c2">To escape from predators</label><br>
<input type="radio" name="question3" id="q3c3" value="To seek shelter in the forest">
<label for="q3c3">To seek shelter in the forest</label><br>
<input type="radio" name="question3" id="q3c4" value="To avoid being hunted by the Leopard and Ethiopian">
<label for="q3c4">To avoid being hunted by the Leopard and Ethiopian</label>
</form>
<p><b>4. </b>How did the Ethiopian change his appearance? </p>
<form class="lh-lg">
<input type="radio" name="question4" id="q4c1" value="He grew stripes">
<label for="q4c1">He grew stripes</label><br>
<input type="radio" name="question4" id="q4c2" value="He changed his skin color">
<label for="q4c2">He changed his skin color</label><br>
<input type="radio" name="question4" id="q4c3" value="He wore camouflage clothing">
<label for="q4c3">He wore camouflage clothing</label><br>
<input type="radio" name="question4" id="q4c4" value="He dyed his hair">
<label for="q4c4">He dyed his hair</label>
</form>
<p><b>5. </b>What did the Ethiopian use to create spots on the Leopard's skin? </p>
<form class="lh-lg">
<input type="radio" name="question5" id="q5c1" value="Paintbrush">
<label for="q5c1">Paintbrush</label><br>
<input type="radio" name="question5" id="q5c2" value="Leaves">
<label for="q5c2">Leaves</label><br>
<input type="radio" name="question5" id="q5c3" value="His fingers">
<label for="q5c3">His fingers</label><br>
<input type="radio" name="question5" id="q5c4" value="A spray gun">
<label for="q5c4">A spray gun</label>
</form>
<p><b>6. </b>What was the final decision of the Leopard regarding his apperance? </p>
<form class="lh-lg">
<input type="radio" name="question6" id="q6c1" value="He chose to remain as he was">
<label for="q6c1">He chose to remain as he was</label><br>
<input type="radio" name="question6" id="q6c2" value="He opted for stripe like the Zebra">
<label for="q6c2">He opted for stripe like the Zebra</label><br>
<input type="radio" name="question6" id="q6c3" value="He agreed to have spots">
<label for="q6c3">He agreed to have spots</label><br>
<input type="radio" name="question6" id="q6c4" value="He decided to hide in the forest">
<label for="q6c4">He decided to hide in the forest</label>
</form>
<p><b>7. </b>How did the story conclude for the Leopard and the Ethiopian? </p>
<form class="lh-lg">
<input type="radio" name="question7" id="q7c1" value="They continued hunting together">
<label for="q7c1">They continued hunting together</label><br>
<input type="radio" name="question7" id="q7c2" value="They remained hidden in the forest">
<label for="q7c2">They remained hidden in the forest</label><br>
<input type="radio" name="question7" id="q7c3" value="They lived happily ever after">
<label for="q7c3">They lived happily ever after</label><br>
<input type="radio" name="question7" id="q7c4" value="They migrated to another continent">
<label for="q7c4">They migrated to another continent</label>
</form>
<p><b>8. </b>What effect did the shadows in the Bushveld have on the Zebra and Giraffe? </p>
<form class="lh-lg">
<input type="radio" name="question8" id="q8c1" value="They made them tired">
<label for="q8c1">They made them tired</label><br>
<input type="radio" name="question8" id="q8c2" value="They changed the colors of their coats">
<label for="q8c2">They changed the colors of their coats</label><br>
<input type="radio" name="question8" id="q8c3" value="They frightened them">
<label for="q8c3">They frightened them</label><br>
<input type="radio" name="question8" id="q8c4" value="They made them invisible">
<label for="q8c4">They made them invisible</label>
</form>
<p><b>9. </b>Who did Leopard ask to help him find the animals who live in the High Veldt? </p>
<form class="lh-lg">
<input type="radio" name="question9" id="q9c1" value="The Lion">
<label for="q9c1">The Lion</label><br>
<input type="radio" name="question9" id="q9c2" value="The Ethiopian">
<label for="q9c2">The Ethiopian</label><br>
<input type="radio" name="question9" id="q9c3" value="The Zebra">
<label for="q9c3">The Zebra</label><br>
<input type="radio" name="question9" id="q9c4" value="The Giraffe">
<label for="q9c4">The Giraffe</label>
</form>
<p><b>10. </b>How did Leopard initially react to the absence of Zebra and Giraffe? </p>
<form class="lh-lg">
<input type="radio" name="question10" id="q10c1" value="He was happy">
<label for="q10c1">He was happy</label><br>
<input type="radio" name="question10" id="q10c2" value="He was sad">
<label for="q10c2">He was sad</label><br>
<input type="radio" name="question10" id="q10c3" value="He was indifferent">
<label for="q10c3">He was indifferent</label><br>
<input type="radio" name="question10" id="q10c4" value="He was angry">
<label for="q10c4">He was angry</label>
</form>
<div id="submitQuizParentDiv">
<button class="btn btn-warning text-light fw-bolder rounded-4" id="submitQuiz" style="margin-bottom: 3.5rem;" onclick="goToScore()">Submit</button>
</div>
</div>
<div id="page3" class="text-center">
<h1 id="score" class="fw-bolder text-decoration-underline"></h1>
<h2 id="greeting" class="fw-bolder">CONGRATULATIONS!</h2>
<h2 id="nameGradeSection" class="fst-italic"></h2>
<p id="interpretation"></p>
<a href="index.html" class="btn btn-primary text-light fw-bolder rounded rounded-pill" id="goToHomeBtn">HOME</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>