For an easier way to customize your reaction time task, click here.

Current version: 1.7 ()

To set up a reaction time (RT) task, the first thing to do is to download and unzip one of the following zip files. For an RT task compatible with Bill’s survey script, download this zip file. For an RT task compatible with my survey form template, download this zip file. This file contains a survey page (“page1.html”), which should be inserted into the same file directory as the rest of your survey pages. Please note that if you wish to include the RT task later on in the survey, you can safely rename “page1.html” to something else (e.g., “page3.html”); it won’t break anything.

Disclaimer: Javascript has a couple fundamental limitations with how it runs timed events. First, its internal clock can be off by about +/-15ms in some browsers (info). In addition, the processing speed of computers may cause events to take longer than they should (i.e. a 20ms prime may take 25ms instead). I have created a list of a few methods to compensate for these problems.

Output

When participants complete the task, by default the output will consist of RT data for each trial, in the following format: Block_n(word [correct,RT]), where ‘n’ is the number of the block, ‘correct’ is 1 for a correct response, and 0 for an incorrect response, and ‘RT’ is the reaction time in milliseconds. You can turn off the recording of this RT data (see the information for “keepRT” under Initial Setup below); however, if you do this, you will not be able to do any correction for outliers. Thus, it is highly recommended to keep the raw data.

In addition to the raw RT data, the script also outputs three values for each block:

  1. The average response time of the block
  2. The standard deviation of correct responses in the block
  3. The error rate (proportion incorrect) for responses in the block

These values are output in sequential order, even if the blocks were presented in random order. Last, it also outputs three final summary values:

  1. The overall average response time
  2. The overall standard deviation of all correct responses
  3. The overall error rate for all responses

Customization

In order to customize the RT task itself, you need to open “page1.html” in a text editor like Notepad, Wordpad, or my personal preference, Notepad++ (which should be available on school computers, and is also free to download). All the details about the RT task are stored in variables, which I have tried to make as easy to edit as possible. (If you wish to see the full documentation, you may take a look at the API documentation.)

Initial Setup

Near the top of the file (starting at about line 42) are a few variables: var settings = { delay: 500, // delay between words/images, in milliseconds keepRT: true, // if set to true, will output data for all reaction times; // if set to false, only averages, standard deviations, and error rates will be stored in output randomOrder: false, // if set to true, words will be presented in random order; // if set to false, words will be presented sequentially randomBlocks: false, // if set to true, blocks will be presented in random order; // if set to false, blocks will be presented sequentially showLabels: true, // if set to true, left/right labels will be shown in the top corners of the screen during trials; // if set to false, labels will be hidden showFixation: true, // if set to true, a + symbol will be displayed before each word to fixate attention; // if set to false, no fixation symbol will be shown fixationTime: 500, // time to show fixation symbol, in milliseconds; only applicable if showFixation is set to true fixationDelay: 400 // delay between fixation symbol and next word/image, in milliseconds; // only applicable if showFixation is set to true }; Be sure that you only change what is in between the equals sign and the semi-colon (or what is highlighted red above). The text after the double-slash (//) gives a bit more detail about what each variable does.

Trial Blocks

After these general settings come the settings for each block. They all start off like so: /* ------------- BLOCK 1 ------------- */ Under this are the variables for the block: the instructions for that block, the labels for left and right (e.g, “Like” and “Don’t like”), and the words/images that will be displayed. Each variable has the block number listed in square brackets after its name.

As you can see, here are the instructions for block 1: instructions[1] = "The following screens will ask you to distinguish between things that most people in North America might like or dislike.<br><br>\ Press the 'a' key if the stimulus corresponds with the category MOST PEOPLE DON'T LIKE.<br>\ Press the 'k' key if the stimulus corresponds with the category MOST PEOPLE LIKE.<br><br>\ Please place your hands on the keyboard now, so that you can press the 'a' key with your left hand, and the 'k' key with your right hand.<br><br>\ Make sure that your hands are positioned correctly because only 'a' and 'k' will be recognized by the program.<br><br>\ GO FAST but please select the answer you want."; These can be edited as you please, but with three things to keep in mind.

  1. Line breaks that will be visible to the participant are created with this: <br>
  2. If you want to make the instructions go onto multiple lines to make it easier for yourself to read (this will not be visible to participants), you MUST end the line with a backslash (\). Make sure it’s the absolute last thing on the line—not even any spaces afterwards! Failure to do this will mess everything up…it won’t be pretty.
  3. If you want to use double quotes, "like so", you need to “escape” each double quote with a backslash in front of it, \"like so\". This is because the instructions themselves are inside double quotes, so putting more double quotes makes Javascript think that the instructions have ended.

Following the instructions are the labels for left and right: labels[1] = ["Most people don't like", "Most people like"]; // left, right Edit the code highlighted in red to your heart’s desire, but keep everything else how it is or risk catastrophe.

Adding Words/Images

Each block has a variable (“words”) that hold the words/images to be displayed. The information for each word takes up one line, and each one is surrounded by curly braces and separated by a comma (no comma needed at the end). If you wish to add more words, just add a comma to the last item and add some more. Here is an example of the words for block 1:

words[1] = [ {"word": "party", "correct": "k"}, {"word": "disease", "correct": "a"}, {"word": "smile", "correct": "k"}, {"word": "abuse", "correct": "a"}, {"word": "friend", "correct": "k"}, {"word": "garbage", "correct": "a"}, {"word": "joy", "correct": "k"}, {"word": "death", "correct": "a"} ];

As you can see, each word is identified by "word", and is surrounded by double quotes. The "correct" parameter is also necessary; this identifies which key is the correct key for that word. The correct key must be a single letter or number.

Note: If “randomOrder” up above is set to true, the order of the word list will not matter, since the words will be selected randomly. If “randomOrder” is set to false, however, the words will be presented in order from top to bottom.

The process for adding images is very similar: words[1] = [ {"word": "https://artsresearch.uwaterloo.ca/~username/studyname/images/white1.jpg", "correct": "k"}, {"word": "https://artsresearch.uwaterloo.ca/~username/studyname/images/black1.jpg", "correct": "a"}, {"word": "https://artsresearch.uwaterloo.ca/~username/studyname/images/white2.jpg", "correct": "k"}, {"word": "https://artsresearch.uwaterloo.ca/~username/studyname/images/black2.jpg", "correct": "a"} ]; You should upload the images somewhere onto your artsresearch account, and then insert the full URL (including the “http” at the beginning). If you are running your survey on a secure server, change the URL you insert from “http” to “https” to make sure that participants don’t get strange error messages.

There are three other parameters which are optional, but which give greater control over how the words and images are presented.

"display"

The first is the "display" parameter: {"word": "party", "correct": "k", "display": "<span style='font-weight: bold'>party</span>"} The "display" parameter overrides the regular presentation of the word to allow for special formatting. If you want different sizes, fonts, or other options, you may do it with this. Use of this parameter requires basic knowledge of HTML and likely CSS as well. If you want to display a word in a specific way and don’t know how to do it, a quick Google search for “CSS” + a description of what you want to do should quickly find an answer. Feel free to email me (Jeff Hughes) if you’re still stumped.

"position"

Another optional parameter is the "position" parameter. This allows you to adjust the spot where you want images to be displayed: {"word": "party", "correct": "k", "position": "top"} In the above code, the word will be displayed 200 pixels above the center of the screen. Valid values for this parameter are as follows: "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right" and "default" (center). Both "default" and "center" are unnecessary (you can just omit the "position" parameter for that word instead), but they are there if you wish to use them to keep things straight.

"colour"

The final optional parameter is the "colour" parameter. This, as you can probably guess, allows you to change the colour of the word: {"word": "party", "correct": "k", "colour": "green"} You may use any of the 16 legal HTML colour names, or any valid colour hex code. Note that hex codes must be six characters in length and begin with a pound sign (#). The default for this parameter is "black".

All of these parameters may be mixed and matched, as long as the "word" and "correct" parameters are present. So, for example, this is perfectly acceptable: {"word": "party", "correct": "k", "display": "<span style='font-weight: bold'>party</span>", "position": "bottom", "colour": "#00FF00"} The above code will display the word “party” in bold, green (#00FF00) text, 200 pixels below the center of the screen.

Adding Primes

In the context of this script, a “prime” is anything that (a) comes before a word, and (b) does not require a response from the participant. Primes can be displayed for any duration, and there can be multiple primes for any given word.

By default, no primes are in the script, so if you wish to add a prime, you must insert the following right below the end of the words list for that block:

primes[1] = [ {"prime": "xxxxxx", "word": 1, "duration": 250, "delay": 0}, {"prime": "achieve", "word": 1, "duration": 20, "delay": 0}, {"prime": "xxxxxx", "word": 1, "duration": 250, "delay": 200}, {"prime": "win", "word": 2, "duration": 20, "delay": 200}, {"prime": "success", "word": 3, "duration": 20, "delay": 200} ];

The number 1 in the square brackets such as primes[1] indicates that these are the primes for the first block of words. The prime is identified by “prime”, and is surrounded by double quotes. Note that images cannot be used as primes like they can in place of words. The “word” parameter identifies which word the prime should be associated with. The words are numbered starting at 1 from top to bottom. So, the first word (“party” in the case of my example) has three primes associated with it. These primes will always be displayed in order, so the word “achieve” will be forward and backward masked by “xxxxxx”.

Two more important parameters are “duration” and “delay”. As you might imagine, these control how long the prime is shown for (duration) and the space in between the prime and the following word/prime (delay). Both are in milliseconds, and the default for both of these is 200.

Finally, there are three optional parameters that can be used for primes, which function identically to the associated parameters for words: display, position, and colour.

Adding More Blocks

Each block is done in the same way. If you need to add more blocks of words, you can copy and paste the code below, but be sure to change all the NNNs with the number of the next block!

/* ------------- BLOCK NNN ------------- */ // If you wish for the instructions to span more than one line, you MUST place a backslash ( \ ) at the end of the line! // If you wish to use double quotes, place a backslash in front of them like so: \"This is fun!\" instructions[NNN] = ""; labels[NNN] = ["", ""]; // left, right // To insert an image instead of a word, copy and paste the absolute URL (including "http") where the image is located words[NNN] = [ {"word": "", "correct": ""} ];

Final Steps

Once you have the items customized the way you wish, run Bill’s script or my script like you would normally do for surveys. Participants will now be able to complete your RT task, with output for each one.

That’s it! Good luck, and remember: Don’t drink and Stroop.