I currently have a website that combines PHP, HTML, JavaScript, and MySQL. I want the website to administer online tests and assessments for students. On some of the assessments, I would like to provide a time limit (such as 25 minutes). So I want to set up a countdown timer (using minutes and seconds left for the assessment), which will be continuously displayed while the student is taking the assessment. When time expires, I would like to invoke another page (which will tally and display the results). What is the best method to use for doing this (i.e. PHP, JavaScript)? How can I code something like this, especially causing a page to be invoked when time expires? Can I set up processing to where the countdown timer can continue displaying the remaining time, if the assessment changes pages (to display each question and receive each answer)? Thanks in advance!!!
Counterdown Timer In PHP or JavaScript
This example will count down 25 minutes then
either
redirect to a different page or display an alert saying times up then press OK to continue.
It would be easiest to keep the test to one page but with enough figuring I imagine you could pass all the variables to continue the timer.
<?php
$dateFormat = "d F Y -- g:i a";
$targetDate = time() + (25*60);//Change the 25 to however many minutes you want to countdown
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));
$actualDateDisplay = date($dateFormat,$actualDate);
$targetDateDisplay = date($dateFormat,$targetDate);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quiz System</title>
<script type="text/javascript">
var days = <?php echo $remainingDay; ?>
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
function setCountDown ()
{
seconds--;
if (seconds < 0){
minutes--;
seconds = 59
}
if (minutes < 0){
hours--;
minutes = 59
}
if (hours < 0){
days--;
hours = 23
}
document.getElementById("remain").innerHTML = days+" days, "+hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
SD=window.setTimeout( "setCountDown()", 1000 );
if (minutes == '00' && seconds == '00') { seconds = "00"; window.clearTimeout(SD);
//window.alert("Time is up. Press OK to continue."); // change timeout message as required
window.location = "http://www.yourpage.com" // Add your redirect url
}
}
</script>
</head>
<body onload="setCountDown();">
Start Time: <?php echo $actualDateDisplay; ?><br />
End Time:<?php echo $targetDateDisplay; ?><br />
<div id="remain"><?php echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes, $remainingSeconds seconds";?></div>
</body>
</html>
The countdown timer example worked great!!! I was able to get it to return to a desired webpage when the time expired.
I have used PHP quit a bit for geneating assessment questions. However, the drawback on how I developed the application is that I go to different pages or refresh the same page for each question, with its appropriate information.
I am still learning some features of JavaScript. Is it easier to use Javascript to just replace the display area with the each question? In that case, I see where the timer could continue and no variables would have to be passed.
I am looking for a simple example on setting up multiple questions (primarily with the user entering numeric answers, rather than selecting from radio buttons) where the script can execute without refreshing from one page to another. The script would evaluate the answer for each question and provide a summary at the end of the assessment. I then know how to invoke a PHP process to generate appropriate emails and store the results in MySql. I just need some guidance on the most efficient way to set up Java Script for the question/answer portion of the processing. Thanks!!!
I suppose it would all depend on you have the questions set up
How many there are
etc...
If you already have it set up to go from page to page I modified the above code for the timer to work across multiple pages but it got a bit involved,
(Im still learning this but what better way to learn!)
each "Test page" will call the header file which includes the countdown
the actual countdown is started when the begin test button is pushed
That sets the endtime in a session and then each page loaded resets the start time and then subtracts the end time from the new start time therefor keeping the counter going.
you can dl the attached file (If it lets me attach it) and play around with it.
I dont know if its the most efficient way, but it is a way
You can add as many pages as you would like just keep the same format of pg2.
Hope it all makes sense if not let me know.
Like I said, dont know if its the most efficient way but this post didnt seem to gather much attention.
Good luck and let me know if it works for you.