Measure a Reaction Time in ms on a JSP webpage

Question

I'm currently developing a website in Java/JSP and I would like one of its pages to include a reaction time measure.

To be more specific, that page would start displaying images and the user would have to react to the image's appearance by pressing one of two specific keys (like Ctrl left or Ctrl right, for example), depending of the image.

What I'd like to measure is the delay (aka Reaction Time, in ms) separating the moment the image appeared and the moment the user pressed one of the keys.

So what I would like to know is how to "tag" those two events (image appearance & key press) with a "time stamp" that would be enough precise to deduce a reaction time in milliseconds.

Here's an example of a website I found which offers a similar function : http://www.humanbenchmark.com/tests/reactiontime/

For the curious ones, what I'm trying to acheive is a Lexical Decision task ;)

Answer 1

You need to do the calculation entirely in javascript. Otherwise the reaction time will be impossible to isolate from the time required to send your request to the server.

<script>
var startTime;
function imageLoaded()
{
    startTime = (new Date()).getTime();
    document.getElementById('mybutton').disabled = false;
}

function buttonClicked()
{
    var endTime = (new Date()).getTime();
    var elapsed = endTime-startTime;
    alert("elapsed time: "+elapsed);
}
</script>

<img src='https://www.google.com/images/srpr/logo11w.png' onLoad='imageLoaded()'>

<input id='mybutton' type='button' value='click me' onClick='buttonClicked()' disabled>