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