How to make a quiz on JavaScript

Learn how to create a JavaScript quiz with an example, including planning and implementation steps.

Creating a quiz using JavaScript can be a great way to test user knowledge and keep track of scores. There are several ways to do this, but one of the most effective and straightforward methods is to use a JavaScript object to store the questions, answers, and scores.

Creating the Questions Object

The first step is to create a JavaScript object that will store the quiz questions and answers. This object will contain the questions, the possible answers, and the correct answer. We'll also include a key to store the user's score.

var quiz = {
  questions: [
    {
      prompt: "What is the capital of France?",
      options: ["Paris", "Marseille", "Lyon", "Nice"],
      correctAnswer: "Paris"
    },
    {
      prompt: "What is the capital of Germany?",
      options: ["Berlin", "Frankfurt", "Munich", "Hamburg"],
      correctAnswer: "Berlin"
    },
    {
      prompt: "What is the capital of Italy?",
      options: ["Rome", "Milan", "Naples", "Turin"],
      correctAnswer: "Rome"
    }
  ],
  score: 0
};

Creating the Quiz Function

Now that we have our questions object, we can create a function to display the questions and keep track of the user's score. This function will loop through the questions in the object and display them one at a time. It will also check the user's answer to see if it matches the correct answer. If so, it will increase the user's score by one.

function showQuiz() {
  // loop through each question
  for (var i = 0; i < quiz.questions.length; i++) {
    // get the current question
    var question = quiz.questions[i];
    
    // display the prompt
    console.log(question.prompt);
    
    // loop through each option
    for (var j = 0; j < question.options.length; j++) {
      console.log(j + ": " + question.options[j]);
    }
    
    // get the user's answer
    var answer = prompt("Enter your answer:");
    
    // check if the answer is correct
    if (answer == question.correctAnswer) {
      // increase the user's score
      quiz.score++;
    }
  }
  
  // display the user's score
  console.log("Your score: " + quiz.score);
}

Once the function is defined, we can call it to start the quiz:

showQuiz();

The function will loop through the questions and display each one with its options. It will then prompt the user for their answer and check if it matches the correct answer. If it does, it will increase the user's score and move on to the next question. When all of the questions have been answered, it will display the user's score. By using a JavaScript object to store the questions and answers, and a function to handle the quiz logic, we can easily create a quiz using JavaScript. This approach makes it easy to add, modify, and remove questions from the quiz, and to keep track of the user's score.