PEEP

Programming Economic Experiments with Php/mysql

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

Information boards: hide and show

Information boards are a classic tool in cognitive psychology. The information that is available to the decision maker is only displayed on the screen after the decision maker clicks in the relevant cell of a table (or on some part of the screen). The program registers what information is used and in what order. In this way the decision strategy of the subject can be revealed. You can also put a small cost on each piece of information. This method is simpler than eye-tracking, but of course more intrusive. See Arthur Schram and Joep Sonnemans (2011) How Individuals Choose Health Insurance: An Experimental Analysis European Economic Review 55, 799-819 Link to article. You can also do this experiment yourself on the web. Another advantage of using php is that you can easily show the experiment to others!
This can be easily programmed by using a javascript function that hides or displays an element. In the example below there are 9 fields, numbered A1 to C3. The decision maker has to choose one of the three options. Each option will lead to three independent lotteries; with probability 50%, 5% and 20% you will win (or lose) the numbers that are hidden under the "look" text. The example is working; try it yourself.
If you want to hide the information when the mouse moves away, please look at the mouselab page. Note that mouselab techniques only makes sense when participants are not able to make notes.

When you click on a "look" in the table a javascript event onClick happens and a javascript function Yeehah(id,inhoud) is run. The variable id is the id of the <div> html code, and inhoud is the string that will be displayed in the <div> instead of the original "look" text. In addition, the id of this cell is saved in the string tekst. When you make a decision by clicking on one of the three option buttons, we show an alert in this example. In a program we would like to save this in a database; we can do that by sending this info as an hidden value with the form submission.

<HTML>
<HEAD>
	<SCRIPT LANGUAGE="JavaScript">
	var tekst="";
	function Yeehah(id,inhoud)
	  { document.getElementById(id).innerHTML = "<b>"+inhoud+"</b>";
	  tekst=tekst+"-"+id;
	  }
	function newalert(keus){
		alert("This info can be saved:\nChoice: option "+keus+"\nInformation use: (to be saved in database)\n"+tekst);
		return false;
	}
	</SCRIPT>
</HEAD>
<BODY>
<form>
	<p align=center><strong>Simple example of an information board</strong>
<p align=center>
<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=10>
	<tr>
		<td>Profile</td>
		<td></td>
		<td width=30 align=center><INPUT TYPE="submit" Value="   1   " onClick=newalert(1)></td>
		<td width=30 align=center><INPUT TYPE="submit" Value="   2   " onClick=newalert(2)></td>
		<td width=30 align=center><INPUT TYPE="submit" Value="   3   "
onClick=newalert(3)></td>
	</tr>
	<tr>
		<td width=30 align=center border=0><b>50%</b></td>
		<td width=30 align=center border=0><b>A</b></td>
		<td width=30 align=center><div ID="A1" onClick=Yeehah("A1",8)>look</div></td>
		<td width=30 align=center><div ID="A2" onClick=Yeehah("A2",7)>look </div></td>
		<td width=30 align=center><div ID="A3" onClick=Yeehah("A3",6)>look </div></td>
	</tr>
	<tr>
		<td width=30 align=center border=0><b>5%</b></td>
		<td width=30 align=center border=0><b>B</b></td>
		<td width=30 align=center><div ID="B1" onClick=Yeehah("B1",-15)>look</div></td>
		<td width=30 align=center><div ID="B2" onClick=Yeehah("B2",-12)>look </div></td>
		<td width=30 align=center><div ID="B3" onClick=Yeehah("B3",-9)>look </div></td>
	</tr>
	<tr>
		<td width=30 align=center border=0><b>20%</b></td>
		<td width=30 align=center border=0><b>C</b></td>
		<td width=30 align=center><div ID="C1" onClick=Yeehah("C1",-5)>look</div></td>
		<td width=30 align=center><div ID="C2" onClick=Yeehah("C2",-3)>look </div></td>
		<td width=30 align=center><div ID="C3" onClick=Yeehah("C3",-2)>look </div></td>
	</tr>
</table>
</form>
</BODY>
</HTML>
		

An graphic example using jquery, by Lucas Molleman

In this social learning experiment participants have to choose between two products (potato and grain) and can observe the revenue of other participants who have chosen one of these products. By hovering over the blue box the choice of that participant is displayed, and clicking on on "specify revenue" reveals the range of the revenue. By keeping the mouse down the information becomes more specific. Try this page here and download the code plus pictures.