Exploiting JavaScript and DHTML Browser capabilities for Experimentation in Psychology

JavaScript+HTML = Dynamic HTML (DHTML) can be very useful and extremely powerful for implementing less conventional experimental paradigms in experimental and/or cognitive psychology and allied neurosciences. It is certainly worthwhile to consider DHTML for your next experiment.

Timing in DHTML can be very accurate. This is the case on Windows NT, Windows 2000, and Windows XP (both Professional and Home edition). This is not the case for Windows 95 and Windows 98. I haven’t checked it for Windows ME. I also haven’t tested this on other platforms. Currently, on the indicated platforms timing of visual stimuli presentation in HTML pages is very accurate: A light sensor attached to a conventional computer monitor connected to a oscilloscope indicated in time appearance of the stimulus in 99% of the presentations, when SOA’s >= 33msec (result for MSIE6.0; not tested in other browsers). Response times registration seems to be very accurate as well: mouse button clicks seem to be captured at least every 10 msec in MSIE6.0. This is much better than the 30 msec of keyboard which are often used in some subfields of experimental psychology (notably developmental psychology). The accuracy is likely to depend on the hardware (i. e., mouse type/brand) however. I haven’t actually rigorously evaluated this with measuring equipment – beware. However, we did reproduce results previously reported in the literature, with a visual selective attention paradigm. Auditory stimuli currently cannot be presented with reliable timing directly from DHTML as far as I’ve tested. The start of a .wav is inconsistent and has long delays. I haven’t yet considered the SMIL aka HTML+TIME extension though).

I think it should be possible to develop COM objects to deploy other functionality (like trigger generation on a parallel port for synchronization with physiological recordings etc.), in the same way a COM object can be used to save recorded responses to file — see the HTA link below.

With newer versions of MSIE new security ‘enhancements’ are implemented, which may present warning windows about code execution on the page. Some are solvable by modifying the settings in the internet options menu.

Below you find links to some of my files that can be useful for understanding what you can do with DHTML and how to do it. Some example experiments are given (subject/participant instructions are in Dutch), but the code is extremely opaque (I apologize). If I find the time I will make it better.

I presume you know about HTML and manipulation of the document elements using the Document Object Model and JavaScript. If not, tutor yourself with Thau’s JavaScript tutorial and Advanced JavaScript tutorial (takes about 2 days for a programmer, a week for an R/SPLUS/OCTAVE/MATLAB programmer, and three weeks for a novice programmer).

Key to programming experiments is an event sequence in which each event in a trial is handled by an event specific handler (a JavaScript function). Each event handler elicits the next event. Timing is done using the setTimeout function of defined in the HTML Document Object Model. A simple example template is given below:

View template

    <html>
     <head>
     <script>
     // declare global variable (like for instance an array that is
     // going to record the RT's)
     RTs = new Array();

     trialCounter = 0;
       // counts the trials

     nrTrials = 130;
       // the number of trials

     var timerID;
        // a global variable, used to clear timeout events        

     function startTrial()
     {
         trialCounter++;
         trialStartTime = new Date();
            // record the starting time of the trial

          ... // some code that presents, e.g.,
          ... // a fixation cross
          ...     
         setTimeout("event1();", 300);
              // Calls the function event1 in 300 msec
     }

     function event1()
     {
         event1Time = new Date();
            // its a good idea to record time of each event

          ...
          ... // code that generates the
              // first event; e.g. that
              // presents a stimulus
          ...    

          document.body.onClick = recordRT;
             // the onClick handler of the document body is set
             // to recordRT, which handles the left mouse
             // button respons of a subject

           timerID = setTimeout("event2();", 150);
             // timerID is set to a identifying value for the
             // timer that is calling event2 -- if the subject
             // responds within 150 msec we want to end the trial
             // without waiting for the event sequence to finish
     }

     function event2()
     {
         event2Time = new Date();

         ...
         ... // Code that produces the next event, e.g., the
         ... // disappearance of the stimulus. Make sure you
         ... // have as little computations as possible here!

         timerID = setTimeout("ForceTrialEnd();", 1850);
             // the subject has to respond within 2 seconds
             // after stimulus presentation (2000 - 150
             // = 1850); if we don't force the end of the
             // trial, we might have to wait for ages if the 
             // subject has missed the stimulus
     }

     function recordRT()
     {
         var now = newDate();
              // First things first: what is the time?
              // ('var' keeps it local) - critical!

         document.body.onClick = ignoreMouseClicks;
             // Second things second: we don't want another
             // button press to call this function in this 
             // trial and clutter up the response time
             // - critical!

         clearTimeout(timerID);
             // Third things third: we do not wish the
             // event sequence to continue - critical!

         RTs[trialCounter] = now - event1Time;
             // this is the response time in milliseconds
             // (10msec resolution)

         endTrial();
             // handle the end of the trial
     }

     function ForceTrialEnd()
     {
         RTs[trialCounter] = -99
             // error code

         ...
         ... // other code, e.g.,
         ... // feedback, record other times
         ...

         endTrial();
             // proceed to the trial end handler
     }

     function endTrial()
     {
         trialCounter++;

         ... // code to clean up
         ... // do excessive computations, and reinstates
         ... // the system state to run another trial

         if(trialCounter < nrTrials)
             setTimeout("startTrial();", 1000);
                 // 1 second ITI
         }
         else {
             saveResults();
         }
     }

     function saveResults()
     {
         ...
         ... // code that saves the recorded RTs; see e.g.,
         ... // link on HTA's below
     }

     function ignoreMouseClicks()
     {
         // empty function
     }

     function keypress()
     { 
         if(event.keyCode == 27){
           // Capture Esc key-press to quit in between
           fixOff();
           saveResults();
           alert('Experiment stopped');
           clearTimeout(timerID);
         }   
    }
      </script>
      </head>
      <body onkeypress="keypress();">
      <!-- put some HTML elements here which will contain your
              stimuli and can be made to appear and disappear -->
      <script>
         ... // script that allows to start the experiment
         ... // by calling 'startTrial' (e.g., using a
         ... // button in the document)
      </script>

     </body>
     </html>

Key to accurate timing is to have as little computations done as possible during time critical events. If computations are necessary (e.g., if the next trial depends on the response of the subject in the previous trial), put them at the end of the trial (the endTrial event handler), and use the time recorded in each trial to check the event timing. If any computations can be done on before hand, like for example generating randomized SOA’s, ITI’s and the like, it is certainly advisable to do so.

To avoid timing inaccuracy, it is advisable to close down all processes running in the background that are not essential system processes. This includes closing all unnecessary programs, and especially network communication dependent processes. Of course, this makes it less suitable for experimenting over the Internet, but that is the case with any experimentation software! Furthermore, not all experiments are time critical, or at least not with 10 msec accuracy.

Note that this type of programming is highly non-linear, and brings you back to the days of goto statements of BASIC, and so can become difficult to follow (spaghetti) and opaque. I haven’t found another technique yet. But I think JavaScript does allow for more advanced object oriented techniques that will make your code more understandable and reusable. Some day, if I have more time, I might pursue that…

The links I promised:

HTA: HTML Applications – or making, saving and writing to text files from within webpages on a Windows platform.
Starting page that records subject characteristics and lets the experiment leader start different blocks of an experiment. All blocks started can be stopped by pressing the escape key (‘Esc’) on your keyboard. After stopping, a window will appear complaining about a broken link so to speak, this is not erroneous, as the programs were intended to run only locally and not over an IP-connection (I am to lazy to change it). The popup-window may cover you entire screen (which was intended, but due to security issues Microsoft changed this behavior in MSIE updates), if this is the case you may close the window by pressing Alt-F4.
Time estimation training block of a time estimation experiment: after an instruction alert box, it presents a square (blue or red) for a certain time (the ‘example’), then another one (red or blue) and the subject is required to press the left mouse button after the same amount of time has elapsed as the duration of the example. The subject receives feedback (‘way too early’, ‘too early’, ‘good’, ‘too late’, ‘way to late’) after each trial. Three different example durations are practiced in increasing order. To start the block you first have to press the right mouse button.
Another time estimation training block of a time estimation experiment: same as above, except that the order of example durations is randomized.
The actual time estimation experiment No feedback, except at the end of the block (intended for the experiment leader). Instructions are in Dutch. If you press the escape key (Esc on your keyboard), the experiment will be stopped. The data recorded are written to the clipboard ==> if you open for example Notepad, and choose Paste in the Edit menu (or press Ctrl-V but do not accidentally press Ctrl-C), you will past the table of times that were recorded. This is not an ideal way to save your data. Other options are: sending it to a form-process cgi script on a server (but it is advisable to close down all internet connections during the experiment if timing is extremely critical), or using so called HTML applications (see the link above).
Posner-task exogenously directed visual selective attention implements a version of this famous task, including the presentation of feedback in terms of the RT in msec, or ‘error’ (‘fout’) if the subject responded when he shouldn’t have, or vice versa. This is the version with which we could replicate a number of findings in Possamai, C. A. (1986). Relationship between inhibition and facilitation following a visual cue. Acta Psychologica, 61 243-258.
Another version of the same Posner-task Except for the differences in cue- and target-stimulus, I’m not sure what else is different.
MaestroMind: Just shows some cool effects, but is not really an experiment (although it can be used to track user thought pattern over the Internet). It ain’t finished yet.
soccer: actually an assignment for a programming course for Cognitive Science master students. More AI related than psychology.

Documentation on the Document Object Model as it is implemented in MSIE can be found at msdn .

I definitely appreciate feedback, suggestions, links, and your experience! Please send it to rgrasman•{at}•uva•nl