Reactietijd vaststellen (Timestamp)

Status
Niet open voor verdere reacties.
B

bartsikkema

Gebruiker
Lid geworden
3 sep 2008
Berichten
7
Hallo allemaal,

Voor mijn afstuderen ben ik een enquete aan het schrijven in PHP (dreamweaver). Graag wil ik in deze enquete de tijd meten die proefpersonen besteden aan het bekijken van een foto.

Proefpersonen krijgen twee afbeeldingen te zien en moeten vervolgens klikken op een van de twee afbeeldingen. Hierbij wil ik graag weten hoe snel een proefpersoon op een afbeelding klinkt. Dus het verschil tussen het moment van landen op de pagina / het tonen van de afbeelding en het klikken op van de afbeeldingen

Voor het meten van "tijd tussen twee momenten" heb ik dit script gevonden op internet:

http://www.webdeveloper.com/forum/archive/index.php/t-70515.html

Volgens mij is dit al grotendeels de basis voor mijn script. Alleen is het bij mij de bedoeling dat het de tijd is tussen het landen op de pagina en het klikken op een van de twee foto`s of eventueel het klikken op de knop <verder> (dan zou ik onder beide foto`s een radiobutton kunnen plaatsen, waarmee proefpersonen hun voorkeur kunnen aangeven)

Mocht het starten van de tijd bij het landen op de pagina lastig zijn, dan zou ik eventueel ook gebruik kunnen maken van een knop "toon advertenties" (start tijd) , dan worden de twee advertenties op dezelfde pagina getoond en dan vervolgens een klik op het plaatje of op een knop.

Ik hoop dat iemand mij kan helpen aan een script!

Alvast bedankt!

Vriendelijke groet,

Bart Sikkema
 
Ik denk dat volgend script doet wat je vraagt, aangezien je reeds in php bezig bent, vermoed ik dat je wel weet hoe de waarde van de juiste knop op te vragen?
Anders schrijf ik dat ook nog wel even voor je uit.

HTML: 
<html>
<head>
<title>testje</title>

<script type="text/javascript">
<!--
//start krijgt automatisch de huidige tijd wanneer de pagina ingeladen wordt
var start = new Date();

//wordt uitgevoerd zodra de opdracht tot verzenden van het formulier is gegeven
function calculatesend(button_id) {
	//geef stop de waarde van de huidige tijd
	var stop = new Date();
	//bepaal het verschil in milliseconden
	var verschil = stop.getTime() - start.getTime();
	//stel de waarde die de aangeklikte knop verzend gelijk aan het verschil
	document.getElementById(button_id).value = verschil;
	//laat het formulier verder verzenden
	return true;
}
// -->
</script>
</head>

<body>
Klik op een afbeelding<br />
<form method="post" action="" />
<input type="image" src="image1.jpg" name="submit" alt="image1.jpg" id="1" value="" onclick="calculatesend(1)" />
<input type="image" src="image2.jpg" name="submit" alt="image2.jpg" id="2" value="" onclick="calculatesend(2)" />
</form>

</body>
</html>
 
Mooie code, maar de tijd gaat in zodra de header is ontvangen. De plaatjes zijn dan nog niet noodzakelijk geladen, en mensen met een trage verbinding zullen dus een hogere reactietijd vertonen. Als het voor statistiek onderzoek is moet je dus een functie op de onload van de plaatjes zetten, en pas de tijd in laten gaan wanneer de twee plaatjes geladen zijn.

Dat kun je doen met een functie die een waarde verhoogd elke keer dat ie geroepen wordt en de waarde controleert met het aantal plaatjes wat moet laden. Als de waarde bijv 2 is zijn er twee plaatjes geladen en kun je de tijd in laten gaan.

Let wel dat de tijd ook in het begin aan moet worden gezet, anders bestaat het risico dat een plaatje geklikt wordt voordat de tijd in is gegaan en dan krijg je een reactietijd van minus heel erg veel.

/edit:

Code: 
<html>
<head>
<title>testje</title>

<script type="text/javascript">
<!--
//start krijgt automatisch de huidige tijd wanneer de pagina ingeladen wordt
var start = new Date();
function imageLoaded()
{
  if (!this.i)
    this.i = 0
  this.i++

  if (this.i >= 2)
   start = new Date();
}

//wordt uitgevoerd zodra de opdracht tot verzenden van het formulier is gegeven
function calculatesend(button_id) {
	//geef stop de waarde van de huidige tijd
	var stop = new Date();
	//bepaal het verschil in milliseconden
	var verschil = stop.getTime() - start.getTime();
	//stel de waarde die de aangeklikte knop verzend gelijk aan het verschil
	document.getElementById(button_id).value = verschil;
	//laat het formulier verder verzenden
	return true;
}
// -->
</script>
</head>

<body>
Klik op een afbeelding<br />
<form method="post" action="" />
<input type="image" src="image1.jpg" name="submit" alt="image1.jpg" id="1" value="" onclick="calculatesend(1)" onload="imageLoaded()" />
<input type="image" src="image2.jpg" name="submit" alt="image2.jpg" id="2" value="" onclick="calculatesend(2)" onload="imageLoaded()"  />
</form>

</body>
</html>
 
Laatst bewerkt:
Heren,

Bedankt voor jullie reacties!

Het is inderdaad belangrijk dat de tijd pas begint te lopen als de plaatjes helemaal geladen zijn.

Zouden jullie het script voor mij ook kunnen aanpassen aan het volgende:

- Proefpersonen hoeven niet te klikken op een afbeelding, maar ik wil weten hoe lang ze op de pagina blijven (tijd die ze aan de afbeelding besteden). Reactietijd = tijd tussen "afbeeldingen volledig in beeld" en "klikken op verder knop"

Voor de knop verder gebruik ik het volgende PHP script:

<div align="center">
<TABLE width=489>
<TR>
<TD width="406">Ga door naar de volgende pagina (Alle vragen moeten zijn ingevuld):</TD>
<TD width="71" colspan=3> <INPUT TYPE="submit" name="button" value="Ga door" > </TD>
</TR>
</Table>

Wederom alvast bedankt voor jullie reacties!

Bart
 
Heren,

Excuses voor mijn vorige bericht. Deze is niet correct...

Ipv van dat proefpersonen op een afbeelding klikken, klikken zijn op een radiobutton.

Proefpersonen krijgen 1 afbeelding te zien en moet vervolgens een vraag, via een radiobutton, met ja of nee beantwoorden.

De interessante tijd is hier dus: Verschil "Afbeelding geladen" en "Klik op radiobutton"

De pagina mag dan automatisch verder gaan naar de volgende pagina.

Wederom alvast bedankt! :D

Bart
 
Ik vermoed dat dit het dan doet:
HTML: 
<html>
<head>
<title>testje</title>

<script type="text/javascript">
<!--
var start;
function imageLoaded()
{
  if (!this.i)
    this.i = 0
  this.i++

  if (this.i >= 1)
   start = new Date();
}

//wordt uitgevoerd wanneer op een radiobutton wordt geklikt
function calculateAndSend() {
	//geef stop de waarde van de huidige tijd
	var stop = new Date();
	//bepaal het verschil in milliseconden
	var verschil = stop.getTime() - start.getTime();
	//stel de waarde van het verborgen veld gelijk aan het verschil
	document.getElementById('verschil').value = verschil;
	//laat het formulier verzenden
	document.getElementById('formulier').submit();
}
// -->
</script>
</head>

<body>
<form method="post" action="" id="formulier" />
<img src="image1.jpg" alt="image1.jpg" onload="imageLoaded()" />
<h2>Is dit een vraag?</h2>
<input type="radio" name="keuze" value="Ja" onclick="calculateAndSend()" id="Ja" />
	<label for="Ja">Ja</label>
</input>
<input type="radio" name="keuze" value="Nee" onclick="calculateAndSend()" id="Nee" />
	<label for="Nee">Nee</label>
</input>
<input type="hidden" id="verschil" name="verschil" value="" />
</form>

</body>
</html>
Ik heb aan je radiobuttons het label-element toegevoegd, dit laat toe dat het radioknopje ook geselecteerd kan worden door op de inhoud van het label-element te klikken. Het for-argument van label moet naar het id van het bijhorende keuzerondje verwijzen.
 
Ja, dat lijkt te kloppen.

Wat je ook kunt doen is je formulier verbergen totdat de plaatjes (of het plaatje) volledig geladen zijn (of is).

Op die manier weet je zeker dat de gebruiker het plaatje pas te zien krijgt als het volledig geladen is, en de tijd die je opneemt is dus echt de reactietijd. Dat kun je op deze manier doen:

Code: 
<html>
<head>
<title>testje</title>

<script type="text/javascript">
// <![CDATA[

var start;
var imgsLoaded = false;

function imageLoaded()
{
  if (!this.i)
    this.i = 0
  this.i++

  if (this.i >= 1)
  {
    start = new Date();
    [b]document.getElementById("loadImg").style.display = "none";
    document.getElementById("containerDiv").style.display = "block";
    imgsLoaded = true;[/b]
  }
}

function calculateAndSend() {
  [b]if (!imgsLoaded)
    return false;  // radio wordt niet ingedrukt totdat plaatjes zijn geladen. Nutteloos eigenlijk, want de radio's horen niet zichtbaar te zijn[/b]
  var stop = new Date();
  var verschil = stop.getTime() - start.getTime();
  document.getElementById('verschil').value = verschil;
  document.getElementById('formulier').submit();
}

// ]]>
</script>
</head>

<body>
[b]<img id="loadImg" src="loading.gif" alt="Bezig met laden..."/>
  <div id="containerDiv" style="display: none;">[/b]
  <form method="post" action="" id="formulier" />
    <img src="image1.jpg" alt="image1.jpg" onload="imageLoaded()" />
    <h2>Is dit een vraag?</h2>
    <input type="radio" name="keuze" value="Ja" onclick="calculateAndSend()" id="Ja" />
	<label for="Ja">Ja</label>
    </input>
    <input type="radio" name="keuze" value="Nee" onclick="calculateAndSend()" id="Nee" />
	<label for="Nee">Nee</label>
    </input>
    <input type="hidden" id="verschil" name="verschil" value="-1" />
  </form>
[b]</div>[/b]

</body>
</html>
 
Heren,

Wederom super bedankt. Ik heb het script nu in m`n pagina geplakt en het lijkt te werken.

Ik loop nu echter tegen het probleem aan dat mijn script voor "ga door naar de volgende pagina" niet meer werkt

Deze werkt op de andere pagina`s op deze manier:

<BODY>
<FORM ACTION="http://projects.gw.utwente.nl/cgi-bin/practice/formsdata.pl" name="SiteDB" METHOD=post onsubmit="return check_form(this);">
<input type="hidden" name="filebase" VALUE="Enquete.11">
<input type="hidden" name="nexturl" VALUE="http://practice.gw.utwente.nl/misc/Enquete/Home/Enquete.11/WebForm/sven.htm">
<INPUT TYPE="hidden" NAME="formval" VALUE="Enquete.11-1.htm">


1.htm is de naam van de pagina en sven.htm is de naam van de volgende pagina


De "ga door" knop ziet er zo uit:

<TABLE width=489>
<TR>
<TD width="406">Ga door naar de volgende pagina (Alle vragen moeten zijn ingevuld):</TD>
<TD width="71" colspan=3> <INPUT TYPE="submit" name="button" value="Ga door" > </TD>
</TR>
</Table>
</div>
</FORM>

"normaal" gesproken loopt alles vanzelf door, maar in dit geval dus niet. Is het op deze pagina makkelijker om de knop verder te gebruiken of kan er automatisch doorgegaan worden naar de volgende pagina, wanneer er wordt geklikt op de radiobutton? Dit laatste zou mijn voorkeur hebben


Daarnaast krijg ik in IE links onderaan de melding "error on page".

Het hele script ziet er nu als volgt uit (gaat dit zo in de goede richting?):

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL=StyleSheet HREF="file:///D|/Documents%20and%20Settings/GW-NB-CW/Desktop/default.css" TYPE="text/css" TITLE="24-bit Color Style">
<meta name="GENERATOR" content="Mozilla/4.51 [en] (Win95; I) [Netscape]">
<!-- TemplateBeginEditable name="doctitle" -->
<TITLE>WebForm</TITLE>
<!-- TemplateEndEditable --><style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #FFFFFF;
}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {font-size: 18px}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<script type="text/javascript">
// <![CDATA[

var start;
var imgsLoaded = false;

function imageLoaded()
{
if (!this.i)
this.i = 0
this.i++

if (this.i >= 1)
{
start = new Date();
document.getElementById("loadImg").style.display = "none";
document.getElementById("containerDiv").style.display = "block";
imgsLoaded = true;
}
}

function calculateAndSend() {
if (!imgsLoaded)
return false; // radio wordt niet ingedrukt totdat plaatjes zijn geladen. Nutteloos eigenlijk, want de radio's horen niet zichtbaar te zijn
var stop = new Date();
var verschil = stop.getTime() - start.getTime();
document.getElementById('verschil').value = verschil;
document.getElementById('formulier').submit();
}

// ]]>
</script>



</HEAD>
<BODY>
<FORM ACTION="http://projects.gw.utwente.nl/cgi-bin/practice/formsdata.pl" name="SiteDB" METHOD=post onsubmit="return check_form(this);">
<input type="hidden" name="filebase" VALUE="Enquete.11">
<input type="hidden" name="nexturl" VALUE="http://practice.gw.utwente.nl/misc/Enquete/Home/Enquete.11/WebForm/sven.htm">
<INPUT TYPE="hidden" NAME="formval" VALUE="Enquete.11-1.htm">

<br>
<H3 align="center">&nbsp;</H3>
<div align="center">
<table width="75%" border="1">
<tr bgcolor="#336633">
<td colspan=9 bgcolor="#0066FF"><div align="center"><font color=white><strong>Het nieuwe gezicht van Sanex is <span class="style2">Sven Kramer </span></strong></font> </div>
</tr>
<tr>
<td><p>xx</p>
</td>
</tr>
</TABLE>
</div>

<p><img id="loadImg" src="loading.gif" alt="Bezig met laden..."/>
<div id="containerDiv" style="display: none;">
</p>
<p>&nbsp;</p>
<form method="post" action="" id="formulier" />

<div align="center"><img src="sven.jpg" alt="sven.jpg" onload="imageLoaded()" />
</div>
<h4 align="center">Heeft Sanex een goede keuze gemaakt?</h4>
<div align="center">
<input type="radio" name="keuze" value="Ja" onclick="calculateAndSend()" id="Ja" />
<label for="Ja">Ja</label>
</input>
<input name="keuze" type="radio" id="Nee" onclick="calculateAndSend()" value="Nee" />
<label for="Nee">Nee</label>
</input>
<input type="hidden" id="verschil" name="verschil" value="-1" />
</form>

</div>
<div align="center">
<TABLE width=489>
<TR>
<TD width="406">Ga door naar de volgende pagina (Alle vragen moeten zijn ingevuld):</TD>
<TD width="71" colspan=3> <INPUT TYPE="submit" name="button" value="Ga door" > </TD>
</TR>
</Table>
</div>
</FORM>
</BODY>
</HTML>
 
Het komt door een nested form elementen. Overigens is de html wat aan de slordige kant. Maargoed, de oplossing (denk ik):

Vervang deze lijn:
Code: 
<FORM ACTION="http://projects.gw.utwente.nl/cgi-bin/practice/formsdata.pl" name="SiteDB" METHOD=post onsubmit="return check_form(this);">

door:
Code: 
<form action="http://projects.gw.utwente.nl/cgi-bin/practice/formsdata.pl" name="SiteDB" method="post" onsubmit="return check_form(this);" id="formulier">



en vervang dit:
Code: 
<img id="loadImg" src="loading.gif" alt="Bezig met laden..."/>
<div id="containerDiv" style="display: none;">
</p>
<p>&nbsp;</p>
<form method="post" action="" id="formulier" />

<div align="center"><img src="sven.jpg" alt="sven.jpg" onload="imageLoaded()" />
</div>
<h4 align="center">Heeft Sanex een goede keuze gemaakt?</h4>
<div align="center">
<input type="radio" name="keuze" value="Ja" onclick="calculateAndSend()" id="Ja" />
<label for="Ja">Ja</label>
</input>
<input name="keuze" type="radio" id="Nee" onclick="calculateAndSend()" value="Nee" />
<label for="Nee">Nee</label>
</input>
<input type="hidden" id="verschil" name="verschil" value="-1" />
</form>

</div>

door dit:
Code: 
<img id="loadImg" src="loading.gif" alt="Bezig met laden..."/>
<div id="containerDiv" style="display: none;">
</p>
<p>&nbsp;</p>
<div align="center"><img src="sven.jpg" alt="sven.jpg" onload="imageLoaded()" />
</div>
<h4 align="center">Heeft Sanex een goede keuze gemaakt?</h4>
<div align="center">
<input type="radio" name="keuze" value="Ja" onclick="calculateAndSend()" id="Ja" />
<label for="Ja">Ja</label>
</input>
<input name="keuze" type="radio" id="Nee" onclick="calculateAndSend()" value="Nee" />
<label for="Nee">Nee</label>
</input>
<input type="hidden" id="verschil" name="verschil" value="-1" />

</div>
 
Hi Glest,

Super bedankt! Zojuist getest en het werkt helemaal prima, mijn dank hiervoor!

Nu nog een vraag:

Is het ook mogelijk om te voorkomen dat proefpersonen de knop "vorige" van IE en Firefox kunnen gebruiken, zodat ze niet terug kunnen gaan naar de vorige pagina in de enquête?

Wederom alvast bedankt!

Bart
 
Hi Glest,

Ik heb zojuist een code kregen, ik deel hem met je,zodat jij het ook weer weet. In de <head> plaatsen van pag 1 en pag 2, en vervolgens kun je niet terug van 2 naar 1.

<script type="text/javascript">
<!--
// Disable browser's Back button on another pg being able to go back to this pg.
history.forward();
//-->
</script>

Nu heb ik een volgende vraag:

In de enquete zit een filmpje van X seconden, bezoekers moeten deze afkijken en mogen niet eerder op de "ga door button" klikken.

Ik wil de "ga door - button" dus uit kunnen schakelen voor een X aantal seconden. Script button ziet er al volgt uit:

<TABLE width=489>
<TR>
<TD width="406">Ga door naar de volgende pagina (Alle vragen moeten zijn ingevuld):</TD>
<TD width="71" colspan=3> <INPUT TYPE="submit" name="button" value="Ga door" > </TD>
</TR>
</Table>

Wederom :-) alvast bedankt!
 
verander je button in dit:
HTML: 
<INPUT TYPE="submit" id="button_next" name="button" value="Ga door" disabled="disabled" />

En gebruik dit script. Zet het voor de zekerheid onder je button in de HTML
PHP: 
<script type="text/javascript">
function enableNext()
{
  document.getElementById("button_next").disabled=false;
}
window.setTimeout("enableNext()", 5000); // 5 seconden (5000 miliseconden)
</script>
 
Hi allemaal en Glest in het bijzonder,

Ik wilde jullie nog even bedanken voor jullie hulp bij mijn enquête. Hij gaat morgen definitief online!

Bart
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan