PEEP

Programming Economic Experiments with Php/mysql

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

Mouselab: hide and show

In a classic book (Payne, J. W., Bettman, J. R., & Johnson, E. J. (1993). The adaptive decision maker. Cambridge University Press) a mouselab was introduced: participants have to move the mouse over a part of the screen to see the underlying information. When they move the mouse away, the information is hidden again (in contrast to the information board, where retrieved information stays available). The idea is that this will show insights in the process of decision-making. This makes only sense in environments where participants cannot make notes.

This can be easily programmed by using a javascript function that hides or displays an element. In the example above every cell has two javascript events defined: onMouseEnter and onMouseLeave. Two very basic javascript functions are defined which changes the content of the cell, and record the time and cell ID in a string for saving in the database. In the example the string is displayed when you click on one of the three buttons. 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.

In this example the format of the text in the cell is changed to bold when you have looked in that cell before. Whether this is a good idea depends on the application; it can easily be changed in the code of the function.

See also mouselabweb for an implementation, especially for choice experiments and experimenters with little programming experience, with many options. (I (JS) found the code not very clear, but that can be because they made it also usable for very old browsers).

<HTML>
<HEAD>
	<SCRIPT LANGUAGE="JavaScript">
	var tekst="";
    dtNewDate = new Date(); 
    starttime = dtNewDate.getTime();
   function fillin(id,inhoud){
       document.getElementById(id).innerHTML = ""+inhoud+""; 
    }
	function ShowCont(id,inhoud){ 
        fillin(id,inhoud);
        dtNewDate = new Date();
        eventtime = dtNewDate.getTime();
        var curtime = eventtime-starttime;
        tekst=tekst+"\n"+curtime+" IN-"+id;
    }
	function HideCont(id,inhoud){ 
        fillin(id,inhoud);
        dtNewDate = new Date();
        eventtime = dtNewDate.getTime();
        var curtime = eventtime-starttime;
        tekst=tekst+","+curtime+" OUT-"+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 mouselab table</strong>
<p align=center>
<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=10>
	<tr>
		<td width=200 align=center><INPUT TYPE="submit" Value="   1   " onClick=newalert(1)></td>
		<td width=200 align=center><INPUT TYPE="submit" Value="   2   " onClick=newalert(2)></td>
		<td width=200 align=center><INPUT TYPE="submit" Value="   3   " onClick=newalert(3)></td>
	</tr>
	<tr>
		<td width=200 align=center ID="A1" onMouseEnter=ShowCont("A1",3) onMouseLeave=HideCont("A1","look")>look</td>
		<td width=200 align=center ID="A2" onMouseEnter=ShowCont("A2",7) onMouseLeave=HideCont("A2","look")>look</td>
		<td width=200 align=center ID="A3" onMouseEnter=ShowCont("A3",6) onMouseLeave=HideCont("A3","look")>look</td>
	</tr>
	<tr>
		<td width=200 align=center ID="B1" onMouseEnter=ShowCont("B1",8) onMouseLeave=HideCont("B1","look")>look</td>
		<td width=200 align=center ID="B2" onMouseEnter=ShowCont("B2",7) onMouseLeave=HideCont("B2","look")>look</td>
		<td width=200 align=center ID="B3" onMouseEnter=ShowCont("B3",6) onMouseLeave=HideCont("B3","look")>look</td>
    </tr>
	<tr>
        <td width=200 align=center ID="C1" onMouseEnter=ShowCont("C1",-5) onMouseLeave=HideCont("C1","look")>look</td>
		<td width=200 align=center ID="C2" onMouseEnter=ShowCont("C2",-3) onMouseLeave=HideCont("C2","look")>look</td>
		<td width=200 align=center ID="C3" onMouseEnter=ShowCont("C3",-2) onMouseLeave=HideCont("C3","look")>look</td>
	</tr>
</TABLE>
</form>
</BODY>
</HTML>