Overview
This is your first real JavaScript project: a fully working multiple-choice quiz that lives in a browser. You'll write the HTML structure, style it with CSS, and add JavaScript that responds to clicks, tracks a score, and shows a results screen when the quiz ends. No libraries, no frameworks — just the three core web technologies working together.
By the end you'll have a quiz you can share with anyone by sending them an HTML file, and you'll understand the fundamental JavaScript concepts that power every interactive website you've ever used.
What You'll Learn
- How HTML, CSS, and JavaScript work together in a browser
- DOM manipulation: selecting elements and changing their content with JavaScript
- Arrays of objects, loops, and conditionals in JavaScript
- Event listeners and how user interactions trigger code
Background
HTML defines the structure and content of a web page. CSS describes how that content looks. JavaScript makes it respond to user actions. These three technologies form the foundation of every website and web app in existence, and they run directly in the browser with no installation required.
JavaScript is event-driven: code runs when something happens — a button is clicked, a key is pressed, a page finishes loading. The Document Object Model (DOM) is the programming interface between JavaScript and the HTML page. When you write document.getElementById('score'), you're reaching into the live page and grabbing a specific element you can then read or change.
Arrays, loops, and conditionals are the three structures this project is built on. Questions are stored in an array of objects. A loop advances through them one at a time. Conditionals check whether the user's answer was correct and update the score accordingly. These patterns are universal — they work the same way in Python, Java, Swift, and every other major language.
Materials
Everything on this list is either free or available at a dollar store. No lab equipment required.
Step-by-Step Procedure
-
1
Write your quiz questions
Before touching code, write out 10 questions on paper. For each question, write four answer options and mark the correct one. Keep questions on a single topic you know well — science, movies, geography, history — so you can verify correctness easily. This content-first approach is how developers work: define the data before writing the interface.
Create a new folder on your computer called "quiz-app." Inside it, create one file: index.html. Open it in VS Code or any text editor.💡Odd-numbered correct answers (1st or 3rd option) are less guessable than always making option A correct. Vary which position holds the correct answer.
-
2
Set up the HTML structure
Paste this starter HTML into your index.html file and fill in the page title with your quiz name. The structure needs: a heading for the question text, four buttons for answers, a div showing current question number and score, and a hidden results div that shows at the end. Use simple class names like "question", "answer-btn", "score-display", and "results" — your CSS and JavaScript will target these same names.
Open index.html in your browser to see the structure. It will look plain and unstyled — that's expected. Add a style block in the head section and add basic CSS: a centered max-width container, button styling with hover states, and color classes called "correct" (green background) and "incorrect" (red background) that you'll apply with JavaScript.💡Put all your CSS in a <style> tag inside <head> for now — one file is easier to manage than two when you're learning.
-
3
Build the questions array in JavaScript
Add a <script> tag at the bottom of your HTML, just before </body>. Inside it, create a JavaScript array called questions. Each element of the array is an object with three properties: question (the question text as a string), answers (an array of four strings), and correct (the index number of the right answer, 0 through 3).
Type in all 10 of your questions in this format. This is your data layer — completely separate from your interface code. A professional app would load this from a database or API; for now a hardcoded array is perfect for learning.💡Index 0 is the first item in an array. If the correct answer is the third option, correct: 2.
-
4
Write the display and answer logic
Write a function called showQuestion(index) that: gets the question object at questions[index], sets the question element's textContent to the question string, and loops through the four answer buttons setting each one's text to the matching answer string. Call showQuestion(0) at the bottom of your script to display the first question when the page loads.
Then add click event listeners to all four answer buttons. When clicked, each button should check whether its index matches the correct answer for the current question. If yes: add the "correct" class to that button and add 1 to a score variable. If no: add the "incorrect" class. After a short delay (setTimeout, 800ms), advance to the next question by calling showQuestion with the next index.💡Store the current question index in a variable called currentIndex that starts at 0 and increments by 1 after each answer.
-
5
Add the results screen and test everything
When currentIndex reaches questions.length (the end of the array), instead of calling showQuestion, hide the quiz container and show the results div. Display the final score as text: "You got 7 out of 10 correct!" Add a "Play Again" button that resets currentIndex and score to 0, hides results, shows the quiz, and calls showQuestion(0).
Test every question, deliberately answer some wrong to confirm incorrect highlighting works, answer the last question to confirm the results screen appears, and click Play Again to confirm the reset works. Share the index.html file with a friend and watch them play your quiz.
Expected Results
Your finished quiz will: display one question at a time with four answer buttons, highlight the correct answer green and incorrect answers red when clicked, advance to the next question automatically, and show a final score screen when all questions are answered. The entire thing will run by opening a single .html file in any browser.
If buttons aren't responding to clicks, open the browser developer console (F12 > Console tab) and look for error messages in red. JavaScript errors are specific — they tell you the line number and what went wrong. Reading error messages is a core developer skill.
Your results may differ — and that's valuable data, not a mistake. Document what you actually observed, not what you expected.
Going Further
Add a Countdown Timer
Add a 15-second timer for each question using setInterval. Display the countdown on screen. If time runs out before an answer is selected, mark the question as incorrect and advance automatically. This requires managing the interval carefully — make sure to clear it with clearInterval when an answer is clicked or time expires, otherwise multiple timers will stack up.
Shuffle the Questions
Add a shuffle function that randomizes the order of questions each time the quiz starts. A simple shuffle algorithm (Fisher-Yates) is 10 lines of JavaScript and is worth memorizing. Also shuffle the order of the four answer options for each question, updating the correct index to match the new position. Now no two playthroughs are identical.
Save the High Score
Use localStorage — the browser's built-in key-value store — to remember the player's highest score between sessions. After each quiz, compare the current score to the stored high score and update it if it's higher. Display the high score on the results screen. localStorage.setItem() and localStorage.getItem() are the only two methods you need.
