CodeBlanks Logo Icon CodeBlanks
Login Register

Project: Quiz app

JavaScript course · Beginner · Lesson 77/133

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:

  1. This lesson starts with an empty questions array.
  2. Next we'll define question objects and put them in the array.
  3. Then we'll show questions in turn with for...of and read answers.
  4. After that we'll check correctness with === and bump a score counter.
  5. 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

  1. 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.

  2. Match the concepts

    questions
    Array holding the questions
    options
    Choices of one question
    answer
    Index of the correct choice
    score
    Number of correct answers

All lessons in Beginner

1 Variables and data types

  1. Declaring variables
  2. Difference between const and let
  3. First data types
  4. Difference between null and undefined
  5. The typeof operator
  6. Summary - Variables and types

2 Operators

  1. Arithmetic operators
  2. Assignment operators
  3. Comparison operators
  4. Logical operators
  5. Operator precedence
  6. Summary - Operators

3 Conditionals

  1. The if statement
  2. else and else if
  3. The switch statement
  4. The ternary operator
  5. Comparison pitfalls
  6. Summary - Conditionals

4 Numbers and Math

  1. Integers and decimals
  2. The Math object
  3. Math.random and Math.min/max
  4. NaN and Infinity
  5. Converting to numbers
  6. Summary - Numbers and Math

5 Project: Calculator

  1. Project: Calculator
  2. Number input and operator selection
  3. Computing the operation
  4. Handling error cases
  5. Project final - Calculator

6 String basics

  1. Creating strings
  2. length and character access
  3. String concatenation
  4. Template literals
  5. Escape sequences
  6. Summary - String basics

7 Loops

  1. The for loop
  2. The while loop
  3. The do...while loop
  4. break and continue
  5. Nested loops
  6. Summary - Loops

8 Array basics

  1. Creating and accessing arrays
  2. Adding elements to arrays
  3. Removing elements from arrays
  4. length and index relationship
  5. Multidimensional arrays
  6. Summary - Array basics

9 Functions

  1. Defining and calling functions
  2. The return statement
  3. Parameters and arguments
  4. Function expressions
  5. Scope basics
  6. Summary - Functions

10 Project: Shopping cart

  1. Project: Shopping cart
  2. Defining the product list
  3. Adding products to the cart
  4. Computing the total
  5. Project final - Shopping cart

11 Array iteration

  1. Looping with forEach
  2. The for...of loop
  3. Searching with indexOf
  4. Checking with includes
  5. findIndex and some
  6. Summary - Array iteration

12 Array transformations

  1. Transforming with map
  2. Filtering with filter
  3. Finding with find
  4. some and every
  5. Reducing with reduce
  6. Summary - Array transformations

13 Objects

  1. Creating objects
  2. Property access
  3. Adding and changing properties
  4. Defining methods
  5. The this keyword
  6. Summary - Objects

14 Project: Quiz app

  1. Project: Quiz app
  2. Defining question objects
  3. Showing questions and getting answers
  4. Computing the score
  5. Project final - Quiz

15 Parameters

  1. Default parameters
  2. The rest parameter
  3. The arguments object
  4. Return value types
  5. Helper functions
  6. Summary - Parameters

16 Boolean logic

  1. Boolean values
  2. Short-circuit evaluation
  3. Nullish coalescing
  4. Optional chaining
  5. Logical assignment
  6. Summary - Boolean logic

17 Type conversion

  1. Explicit type conversion
  2. Implicit type coercion
  3. Difference between == and ===
  4. Truthy and falsy values
  5. Common conversion pitfalls
  6. Summary - Type conversion

18 Project: To-do list

  1. Project: To-do list
  2. Designing the task object
  3. Adding and listing tasks
  4. Completing and deleting tasks
  5. Project final - To-do list

19 Advanced string methods

  1. slice and substring
  2. replace and replaceAll
  3. split and join
  4. trim, padStart, padEnd
  5. Case and includes
  6. Summary - Advanced string methods

20 Console methods

  1. console.log basics
  2. console.warn and console.error
  3. Tables with console.table
  4. console.group and groupEnd
  5. Timing with console.time
  6. Summary - Console methods

21 Errors

  1. try...catch basics
  2. Throwing errors with throw
  3. The Error object
  4. The finally block
  5. Common error types
  6. Summary - Errors

22 Debugging

  1. What is debugging?
  2. Call traces with console.trace
  3. The debugger statement
  4. Checking with console.assert
  5. Common bug patterns
  6. Summary - Debugging

23 Beginner final

  1. Challenge - Calculator
  2. Challenge - Array operations
  3. Challenge - Object management
  4. Challenge - String operations
  5. Challenge - Error handling