-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquiz.html
104 lines (98 loc) · 4.38 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
<html>
<head>
<style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
</head>
<body>
<h3 id="question">1. What color is the sky?</h3>
<input type="radio" name="answer" value="Green" id="a1">
<label for="a1">Green</label>
<input type="radio" name="answer" value="Blue" id="a2">
<label for="a2">Blue</label>
<input type="radio" name="answer" value="Red" id="a3">
<label for="a3">Red</label>
<input type="radio" name="answer" value="Pink" id="a4">
<label for="a4">Pink</label>
<p>
<button id="next">Next</button>
<script type="text/javascript">
// List of questions. First mentioned answer is correct one.
var questions = [{
question: "What color is the sky?",
answers: ["Blue", "Red", "Pink", "Green"]
}, {
question: "What color is grass?",
answers: ["Green", "Yellow", "Purple", "Black"]
}, {
question: "What color is dirt?",
answers: ["Brown", "White", "Turqouise", "Gray"]
}];
// Generic function to return a shuffled array:
function shuffled(arr) {
arr = arr.slice(); // shallow copy
for (var i = 0; i < arr.length; i++) {
var j = Math.floor(Math.random() * (arr.length - i)) + i;
[arr[i], arr[j]] = [arr[j], arr[i]]; // swap
}
return arr;
}
// define variables for some of the HTML elements:
var domQuestion = document.querySelector('#question');
var domAnswers = Array.from(document.querySelectorAll('input[name=answer]'));
var domNext = document.querySelector('#next');
function displayQuestion() {
// get a random order for the answers:
var answers = shuffled(questions[questionId].answers);
// Display question
domQuestion.textContent = (questionId+1) + '. ' +
questions[questionId].question;
domAnswers.forEach(function (input, i){
// Set checkbox value and unselect it
input.value = answers[i];
input.checked = false;
// Display the answer text
input.nextElementSibling.textContent = answers[i];
});
}
// Initialise and display first question
var questionId = 0;
var correctAnswers = 0;
displayQuestion();
// Respond to a click on the Next button
domNext.addEventListener('click', function () {
// update correct answer counter:
var domAnswer = domAnswers.find(input => input.checked);
if (!domAnswer) return; // nothing was selected
// update number of correctly answered questions:
if (domAnswer.value == questions[questionId].answers[0]) correctAnswers++;
// next question
questionId++;
if (questionId >= questions.length) {
alert('You have answered ' + correctAnswers +
' of ' + questions.length + ' questions correctly.');
// restart
questionId = 0;
correctAnswers = 0;
}
displayQuestion();
});
</script>
</p>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>