Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap Part-2

In this tutorial I added one of the nice feature to this quiz application comparing previous one (Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap).

Note : You can refer my latest Quiz application
 
Responsive PHP Quiz Script

I added timer to this quiz application to indicate the time to left to complete quiz. When timer reaches zero, then quiz automatically submitted and declares results to the user.

Please refer next tutorial on this Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap Part-3 with some added functionality

Here is the demo of the quiz application

 

 

Step 1:

Before continuing this tutorial please refer my previous tutorial Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap for detailed information about this Quiz application.

 

 

Step 2:

Add following jQuery following to questions.php file to add a timer to this quiz  application.

<script src="js/countdown.js"></script>
<div id='timer'> </div>

Next add following countdown scripts in app.js file. This script will submit a form automatically after 1 minute.

function countdownComplete() {
    $("#quizform").submit();
}

if ($("#timer") && $("#timer").length){
    var myCountdownTest = new Countdown({
        time: 60, 
        width: 200, 
        height: 80, 
        rangeHi: "minute",
        target   : "timer",
        onComplete : countdownComplete,
    });
}

Note :

If you want to set different time interval, you need to change the time option. For example I am going to change from 1 minute to 5 minute.

if ($("#timer") && $("#timer").length){
    var myCountdownTest = new Countdown({
        time: 60*5, 
        width: 200, 
        height: 80, 
        rangeHi: "minute",
        target   : "timer",
        onComplete : countdownComplete,
    });
}