const questions = [
question: "What is coding?",
answer: [
{ text: "Writing instructions for a computer", correct: true },
{ text: "Drawing pictures", correct: false },
{ text: "Playing games", correct: false },
{ text: "Watching videos", correct: false },
},
question: "Which language is mainly used to structure web pages?",
answer: [
{ text: "Python", correct: false },
{ text: "HTML", correct: true },
{ text: "Java", correct: false },
{ text: "C++", correct: false },
},
question: "Which language is used to style web pages?",
answer: [
{ text: "HTML", correct: false },
{ text: "CSS", correct: true },
{ text: "Python", correct: false },
{ text: "SQL", correct: false },
},
question: "Which language is commonly used to add interactivity to web pages?",
answer: [
{ text: "CSS", correct: false },
{ text: "HTML", correct: false },
{ text: "JavaScript", correct: true },
{ text: "SQL", correct: false },
},
question: "Which symbol is used to create a comment in JavaScript?",
answer: [
{ text: "//", correct: true },
{ text: "##", correct: false },
{ text: "<!-- -->", correct: false },
{ text: "**", correct: false },
},
{
question: "Which keyword is used to declare a constant in JavaScript?",
answer: [
{ text: "let", correct: false },
{ text: "var", correct: false },
{ text: "const", correct: true },
{ text: "constant", correct: false },
},
question: "Which of these is used to store multiple values in JavaScript?",
answer: [
{ text: "Array", correct: true },
{ text: "Button", correct: false },
{ text: "Color", correct: false },
{ text: "Browser", correct: false },
},
question: "What does HTML stand for?",
answer: [
{ text: "Hyper Text Markup Language", correct: true },
{ text: "High Tech Modern Language", correct: false },
{ text: "Hyperlink Text Management Language", correct: false },
{ text: "Home Tool Markup Language", correct: false },
]
},
question: "Which HTML tag is used to create a paragraph?",
answer: [
{ text: "<h1>", correct: false },
{ text: "<p>", correct: true },
{ text: "<div>", correct: false },
{ text: "<br>", correct: false },
},
question: "Which method is commonly used to print something to the browser console
in JavaScript?",
answer: [
{ text: "print()", correct: false },
{ text: "[Link]()", correct: true },
{ text: "display()", correct: false },
{ text: "[Link]()", correct: false },
];
// ========================================
// GET HTML ELEMENTS
// ========================================
const questionElement = [Link]('question');
const answerButton = [Link]('answer-buttons');
const nextButton = [Link]('next-btn');
// ========================================
// VARIABLES
// ========================================
let currentQuestionIndex = 0;
let score = 0;
// ========================================
// START QUIZ
// ========================================
function startQuestion() {
currentQuestionIndex = 0;
score = 0;
[Link] = 'Next';
showQuestions();
// ========================================
// SHOW QUESTIONS
// ========================================
function showQuestions() {
restart();
const currentQuestion = questions[currentQuestionIndex];
const questionNo = currentQuestionIndex + 1;
[Link] =
questionNo + ". " + [Link];
[Link]((answer) => {
const button = [Link]('button');
[Link] = [Link];
[Link]('btn');
// Store true OR false
// This is important for local logic
[Link] = [Link];
[Link](button);
[Link]("click", selectAswer);
});
// ========================================
// RESET ANSWERS
// ========================================
function restart() {
[Link] = "none";
while ([Link]) {
[Link](
[Link]
);
// ========================================
// SELECT ANSWER
// ========================================
function selectAswer(e) {
const selectBtn = [Link];
const isCorrect =
[Link] === "true";
// If correct
if (isCorrect) {
[Link]('correct');
score++;
// If incorrect
else {
[Link]('incorrect');
// Show correct answer
[Link]([Link]).forEach(button => {
if ([Link] === 'true') {
[Link]('correct');
// Disable all answers
[Link] = true;
});
// Show Next button
[Link] = "block";
// ========================================
// SAVE RESULT TO LOCAL STORAGE
// ========================================
function saveResult() {
const percentage =
[Link]((score / [Link]) * 100);
const result = {
score: score,
total: [Link],
percentage: percentage,
date: new Date().toLocaleString()
};
// Convert object to JSON
const resultData =
[Link](result);
// Save to localStorage
[Link](
"quizResult",
resultData
);
[Link]("Result saved to localStorage");
[Link](result);
}
// ========================================
// GET RESULT FROM LOCAL STORAGE
// ========================================
function getResult() {
const savedResult =
[Link]("quizResult");
// If there is no result
if (savedResult === null) {
[Link]("No result found in localStorage");
return null;
// Convert JSON back to object
const result =
[Link](savedResult);
[Link]("Result retrieved from localStorage:");
[Link](result);
return result;
// ========================================
// SHOW SCORE
// ========================================
function showScore() {
// Save current result
saveResult();
// Get the saved result
const savedResult = getResult();
restart();
// Display saved result
[Link] = `
Your score is
${[Link]}
out of
${[Link]}
<br><br>
Percentage:
${[Link]}%
`;
[Link] = 'Play Again';
[Link] = 'block';
// ========================================
// NEXT QUESTION
// ========================================
function handleNExtQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < [Link]) {
showQuestions();
else {
showScore();
// ========================================
// NEXT BUTTON
// ========================================
[Link]('click', () => {
if (currentQuestionIndex < [Link] - 1) {
handleNExtQuestion();
}
else {
startQuestion();
});
// ========================================
// START QUIZ
// ========================================
startQuestion();
// ========================================
// CHECK PREVIOUS RESULT
// ========================================
const previousResult = getResult();
if (previousResult !== null) {
[Link]("Previous quiz result:");
[Link]("Score:", [Link]);
[Link]("Total:", [Link]);
[Link]("Percentage:", [Link] + "%");
[Link]("Date:", [Link]);