PEEP

Programming Economic Experiments with Php/mysql

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

Other kinds of inputs: the circle test

The circle test is the very simple test to measure social preferences with only one decision. The decision maker has to choose a point on a circle by clicking on the circle; each point represents an outcome to the decision maker SELF and another person in the lab, labelled "OTHER". The advantage of such simple measure is that you can ask it repeatedly, with the OTHER either an unknown person or someone they interacted with. See Joep Sonnemans, Frans van Dijk and Frans van Winden (2006) On the dynamics of social ties structures in groups Journal of Economic Psychology 27, 187-204 Link to article. The circle test as presented here is also used in Jona Linde and Joep Sonnemans (2012) Social Comparison and Risky Choices Journal of Risk and Uncertainty 44, 45-72 Link to article

Here we used javascript pacakage wz_jsgraphics.js to make the graphics and when the participant clicks anywhere it is first checked whether the click is (in the neighborhood of) the circle and if so the rectangle and the numbers are drawn (I think this is programmed by Jona Linde). In this example we just reload the page after you submitted your decision; in a real experiment we would of course save it and go to the next page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <script type="text/javascript" src="wz_jsgraphics.js"></script>
	<script type="text/javascript">
	var IE = document.all?true:false
	function showit(){
		tempX = event.x
		tempY = event.y
		tempX = tempX -20
		tempY = tempY -30
		if ((tempX < 0) || (tempX>330) || (tempY>330)){
			tempX = 150
			tempY = 150
		}
		if (tempY < 0){tempY = 0}  
		var straal=Math.sqrt((tempX-150)*(tempX-150)+(tempY-150)*(tempY-150))
		if (straal<170 && straal>130){
			cirkelX=150+150*((tempX-150)/straal)
			cirkelY=150+150*((tempY-150)/straal)
			zelf=parseInt(10*(cirkelX-150))
			ander=parseInt(10*(150-cirkelY))
			document.Show.Zelf.value = zelf
			document.Show.Ander.value = ander
			jg2.clear();
			jg2.drawEllipse(cirkelX+5, cirkelY+5, 10, 10); 
			jg2.drawLine(cirkelX+10,cirkelY+10,cirkelX+10,160);
			jg2.drawLine(cirkelX+10,cirkelY+10,160,cirkelY+10);
			if (zelf<0 && ander<0){ 
				jg2.setColor("red");
				jg2.drawStringRect(zelf.toString(),cirkelX,140,40,"center")
				jg2.drawStringRect(ander.toString(),160,cirkelY,40,"center")
			} else if (zelf>0 && ander<0){
				jg2.setColor("black");
				jg2.drawStringRect(zelf.toString(),cirkelX,140,40,"center")
				jg2.setColor("red");
				jg2.drawStringRect(ander.toString(),120,cirkelY,40,"center")
			} else if (zelf<0 && ander>0){
				jg2.setColor("red");
				jg2.drawStringRect(zelf.toString(),cirkelX,160,40,"center")
				jg2.setColor("black");
				jg2.drawStringRect(ander.toString(),160,cirkelY,40,"center")
			} else if (zelf>0 && ander>0){
				jg2.setColor("black");
				jg2.drawStringRect(zelf.toString(),cirkelX,160,40,"center")
				jg2.drawStringRect(ander.toString(),120,cirkelY,40,"center")
			}
			jg2.setColor("black");
			jg2.paint();
		}
	}
    function showitMOZ(e)
    {
       tempX=e.pageX;
       tempY=e.pageY;
		tempX = tempX -20
		tempY = tempY -30
		if ((tempX < 0) || (tempX>330) || (tempY>330)){
			tempX = 150
			tempY = 150
		}
		if (tempY < 0){tempY = 0}  
		var straal=Math.sqrt((tempX-150)*(tempX-150)+(tempY-150)*(tempY-150))
		if (straal<170 && straal>130){
			cirkelX=150+150*((tempX-150)/straal)
			cirkelY=150+150*((tempY-150)/straal)
			zelf=parseInt(10*(cirkelX-150))
			ander=parseInt(10*(150-cirkelY))
			document.Show.Zelf.value = zelf
			document.Show.Ander.value = ander
			jg2.clear();
			jg2.drawEllipse(cirkelX+5, cirkelY+5, 10, 10); 
			jg2.drawLine(cirkelX+10,cirkelY+10,cirkelX+10,160);
			jg2.drawLine(cirkelX+10,cirkelY+10,160,cirkelY+10);
			if (zelf<0 && ander<0){ 
				jg2.setColor("red");
				jg2.drawStringRect(zelf.toString(),cirkelX,140,40,"center")
				jg2.drawStringRect(ander.toString(),160,cirkelY,40,"center")
			} else if (zelf>0 && ander<0){
				jg2.setColor("black");
				jg2.drawStringRect(zelf.toString(),cirkelX,140,40,"center")
				jg2.setColor("red");
				jg2.drawStringRect(ander.toString(),120,cirkelY,40,"center")
			} else if (zelf<0 && ander>0){
				jg2.setColor("red");
				jg2.drawStringRect(zelf.toString(),cirkelX,160,40,"center")
				jg2.setColor("black");
				jg2.drawStringRect(ander.toString(),160,cirkelY,40,"center")
			} else if (zelf>0 && ander>0){
				jg2.setColor("black");
				jg2.drawStringRect(zelf.toString(),cirkelX,160,40,"center")
				jg2.drawStringRect(ander.toString(),120,cirkelY,40,"center")
			}
			jg2.setColor("black");
			jg2.paint();
		}
	}
	if (!document.all){
		window.captureEvents(Event.CLICK);
		window.onclick=showitMOZ;
    }
    else {
		document.onclick=showit;
    }
    </script>
	<script language="JavaScript">
	function confirm_box() {
		var Zelf=document.forms['Show'].Zelf.value;
		var Ander=document.forms['Show'].Ander.value;

		if (Zelf==0 && Ander==0) {
			alert("Choose a point on the circle");
			return false;
		}
		var tekst1="Your choice is "+Zelf+" cent for you and "+Ander+" cent for the OTHER";
		if (!confirm(tekst1)){
			return false;
		} 
		else {
			return true;
		}
	}
</script>
 </HEAD>
 <BODY>
	<div id="myCanvas" style="position:absolute;top:20; left:10; height:250px;width:100%;"></div>
	<div id="myCanvas2" style="position:absolute;top:20; left:10; height:250px;width:100%;"></div>
	<script type="text/javascript">
		var jg = new jsGraphics("myCanvas");
		var jg2 = new jsGraphics("myCanvas2");
		jg.drawEllipse(10, 10, 300, 300);  
		jg.drawLine(10, 160, 330, 160);  
		jg.drawLine(160, -10, 160, 310);  
		jg.drawString("self", 330,150);
		jg.drawString("other", 160,-10);
		jg.paint();
	</script> 
	<div id="info" style="position:absolute; top: 50; left: 400;height:250px;width:100%;">
<form name="Show" method="post" action="circle.html" onsubmit="return confirm_box()">
<table>
	<tr>
		<td>Self:</td>
		<td><input type="text" name="Zelf" value="0" size="4" disabled> cent</td>
	</tr>
	<tr>
		<td>Other:</td>
		<td><input type="text" name="Ander" value="0" size="4" disabled> cent</td></tr>
	<tr>
		<td></td>
		<td><input name="verzend" type="submit" value="Send"></td>
	</tr>
</table>
</form>
</BODY>
</HTML>