Interactive DOM Quiz Game
Build a quiz game that runs in the browser with plain HTML, CSS and JavaScript: questions with four possible answers appear one at a time, you click an answer and immediately see whether it was right, a countdown limits the time for each question, and at the end a results screen shows your score and a review of every question with the correct answer. Questions are loaded from a JSON array, so new quizzes are easy to write, and your best score is remembered. It's a great first JavaScript project: you'll learn working with the page (the DOM), handling click and keyboard events, arrays and objects, timers with setInterval, shuffling, and saving data in localStorage.
- Estimate
- ~7h
- Steps
- 6
- Completed by
- 0
- Proposed by
- codeseed.app
Vanilla JS · HTML/CSS
Project roadmap
- 01
Write the questions
~1hCreate index.html, style.css and app.js, and a questions.json file with at least 10 questions, each with the question text, four options, the index of the correct option and an optional explanation. Load it with fetch (serving the folder with a simple local server) and check each question has exactly one valid correct answer. Done when: the questions are loaded and printed in the console.
- 02
Show the questions
~1.5hBuild the quiz screen: the question number (such as 3 of 10), the question text and four answer buttons created with document.createElement from the data (using textContent, never innerHTML, so question text can't inject HTML). Shuffle the question order and the options with a Fisher-Yates shuffle at the start of each game. Done when: questions appear one at a time in random order.
- 03
Handle answers
~1.5hWhen an answer is clicked, disable the buttons, color the chosen answer green or red and show the correct one, show the explanation if any, update the score, and move on with a Next button. Support choosing answers with the keys 1 to 4. Record every answer for the review. Done when: answering works with the mouse and keyboard, and the score is correct.
- 04
Show the results
~1hAfter the last question, show the score and percentage, a message depending on the result, and a review list of every question with your answer and the correct one. Save the best score in localStorage and show it on the start screen. Done when: the results screen and review are correct, and the best score is remembered.
- 05
Add a timer and restart
~1hAdd a countdown for each question (for example 20 seconds) with setInterval and a shrinking bar, counting the question as wrong when time runs out, and clearing the timer properly when moving on so timers never pile up. Add a Restart button that reshuffles and starts again. Done when: the timer works on every question, and restarting gives a fresh game.
- 06
Test it
~1hMove the quiz logic (checking answers, scoring, shuffling and validating questions) into functions that don't touch the page, and test them with a few assertions in a test file or with Vitest. Test by hand: answering fast, letting time run out, and restarting mid-quiz. Done when: the logic tests pass, and the manual checks work.
Resources
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack