Julia Schirmeister jschirmeister at uwaterloo.ca
Sat Oct 30 22:42:00 EDT 2020

Hi all,

This is my list of helpful resources for getting started with jspsych

The most helpful thing for me, was these lectures posted by the JsPsych creator himself. https://www.youtube.com/watch?v=BuhfsIFRFe8&t=5648s&ab_channel=MovingResearchOnline

Second most helpful is this tutorial site for javascript/html/css. It gave me my basic understanding of how stuff does stuff. It almost always is the first result if you google anything for javascript and its absolutely worth a brief read of some introductory sections. https://www.w3schools.com/js/DEFAULT.asp

Third most helpful is the website by jspsych creator: https://www.jspsych.org/

And this helpful little example program of a web page with an interactable canvas element that responds to user-mouse-input: https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

Here’s my attempt to give an overview of the logic of jspsych:

JsPsych provides a library of plugins

  • Every type of plugin corresponds to a way to display stimuli and collect responses,
    • Plugins have parameters like
      • Stimuli (accepts an image, video, html code, etc)
      • Response (keyboard, button, none, etc)
    • Helpfully, there is one special plugin type, called “jspsych-plugin-template” that you can look at to see the basic structure that all plugins must conform to
  • You create “trials” which are objects (instances) of that certain type of plugin,
    • for each unique trial, you assign trial-specific values to those plugin-specific properties
    • e.g. an “image-keyboard-response” plugin has a parameter “stimulus” to which you pass a string – the image file name,
    • and for each separate trial you give it a unique string (per each image file)
  • you create a list of these trials, that you call “timeline” (or whatever you want)
  • you call the init() function, and pass to its “timeline” parameter your list of trials, it looks like

timeline: mytimeline

  • The jspsych.init() function walks through your list of trial-objects, one by one, initializing them right before running them (by initializing I mean: resolving functions that determine variables, turning on the listeners to accept participant responses, etc)

Lastly this is the IDE I use for javascript: Atom https://atom.io/

Also if you ever want to individually chat about getting started with jspsych please let me know!!! I would like to help! There are a few things I learned through trial-and-error that might be useful to you to learn about from the get-go. But if you’re hesitant to request to chat, or you think you’ve got this, then there are certainly sufficient resources online to pick it all up on your own!

Best regards,


Peter Anthony Victor Diberardino pavdiber at uwaterloo.ca
Sun Oct 31 13:14:08 EDT 2020

Thanks for this, Julia! Great overview.

Also, here the javascript book site mentioned last night: https://eloquentjavascript.net/