I am making an Online Exam Project on PHP.
I want the countdown timer to trigger submit button automaticaly when timeout ?
Also if possible, display another div tag below the timer if the timer reaches 1 minute mark.
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function() {
var examTime = 60 * 5,
display = document.querySelector('#time');
startTimer(examTime, display);
};
#timediv {
background-color: #003300;
color: #ffffff;
font-size: 20px;
text-align: center;
}
<div id="timediv">Exam ends in <span id="time">05:00</span> minutes!</div>
<form action="samepage.php" method="post">
<input type="text" />
<input type="submit" value="Submit Answer Paper" />
</form>
I hope the following will be fairly easy to understand. The question is a little vague when it comes to " if possible, display another below the timer if the timer reaches 1 minute mark."
so I interpreted that to mean "provide a warning or some sort" to the user when there is 1 minute left in the exam.
The command to submit the form is called when the countdown timer has reached it's designated time - the method is simply Form.submit()
where Form
is a reference to the form, derived in whichever manner suits.
FYI - the timer has been modified to a little over 1minute initially so that the effect can be seen without waiting, and waiting and waiting...
Also - in the code here I used alert
to indicate that time was running out... it would be better to display a message on screen!
function startTimer(duration, display) {
var timer = duration;
var minutes, seconds;
var warning = 60;
var ok=false;
var form=document.forms.exam;
var t=setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if( timer <= warning && !ok ){
alert('Time is running out.... less than 1 minute to go!');
ok=true;
}
if (--timer <= 0) {
timer = duration;
if( !isNaN( t ) )clearInterval( t );
// submit the form...
form.submit();
}
}, 1000);
}
window.onload = function() {
var examTime = 60 * 1.1;
var display = document.querySelector('#time');
startTimer(examTime, display);
};
<div id='timediv'>Exam ends in <span id='time'>05:00</span> minutes!</div>
<form name='exam' action='samepage.php' method='post'>
<input type='text' />
<input type='submit' value='Submit Answer Paper' />
</form>