-
Notifications
You must be signed in to change notification settings - Fork 0
/
win1.html
142 lines (137 loc) · 5.84 KB
/
win1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canadian Citizenship Quiz</title>
<link rel="stylesheet" href="win.css">
<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
},
{
question: "What happened at the Battle of the Plains of Abraham?",
options: [
"The Voyagers battled with the British for fur trading rights",
"Americans fought the United Empire Loyalists during the American Revolution",
"The British defeated the French marking the end of France's empire in America",
"The French defeated the British in a battle for Quebec"
],
answer: 2
},
{
question: "What is a Francophone?",
options: [
"A person who speaks English as their first language",
"A smartphone designed by the Canadian company RIM",
"A person who speaks French as their first language",
"The first phone in Canada, invented by Alexander Graham Bell"
],
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
},
// 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>