Summary of Tutorial Content

This tutorial will work through the creation of a simple response time task. The task is to press one key for a blue colored circle and another key for an orange colored circle. Despite this simple task, the tutorial covers many of the key features of jsPsych, including:

Using a plugin to create a standard trial.
Combining plugins together to create new kinds of trials.
Using timeline variables to maximize code reuse.
Preloading media
Randomizing presentation order.
Manipulating, filtering, and aggregating data.
Using dynamic content to change the experiment parameters based on the subject's responses.

Part 1: Creating a blank experiment

Start by setting up a new HTML file with jsPsych, the html-keyboard-response plugin, and the jspsych.css file loaded. If you are unsure how to do this, follow the Hello World tutorial. You should have an HTML document that looks like this:

!!! info This tutorial assumes that you are using the CDN-based method of loading jsPsych. If you are using another method then everything is the same except for how jsPsych is loaded.

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych/jspsych.js"></script>
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body></body>
  <script>
  </script>
</html>

This will be our starting point for building the rest of the experiment.

Part 2: Display welcome message

First we have to initialize jsPsych. We can do this using the initJsPsych() function, and saving the result to a variable called jsPsych.

var jsPsych = initJsPsych();

All jsPsych experiments are defined by a timeline. The timeline is an array that contains the set of trials we want to run in the experiment. We can start by defining an empty timeline array. We'll add trials to this array as we create them.

var timeline = [];

Let's greet the subject with a simple welcome message using the html-keyboard-response plugin.

First, we create a trial that uses the html-keyboard-response plugin and contains a simple string to show the subject. As explained on the plugins documentation page, the trial object must have a type parameter that tells jsPsych which plugin to use. The value of type is similar to the plugin name, but starts with jsPsych and is written in camel case rather than with dashes. So to use the html-keyboard-response plugin, we need to write jsPsychHtmlKeyboardResponse as the trial type.

var welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: "Welcome to the experiment. Press any key to begin."
};

Next, we push the welcome trial to the timeline, which adds it to the end of the array.

timeline.push(welcome);

Finally, we tell jsPsych to run the experiment by calling the jsPsych.run() function and passing in the array that defines the experiment timeline.

jsPsych.run(timeline);

After each step in the tutorial you can view the complete code up to that point by clicking on the expandable box below.

??? example "The complete code so far" ```html <html> <head> </head>

53 KiB Raw Blame History

Summary of Tutorial Content

Part 1: Creating a blank experiment

Part 2: Display welcome message

53 KiB

Raw Blame History