Before starting this tutorial, we’ll assume you already know the core languages which are, HTML, CSS, basic JavaScript, PHP and SQL. We might need to use advanced JavaScript like AJAX and JSON at a point but that’ll be explained in the tutorial.

We’ll also be going through two methods of creating this site. The first method is very simple and basic which allows just one user to answer at a time. It can cause problems if multiple users attempt to use the site simultaneously. And the Second method which is more advanced can allow millions of users simultaneously, Which is faster and more efficient. Let’s begin our tutorial shall we.

Method 1.

Step 1.

Organizing your database

Let’s look at how this method will be. Imagine we have an SQL database table or maybe a Microsoft Excel table named cbt_exam which is divided into rows and columns.

For the columns we have question no questions, optionA, optionB, optionC, optionD, correct_answer and user_answer. These columns stores the questions and their options respectively, waiting for a script to call it to action.

Now each row contains the questions numbers, question 1, question 2 and others, depending on how many questions you want your students to answer. After organising your database table, you can now begin writing the scripts.

Step 2.

Creating your index.php file

Let’s first of all create a session with php which we’re gonna use later. Follow this process below

session_start();

Now you can create a connection to your database.

<?php
$conn=mysqli_connect ("localhost", "db_user", "db_password", "database name");
?>

If you’ve learnt php programming language from a good source, then you should be familiar with this code above. Which helps to connect your current script to your database. Your database connection details are usually created in the database area of your webhost cpanel, but if you’re using localhost, the details are “localhost”,”root”,””,”your database name” respectively.

Usually the password field is left empty unless you’ve already created a password for your localhost database account. After establishing your connection, you move on with your html head and body tags and design your page as much as you want with CSS. Then it’s time to start begin your quiz.

Step 3.

Retrieving and arranging questions

Now it’s time to bring out the questions from your database. First of all we have to work on our session counter.

$_SESSION['counter']= 1;
$num= $_SESSION['counter'];

Now we create our start button. And then give it a name attribute of your choice. We’ll be using “start” as the value. Don’t forget to enclose the button in a form tag.

Also see How to make a search bar work with php.

<form method="get">
<button type="submit" name="start" value="go"> start quiz</button>
</form>

Now we add some php code to the form to make sure the form works. Like this

<?php
if( isset(GET['start'])) {

$result= mysqli_query($conn,"SELECT * FROM `cbt_exam` WHERE question_no = $num");

if(mysqli_num_rows ($result)>0) {
$row= mysqli_fetch_assoc ($result);
$question= $row['question'];

$optionA= $row['optionA'];
$optionB= $row['optionB'];
$optionC= $row['optionC'];
$optionD= $row['optionD'];

$answer= $row['correct_answer'];

$user_answer= $row['user_answer'];

}

}

Let me explain the previous code bit by bit.

The first part “if isset”, tells the computer what to do if the button with name=”start” is clicked.

Now the next line selects the first question, options and answers (question_no=1).

Mysqli_num_rows function counts the number of rows selected and if it’s greater than 0, then it’ll return that database as an associative array “mysqli_fetch_assoc” function then they are being stored in their respective variables.

Related: How to create a voting website with php.

This means the question is now stored in the variable named $question and so on… That’s it

Let’s get to the options shall we?

Now we’re going to use radio buttons to align our options and I’m going to show you how to set it.

//Contd. Of the last code
echo "
$question <br>

<form method="get">
<input type='radio' name='option' value='$optionA'>$optionA <br>

<input type='radio' name='option' value= '$optionB'>$optionB <br>
//Continue till you reach optionD.

</form>
";
?>

The above code states out the options in their respective orders. Now let’s look at setting the next button

Step 4.

Creating your next button

Remember early in step 3 when we created a super global variable named $_SESSION[‘counter’]. Then assigned it’s value to 1. Now it’s time to change it.

You might like: How to create a to-do list with HTML and JavaScript.

If you recall we assigned the superglobal to variable “$num” which was used in selecting the question number. Now if we increase the value of the superglobal, the question shown and it’s options will be changed.

<form method="get">
<button name="next" value="btn">next</button>
</form>

<?php

If (isset($_GET['next'])){
//saving the chosen option
$userans=$_GET['option'];


$_SESSION['counter']+=1;
$num=$_SESSION['counter'];

You can try this out and watch how well it works for you. Remember we also want to save the options each user picks to our user_answer column in the database so we have to add another snippet to the last code

//contd from the last code
$update=mysqli_query($conn, "UPDATE `cbt_exam` SET user_answer='$userans' WHERE `question_no`=$num-1");
}
?>

Step 5.

Creating your submit button

Now that we’ve updated the database every time the next button is clicked, we’ll have to set up a submit button at the end of the quiz.

<?php
$result= mysqli_query($conn, "SELECT * FROM `cbt_exam`");
$no= mysqli_num_rows ($result);

if($no==$num){
echo "<button name='submit' value='btn' type='submit'>submit
</button>";
}if(isset($_GET['submit'])){
//Update the last question

$update=mysqli_query($conn, "UPDATE `cbt_exam` SET user_answer='$userans' WHERE `question_no`=$num-1");

//Compare answers

$query= mysqli_query($conn,"SELECT * FROM cbt_exam WHERE correct_answer= user_answer");

//Get number of correct answers

$correct=mysqli_num_rows($query);

//Show score.
echo " you scored $correct out of $num";
}

}
?>

This will show you everything you need to know about a one user CBT website. Feel free to leave a comment if there’s any confusing part of this post.

You can view the second method here. You can also build this quiz website with plain JavaScript. See How to create a CBT site with JavaScript.

You can follow us in our social media pages

We are Charming desk. Your favorite web developers. Kudos!


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *