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>