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.
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.
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"> </div>
Click the Purple Gear Box to the left of the question.
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.
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.
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.
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?
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.
Does it still work with the updated version of Qualtrics?
Hello, if you are looking to use jsPsych in Qualtrics, here is the updated tutorial (as of 2020 May).
The tutorial shows how one can embed the jsPsych examples (hello world and reaction time task) into Qualtrics.