Creating an online reaction time based psychological test used to involve lots of custom coding, trial and error. Luckily, the last few years several services and tools have made that process a lot easier. Amazon Mechanical Turk enables you to easily gather human subject data in exchange for a small sum of money. Online software-as-a-service such as the online survey platform Qualtrics provide a flexible system for generating and analyzing surveys and experiments. And, last but not least, there are now frameworks like QRTEngine and jsPsych, both built in browser-native JavaScript, CSS and HTML.

One of the strong suites of Qualtrics is that you can add custom Javascript, CSS, HTML or JQuery code to your questions question. It offers its own Javascript API, enables you to add JQuery, and, if need be, other Javascript based libraries. Here I will show you how to add a jsPsych experiment to Qualtrics.

To make jsPsych work in Qualtrics, you first have to upload it to the Qualtrics file library.

In the Library tab, open the Files Library section

Click Upload a New File.

Click Choose File and select the file from your computer.

For this experiment, you would just upload jspsych.js, jspsych-text.js, jspsych-single-stim.js.

Now might be a good time to upload the stimuli as well – you will access those from the main experiments Javascript code.

Our next step is to add JQuery (jsPsych builts on jQuery) and add links to the location of the uploaded JS jsPsych library.

Navigate to the Look and Feel section of the Edit Survey tab.

Click the Advanced tab.

Enter your header content directly into the text box, or click edit to access the Rich Content Editor.

Be careful – each file-upload in Qualtrics receives its own unique generated path & name. After uploading the files, check the location of the files, and add the following lines (change the paths into the ones Qualtrics generated for you).

Now that we are in the Look and Feel section, we can immediately add the experiments CSS code with the “Add Custom CSS” button. Just paste the CSS code, save, and your are done here.

We now add an Embedded Data Field, with the name “ResultOfFlanker”. Later, when we enter the experiments Javascript, we will tell Qualtrics to save the results of the jsPsych experiment here.

In the Edit Survey tab, select Survey Flow.

In the Survey Flow, click the green text that says Add a New Element Here, or click Add Below.

In the options that appear, select Embedded Data.

Name the Embedded Data field “ResultOfFlanker”. (not “Manager”, like in the picture, clearly 🙂

Now one final step – we still have to add the experiment itself to the survey. First, add a descriptive text question – create a new item, change item type to “Text Entry”,

Click on the text area, then on the “HTML view” tab,

Here you place the experiments HTML code – one line, in this case:

<div id="jspsych_target">&nbsp;</div>

Now add the experiments Javascript cpde by clicking on the JS button of the question.

Click the Purple Gear Box to the left of the question.

Click Add JavaScript.

Place your JavaScript in the box, below the gold text that says /*Place Your JavaScript Below This Line*/. The opening and closing tags are already provided.

Click Save. A JavaScript icon now appears to the left of the question.

The Javascript code is almost the same as the default jsPsych code – but with a few tiny, yet important, additions. See the inline comments for for those small differences.

On publishing the Qualtrics survey, you should now be able to access the jsPsych based Flanker task at the Qualtrics assigned URL. You can try the task here.
If you’d rather import the completed Qualtrics project, download the following QSF file.