Simple Quiz With Javascript (Free Download)

Welcome to a tutorial on how to create a simple quiz using Javascript. So you have mastered the ways of “hello world”, and looking for the next piece of the action? A simple quiz is a good place to start, and let us walk through an example in this guide – Read on!

 

 

TABLE OF CONTENTS

 

 

SIMPLE QUIZ DEMO

 

 

STEP 1) THE HTML

<!-- (A) LOAD QUIZ CSS + JS -->
<link href="quiz.css" rel="stylesheet">
<script src="quiz.js"></script>
 
<!-- (B) QUIZ CONTAINER -->
<div id="quizWrap"></div>

Yep… That’s all for the HTML. All we need is to include the stylesheet, Javascript, and create an empty <div id="quizWrap"> to generate the quiz.

 

STEP 2) QUIZ QUESTIONS & ANSWERS

// (A) PROPERTIES 
// (A1) QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
  q : "What is the standard distance between the target and archer in Olympics?",
  o : [
    "50 meters",
    "70 meters",
    "100 meters",
    "120 meters"
  ],
  a : 1 // arrays start with 0, so answer is 70 meters
},
{
  q : "Which is the highest number on a standard roulette wheel?",
  o : [
    "22",
    "24",
    "32",
    "36"
  ],
  a : 3
},
{
  q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
  o : [
    "400 pounds",
    "550 pounds",
    "700 pounds",
    "750 pounds"
  ],
  a : 2
},
{
  q : "Which is the seventh planet from the sun?",
  o : [
    "Uranus",
    "Earth",
    "Pluto",
    "Mars"
  ],
  a : 0
},
{
  q : "Which is the largest ocean on Earth?",
  o : [
    "Atlantic Ocean",
    "Indian Ocean",
    "Arctic Ocean",
    "Pacific Ocean"
  ],
  a : 3
}
]

What does a quiz need? Questions and answers, so we begin by defining some. 😕 This can be kind of confusing for beginners, so look carefully.

• quiz.data is an array of objects. That is, [{FIRST QUESTION}, {SECOND QUESTION}, {THIRD QUESTION}].
• In each question, { q:QUESTION, o:OPTIONS, a:CORRECT ANSWER }.
  • o is an array of the available options (there can be more than 4).
  • a specifies which is the correct answer. That is, a:0 will specify that the first option is correct.

 

 

STEP 3) GAME FLAGS

// (A2) HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
 
// (A3) GAME FLAGS
now: 0, // current question
score: 0, // current score

Next, we have a bunch of properties. These should be pretty self-explanatory – Reference to HTML elements, and flags to keep track of the current score/question.

 

STEP 4) INITIALIZE QUIZ (BUILD HTML)

// (B) INIT QUIZ HTML
init: () => {
  // (B1) WRAPPER
  quiz.hwrap = document.getElementById("quizWrap");
    
  // (B2) QUESTIONS SECTION
  quiz.hqn = document.createElement("div");
  quiz.hqn.id = "quizQn";
  quiz.hwrap.appendChild(quiz.hqn);
    
  // (B3) ANSWERS SECTION
  quiz.hans = document.createElement("div");
  quiz.hans.id = "quizAns";
  quiz.hwrap.appendChild(quiz.hans);
    
  // (B4) GO!
  quiz.draw();
}
window.addEventListener("load", quiz.init);

quiz.init() is called on window load, and all it does is insert 2 HTML elements into <div id="quizWrap"> from step 1.

• <div id="quizQn"> To display the question.
• <div id="quizAns"> To display the options.

 

 

STEP 5) DRAW CURRENT QUESTION

// (C) DRAW QUESTION
draw: () => {
  // (C1) QUESTION
  quiz.hqn.innerHTML = quiz.data[quiz.now].q;
    
  // (C2) OPTIONS
  quiz.hans.innerHTML = "";
  for (let i in quiz.data[quiz.now].o) {
    let radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "quiz";
    radio.id = "quizo" + i;
    quiz.hans.appendChild(radio);
    let label = document.createElement("label");
    label.innerHTML = quiz.data[quiz.now].o[i];
    label.setAttribute("for", "quizo" + i);
    label.dataset.idx = i;
    label.addEventListener("click", () => quiz.select(label));
    quiz.hans.appendChild(label);
  }
}

quiz.draw() is called right after quiz.init() and after the user picks an option in draw.select(). This should be self-explanatory again, draw the current question and options.

 

 

STEP 6) SELECT AN OPTION

// (D) OPTION SELECTED
select: (option) => {
  // (D1) DETACH ALL ONCLICK
  let all = quiz.hAns.getElementsByTagName("label");
  for (let label of all) {
    label.removeEventListener("click", quiz.select);
  }
 
  // (D2) CHECK IF CORRECT
  let correct = option.dataset.idx == quiz.data[quiz.now].a;
  if (correct) { 
    quiz.score++; 
    option.classList.add("correct");
  } else {
    option.classList.add("wrong");
  }
 
  // (D3) NEXT QUESTION OR END GAME
  quiz.now++;
  setTimeout(() => {
    if (quiz.now < quiz.data.length) { quiz.draw(); } 
    else {
      quiz.hQn.innerHTML = `You have answered ${quiz.score} of ${quiz.data.length} correctly.`;
      quiz.hAns.innerHTML = "";
    }
  }, 1000);
}

Lastly, when the user picks an option – quiz.select() will determine if it is the correct answer, keep track of the score, then show the next question.

 

EXTRA) RESTARTING THE QUIZ

// (E) RESTART QUIZ
reset : () => {
  quiz.now = 0;
  quiz.score = 0;
  quiz.draw();
}

Simply call quiz.reset() to reset the quiz. For example, add a simple reset button at the end of the quiz. Section D3 – quiz.hAns.innerHTML = "<input type='button' value='Try Again' onclick='quiz.reset()'>";

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

SIMPLE JAVASCRIPT GAMES

If you are interested in learning more about creating simple classic games, do check out my other guides:

• Rock Paper Scissors
• Blackjack
• Tic Tac Toe
• Hangman
• Minesweeper

 

LINKS

• Example on CodePen – Simple JS Quiz