The logic of this quiz app is simple: all questions are stored in an array as objects, where each object contains the question, options, and the correct answer; a variable called currentQuestion keeps track of which question is currently being shown, and another variable score counts how many answers are correct; when the page loads, the loadQuestion() function displays the first question and its options on the screen; when a user clicks an option button, the checkAnswer() function compares the clicked option with the correct answer of the current question, increases the score if it is correct, and then moves to the next question by increasing currentQuestion; if there are more questions, the next one is loaded after a short delay, and if all questions are finished, the quiz stops and the final score is displayed.
<!DOCTYPE html>
<!-- Defines HTML5 document -->
<html>
<head>
<title>Multi Question Quiz</title>
</head>
<body>
<h2>JavaScript Quiz</h2>
<!-- Quiz heading -->
<p id="question"></p>
<!-- Question text will appear here -->
<button onclick="checkAnswer('a')">A</button>
<!-- Option A button -->
<button onclick="checkAnswer('b')">B</button>
<!-- Option B button -->
<button onclick="checkAnswer('c')">C</button>
<!-- Option C button -->
<p id="result"></p>
<!-- Shows Correct / Wrong message -->
<p id="score"></p>
<!-- Shows score -->
<script>
// Array that stores all quiz questions
let quiz = [
{
question: "What is JavaScript?",
a: "A database",
b: "A programming language",
c: "An operating system",
correct: "b"
},
{
question: "Which symbol is used for comments in JavaScript?",
a: "//",
b: "<!-- -->",
c: "#",
correct: "a"
},
{
question: "Which keyword is used to declare a variable?",
a: "var",
b: "int",
c: "string",
correct: "a"
}
];
let currentQuestion = 0;
// Keeps track of which question is being shown
let score = 0;
// Stores total correct answers
// Function to load a question
function loadQuestion() {
document.getElementById("question").innerHTML =
quiz[currentQuestion].question + "<br><br>" +
"a) " + quiz[currentQuestion].a + "<br>" +
"b) " + quiz[currentQuestion].b + "<br>" +
"c) " + quiz[currentQuestion].c;
// Clear previous result
document.getElementById("result").innerHTML = "";
}
// Load first question when page opens
loadQuestion();
// Function to check user's answer
function checkAnswer(answer) {
if (answer === quiz[currentQuestion].correct) {
// If answer is correct
score++;
// Increase score
document.getElementById("result").innerHTML = "✅ Correct!";
} else {
// If answer is wrong
document.getElementById("result").innerHTML = "❌ Wrong!";
}
currentQuestion++;
// Move to next question
if (currentQuestion < quiz.length) {
// If more questions exist
setTimeout(loadQuestion, 1000);
// Load next question after 1 second
} else {
// Quiz finished
document.getElementById("question").innerHTML =
"🎉 Quiz Finished!";
document.getElementById("score").innerHTML =
"Your Score: " + score + " / " + quiz.length;
}
}
</script>
</body>
</html>