You’ve heard of computer based exams right? It’s a modern way of taking exams in which the computer grades the students after the exam and show results. In this article, we’re going to be building a computer based exam with pure JavaScript. This method is different from the previous two we did before.

Also see How to create a multi-user computer based test. and How to create a computer based test these are the two other methods we’ve written.

Here, we’re not using any SQL database or php scripts. instead we’ll be Working with just arrays. Mostly multi dimensional arrays. Let’s begin our tutorial.

<div id="container">
</div>

<script>

//Let's define our questions.

var questions=[

"what is the first letter of the english alphabet",

"how many numbers are between 1 and 10",

"How many letters are in the English alphabet"

];

//now we'll list our options.

var options =[
["A","B","X","D"],
["8","16","5","28"],
["26","44","35",70]
];

//Let's define an array of our answers.

var answers=[
"A","8","26"
];

// Let's create an empty array to store the answer the student picked.

var studentans=[];

Now we’ve stored our questions and options, let’s begin to display it on the screen giving the options radio buttons.

we’ll use the questions array as a reference array to know the number of items in all the arrays since they’re meant to have the same number of items.

var i;
var j;
for
(i=0;i<questions.length;
i++){


//Let's create a div to wrap our questions and options with a id as wrapper.

var wrapper=
document.createElement
("div");

wrapper.id="wrapper";


//Let's add the question as a text node.

var quesnode=
document.createTextNode
("question "+i+")"+ question[i]);

//Now append our text into the wrapper div.

wrapper.appendChild
("quesnode");



//Now let's output the options in radio input tags.

for(j=0;j<options.length;
j++){

//First, let's create our radio input using JavaScript.

var radio=
document.createElement
("input");

radio.type="radio";
radio.name=i;
radio.value=options[i][j];

//Let's create a new div to wrap our radio div.

var radiowrapper=
document.createElement
("div");

radiowrapper.appendChild
(radio);

//Now let's create a text node to display each option beside their corresponding radio button.

var radionode=
document.createTextNode
(options[i][j]);

radiowrapper.appendChild
(radionode);

//let's now add our radio wrapper div into the main wrapper.

wrapper.appendChild
(radiowrapper);


}
//Now let's add our wrapper in our container div.


document.
getElementById
("container").
appendChild(wrapper);
}

In the above code, since the options array is two dimensional i.e array within a larger array, we looped it again to get the values inside the inner array and the code will continue till every single value is displayed.

Now let’s add our submit button to end the quiz.


document.getElementById
("container").append("
<button onclick='submit()'>
Submit test
</button>
");

Now let’s explain how the submit function will work. We’ll first select all the answers and store into our user answer array (the array we left empty) then we compare this array with our answer array for matches. Let’s get on with it shall we?

function submit(){
//Let's select all the checked inputs.

var user= document. querySelectorAll("input :checked");

//This selects all the checked answers. Now let's add them to the array.


for(i=0;i<user.length;i++)
{
studentans.push(user[i]);
}

//Now that we've arranged them in the array, let's write a code to compare the two arrays for similarities.

var correct=0;

for(i<0;i<answers.length;
i++){
if(answers[i]==
studentans[i]){
correct++;
}
}
document.
getElementById
("container").innerHTML=
"You scored "+correct+" out of "+answers.length;
}

Here you have it a working CBT site with pure JavaScript.

Note: all questions must be answered before submitting the test. If not the marker will be confused. You can avoid this by adding a fifth option with type hidden and value as “no answer” with a selected attribute so that option will be selected at default. Here’s an example.

<input type='hidden' 
value='no answer'
checked >

This gives every question a default answer which can’t be seen.

Hope you enjoyed this article, you can leave your feedback in the comment if this post helped you. Also feel free to contact us via email

hello@charmingdesk.com.ng

See also Building a cart for your E-commerce store with JavaScript.


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 *