Project: a quiz app
Ship a complete interactive quiz with scoring, feedback and a results screen.
- Model state cleanly
- Render from data
- Complete a feature end to end
This project combines everything: variables, functions, arrays, DOM updates, events and state. You will build a three-question quiz with a live score and a final result.
- 01Model the questions
An array of objects: question, options and the correct index.
- 02Track state
Keep the current index and score in variables, and re-render after every answer.
- 03Render one question
Create buttons for each option and disable them after an answer.
- 04Finish
Show the score and a restart button when the last question is answered.
const questions = [
{ q: "Which keyword creates a constant?", options: ["let", "const", "var"], answer: 1 },
{ q: "Which method transforms an array?", options: ["map", "push", "splice"], answer: 0 },
{ q: "What does === compare?", options: ["Values only", "Types only", "Values and types"], answer: 2 },
];
let index = 0;
let score = 0;
function render() {
if (index >= questions.length) {
document.body.textContent = `Score: ${score} / ${questions.length}`;
return;
}
// render the current question and options
}Add a restart
Write a restart() function that sets index and score back to 0, then re-renders.
function restart() {
// your code here
}What is the best way to update an interface after state changes?
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Lock in what you just learned.
Mark this lesson complete to save your place and move one step closer to the certificate.