-
Notifications
You must be signed in to change notification settings - Fork 0
/
winneris.html
109 lines (105 loc) · 4.08 KB
/
winneris.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canadian Citizenship Quiz</title>
<script>
let questions = [
{
question: "What does the Canadian flag look like?",
options: [
"Red and white with provincial emblems.",
"Red and white with a beaver.",
"White with a red border on each end and a red maple leaf in the centre.",
"Red with a white maple leaf."
],
answer: 2
},
{
question: "What does the term “responsible government” mean?",
options: [
"Each person in each electoral district is responsible for voting.",
"The Governor General is responsible for the actions of the Prime Minister.",
"The ministers of the Crown must have the support of a majority of the elected representatives in order to govern.",
"All Canadians are responsible for each other."
],
answer: 2
},
{
question: "What is a majority government?",
options: [
"When the party in power holds about one third of the seats in the House of Commons",
"When the party in power holds about one quarter of the seats in the House of Commons.",
"When the part in power holds at least half of the seats in the Senate.",
"When the party in power holds at least half of the seats in the House of Commons."
],
answer: 4
},
{
question: "What is a voter information card?",
options: [
"Tells you who the candidates are in your electoral district.",
"Tells you what province to vote in.",
"A form that tells you when and where to vote.",
"A form that lets you know your voting time."
],
answer: 3
},
{
question: "What is a major river in Quebec?",
options: [
"Fraser River",
"St. Lawrence River",
"Niagara",
"Hudson's Bay."
],
answer: 1
},
// Add additional questions here in the same format as above
];
let currentQuestion = 0;
let score = 0;
function renderQuestion() {
document.querySelector("#question").innerHTML = questions[currentQuestion].question;
let options = questions[currentQuestion].options;
let optionElements = options.map((option, index) => {
return `<li>
<input type="radio" id="option-${index}" name="option" value="${index}"/>
<label for="option-${index}">${option}</label>
</li>`;
});
document.querySelector("#options").innerHTML = optionElements.join("");
}
function checkAnswer() {
let selectedOption = document.querySelector("input[name='option']:checked").value;
if (selectedOption == questions[currentQuestion].answer) {
score++;
}
currentQuestion++;
if (currentQuestion < questions.length) {
renderQuestion();
} else {
document.querySelector("#quiz").innerHTML = `<h2>You scored ${score} out of ${questions.length}</h2>`;
}
}
</script>
</head>
<body onload="renderQuestion()">
<div id="quiz">
<h2 id="question"></h2>
<ul id="options"></ul>
<button onclick="checkAnswer()">Submit</button>
</div>
<!-- In this example, the questions are stored in an array of objects,
where each object represents a question with its options and correct answer.
The renderQuestion function is responsible for rendering the
current question and options to the page, while the checkAnswer
function checks the selected answer and updates the score.
When the page loads, the first question is displayed using
the renderQuestion function. The user can select an answer
and submit it using the submit button, which will trigger
the checkAnswer function to check the answer and render the
next question (or display the final score if all questions
have been answered). -->
</body>
</html>