-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
194 lines (174 loc) · 5.75 KB
/
script.js
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
const quizData = [
{
question: "What does HTML stand for?",
options: [
"HyperText Markup Language",
"Hyper Tool Markup Language",
"HighText Machine Language",
"HighText Marking Language",
],
answer: "HyperText Markup Language",
},
{
question: "Which tag is used to create a hyperlink in HTML?",
options: ["<link>", "<a>", "<href>", "<hyperlink>"],
answer: "<a>",
},
{
question:
"Which CSS property is used to change the text color of an element?",
options: ["text-color", "font-color", "color", "background-color"],
answer: "color",
},
{
question: "In JavaScript, which symbol is used for single-line comments?",
options: ["//", "/* */", "<!-- -->", "#"],
answer: "//",
},
{
question: "Which HTML tag is used for inserting a line break?",
options: ["<br>", "<lb>", "<break>", "<newline>"],
answer: "<br>",
},
{
question: "What does CSS stand for?",
options: [
"Creative Style Sheets",
"Cascading Style Sheets",
"Colorful Style Sheets",
"Computer Style Sheet",
],
answer: "Cascading Style Sheets",
},
{
question: "In JavaScript, which keyword is used to declare a variable?",
options: ["variable", "var", "vbl", "declare"],
answer: "var",
},
{
question: "What is the purpose of the <head> tag in HTML?",
options: [
"To define the main content",
"To store metadata about the document",
"To display the title of the document",
"To link stylesheets only",
],
answer: "To store metadata about the document",
},
{
question:
"Which method is used to remove the last element from an array in JavaScript?",
options: ["removeLast()", "pop()", "delete()", "shift()"],
answer: "pop()",
},
{
question: "Which HTML attribute is used to specify an inline style?",
options: ["font", "styles", "style", "css"],
answer: "style",
},
];
const quizContainer = document.getElementById("quiz");
const resultContainer = document.getElementById("result");
const submitButton = document.getElementById("submit");
const retryButton = document.getElementById("retry");
const showAnswerButton = document.getElementById("showAnswer");
let currentQuestion = 0;
let score = 0;
let incorrectAnswers = [];
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function displayQuestion() {
const questionData = quizData[currentQuestion];
const questionElement = document.createElement("div");
questionElement.className = "question";
questionElement.innerHTML = `${currentQuestion + 1}. ${
questionData.question
}`;
const optionsElement = document.createElement("div");
optionsElement.className = "options";
const shuffledOptions = [...questionData.options];
shuffleArray(shuffledOptions);
for (let i = 0; i < shuffledOptions.length; i++) {
const option = document.createElement("label");
option.className = "option";
const radio = document.createElement("input");
radio.type = "radio";
radio.name = "quiz";
radio.value = shuffledOptions[i];
const optionText = document.createTextNode(shuffledOptions[i]);
option.appendChild(radio);
option.appendChild(optionText);
optionsElement.appendChild(option);
}
quizContainer.innerHTML = "";
quizContainer.appendChild(questionElement);
quizContainer.appendChild(optionsElement);
}
function checkAnswer() {
const selectedOption = document.querySelector('input[name="quiz"]:checked');
if (selectedOption) {
const answer = selectedOption.value.trim(); // Trim whitespace to avoid mismatch
if (answer === quizData[currentQuestion].answer) {
score++;
} else {
incorrectAnswers.push({
question: quizData[currentQuestion].question,
incorrectAnswer: answer,
correctAnswer: quizData[currentQuestion].answer,
});
}
currentQuestion++;
if (currentQuestion < quizData.length) {
displayQuestion();
} else {
displayResult();
}
}
}
function displayResult() {
quizContainer.style.display = "none";
submitButton.style.display = "none";
retryButton.style.display = "inline-block";
showAnswerButton.style.display = "inline-block";
resultContainer.innerHTML = `You scored ${score} out of ${quizData.length}!`;
}
function retryQuiz() {
currentQuestion = 0;
score = 0;
incorrectAnswers = [];
quizContainer.style.display = "block";
submitButton.style.display = "inline-block";
retryButton.style.display = "none";
showAnswerButton.style.display = "none";
resultContainer.innerHTML = "";
displayQuestion();
}
function showAnswer() {
quizContainer.style.display = "none";
submitButton.style.display = "none";
retryButton.style.display = "inline-block";
showAnswerButton.style.display = "none";
let incorrectAnswersHtml = "";
for (let i = 0; i < incorrectAnswers.length; i++) {
incorrectAnswersHtml += `
<p>
<strong>Question:</strong> ${incorrectAnswers[i].question}<br>
<strong>Your Answer:</strong> ${incorrectAnswers[i].incorrectAnswer}<br>
<strong>Correct Answer:</strong> ${incorrectAnswers[i].correctAnswer}
</p>
`;
}
resultContainer.innerHTML = `
<p>You scored ${score} out of ${quizData.length}!</p>
<p>Incorrect Answers:</p>
${incorrectAnswersHtml}
`;
}
submitButton.addEventListener("click", checkAnswer);
retryButton.addEventListener("click", retryQuiz);
showAnswerButton.addEventListener("click", showAnswer);
displayQuestion();