Adding jsPsych to Qualtrics

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.

choose file (file)

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.

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.

add a new element

In the options that appear, select Embedded Data.

select embedded data

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

Set an embedded data field

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.


  1. Liz

    Thanks for these instructions! They are very helpful! A few quick questions though:
    When I try to click the link to the example of the task above, it just shows me a blank screen. However, when I load the Qualtrics .qsf in my Qualtrics account and look at it through the “Look and Feel” box, I can see the Flanker instructions. However, when I launch it from Qualtrics, I get the same blank screen that I get using your example above. Any ideas why this is happening?
    Also, in the example .qsf that I downloaded, there is no html in the question attached to all of the java script. Could this be the problem?
    Thanks in advance for your help.


    • admin Author

      Hi Liz!

      It seems Qualtrics now defaults to JFE mode for live surveys. This is probably the cause of your “whitescreens”.

      We have mostly been able to resolve this by adding the query string &Q_JFE=0 to the end of our survey URLs, like so:

      This had the additional benefit of solving our issue with JFE mode breaking several of our long time running Qualtrics JQuery experiments.

      See also here.

  2. Melanie

    Hi, thanks for this! Could you confirm that linking jsPsych to Qualtrics is still possible? I’ve been trying and it’s just coming up blank when I preview the survey. I’ve heard it may no longer work because of recent program changes. If that’s true, do you know of any other way to link jsPsych to MTurk, which is what I’m ultimately trying to do?


  3. Eugene

    Thanks for this! Somewhat related to this, is there a way to include a line of code to autoclick a textbox? In other words, when a participant clicks to the next page, the cursor will automatically be set in the textbox so they can start typing right away.

    Thanks again!

Leave a Reply