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.