Projects›Extra· 120 min read

Project: Quiz App

Build a multiple-choice quiz that scores the user — logic, events and the DOM working together.

Build a small quiz: store questions as an array of objects, show each one, let the user answer, and show their final score.

Here is the same plan as the ordered steps to build it in:

Set up your data: make an array of question objects, each shaped { question, options, answer }, and a score starting at 0.
Track position: keep a current index (starting at 0) for which question is showing.
Render the current question: read questions[current] and show its question text plus one button per item in options.
Handle the answer: when an option button is clicked, compare it with that question’s answer; if it matches, add 1 to score.
Move on: increase current by 1 and render the next question — or, if there are no more, show the result.
Show the result: when current reaches the end, display the final score out of the total number of questions.

Tip: This project cements arrays of objects, map, events and DOM updates — exactly the data-and-render pattern you will use in React.

Note: Start simple (one question working end-to-end), then loop to the next. Build incrementally — get one thing working before adding the next.