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>