Simple PHP Quiz Without Database (Free Download)

Welcome to a tutorial on how to create a quiz in PHP. Want to add a quiz to your website, but don’t need all the crazy admin features and stuff? Here’s a quick sharing of my simple version, without a database – Read on!

 

 

TABLE OF CONTENTS

 

 

 

 

STEP 1) QUESTIONS & ANSWERS

<?php
$quiz = [
  [
    "q" => "Which is the biggest island in the world?",
    "o" => ["Bora Bora", "Greenland", "Bali", "Borneo"],
    "a" => 1
  ],
  [
    "q" => "Which country produces the most coffee?",
    "o" => ["India", "Vietnam", "Brazil", "Indonesia"],
    "a" => 2
  ],
  [
    "q" => "Which country has the most vending machines?",
    "o" => ["Japan", "US", "Singapore", "Russia"],
    "a" => 0
  ],
  [
    "q" => "How long does it take for food to pass through the human body?",
    "o" => ["12 hours", "26 hours", "47 hours", "53 hours"],
    "a" => 3
  ]
];

Since we don’t have a database, the only way is to store the questions and answers in an array. This should be pretty self-explanatory.

• q The question itself.
• o The available options. Take note, you can have as many options as you like. It does not have to be exactly 4.
• a Which option is the correct answer. Take note again, an array starts with index 0. So 0 states that the first option is correct.

 

STEP 2) QUIZ PAGE

<div id="quizWrap">
  <div id="quizQn"></div>
  <div id="quizAns"></div>
</div>

Yep, that’s all. The rest will be generated with Javascript.

• quizWrap The quiz wrapper itself.
• quizQn The current question.
• quizAns To place all the available options.

 

 

STEP 3) AJAX HANDLER

<?php
if (isset($_POST["qn"])) {
  // (A) LOAD QUESTIONS & ANSWERS
  require "1-qna.php";
 
  // (B) FIRST QUESTION ONLY - ALSO RETURN TOTAL # OF QUESTIONS
  if ($_POST["qn"]==0) {
    $qn = $quiz[0];
    $qn["all"] = count($quiz);
    echo json_encode($qn);
  }
 
  // (C) OUTPUT QUESTION
  else { echo json_encode($quiz[$_POST["qn"]]); }
}

As stated, we will deal with the questions and answers with Javascript. But first, here’s a simple PHP-AJAX handler to get the question/options themselves. Should be self-explanatory again:

• We simply send a  $_POST["qn"] to this script to get the selected question/options.
• Just a small note. On the first question $_POST["qn"]==0, we will return the total number of questions count($quiz).

 

STEP 4) THE JAVASCRIPT

4A) QUIZ PROPERTIES

// (A) PROPERTIES
// (A1) HTML ELEMENTS
hQn : null, // question <div>
hAns : null, // answer <div>
 
// (A2) QUIZ FLAGS
all : 0, // total number of questions
now : 0, // current question
ans : 0, // current correct answer
score : 0, // current score

The Javascript is probably the most confusing part. Not going to explain line-by-line, but all these flags are necessary to drive the quiz.

 

 

4B) QUIZ INIT

// (B) INIT QUIZ
init : () => {
  quiz.hQn = document.getElementById("quizQn");
  quiz.hAns = document.getElementById("quizAns");
  quiz.load();
}
window.addEventListener("DOMContentLoaded", quiz.init);

quiz.init() is the first thing that will run on page load. All it does is to get the question and options HTML <div>, then proceed to load the first question.

 

4C) LOAD THE NEXT QUESTION

// (C) LOAD NEXT QUESTION/ANSWER
load : () => {
  // (C1) FORM DATA
  let data = new FormData();
  data.append("qn", quiz.now);
 
  // (C2) AJAX FETCH
  fetch("3-ajax.php", { method:"POST", body:data })
  .then(res => res.json()).then(qna => {
    // TOTAL NUMBER OF QUESTIONS
    if (quiz.now == 0) { quiz.all = qna.all; }
 
    // SET THE QUESTION
    quiz.hQn.innerHTML = qna.q;
 
    // SET THE OPTIONS
    quiz.ans = qna.a;
    quiz.hAns.innerHTML = "";
    qna.o.forEach((val, idx) => {
      let o = document.createElement("div");
      o.className = "option";
      o.id = "opt"+idx;
      o.innerHTML = val;
      o.onclick = () => quiz.pick(idx);
      quiz.hAns.appendChild(o);
    });
  });
}

This is quite a bit of code, but keep calm and look carefully.

• (A2) We use the quiz.now flag to track the current question number.
• (C1) We need to pass this flag to 3-ajax.php to get the correct question and options.
• (C2) Send quiz.now to 3-ajax.php. Draw the question and options.

Yep, that’s about it.

4D) PICK AN OPTION

// (D) PICK AN OPTION
pick : idx => {
  // (D1) DETACH ALL ONCLICK & SET RIGHT/WRONG CSS
  for (let o of quiz.hAns.getElementsByClassName("option")) {
    o.onclick = "";
  }
 
  // (D2) CORRECT ANSWER?
  let o = document.getElementById("opt"+idx);
  if (idx == quiz.ans) {
    quiz.score++;
    o.classList.add("correct");
  } else {
    o.classList.add("wrong");
  }
 
  // (D3) NEXT QUESTION OR END GAME
  quiz.now++;
  setTimeout(() => {
    if (quiz.now < quiz.all) { quiz.load(); }
    else {
      quiz.hQn.innerHTML = `You have answered ${quiz.score} of ${quiz.all} correctly.`;
      quiz.hAns.innerHTML = "";
    }
  }, 1000);
}

This is what happens when the user picks an option.

• Update the score quiz.score.
• Update the current question number quiz.now.
• Load the next question.

It’s actually simple, but just long-winded.

 

 

4E) RESET THE QUIZ

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

For you guys who need to reset the quiz – Just call quiz.reset(). Maybe this into the end of the quiz, something like this in (D3) – <input type="button" value="Try Again" onclick="quiz.reset()">

 

 

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.

Buy Me A Meal 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.

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• Template Literals – CanIUse
• Fetch – CanIUse

This quiz should work on all modern “Grade A” browsers.

 

LINKS & REFERENCES

• Javascript Quiz – Code Boxx