<html>
<head>
<title>Perception</title>
<script language="JavaScript1.2" type="text/javascript">
<!--
var txt="<table width='100%' border='1'><tr style='font-weight: bold'><td>Nummer</td><td>Billednavn</td><td>Tid i millisekunder</td><td>Koordinatsæt</td><td>Hit</td></tr>";
var time = 5000; // Tid pr. billede i millisekunder
var time2 = time
var running=false
var picNum=0
var numOfPics=5 // Antal billeder
var outsideSpot=false
var tempX = 0 //Muskoordinater
var tempY = 0
var image=new Array(numOfPics)
image[0]="climb.jpg"
image[1]="tennisgrip1.gif"
image[2]="trailer.jpg"
image[3]="wtrfall.jpg"
image[4]="SizeConstancy03.jpg"
image[5]=""
image[6]=""
image[7]=""
image[8]=""
image[9]=""
image[10]=""
image[11]=""
var mapCoords=new Array(numOfPics)
mapCoords[0]='<area shape="rect" coords="6,4,178,165" onClick="check(0)";>'
mapCoords[1]='<area shape="poly" coords="89,350,35,351,47,324,39,289,70,284,91,289" onClick="check(1)">'
mapCoords[2]='<area shape="poly" coords="194,49,190,62,156,59,157,51,191,40,229,37,253,54,244,68,219,64,213,49" onClick="check(2)">'
mapCoords[3]='<area shape="poly" coords="151,298,121,287,101,314,102,330,116,336,140,329" onClick="check(3)">'
mapCoords[4]='<area shape="poly" coords="78,45,9,42,40,15,72,17,69,32" onClick="check(4)">'
mapCoords[5]='<area shape="poly" coords="33,225,4,204,11,181,47,172,74,189,84,220,65,226" onClick="check(5)">'
mapCoords[6]='<area shape="poly" coords="8,289,8,245,46,235,80,243,90,281,52,265" onClick="check(6)">'
mapCoords[7]='<area shape="poly" coords="194,207,213,236,229,232,236,210" onClick="check(7)"> '
mapCoords[8]='<area shape="poly" coords="118,246,90,224,91,209,137,183,171,190,186,205,160,232" onClick="check(8)">'
mapCoords[9]='<area shape="poly" coords="122,153,100,152,88,128,110,124,118,116,141,116,161,125,158,138,136,144" onClick="check(9)">'
mapCoords[10]='<area shape="poly" coords="104,55,121,50,129,60,124,76,119,85,104,96" onClick="check(10)"> '
mapCoords[11]='<area shape="poly" coords="245,345,250,338,248,330,251,275,211,253,164,246,164,290,191,289,190,302,182,320,164,336,164,347" onClick="check(11)">'
var ma=''
ma+='<area shape="poly" coords="0,0,150,144" onClick="check(6)";>'
ma+='<area shape="poly" coords="89,350,35,351,47,324,39,289,70,284,91,289" onClick="check(4)">'
ma+='<area shape="poly" coords="194,49,190,62,156,59,157,51,191,40,229,37,253,54,244,68,219,64,213,49" onClick="check(8)">'
ma+='<area shape="poly" coords="151,298,121,287,101,314,102,330,116,336,140,329" onClick="check(3)">'
ma+='<area shape="poly" coords="78,45,9,42,40,15,72,17,69,32" onClick="check(11)">'
ma+='<area shape="poly" coords="33,225,4,204,11,181,47,172,74,189,84,220,65,226" onClick="check(0)">'
ma+='<area shape="poly" coords="8,289,8,245,46,235,80,243,90,281,52,265" onClick="check(5)">'
ma+='<area shape="poly" coords="194,207,213,236,229,232,236,210" onClick="check(10)"> '
ma+='<area shape="poly" coords="118,246,90,224,91,209,137,183,171,190,186,205,160,232" onClick="check(1)">'
ma+='<area shape="poly" coords="122,153,100,152,88,128,110,124,118,116,141,116,161,125,158,138,136,144" onClick="check(7)">'
ma+='<area shape="poly" coords="104,55,121,50,129,60,124,76,119,85,104,96" onClick="check(9)"> '
ma+='<area shape="poly" coords="245,345,250,338,248,330,251,275,211,253,164,246,164,290,191,289,190,302,182,320,164,336,164,347" onClick="check(2)">'
function showImage(){
if (running==true){
document.forms.over.pic.src = image[picNum];
}
}
function check(item){
if (running==true){
if (picNum<numOfPics){
if (item==1000000 || picNum!=item) {
outsideSpot=true
}
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
showNextImg();
}
else {document.write(txt+"</table>")}
}
}
function showNextImg() {
timeB = new Date();
timeDifference = timeB - timeA;
txt+="<tr><td>"+picNum+"</td><td>"+image[picNum]+"</td><td>"+timeDifference+"</td><td>"+tempX+","+tempY+"</td><td>";
if (outsideSpot==true) {txt+="Ramt ved siden af!</td></tr>"}
else {txt+=" </td></tr>"}
outsideSpot=false
window.clearTimeout(Timer);
getPicNum(picNum);
picNum=picNum+1;
if (picNum>=numOfPics){document.write(txt+"</table>")}
showImage();
time=time2;
CountDown();
}
function getPicNum(x) {
return x
}
function aktiveret() {
if (running==false){
time=time2;
CountDown();
running=true;
showImage()}
}
function CountDown(){
Timer = setTimeout( "showNextImg()", time);
timeA = new Date();
}
// -->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="over">
<table width="561" border="0" cellpadding="10">
<tr>
<td width="264" valign="top"><img src="Grafik/stue.jpg" width="264" height="360" alt="" border="0" usemap="#Map" name="pic">
<map name="Map">
<script language="JavaScript1.2" type="text/javascript">
document.write(mapCoords[getPicNum()]);
</script>
<!--<area shape="rect" coords="1,0,264,360" onClick="check(1000000)";> -->
</map></td>
<td width="287" valign="top"> <br>
Tekst <p>
<input type="Button" value="Start forsøget" onclick="java script: aktiveret();">
<input type="Button" value="Start forfra" onclick="java script: time=5; picNum=0; showImage()">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
