Build a JavaScript Quiz App - Step by Step Project Tutorial
Learn to build an interactive quiz app in JavaScript with multiple-choice questions, timer, score tracking, progress bar, result screen, and localStorage high score.
What You'll Learn
How to structure quiz data as an array of question objects
How to navigate through questions and track the current index
How to implement a countdown timer per question
How to display immediate feedback (correct / wrong + explanation)
How to show a results screen with score and retry option
Project Overview
A quiz app presents one question at a time. The user picks an answer, gets feedback, and moves to the next question. After all questions, a results screen shows the final score with a breakdown.
Component Structure
How It Works — Flow Diagram
Step-by-Step Build
Step 1 — Quiz Data
Example
const questions = [
{
text: "Which keyword declares a block-scoped variable?",
options: ["var", "let", "function", "const"],
correct: 1, // index of correct answer
explanation: "`let` is block-scoped. `var` is function-scoped. `const` is also block-scoped but immutable."
},
{
text: "What does `typeof null` return?",
options: ["null", "undefined", "object", "string"],
correct: 2,
explanation: "A known JavaScript quirk: `typeof null === 'object'`. It's a bug that was never fixed for backward compatibility."
},
{
text: "Which array method creates a new array?",
options: ["push()", "pop()", "map()", "sort()"],
correct: 2,
explanation: "`map()` returns a new array. `push()`, `pop()`, and `sort()` mutate the original."
},
{
text: "What is the output of `0.1 + 0.2 === 0.3`?",
options: ["true", "false", "NaN", "Error"],
correct: 1,
explanation: "Floating-point precision: `0.1 + 0.2 = 0.30000000000000004`, which is not exactly `0.3`."
},
{
text: "Which method removes the last element of an array?",
options: ["shift()", "pop()", "splice()", "unshift()"],
correct: 1,
explanation: "`pop()` removes and returns the last element. `shift()` removes the first."
}
];
Step 2 — State
js example
let currentIndex = 0;
let score = 0;
let answered = false;
let timerInterval;
let timeLeft = 15;