Web-based word-identification task [WBWIT I]

A method to collect a massive amount of experimental data on cognitive human behavior is every experimenter’s dream. Not having to sit in the lab waiting while a participant is performing the task or the possibility of having multiple participants completing the task at once are only two of the main advantages. However, this dream has always been destroyed by the variability among hardware and software technologies among the possible participants. Those variabilities can be so large that they would have buried the small reaction time difference of some cognitive tasks (e.g., 10 milliseconds differences). Here I will show my first attempt to collect data with a web-based version of a reaction time experiment, the word-identification task.

In the word recognition task a word or a non word is displayed and the participant pushes one of two keys to respond whether s/he think the word is a proper word or not. The time passed before responding and the correctness of the response can be measured, and constitute the dependent variables. Importantly, the reaction times differences between words and non-words are usually reported around the 100 ms. Since javascript promises millisecond precision, a one hundred millisecond difference is so large that it should be able to survive the noise introduced by differences in hardware and software among general users.  Below is an explanation of the choices I made on the javascript code I wrote to realize a web-based version of the word-identification task.

This simple implementation revolves around two main functions, one displaying the words and another checking the participants’ responses.

wordDispObj = document.getElementById('wordDisp');
var timeStart;
function displayWord(counter){
 wordDispObj.innerHTML = words[counter]['name'];
 timeStart = new Date;

DisplayWord displays the word, but also updates variable ‘timeStart’ which stores the time stamp of the word display. timeStart will be subtracted from the response time stamp measured in the keyEvent function, yielding the reaction time. keyEvent, collects the participant responses. The function keyEvent also determines what will happen next. If the task is not started yet, than it gives instructions on how to start it. If the task started already keyEvent might: 1) suggest to take a break; 2) tell the participant the word-identification task is finished; 3) present a new word calling the function displayWord.

function keyEvent(event) {
 var x = event.which || event.keyCode;
 if (start !== 1){
 } else {
   words[counter]["RT"] = new Date - timeStart;
   words[counter]["keyPress"] = x;
   if (counter !== halfTime){
     instDispObj.innerHTML = "If you want to take a break do
       it now. <br> Push the 'n' key to start again";
   if (counter > totWords){
     wordDispObj.innerHTML = "Finished Thank you for
   } else {
   } // if counter > words.length, i.e. last trial
 } // if start !== 1
} // function keyEvent

A proper experiment presents stimuli in randomized order. The function shuffleArray randomized the order presentation. It uses the Fisher–Yates_shuffle  algorithm and I got the implementation from this stackoverflow response.

function shuffleArray(array) {
 for (var i = array.length - 1; i > 0; i--) {
   var j = Math.floor(Math.random() * (i + 1));
   var temp = array[i];
   array[i] = array[j];
   array[j] = temp;
 return array;

The set of words-non-words is simply an array of objects. Each object contains a word, an index and whether the word is a word or a non-word, as shown below:

var words = [
  {name:"abstair", wordIdx: 1, isword:0},
  {name:"upstairs", wordIdx: 2, isword:1},
... ]

The array is shuffled by the shuffleArray function. After the shuffling I added a practice item at the beginning of the array. Having this practice word fixed for all participants make it easy to exclude the first item from further analysis. This also assures that all participants will see the same words since the practice words that are removed are always the same.
Each object in the array is then extended in the keyEvent function with the reaction time difference and the response key the participant pressed.

To make the execution of the experiment smooth I added a ‘ready-set-go’ functionality. The countDown function call three timeOut functions telling the participant that the experiment is starting in 3, 2, 1, …

function countDown() {
  setTimeout(myTimeout1, 1000);
  setTimeout(myTimeout2, 2000);
  setTimeout(myTimeout3, 3000);
  setTimeout(startExp, 4000);
function myTimeout1() {
  wordDispObj.innerHTML = "starting in 3";
function myTimeout2() {
  wordDispObj.innerHTML = "starting in 2";
function myTimeout3() {
  wordDispObj.innerHTML = "starting in 1";
function startExp(){
  start = 1;

To avoid delays as best as I could I tried to follow the optimization suggestions if found at  w3school, google, an o’reilly book and this webpage. One interesting thing I learned is that preallocation of arrays is discouraged. This is pretty much the opposite of what is suggested for matlab or R: ‘consider preallocation for speed’.

In the second post of this series I will walk through the code I wrote to store the collected data into a mysql database, so that the data is available for a later analysis. The third post of the series describes the d3.js implementation of the visual displays giving direct feedback to the participants about their performance on the task. This post is not directly related to this series, but shows a neat display of reaction-times differences in a lexical decision task using d3.js.

Web-based word-identification task [WBWIT I]

2 thoughts on “Web-based word-identification task [WBWIT I]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s