forked from jrue/JavaScript-Quiz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquiz.html
241 lines (222 loc) · 11.3 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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<!-- jquery for maximum compatibility -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
/** Simple JavaScript Quiz
* version 0.1.0
* http://journalism.berkeley.edu
* created by: Jeremy Rue @jrue
*
* Copyright (c) 2013 The Regents of the University of California
* Released under the GPL Version 2 license
* http://www.opensource.org/licenses/gpl-2.0.php
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*/
var quiztitle = "Quiz Title";
/**
* Set the information about your questions here. The correct answer string needs to match
* the correct choice exactly, as it does string matching. (case sensitive)
*
*/
var quiz = [
{
"question" : "Q1: Who came up with the theory of relativity?",
"image" : "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg",
"choices" : [
"Sir Isaac Newton",
"Nicolaus Copernicus",
"Albert Einstein",
"Ralph Waldo Emmerson"
],
"correct" : "Albert Einstein",
"explanation" : "Albert Einstein drafted the special theory of relativity in 1905.",
},
{
"question" : "Q2: Who is on the two dollar bill?",
"image" : "http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_%242_obverse-high.jpg/320px-US_%242_obverse-high.jpg",
"choices" : [
"Thomas Jefferson",
"Dwight D. Eisenhower",
"Benjamin Franklin",
"Abraham Lincoln"
],
"correct" : "Thomas Jefferson",
"explanation" : "The two dollar bill is seldom seen in circulation. As a result, some businesses are confused when presented with the note.",
},
{
"question" : "Q3: What event began on April 12, 1861?",
"image" : "",
"choices" : [
"First manned flight",
"California became a state",
"American Civil War began",
"Declaration of Independence"
],
"correct" : "American Civil War began",
"explanation" : "South Carolina came under attack when Confederate soldiers attacked Fort Sumter. The war lasted until April 9th 1865.",
},
];
/******* No need to edit below this line *********/
var currentquestion = 0, score = 0, submt=true, picked;
jQuery(document).ready(function($){
/**
* HTML Encoding function for alt tags and attributes to prevent messy
* data appearing inside tag attributes.
*/
function htmlEncode(value){
return $(document.createElement('div')).text(value).html();
}
/**
* This will add the individual choices for each question to the ul#choice-block
*
* @param {choices} array The choices from each question
*/
function addChoices(choices){
if(typeof choices !== "undefined" && $.type(choices) == "array"){
$('#choice-block').empty();
for(var i=0;i<choices.length; i++){
$(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
}
}
}
/**
* Resets all of the fields to prepare for next question
*/
function nextQuestion(){
submt = true;
$('#explanation').empty();
$('#question').text(quiz[currentquestion]['question']);
$('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
if(quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != ""){
if($('#question-image').length == 0){
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');
} else {
$('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));
}
} else {
$('#question-image').remove();
}
addChoices(quiz[currentquestion]['choices']);
setupButtons();
}
/**
* After a selection is submitted, checks if its the right answer
*
* @param {choice} number The li zero-based index of the choice picked
*/
function processQuestion(choice){
if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']){
$('.choice').eq(choice).css({'background-color':'#50D943'});
$('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({'background-color':'#D92623'});
$('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('NEXT QUESTION »').on('click', function(){
if(currentquestion == quiz.length){
endQuiz();
} else {
$(this).text('Check Answer').css({'color':'#222'}).off('click');
nextQuestion();
}
})
}
/**
* Sets up the event listeners for each button.
*/
function setupButtons(){
$('.choice').on('mouseover', function(){
$(this).css({'background-color':'#e1e1e1'});
});
$('.choice').on('mouseout', function(){
$(this).css({'background-color':'#fff'});
})
$('.choice').on('click', function(){
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'});
if(submt){
submt=false;
$('#submitbutton').css({'color':'#000'}).on('click', function(){
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
}
/**
* Quiz ends, display a message.
*/
function endQuiz(){
$('#explanation').empty();
$('#question').empty();
$('#choice-block').empty();
$('#submitbutton').remove();
$('#question').text("You got " + score + " out of " + quiz.length + " correct.");
$(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#question');
}
/**
* Runs the first time and creates all of the elements for the quiz
*/
function init(){
//add title
if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');
} else {
$(document.createElement('h1')).text("Quiz").appendTo('#frame');
}
//add pager and questions
if(typeof quiz !== "undefined" && $.type(quiz) === "array"){
//add pager
$(document.createElement('p')).addClass('pager').attr('id','pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
//add first question
$(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
//add image if present
if(quiz[0].hasOwnProperty('image') && quiz[0]['image'] != ""){
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
}
$(document.createElement('p')).addClass('explanation').attr('id','explanation').html(' ').appendTo('#frame');
//questions holder
$(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
//add choices
addChoices(quiz[0]['choices']);
//add submit button
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame');
setupButtons();
}
}
init();
});
</script>
<style type="text/css" media="all">
/*css reset */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;}
ol,ul{list-style:none;}
strong{font-weight:700;}
#frame{max-width:620px;width:auto;border:1px solid #ccc;background:#fff;padding:10px;margin:3px;}
h1{font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;border-bottom:1px solid #999;padding:0;width:auto}
h2{font:italic bold 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:0;text-align:center;margin:20px 0;}
p.pager{margin:5px 0 5px; font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;color:#999;}
img.question-image{display:block;max-width:250px;margin:10px auto;border:1px solid #ccc;width:100%;height:auto;}
#choice-block{display:block;list-style:none;margin:0;padding:0;}
#submitbutton{background:#5a6b8c;}
#submitbutton:hover{background:#7b8da6;}
#explanation{margin:0 auto;padding:20px;width:75%;}
.choice-box{display:block;text-align:center;margin:8px auto;padding:10px 0;border:1px solid #666;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
</style>
</head>
<body>
<div id="frame" role="content"></div>
</body>
</html>