This is a template for a jsPsych-based online categorisation task. It is made to be a lightweight, easy to amend script that you can easily use for your own experiment. The task implemented here is an animacy task, where participants classify images as inanimate or animate.
The repository is centered around the main experiment script, index.html. This is what browsers read to show the task to participants. To run the experiment, you will need a browser to read this file and have access to the files around it. This is mainly done in two ways:
- Locally: turn off the
exp_onlineflag, and you can runindex.htmllocally. You can simply open it with a browser like Chrome, but it might be the easiest to open the whole repository in a friendly code environment that will handle it along with all the other files (a good choice is VSCode). From there, your script can be ran using your local browser. - Online: with the
exp_onlineflag on, this script will try to connect to Pavlovia. If correctly placed in a GitLab repository behind the scenes, your experiment will run and be accessible at the click of a Pavlovia link.
.
├── data
├── demographics
├── informed_consent
├── instructions
│ └── instruction_images
├── readme_files
└── stimuli
datais where pavlovia automatically sends the collected data.demographicscontains an external.jsfile with the content of the quick demographics survey to appear at the start of the experiment.informed consentcontains an external.jsfile with the content of the informed consent participants will accept at the start of the experiment, alongside a.cssfile to determine some visual features of the consent form.instructionscontains an external.jsfile containing instructions to be displayed at different moments of the experiment, and serves to de-clutter the main script. It also contains a.cssfile to style some visual elements of the instructions, and some images ininstruction_imagesto illustrate things.stimulicontains your images, including task images (starting with task) and training images (starting with train).readme_filescontains illustrations for this readme document.
Note.The extra file jspsych-7-pavlovia-2021.12.js comes from this gitlab repository and is the only way around using the readily available jspsych-7-pavlovia-2022.1.1.js which faces consistent issues with terminating the pavlovia connection. It's a temporary solution.
Here are the parameters to set before running your script:
-
exp_onlinedetermines whether your script tries to connect to Pavlovia. -
exp_fullscreendetermines whether to run the experiment in full screen. -
ask_informed_consentshould participants are presented with an informed consent to sign. -
ask_demographicsshould participants are asked for some demographic information. -
exp_instructionsshow instructions at the start of the experiment or not -
exp_trainingplay training trials at the start of the experiment. -
n_runsnumber of times all the trial are shown. Each run is divided in n_bocks. -
n_blockshow many blocks a full run is divided into, with breaks in between each block. -
img_widthcommented out by default, uncomment to constrain the width of your images. -
img_heightcommented out by default, uncomment to constrain the height of your images. -
jitter_durationhow long the jitter can be, from 0 to x. -
fixation_durationpre-stimulus fixation duration (ms). -
image_durationtarget stimulus presentation duration (ms). -
training_thresholdsuccessive correct trials needed to pass training. -
response_labelswhat are the participants responding? -
response_buttonsdeclare the keys to use to respond. -
debugging_modeturn this on to make the experiment much shorter (useful for debugging.) -
debugging_lengthhow many trials of training and main task are played in debug mode. -
save_data_locallywhether or not to download a copy of the created data locall at the end of the experiment.
When all events are turned on, here is what the timeline of a full experiment looks like:
- The connection is initialised with jsPsych and Pavlovia.
- All file names contained in the stimulus list are preloaded.
- The experiment starts in full screen.
- The informed consent form is presented and signed.
- The demographics questionaire is presented and filled.
- The main instructions are displayed.
- Training starts:
- Training instructions come on screen.
- Training trials are played
- Training finishes when a threshold is reached or all the training stimuli have been presented.
- Post-training instructions come on screen.
- Main task starts:
- Pre-task instructions are shown.
- Runs follow each other. Each run is divided into blocks, with breaks in between.
- A quick post-task debriefing is shown.
- The connection is closed with Pavlovia.
To have jsPsych read and use your files, you need to refer to them in your main script. There are two ways of doing so.
- If you don't have a lot of images, it's probably the easiest to list them inside your
index.html, like this:let stimuli = ['./stimuli/image1.png, './stimuli/image2.png', …] - In most cases, if you have a lot of images and/or if you want a cleaner script, your can make use of an external
.jsfile. This is in use by default in this template. Such a file should contain a list of stimuli like this:
var stimuli = [
{
"filename": "./stimuli/image1.png"
},
{
"filename": "./stimuli/image2.png"
},
...
]
You can create this external .js file as you please. One way to go about it is illustrated in make_stim_list.py, a python script that will take the stimuli you uploaded in the stimuli folders and automatically create an external .js list for you (see stimuli.js).
