In this article we’re going to learn how to create Quiz app. We’re going to start with a .HTML, .CSS and then proceed to .JS, where we are going to take a deeper look at the code and explain it.
HTML code is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="quiz-container">
<h1>JavaScript Quiz</h1>
<div id="question-container">
<p id="question">Loading...</p>
<div id="answer-buttons"></div>
</div>
<button id="next-btn">Next</button>
<p id="score">Score: 0</p>
<p id="timer">Time Left: 30</p>
</div>
<script src="script.js"></script>
</body>
</html>Here’s the .CSS:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
#quiz-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
button {
margin-top: 10px;
padding: 10px 15px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
#answer-buttons button {
display: block;
margin: 5px 0;
width: 100%;
}Through a Quiz App we’ll pay more attention to JavaScript, especially DOM manipulation, arrays, event handling, and timers. We’ll take it step by step and build on each concept. And now let’s take a look at .JS:
const questions = [
{
question: "What does DOM stand for?",
answers: [
{ text: "Document Object Model", correct: true },
{ text: "Data Object Model", correct: false },
{ text: "Document Oriented Method", correct: false },
{ text: "Desktop Object Management", correct: false }
]
},
{
question: "Which keyword is used to declare a variable in JavaScript?",
answers: [
{ text: "var", correct: true },
{ text: "int", correct: false },
{ text: "let", correct: true },
{ text: "both var and let", correct: true }
]
}
];
const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");
let currentQuestionIndex = 0;
let score = 0;
let timeLeft = 30;
let timer;
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
timeLeft = 30;
nextButton.innerText = "Next";
startTimer();
showQuestion();
}
function startTimer() {
timer = setInterval(() => {
timeLeft--;
timerDisplay.innerText = `Time Left: ${timeLeft}`;
if (timeLeft <= 0) {
clearInterval(timer);
alert("Time's up!");
showScore();
}
}, 1000);
}
function showQuestion() {
resetState();
const currentQuestion = questions[currentQuestionIndex];
questionElement.innerText = currentQuestion.question;
currentQuestion.answers.forEach(answer => {
const button = document.createElement("button");
button.innerText = answer.text;
button.classList.add("btn");
if (answer.correct) {
button.dataset.correct = answer.correct;
}
button.addEventListener("click", selectAnswer);
answerButtons.appendChild(button);
});
}
function resetState() {
nextButton.style.display = "none";
answerButtons.innerHTML = "";
}
function selectAnswer(e) {
const selectedButton = e.target;
const correct = selectedButton.dataset.correct === "true";
if (correct) {
score++;
scoreDisplay.innerText = `Score: ${score}`;
}
Array.from(answerButtons.children).forEach(button => {
if (button.dataset.correct === "true") {
button.style.backgroundColor = "green";
} else {
button.style.backgroundColor = "red";
}
button.disabled = true;
});
nextButton.style.display = "block";
}
function showScore() {
resetState();
questionElement.innerText = `You scored ${score} out of ${questions.length}`;
nextButton.innerText = "Play Again";
nextButton.style.display = "block";
}
nextButton.addEventListener("click", () => {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
showQuestion();
} else {
clearInterval(timer);
showScore();
}
});
startQuiz();Let's break the .JS code step by step, but first let's summarize what the code does.
- Shows a question with multiple-choice answers
- Tracks your score
- Has a timer counting down from 30 seconds
- Moves to the next question when you click "Next"
- Shows your score at the end
Now let’s walk through each part of the code.
An Array of Objects: The Questions Array
const questions = [
{
question: "What does DOM stand for?",
answers: [
{ text: "Document Object Model", correct: true },
{ text: "Data Object Model", correct: false },
{ text: "Document Oriented Method", correct: false },
{ text: "Desktop Object Management", correct: false }
]
},
...
];This is a list of quiz questions - a basic data structure. Each question has:
- a question string (the text you’ll see)
- an answers array with 4 answer choices
- each answer has text (Document Object Model, Data Object Model, ... ) and correct (true or false)
So you’re working with an array ([]) of objects ({}) that each contain a string and an array of more objects (the answer choices).
Grabbing HTML Elements
const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");Here we’re getting elements from the HTML page using their id. This allows JavaScript to change their content later.
For example, questionElement lets us change the question text, answerButtons is where we add buttons for each answer, nextButton moves to the next question, scoreDisplay shows your score, timerDisplay shows the countdown.
Setting Initial Values
let currentQuestionIndex = 0; // variable that keeps track of which question you're on
let score = 0; // variable of your current score
let timeLeft = 30; // variable of how much time is left
let timer; // variable of a reference to the countdown Start the Quiz
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
timeLeft = 30;
nextButton.innerText = "Next";
startTimer();
showQuestion();
}This function sets everything back to the beginning when you start or restart the quiz.
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
timeLeft = 30;
nextButton.innerText = "Next";
startTimer();
showQuestion();
}First, we define a function called startQuiz, then with the currentQuestionIndex = 0; we
define which question we're starting on - since 0 means the first question in the array, we start with the first question - and also keep track of which question to show next. score = 0; resets the score back to 0. Why? So that if you're playing again, you don’t keep the score from the previous round. Fresh game, fresh score! timeLeft = 30; resets the timer to 30 seconds - just like the score, we want to start the timer fresh each time the quiz begins. Later in the code, the timer counts down from this number. nextButton.innerText = "Next"; sets the text of the “Next” button to say "Next". This is because later, at the end of the quiz, the same button gets changed to say “Play Again”, and we’re making sure it says “Next” again when a new game starts. startTimer(); and showQuestion(); call another two functions - we'll go through these two in a bit.
In short, function startQuiz() sets everything back to the beginning when you start or restart the quiz. It resets the score and timer, calls startTimer() to begin countdown and calls showQuestion() to show the first question.
function startTimer() starts the countdown
function startTimer() {
timer = setInterval(() => {
timeLeft--;
timerDisplay.innerText = `Time Left: ${timeLeft}`;
if (timeLeft <= 0) {
clearInterval(timer);
alert("Time's up!");
showScore();
}
}, 1000);
}So, function startTimer() creates a function named startTimer. When we call it, like we did in startQuiz(), it starts the countdown. Let's go through the function line by line:
timer = setInterval(() => { ... }, 1000); creates the magic that makes something happen every second. setInterval() runs the function inside it over and over; 1000 = 1000 milliseconds = 1 second, which means: “Run the code inside this arrow function every second.”
Inside the setInterval function we have timeLeft--; which decreases the timeLeft variable by 1. It's the same as saying: timeLeft = timeLeft - 1; so every second, it counts down by one (e.g. 30 → 29 → 28…) And then timerDisplay.innerText = `Time Left: ${timeLeft}`; updates what you see on the page. It changes the text inside the element with ID timer to show the new time.
if (timeLeft <= 0) {
clearInterval(timer);
alert("Time's up!");
showScore();
}This part says: if the time has run out (0 or less)... clearInterval(timer); stop the timer from continuing, and pop alert box: "Time's up!" showScore() function ends the quiz and shows your score.
In plain English startTimer() starts counting down from 30. Every second, it takes 1 second away and updates the screen. If time hits 0, it stops the clock, shows a message, and shows the player’s score.
function showQuestion() displays the current quiz question
function showQuestion() {
resetState();
const currentQuestion = questions[currentQuestionIndex];
questionElement.innerText = currentQuestion.question;
currentQuestion.answers.forEach(answer => {
const button = document.createElement("button");
button.innerText = answer.text;
button.classList.add("btn");
if (answer.correct) {
button.dataset.correct = answer.correct;
}
button.addEventListener("click", selectAnswer);
answerButtons.appendChild(button);
});
}resetState(); clears out the old answer buttons and hides the "Next" button. Without this line, old answers would stack up below each question.
const currentQuestion = questions[currentQuestionIndex]; grabs the current question from the questions array. Remember that the currentQuestionIndex keeps track of which one we’re on (starts at 0). So if we’re on the first question, it grabs the one at questions[0].
questionElement.innerText = currentQuestion.question; updates the question text in the HTML - it replaces "Loading..." or whatever was there with the real question.
currentQuestion.answers.forEach(answer => {
const button = document.createElement("button");
button.innerText = answer.text;
...
});This loop goes through every answer in the answers array. And for each one, it:
- Creates a new button with document.createElement("button")
- Sets the button text to the answer (like "Document Object Model")
- Adds a class btn (for styling)
- If it's the correct answer, it stores that info inside the button using dataset.correct
- Adds a click event so it knows when the user chooses this answer
- Adds the button to the page inside the answer container
In plain English showQuestion() clears out the old stuff, it gets the current question and its answers, and puts the question on the screen. Then it creates a button for each answer and show them.
function resetState();
resetState(); clears out the old answer buttons and hides the "Next" button. Without this line, old answers would stack up below each question.
Selecting an answer with function selectAnswer(e)
Let's dive into selectAnswer() — this is where the quiz reacts when you choose an answer:
function selectAnswer(e) {
const selectedButton = e.target;
const correct = selectedButton.dataset.correct === "true";
if (correct) {
score++;
scoreDisplay.innerText = `Score: ${score}`;
}
Array.from(answerButtons.children).forEach(button => {
if (button.dataset.correct === "true") {
button.style.backgroundColor = "green";
} else {
button.style.backgroundColor = "red";
}
button.disabled = true;
});
nextButton.style.display = "block";
}This function runs when you click one of the answer buttons. Earlier in showQuestion(), we had button.addEventListener("click", selectAnswer); which tells the browser to run the selectAnswer() function if someone clicks this button.
Now let's break the function selectAnswer(e) down step by step. We're defining a function that receives an event object e. This e contains information about what was clicked, among other things: const selectedButton = e.target; where e.target is the button you clicked on. We're saving that button in a variable called selectedButton so we can use it more easily.
This line const correct = selectedButton.dataset.correct === "true"; checks if the button has a data-correct="true" attribute. If it does, that means it's the correct answer! We store the result in a variable correct, which will be true or false. dataset.correct is a string (not boolean), which is why we check === "true". That’s great detail to call out for readers wondering why it’s not just if (selectedButton.dataset.correct).
Remember: earlier in showQuestion() we added this line for correct answers: button.dataset.correct = answer.correct; and that’s where this “correct” info comes from.
if (correct) { score++; ... } means if the button was correct, we increase the score (score++) and we
update the score display on the page scoreDisplay.innerText = `Score: ${score}`;. We also highlight all answers - if the button is correct, it turns green and if it's wrong, it turns red. It disables the buttons so you can't click another answer:
Array.from(answerButtons.children).forEach(button => {
if (button.dataset.correct === "true") {
button.style.backgroundColor = "green";
} else {
button.style.backgroundColor = "red";
}
button.disabled = true;
});This part shows the "Next" button nextButton.style.display = "block";, so after answering, you see the "Next" button appear and you can move on.
In plain English, when a user clicks an answer, check if it’s the correct one. If it is, increase their score. Show which answer was right (green) and which were wrong (red). Disable all answer buttons so they can’t click again. Show the 'Next' button so they can continue.
Displaying the final score
showScore() is called when the quiz ends — either because the user answered all questions, or because time ran out. It clears the previous question UI and displays the final score.
function showScore() {
resetState();
questionElement.innerText = `You scored ${score} out of ${questions.length}`;
nextButton.innerText = "Play Again";
nextButton.style.display = "block";
}We've already met resetState(); in function showQuestion(), which clears out the UI elements from the previous question. It ensures that when we show the final score, there’s no leftover clutter from the quiz UI. questionElement.innerText = `You scored ${score} out of ${questions.length}`; updates the question area to display the final result. ${score} inserts the user's current score. ${questions.length} is the total number of questions. For example, if the user scored 2 out of 3: "You scored 2 out of 3"
nextButton.innerText = "Play Again"; changes the label on the "Next" button to say "Play Again". This way we're reusing the same button instead of creating a new one. nextButton.style.display = "block"; makes the "Next"/"Play Again" button visible again, and clicking this will trigger the nextButton event listener, which restarts the quiz from the beginning if we’re at the end of the questions.
So, to sum up this function clears the old question UI, shows the final score and then updates the button so the user can restart the quiz.
But what is this part all about?
nextButton.addEventListener("click", () => {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
showQuestion();
} else {
clearInterval(timer);
showScore();
}
});
We're dealing with an EventListener here, so when someone clicks the Next button, run the following function.
if (currentQuestionIndex < questions.length - 1) checks if you're not on the last question yet: questions.length gives the number of questions (e.g. 2) and since array indexes start at 0, so the last question is at index length - 1. If the current question index is less than that, then we’re not at the end yet.
currentQuestionIndex++; means if we’re not on the last question, this line increases the question index by 1. So if we were on question 0, we go to 1 - basically, move on to the next question. And after increasing the index, we show the next question by calling the showQuestion() function again. This is just like at the start — it clears the old answers and displays the new one.
But, if we're on the last question clearInterval(timer) and showScore() will run instead. clearInterval(timer) stops the timer (so it doesn’t keep counting down) and showScore(); shows your final score with a message.
In conclusion
And there you have it — a fully functional JavaScript Quiz App! Through this simple project, we explored and practiced some of the most important concepts in JavaScript development, including:
- Working with arrays of objects to structure data
- DOM manipulation to dynamically change content on the page
- Handling events like button clicks
- Using conditional logic to check answers and control game flow
- Managing a countdown timer with setInterval()
By breaking the code down step by step, we’ve seen how each part plays a role in creating an interactive user experience — from displaying questions to calculating scores and giving feedback.
This project is a great foundation for beginners. You now have the skills to build on it further — try adding features like:
- Randomizing the questions
- Adding more questions
- Saving high scores
- Using a start or end screen
- Styling the app with custom themes
Keep experimenting and building! The more you practice, the more confident you’ll become with JavaScript and web development as a whole.