Making jsPsych files loadable in Qualtrics

To use jsPsych in Qualtrics, the jsPsych javascript and CSS files need to be online and loadable from Qualtrics. GitHub Pages allows you to do so with only three steps (if you have a GitHub account).

I will use these GitHub-hosted scripts in the following tutorials, so please complete this step.

Please NOTE!! This tutorial series is based on version 6.x of jsPsych. Due to extensive changes in jsPsych 7.x and above, many things in this tutorial may not work with jsPsych v7.x and above. So, I instead use the 6.1.0 version below, which I forked previously.

Step 0. Create a GitHub account

Go to the GitHub site and create your account.

Step 1. Fork the (old) jsPsych repository (NOTE: I'm NOT using the latest/official version!)

Go to my previously-forked jsPsych v6.1.0 repository and click the Fork button to copy the repo to your account.

Fork the jsPsych repository

Step 2. Click the Settings button

The whole jsPsych repository has been copied to your account, which should be accessible at https://github.com/<your-github-username>/jsPsych/. For example, https://github.com/kywch/jsPsych/.

Go to your copy of the jsPsych repository and click the Settings button on the home page.

Click the Settings button

Step 3. Enable GitHub Pages for the jsPsych repository

Scroll down and find the GitHub Pages section. Select the Source to be the master branch.

Within a few minutes, a website will be available at https://<your-github-username>.github.io/jsPsych/. For example, https://kywch.github.io/jsPsych/.

Enable GitHub Pages

And, you are done.

You can check with your browser by directly going to the jspsych.js, jspsych.css, and jspsych-html-keyboard-response.js.

BUT WAIT! This is not the only way.

There are two more ways to make your files loadable in Qualtrics.

  • Creating your experiment GitHub repostory (preferred), like the Reaction-Time Task tutorial.
  • Borrowing files from public GitHub repository, like the Flanker Task tutorial