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

Posted by & filed under Ajax, CSS, JQUERY, MYSQL, PHP.

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

 

 

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

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

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,
    });
}

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

%d bloggers like this:

Get Instant Script Download Access!