jsPsych/docs/tutorials/rt-task.md
2021-02-21 14:03:05 -08:00

49 KiB

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

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 the timeline array.

var timeline = [];

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

First, we create a trial that uses the jspsych-html-keyboard-response plugin and contains a simple string to show the subject.

var welcome = {
  type: "html-keyboard-response",
  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.init() function and passing in the array that defines the experiment timeline.

jsPsych.init({
  timeline: 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> </head>