jsPsych/docs/plugins/overview.md
2020-12-08 11:25:09 -08:00

14 KiB
Raw Blame History

Plugins

In jsPsych, plugins define the kinds of tasks that subjects perform in experiments. Some plugins define very general tasks, like displaying instructions or displaying a visual stimulus and getting a keyboard response. Other plugins are more specific, displaying particular kinds of interactive stimuli, or running a specific version of particular kind of task. Creating an experiment with jsPsych involves figuring out which plugins are needed for the kinds of tasks you want to have your subjects perform.

Plugins provide a structure for a particular task, but often allow for significant customization and flexibility. For example, the jspsych-image-keyboard-response plugin defines a simple structure for showing an image and collecting a keyboard response. You can specify the what the stimulus is, what keys the subject is allowed to press, and how long the stimulus should be on the screen, how long the subject has to respond, and so on. Many of these content options have reasonable default values; even though the jspsych-image-keyboard-response plugin has many different options, you only need to specify the stimulus in order to use it. Each plugin has its own documentation page, which describes what the plugin does and what options are available.

Using a plugin

To use a plugin, you'll need to load the plugin's JavaScript file on your experiment page:

<head>
<script src="jspsych/plugins/jspsych-image-keyboard-response.js" type="text/javascript"></script>
</head>

Once a plugin is loaded, you can define a trial that uses that plugin. The following JavaScript code defines a trial using the jspsych-image-keyboard-response plugin to display an image file ('images/happy_face.jpg'). This trial uses the default values for valid keys, length of display, and other parameters. You could override these values by adding them to the object.

var single_stim_trial = {
	type: 'image-keyboard-response',
	stimulus: 'images/happy_face.jpg'
}

Here's an exampe of overriding the default value for post_trial_gap:

var single_stim_trial = {
	type: 'image-keyboard-response',
	stimulus: 'images/happy_face.jpg',
	post_trial_gap: 2000
}

Parameters available in all plugins

Each plugin specifies its own set of parameters. Check the documentation for a plugin to see what parameters are available and what they do.

In addition, there is a set of parameters that can be specified for any plugin.

Parameter Type Default Value Description
post_trial_gap numeric null Sets the time, in milliseconds, between the current trial and the next trial. If null, there will be no gap.
on_finish function function(){ return; } A callback function to execute when the trial finishes. See this page for more details.
on_start function function(){ return; } A callback function to execute when the trial begins, before any loading has occurred. See this page for more details.
on_load function function(){ return; } A callback function to execute when the trial has loaded, which typically happens after the initial display of the plugin has loaded. See this page for more details.
data object undefined An object containing additional data to store for the trial. See this page for more details.

Data collected by plugins

Each plugin defines what data is collected on the trial. The documentation for each plugin specifies what data is collected by that plugin.

In addition to the data collected by a plugin, there is a default set of data that is collected on every trial. The collected data are:

Name Type Value
trial_type string The name of the plugin used to run the trial.
trial_index numeric The index of the current trial across the whole experiment.
time_elapsed numeric The number of milliseconds since the start of the experiment when the trial ended.
internal_node_id string A string identifier for the current TimelineNode.

List of available plugins

This table is a description of all plugins that are distributed with jsPsych. Click on the name of a plugin to view its documentation page.

Plugin Description
jspsychanimation Shows a sequence of images at a specified frame rate. Records key presses (including timing information) made by the subject while they are viewing the animation.
jspsychaudiobuttonresponse Play an audio file and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
jspsychaudiokeyboardresponse Play an audio file and allow the subject to respond by pressing a key.
jspsychaudiosliderresponse Play an audio file and allow the subject to respond by moving a slider to indicate a value.
jspsychcallfunction Executes an arbitrary function call. Doesn't display anything to the subject, and the subject is usually unaware that this plugin has even executed. It's useful for performing tasks at specified times in the experiment, such as saving data.
jspsychcanvasbuttonresponse Draw a stimulus on a HTML canvas element, and record a button click response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
jspsychcanvaskeyboardresponse Draw a stimulus on a HTML canvas element, and record a key press response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
jspsychcanvassliderresponse Draw a stimulus on a HTML canvas element, and ask the subject to respond by moving a slider to indicate a value. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
jspsychcategorizeanimation The subject responds to an animation and can be given feedback about their response.
jspsychcategorizehtml The subject responds to an HTML-formatted stimulus using the keyboard and can be given feedback about the correctness of their response.
jspsychcategorizeimage The subject responds to an image using the keyboard and can be given feedback about the correctness of their response.
jspsychcloze Plugin for displaying a cloze test and checking participants answers against a correct solution.
jspsychexternalhtml Displays an external HTML page (such as a consent form) and lets the subject respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a subject has granted consent before starting the experiment.
jspsychfreesort Displays a set of images on the screen in random locations. Subjects can click and drag the images to move them around the screen. Records all the moves made by the subject, so the sequence of moves can be recovered from the data.
jspsychfullscreen Toggles the experiment in and out of fullscreen mode.
jspsychhtmlbuttonresponse Display an HTML-formatted stimulus and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
jspsychhtmlkeyboardresponse Display an HTML-formatted stimulus and allow the subject to respond by pressing a key.
jspsychhtmlsliderresponse Display an HTML-formatted stimulus and allow the subject to respond by moving a slider to indicate a value.
jspsychiathtml The implicit association task, using HTML-formatted stimuli.
jspsychiatimage The implicit association task, using images as stimuli.
jspsychimagebuttonresponse Display an image and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
jspsychimagekeyboardresponse Display an image and allow the subject to respond by pressing a key.
jspsychimagesliderresponse Display an image and allow the subject to respond by moving a slider to indicate a value.
jspsychinstructions For displaying instructions to the subject. Allows the subject to navigate between pages of instructions using keys or buttons.
jspsychmaxdiff Displays rows of alternatives to be selected for two mutually-exclusive categories, typically as 'most' or 'least' on a particular criteria (e.g. importance, preference, similarity). The participant responds by selecting one radio button corresponding to an alternative in both the left and right response columns.
jspsychrdk This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard.
jspsychreconstruction The subject interacts with a stimulus by modifying a parameter of the stimulus and observing the change in the stimulus in real-time.
jspsychresize Calibrate the display so that materials display with a known physical size.
jspsychsamedifferenthtml A same-different judgment task. An HTML-formatted stimulus is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
jspsychsamedifferentimage A same-different judgment task. An image is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
jspsychserialreactiontime A set of boxes are displayed on the screen and one of them changes color. The subject presses a key that corresponds to the different color box as fast as possible.
jspsychserialreactiontimemouse A set of boxes are displayed on the screen and one of them changes color. The subjects clicks the box that changed color as fast as possible.
jspsychsurveyhtmlform Renders a custom HTML form. Allows for mixing multiple kinds of form input.
jspsychsurveylikert Displays likert-style questions.
jspsychsurveymultichoice Displays multiple choice questions with one answer allowed per question.
jspsychsurveymultiselect Displays multiple choice questions with multiple answes allowed per question.
jspsychsurveytext Shows a prompt with a text box. The subject writes a response and then submits by clicking a button.
jspsychvideobuttonresponse Displays a video file with many options for customizing playback. Subject responds to the video by pressing a button.
jspsychvideokeyboardresponse Displays a video file with many options for customizing playback. Subject responds to the video by pressing a key.
jspsychvideosliderresponse Displays a video file with many options for customizing playback. Subject responds to the video by moving a slider.
jspsychvisualsearchcircle A customizable visual-search task modelled after Wang, Cavanagh, & Green (1994). The subject indicates whether or not a target is present among a set of distractors. The stimuli are displayed in a circle, evenly-spaced, equidistant from a fixation point.
jspsychvslanimateocclusion A visual statistical learning paradigm based on Fiser & Aslin (2002). A sequence of stimuli are shown in an oscillatory motion. An occluding rectangle is in the center of the display, and the stimuli change when they are behind the rectangle.
jspsychvslgridscene A visual statistical learning paradigm based on Fiser & Aslin (2001). A scene made up of individual stimuli arranged in a grid is shown. This plugin can also generate the HTML code to render the stimuli for use in other plugins.