
When the participant has only a limited time to make a decision, you need a timer that show how much time is left. There are numerous javascript timers around on the internet, this is one we used in the past.
When time is up without a decision you are referred to another page (line 46). In the example above this other page is the same page, and the counter starts again at 3 minutes. The last 10 seconds the timer changes color to alert the participant (programmed by Roel van Veldhuizen, probably inspired by some snippets found on the web).
<html>
<head>
<script language="javascript">
// Finding the initial date at time of startup and getting hours and minutes from there
var starttime=new Date();
var hs=starttime.getHours();
var ms=starttime.getMinutes();
var ss=starttime.getSeconds();
var sjaak=0;
// Define a function which updates the time continuously as commanded by the html code in <body ...>
function startTime()
{
var today=new Date();
var h=today.getHours()-hs;
var m=today.getMinutes()-ms;
var s=today.getSeconds()-ss;
m=<?php echo $rondetijd; ?>-2-m;
s=0-s; //maximumtijd hier invullen evt met php later.
if (s<0)
{
s=s+60
m=m-1;
}
if (s>59)
{
s=s-60
m=m+1;
}
if (m<0)
{
m=m+60;
h=h-1;
}
if (m>59)
{
m=m-60;
h=h+1;
}
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
if (m<1 && s<1)
{
// where you go when time is up
//in this example he reloads the page
location.href="timer.html"
}
else if (m<1 && s<11)
{
document.getElementById('txteinde').innerHTML=m+":"+s;
document.getElementById('txt').innerHTML="";
sjaak=1;
}
else{
document.getElementById('txt').innerHTML=m+":"+s;
}
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime();">
<p align=center>
<table border="1" bgcolor="black" style ="position:absolute;left:0;top:0">
<td><font size="5" color="yellow">TIME:</font></td>
<td><font size="5" color="yellow"><span id="txt" ></span></font><font size="5" color="red"><blink><span id="txteinde"></span></blink></font></td>
</table>
</p>
</body>