In many experiments outcomes are partly determined by random draws. This can be done by hand, for example to decide what period will be paid out (and typically you enter that into the program to calculate the earnings). When a random device has to be applied many times during a session, it will be more practical to let the computer do this. One could of course tell the participants simply that they have won or lost, but sometimes it will be better to stress the randomness. In the health insurance paper (Arthur Schram and Joep Sonnemans (2011)) we opted for the very simple solution of animated gifs. In photoshop I (Joep) made animated gifs for all numbers, named n1b.gif, n2b.gif, etc.. The computer draws an random number (like $r1=rand(0,9); and the page displays the corresponding animated gif <img src=\"images/n".$r1."b.gif\">. If the number drawn is lower than the number in the profile the accident happens and the payoff is determined according to the chosen policy results. After 8 seconds, when all the gif files have ended, the payoff consequences were displayed (line 14-26 in the code below). Here you find a collection of animated numbers in gif-files is several variations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<STYLE TYPE="text/css">
.profiel {position: absolute; left:20px; top: 100px; width: 500px; overflow: visible; overflow-y: hidden}
.alternatieven {position: absolute; left:190px; top: 100px; width: 150px; height:250px overflow: auto; overflow-y: hidden}
.celhead {width: 120px; height:27px; text-align: right; border: 2px }
.cel1 {width: 120px; height:27px; text-align: right; border: 2px; background-color : #DFFFAE}
.cel2 {width: 120px; height:27px; text-align: center; border: 2px; background-color : #9BCDFF}
.cel3 {width: 120px; height:27px; text-align: right; border: 2px }
.celbutton {height:40px; text-align: center; border:2px ;}
</STYLE>
</head>
<body onload="opdracht()">
<SCRIPT LANGUAGE="JavaScript">
function opdracht() {setTimeout("vulin()",8000);}
function vulin() {
document.getElementById("1").innerHTML = "<strong> -10</strong>"
document.getElementById("2").innerHTML = "<strong> 0</strong>"
document.getElementById("3").innerHTML = "<strong> 0</strong>"
document.getElementById("4").innerHTML = "<i>0</i>"
document.getElementById("5").innerHTML = "<i>0</i>"
document.getElementById("6").innerHTML = "<i>-40</i>"
document.getElementById("7").innerHTML = "<strong> -40</strong>"
document.getElementById("8").innerHTML = "<strong> -198</strong>"
}
</SCRIPT>
<TABLE RULES=GROUPS frame=box BORDER=1 CELLPADDING=10 CELLSPACING=10 class="profiel">
<tr>
<td class=celbutton></td><td class=celbutton><strong>Profile</strong></td>
<td class=cel3>Policy 1</td>
<td class=cel3>Result</td>
<td class=cel3>Earnings</td>
</tr>
<tbody>
<tr>
<td class=celhead><strong>Premium</strong></td><td class=cel3><strong> </strong></td>
<td class=cel2>148</td>
<td class=cel3></td>
<td class=cel3><font size=+1><strong>-148</strong></font></td>
</tr>
</tbody>
<tbody>
<tr>
<td class=celhead><strong>Z</strong></td><td class=cel1><strong>19%</strong></td>
<td class=cel2 >-10</td>
<td class=cel3><img src="images/n0.gif"/><img src="images/n8b.gif"/></td>
<td class=cel3><font size=+1><div id="1"></div></font></td>
</tr>
</tbody>
<tbody>
<tr>
<td class=celhead><strong>A</strong></td><td class=cel1><strong>2%</strong></td>
<td class=cel2>-1000</td>
<td class=cel3><img src="images/n3.gif"/><img src="images/n4b.gif"/></td>
<td class=cel3><font size=+1><div id="2"></div></font></td>
</tr>
<tr>
<td class=celhead><strong>B</strong></td><td class=cel1><strong>20%</strong></td>
<td class=cel2>0</td>
<td class=cel3><img src="images/n7.gif"/><img src="images/n1b.gif"/></td>
<td class=cel3><font size=+1><div id="3"></div></font></td>
</tr>
</tbody>
<tbody>
<tr>
<td class=celhead><strong>C</strong></td><td class=cel1><strong>5%</strong></td>
<td class=cel2>-80</td>
<td class=cel3><img src="images/n6.gif"/><img src="images/n1b.gif"/></td>
<td class=cel3><font size=+1><div id="4"></div></font></td>
</tr>
<tr>
<td class=celhead><strong>D</strong></td><td class=cel1><strong>20%</strong></td>
<td class=cel2>-50</td>
<td class=cel3><img src="images/n6.gif"/><img src="images/n8b.gif"/></td>
<td class=cel3><font size=+1><div id="5"></div></font></td>
</tr>
<tr>
<td class=celhead><strong>E</strong></td><td class=cel1><strong>50%</strong></td>
<td class=cel2>-40</td>
<td class=cel3><img src="images/n3.gif"/><img src="images/n2b.gif"/></td>
<td class=cel3><font size=+1><div id="6"></div></font></td>
</tr>
<tr>
<td class=celhead colspan=2><strong><font size=-1>Own risk</font></strong></td>
<td class=cel2>50</td>
<td class=cel3></td>
<td class=cel3><font size=+1><div id="7"></div></font></td>
</tr>
</tbody>
<tbody>
<tr>
<td class=celhead colspan=2><strong>Total</strong></td>
<td class=cel2></td>
<td class=cel3></td>
<td class=cel3><font size=+1><div id="8"></div></font></td>
</tbody>
</table>
</body>
</html>