PEEP

Programming Economic Experiments with Php/mysql

with contributions by:
Boris van Leeuwen
Lucas Molleman
Jona Linde
Jeroen van de Ven
Joep Sonnemans
Roel van Veldhuizen

Timer

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>