Menu
I am developing a online quiz website in php. I've done most of it-questions get selected randomly from database one at a time, and i have the following php files:
database.php, index.php, login.php, logout.php, quiz.php, result.php.
Now i want to attach a countdown timer(using minutes and seconds left) which will be continuously displayed while user is taking the quiz.
When timer expires(reaches 0)the quiz.php should appear blank and should be redirected to home page,where the user can see the result.
I have the following countdown timer code in but i am not getting how to implement it,So can someone help how to implement .
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language ="javascript" >
var tim;
var min = 20;
var sec = 60;
var f = new Date();
function f1() {
f2();
document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();
}
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes ," + sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == 0) {
clearTimeout(tim);
location.href = "default5.aspx";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
</script>
</head>
<body onload="f1()" >
<form id="form1" runat="server">
<div>
<table width="100%" align="center">
<tr>
<td colspan="2">
<h2>This is head part for showing timer and all other details</h2>
</td>
</tr>
<tr>
<td>
<div id="starttime"></div><br />
<div id="endtime"></div><br />
<div id="showtime"></div>
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
</table>
<br />
</div>
</form>
</body>
</html>
942
asked Jul 23 '26 08:07
There is no need to make a timer in PHP, unless you want to use WebSocket or any other thing that will keep connnection up. All you need (any you have it partially implemented) is:
1 - Javascript timer,
var maxTime = 50000; // time in milliseconds
setTimeout(postFormFunction, maxTime)
2 - Autopost
function postFormFunction() {
getElementById('form1').submit();
}
3 - And the last, but most important (for the real app), is to make sure that user will not cheat, so you will need to store time when your form was created, and check time when it was posted, because expirienced user will stop you JS timeout and take his unlimited time unless you check it.
I will not provide any code for this one, because it's the way of how your app designed, will you store it in DB, or use tokens, or even store data on harddrive... so I believe you'll find your way when time will came for real app ;)
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
