How to Make a Simple JavaScript Quiz

Category: css animations, es6, jamesh, JavaScript, Quiz, Raw Javascript

“How do I make a JavaScript quiz?” — this is one of the most common questions I hear from people who are learning web development, and for good reason. Quizzes are fun! They are a great way of learning about new subjects and allow you to engage your audience in a fun, yet playful manner.

How to Make a JavaScript Quiz

And coding your own JavaScript quiz is a fantastic learning exercise. It teaches you how to deal with events, handle user input, manipulate the DOM, provide the user with feedback and keep track of their score (for example, using client-side storage). And when you have your basic quiz, there are a whole host of possibilities to add more advanced functionality, such as pagination. I go into this at the end of the article.

In this tutorial I will walk you though creating a multi-step JavaScript quiz which you will be able to adapt to your needs and add to your own site. If you’d like to see what we’ll be ending up with, you can skip ahead and see the working quiz.

Things to be Aware of Before Starting

A few things to know before starting:

This tutorial is entirely on the front end, meaning that the data is in the browser and someone who knows how to look through the code can find the answers. For serious quizzes, the data needs to be handled through the back end, which is beyond the scope of this tutorial.
The code in this article uses ES2015 syntax, meaning the code will not be compatible with any versions of Internet Explorer. However it does work for modern browsers, including Microsoft Edge.
If you need to support older browsers, I’ve written a JavaScript quiz tutorial that’s compatible back to IE8. Or, if you’d like a refresher on ES2015, check out this course by Darin Haener over on SitePoint Premium.
You’ll need some familiarity with HTML, CSS, and JavaScript, but each line of code will be explained individually.

The Basic Structure of Your JavaScript Quiz

Ideally, we want to be able to list our quiz’s questions and answers in our JavaScript code and have our script automatically generate the quiz. That way, we won’t need to write a bunch of repetitive markup, and we can add and remove questions easily.

To set up the structure of our JavaScript quiz, we’ll need to start with the following HTML:

A <div> to hold the quiz
A <button> to submit the quiz
A <div> to display the results

Here’s how that would look:

<div id="quiz"></div>
<button id="submit">Submit Quiz</button>
<div id="results"></div>

Then we can select these HTML tags and store references to these elements in variables like so.:

const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');

Next we’ll need a way to build a quiz, show results, and put it all together. We can start by laying out our functions, and we’ll fill them in as we go:

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

Here, we have functions to build the quiz and show the results. We’ll run our buildQuiz function immediately, and we’ll have our showResults function run when the user clicks the submit button.

Displaying the Quiz Questions

The next thing our quiz needs are some questions to display. We’ll use object literals to represent the individual questions and an array to hold all of the questions that make up our quiz. Using an array will make the questions easy to iterate over.

const myQuestions = [
  {
    question: "Who is the strongest?",
    answers: {
      a: "Superman",
      b: "The Terminator",
      c: "Waluigi, obviously"
    },
    correctAnswer: "c"
  },
  {
    question: "What is the best site ever created?",
    answers: {
      a: "SitePoint",
      b: "Simple Steps Code",
      c: "Trick question; they're both the best"
    },
    correctAnswer: "c"
  },
  {
    question: "Where is Waldo really?",
    answers: {
      a: "Antarctica",
      b: "Exploring the Pacific Ocean",
      c: "Sitting in a tree",
      d: "Minding his own business, so stop asking"
    },
    correctAnswer: "d"
  }
];

Feel free to put in as many questions or answers as you want.

Now that we have our list of questions, we can show them on the page. We’ll go through the following JavaScript line by line to see how it works:

function buildQuiz(){
  // we'll need a place to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // we'll want to store the list of answer choices
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `<label>
            <input type="radio" name="question${questionNumber}" value="${letter}">
            ${letter} :
            ${currentQuestion.answers[letter]}
          </label>`
        );
      }

      // add this question and its answers to the output
      output.push(
        `<div class="question"> ${currentQuestion.question} </div>
        <div class="answers"> ${answers.join('')} </div>`
      );
    }
  );

  // finally combine our output list into one string of HTML and put it on the page
  quizContainer.innerHTML = output.join('');
}

First, we create an output variable to contain all the HTML output including questions and answer choices.

Next, we can start building the HTML for each question. We’ll need to loop through each question like so:

myQuestions.forEach( (currentQuestion, questionNumber) => {
  // here goes the code we want to run for each question
});

Continue reading %How to Make a Simple JavaScript Quiz%

You must be logged in to post a comment.

blog