JavaScript Project: Quiz app

script.js

…

Console

Lesson notes

Project: Quiz app

Overview of the 5-lesson quiz project: define questions and compute the score.

Project: Quiz app

In this 5-lesson project you'll build a quiz app. Each lesson adds one piece, and by the final lesson you'll have a complete mini application.

You'll do the following:

Define objects holding a question, its options and the correct answer
Collect those objects in an array
Show questions one by one with for...of
Compare the user's answer to the correct one
Keep a score counter and display the result

Ready? Let's start.

Which concepts will you use?

In this project you'll combine concepts you've already learned:

Use an object literal to hold a question, its options and the correct answer
Collect those objects in an array (an array of objects)
Walk through each question with for...of
Turn a string answer into a number with parseInt
Check strict equality with ===
The accumulator pattern: let score = 0 start and score++ update

All were covered in earlier lessons; here we combine them for a real goal.

The project plan

We'll go step by step:

This lesson starts with an empty questions array.
Next we'll define question objects and put them in the array.
Then we'll show questions in turn with for...of and read answers.
After that we'll check correctness with === and bump a score counter.
The final lesson combines everything into a complete quiz app.

Each lesson builds on the previous one's code.

Exercise Declare an empty questions array

As the first step of this project, declare an empty questions array and print it to the console.

Show example solution

// Empty array for the quiz
const questions = [];
console.log(questions);

Test yourself

What's the best way to keep a question and its options in one structure?
- Separate variables per question: q1, options1, answer1, q2, options2, answer2
- An object per question: { question, options, answer } collected in an array
- All questions in one string, separated by line breaks
- A separate variable for every option
Show answer

An object per question: { question, options, answer } collected in an array — Correct! An object bundles related data; an array of objects is easy to loop over.
Match the concepts

questions

Array holding the questions
options

Choices of one question
answer

Index of the correct choice
score

Number of correct answers

Next lesson: Defining question objects