Skip to main content
Version: 3.9.x

jsPsych and JATOS

JATOS primarily handles the server-side aspects of your study, such as storing result data and managing workers. It doesn't dictate what happens within the browser itself—that's where your HTML, JavaScript, and CSS come in. While you can write all of this yourself, using a framework can be very helpful; jsPsych is an excellent option.

You'll find several jsPsych examples among our example studies.

Below are the necessary modifications to adapt your jsPsych experiment to run within JATOS and send data to it. For more general guidance, you can also refer to Adapt Pre-written Code to run it in JATOS.

Please note that sometimes jsPsych versions have slight differences. These steps are for jsPsych 7 or 8 (for older versions, please see here).

How to Turn Your jsPsych 7 or 8 Experiment into a JATOS Study​

  1. Include the jatos.js library in the <head> section of your HTML file:

    <script src="jatos.js"></script>

  2. Configure jsPsych to send results to JATOS. If you wish to include an automatic "Cancel" button using jatos.addAbortButton, include that line as well (otherwise, omit it):

    var jsPsych = initJsPsych({
      on_trial_start: jatos.addAbortButton,
      on_finish: () => jatos.startNextComponent(jsPsych.data.get().json())
    });

    The jatos.startNextComponent ends the current component in JATOS and either starts the next one (if you have multiple components) or finishes the study.

  3. Wrap jsPsych's run command within jatos.onLoad:

    jatos.onLoad(() => {
      jsPsych.run(timeline);
    });

That's all there is to it! For a complete example using jsPsych, check out the 'Simple Reaction Time Task' in our example studies. Additionally, the 'jsPsych 8 Examples' study offers 79 different jsPsych demos and examples.