Skip to the content.

The jspsych-psychophysics plugin is developed for the purpose of conducting online/Web-based psychophysical experiments using jsPsych (de Leeuw, 2015). This plugin can be used free of charge under the MIT license.

I would appreciate it if you could cite Kuroki (2020) as well as de Leeuw (2015) when you report your research using this plugin.

If you have any questions, please post them on the issuues of the GitHub.

What you can do with the jspsych-psychophysics plugin

How to use the jspsych-psychophysics plugin

This is a brief explanation how to use the plugin. Please refer to the parameters of the plugin and the properties of objects in detail.

This figure illustrates a trial flow to be made by this tutorial. tutorial

You can see the sample of this tutorial.

1. Download the plugin package.

Please download the latest plugin files from GitHub. The package includes the comaptible jsPsych (de Leeuw, 2015). The psychophysics plugin is released under the MIT license.

2. Include the plugin file using the <script> tag

<script src="jspsych-psychophysics.js"></script>

This procedure is the same as other plugins are used with the jsPsych. Note the location of the plugin file.

3. Specify all the stimuli used in the program as a JavaScript object

var rect_object = {
    obj_type: 'rect', // means a rectangle
    startX: 200, // location in the canvas
    startY: 150,
    width: 300, // of the rectangle
    height: 200,
    line_color: '#ffffff',
    fill_color: '#ffffff',
    show_start_time: 500 // from the trial start (ms)

var circle_object = {
    obj_type: 'circle',
    startX: 500, // location in the canvas
    startY: 300,
    radius: 100,
    line_color: 'red', // You can use the HTML color name instead of the HEX color.
    fill_color: 'red',
    show_start_time: 1000 // from the trial start (ms)

The origin of the coordinate is the top left of the canvas, but the origin can be changed to the center of the window (canvas) by specifying the origin_center property as true. The unit is the pixel.

The color can be specified using the HTML color names, hexadecimal (HEX) colors, and RGB values that are often used in a general HTML file.

The show_start_time property is one of the most notable properties, which enables to present the stimulus at the intended time. In this example, a white rectangle is presented 500 ms after beginning this trial, after another 500 ms, a red circle is presented until the response.

4. Specify a trial object including the stimuli in the jsPsych’s timeline

var trial = {
    type: 'psychophysics',
    stimuli: [rect_object, circle_object],
    choices: ['y', 'n'], // The participant can respond to the stimuli using the 'y' or 'n' key.
    canvas_width: 1000,
    canvas_height: 800,
    background_color: '#008000', // The HEX color means green.

    timeline: [trial],
    on_finish: function(){;}

The stimuli property must include all the objects to be presented in the trial.

This trial object must be included as the timeline property of the jsPsych.init which is a core function of the jsPsych.

Note that if you use image and audio files in a trial, please preload them using the preload_images and preload_audio methods in the jsPsych.init. See, demos/randomizedImages.html and demos/twoSoundsWithSOA.html.

In addition, the other applications and the tabs in a web browser should be closed during the experiment. This should be informed as an instruction at the begging of the experiment.


The jspsych-psychophysics package includes a lot of demonstration files.


Before asking a question, please read the FAQ page.

Open Science Framework

The data and materials of my paper are available at Open Science Framework.

Copyright (c) 2019 Daiichiro Kuroki
Released under the MIT license