jsPsych studies on CHS

jsPsych is an open source library for creating a wide range of behavioral experiments that run in a web browser. It consists of a core library and “plugins”. Plugins are the components that make up the experiment. Each plugin lets you define different kinds of events (e.g. presenting an image or text) and it collects different kinds of data (e.g. responses and response times). The jsPsych library also supports a wide range of features that are commonly used in behavioral experiments, like looping over sets of trials, randomizing, sampling, and conditional behavior.

To get a feel for how to build a jsPsych experiment, you can check out the jsPsych Hello World tutorial and RT task tutorial. We also have our own CHS jsPsych Hello World tutorial, which demonstrates the CHS-specific features (detailed in this section) that we’ve added for jsPsych studies running on the CHS platform.

To learn more about jsPsych features, some other great places to start are the jsPsych documentation about timelines and dynamic parameters.

jsPsych packages

To run a jsPsych study, the CHS experiment runner needs to load the core jsPsych library along with the plugins and extensions that your experiment uses. CHS always loads the core jsPsych library and a set of the most commonly-used plugins/extensions, so these are available to every jsPsych study with no setup on your part. A larger set of optional plugins/extensions is also available, and you choose which of these to add for your study.

Selecting plugins/extensions for your study

You choose which optional plugins/extensions to load on the “Edit Study Design” page for your study (see Setting the study design). In the jsPsych Options area of that page, you’ll find two expandable sections:

  1. See Automatically-Loaded Plugins/Extensions — a read-only list of the packages that are always available to your study (the core jsPsych library, the auto-loaded plugins, and the CHS packages). You don’t need to do anything here.

  2. Select Optional Plugins/Extensions — a set of checkboxes for the additional plugins/extensions you can add if your experiment needs them.

The jsPsych Options area of the Edit Study Design page, showing the two expandable sections for automatically-loaded and optional plugins/extensions.

Only select the plugins/extensions you need

Every plugin/extension you add has to be downloaded when a participant loads your study, so selecting more than your study needs will make it load more slowly. If you aren’t sure yet which ones you’ll need, you can leave these options alone for now and come back to update them later. If you have a plugin/extension you’d like to use that isn’t listed, let us know on Slack or at support@childrenhelpingscience.org — we can probably add it for you!

Note for older jsPsych studies

jsPsych studies created before this feature was added automatically have all available plugins/extensions selected, so they continue to work exactly as before. You can edit your study design and clear any you don’t need to speed up loading.

Always-available packages

CHS always loads the following standard jsPsych packages for every jsPsych study, so they are available to use without being selected. The versions loaded by CHS are shown below, along with links to documentation and change logs (version history). (The custom CHS packages that are always loaded are listed further down.)

Optional plugins/extensions

The following standard jsPsych packages are available to add on the “Edit Study Design” page (see “Selecting plugins/extensions for your study” above). Select only the ones your study needs.

From the standard jsPsych library:

We also welcome community-developed jsPsych plugins/extensions from the jsPsych-contrib Github repository. The following jsPsych-contrib packages are available to add:

Need something else?

If there are any specific jsPsych plugins/extensions that your experiment needs, please let us know! If you have a custom plugin/extension you want to use, please submit it to jspsych-contrib for review and publishing on NPM, and then we can add it to CHS. The best way to request access to a standard jsPsych package is by creating a lookit-api Github issue, but you can also let us know on Slack.

Custom CHS jsPsych packages

In addition to the jsPsych packages listed above, the CHS jsPsych experiment runner also automatically loads some custom packages. These custom plugins/extensions were designed to “fill in the gaps” in the sort of functionality that CHS researchers typically need for child development studies. This functionality includes: standardized webcam/mic configuration steps, video-recorded consent, trial/session recording, and standardized exit surveys. Like the always-available standard jsPsych packages, these custom CHS packages are loaded for every jsPsych study and don’t need to be selected.

The custom CHS-jsPsych packages/versions are listed below, along with links to documentation and change logs (version history). The CHS jsPsych documentation contains more information about all of the parameters available in the CHS-jsPsych plugins/extensions.

CHS Record package

Current version: 9.0.0 (see changelog)

CHS Surveys package

Current version: v9.0.0 (see changelog)

Translations

All of these plugins/extensions support the automatic translation of hard-coded text through a locale parameter.

Need something else?

Do you need any types of trials (Lookit EFP “frames”) or features that are not listed here, and are not available through the standard jsPsych library? Let us know! The best way to request a custom (CHS-specific) jsPsych plugin/extension or feature is by creating a lookit-jspsych Github issue, but you can also let us know on Slack.