A quiz game

The problem

Build a browser quiz that asks one question at a time, tells the player whether each answer was right, and shows a final score with a chance to play again.

Requirements

• Questions are held in an array of objects, and the page is built from that data
• One question is shown at a time, with a real button for each answer
• After an answer, the buttons are turned off and the correct answer is marked
• A Next button moves on, and the score is shown at the end
• A Play again button restarts the game with no page reload
• The whole game can be played with a keyboard

Technologies

• HTML
• CSS
• JavaScript
• The DOM
• Event delegation

Step by step

1. Write the questions as an array of objects, each with the text, the options and the index of the right answer.
2. Write the HTML for the page, with an empty area for the question.
3. Keep the state in a few variables: the current question and the score.
4. Write one render function that draws the current question from the state.
5. Use one click listener on the answers area to find which answer was chosen.
6. Mark the right and wrong answers with classes, and update the score.
7. Add the Next button, then the end screen, and finally Play again.
8. Test it with only the keyboard, and with a question that has a long answer.

Expected result

A complete game that can be played repeatedly, with the page always drawn from one small set of variables.

How it is evaluated

• Adding a question needs only a change to the data
• The score is always correct, even when playing again
• Answers cannot be changed once they are chosen
• Colour is not the only way of showing a right or wrong answer

Ways to improve it

• Shuffle the questions and the answers
• Add a timer for each question
• Remember the best score with localStorage