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 downloading jsPsych and setting up a folder to contain your experiment files. If you are unsure how to do this, follow steps 1-5 in the Hello World tutorial. At the end of step 5 in the Hello World tutorial, you should have an experiment page that looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych-6.3.0/jspsych.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
    <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
  </head>
  <body></body>
</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.

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.

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>

50 KiB Raw Blame History

Summary of Tutorial Content

Part 1: Creating a blank experiment

Part 2: Display welcome message

50 KiB

Raw Blame History