This is the second method of creating a CBT website. The languages needed are HTML, CSS, advanced JavaScript, Php and SQL.

Here’s a review of what we’re building

This method is nothing like the last one. The key difference is that it allows multi-users to use the site simultaneously. The algorithm behind it is that the answers selected is not stored in the database. It is first stored in a numerical array. Then the correct answers is selected and stored in a separate numerical array. The two arrays are then compared and the similarities are counted, which is displayed as your score.

Before we start, we’ll have to assume that you’ve already read this first method of creating this. If you haven’t, click How to create a computer based test. Method 1. Now let’s begin the tutorial shall we.

Step 1.

Creating your exam database

We’ll use the same database we used in Method 1. Let’s get started shall we.

Step 2.

Creating your index.php file.

Now we need to create our index.php file to serve as our main page. This page will be used to link other php scripts using ajax for a better performance. After create your file, you can add your custom html, head, body and css to the file depending on how you want to design it. The scope of the tutorial is to learn how to make your page functional.

Step 3.

Selecting your questions and options

Now we are going to select all the questions and options from the database at once. This method is different from the last which selects only the first question.

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

If(mysqli_num_rows($result)>0){

While($row=mysqli_fetch_assoc($result)){

$question=$row['question'];

$quesno=$row['question_no'];

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

//Continue till option D

echo"
$question <br>

<Input type='radio' name='$quesno'class='options' value='$optionA'>$optionA <br>

<Input type='radio' name='$quesno'class='options' value='$optionB'>$optionB <br>

<Input type='radio' name='$quesno'class='options' value='$optionC'>$optionC <br>

<Input type='radio' name='$quesno'class='options' value='$optionD'>$optionD <br>

//Let's add a default option in case student doesn't select an option.

<Input type='hidden' name='$quesno'class='options' value='no answer' selected>$optionD <br>";
}
}
?>

Now that we’ve selected all the questions, we can now add a submit button at the end.

Note: you can use JavaScript and CSS to style how you want to view the questions, all at once or step by step with a next button.

Step 4.

Creating a submit button for your quiz

<button onclick="submitquiz()">submit</button>

//Take note of the onclick attribute.

Now we’re going to use JavaScript to compile the selected options into an array called user answers.

<script>

Function submitquiz(){

//Select elements with class name options


Var options=$(".options:selected");

//Create empty array.

Var myanswers=[];


//Loop through all the selected options and put them in the array.


For (var i=0; i<options.length; i++){
myanswers.push(options[i]);

}

Now that we’ve arranged our answers in the array let’s get it ready to be marked.

Step 5.

creating our mark script.

Now we can create a new file named markquiz.php which will handle all the markings on the server.

After creating your new file, don’t forget to connect it to your database. Visit Method 1 to see how.

Now we can go back to index.php and continue complete the previous script using AJAX.

$.ajax({
type:'post',

url:'markquiz.php',

data:{'ans':JSON.stringify(myanswers)},

Success:function(data){
document.getElementsByTagName("body")[0].html=data;
}

});
}
</Script>

This Ajax code above sends the array “myanswers” to the markquiz.php where proper validation will be done.

The JSON.stringify function converts the myanswers array to a string so it can be sent since only strings can be sent using this method.

Step 6.

Marking the computer based exam.

Now let’s go back to the “markquiz.php” file. In this file you select only the correct answers from the database and put them in a numerical array, so but first we need to receive the answers that was sent using AJAX and convert it back to string.

$myanswers=$_POST['ans'];

//Convert back to array.

$myanswers=JSON_decode($myanswers);

//now to select correct answers from the database.

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

//Now let's put the answers in an array
$num=mysqli_num_nows($query);

$correctans=mysqli_fetch_array($query);

//Comparing the both arrays for similarities.

$correct=array_intersect($myanswers,$correctans);

//Print the result

echo "you scored $correct out of $num";

That’s all for building a computer based website with php. You can follow our social media channels to stay connected to us. Don’t forget to leave your feedback in the comments section.

Here’s a review of this quiz

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 *