Read the script from top to bottom

1. Load the library, plugin, and stylesheet

   <script src="dist/jspsych.js"></script>
   <script src="dist/plugin-html-keyboard-response.js"></script>
   <link rel="stylesheet" href="dist/jspsych.css">

   jspsych.js is the library: the main code that manages the experiment and runs its trials. The plugin file adds a specific kind of trial. The html-keyboard-response plugin can show HTML and handle keyboard responses. The stylesheet, jspsych.css, controls the basic appearance of jsPsych screens; it does not run experiment logic.

   These files are already included in the course's dist/ folder. The sample HTML file is beside dist/, so dist/jspsych.js means “open the dist folder next to this file, then load jspsych.js.” Do not move the sample into en/, or this relative path will no longer point to the library.

   Order matters: load the jsPsych library first, then the plugin that the experiment will use, and only then run the experiment script. If the plugin is missing, JavaScript will not know what jsPsychHtmlKeyboardResponse means.

2. Keep the HTML body empty

   <body></body>

   There is no plus sign written directly in the body. Instead, the JavaScript trial description tells jsPsych what to display. When a trial starts, jsPsych temporarily adds that trial's stimulus to the experiment screen; when it ends, jsPsych can move on to the next trial.

3. Initialize jsPsych

   const jsPsych = initJsPsych();

   initJsPsych() prepares a jsPsych experiment and returns an object that we store in a variable named jsPsych. We use that object later to start the timeline with jsPsych.run(...). The parentheses call the initialization function; the empty parentheses mean that this small example does not need any extra options.

4. Describe one trial

   const fixation = {
     type: jsPsychHtmlKeyboardResponse,
     stimulus: '<div style="font-size:60px">+</div>',
     choices: 'NO_KEYS',
     trial_duration: 5000
   };

   const fixation = creates a named variable called fixation. The curly braces contain an object: a group of named settings that describe one trial. Each setting has a name, a colon, and a value. A comma separates one setting from the next; the last setting has no comma in this example.

5. Choose what kind of trial to run

   type: jsPsychHtmlKeyboardResponse,

   The type setting selects the plugin for this trial. jsPsychHtmlKeyboardResponse is provided by the plugin loaded near the top of the file. It can show HTML and listen for keys. Later settings tell it exactly what to show and whether to accept a key.

6. Choose the stimulus to display

   stimulus: '<div style="font-size:60px">+</div>',

   stimulus is the content shown during the trial. Its value is a text string, marked by the single quotation marks. The string contains a small piece of HTML: a <div> element with a plus sign inside it.

   The style="font-size:60px" attribute makes the plus sign 60 pixels tall. This style applies only to the plus sign inside this div, not to every word in the experiment. The comma at the end tells JavaScript that another setting follows.

7. Set the response and end condition

   choices: 'NO_KEYS',
   trial_duration: 5000

   choices tells the plugin which keyboard keys the participant may use. 'NO_KEYS' is a special jsPsych value meaning “do not accept any keys.”

   trial_duration is the maximum time for the trial, in milliseconds. There are 1,000 milliseconds in one second, so 5000 means five seconds. Because no keys are accepted, the trial ends when these five seconds are over. The closing curly brace and semicolon finish the trial object definition.

8. Start the experiment

   jsPsych.run([fixation]);

   jsPsych.run(...) starts the experiment. Its argument is an array, written inside square brackets. The array lists the trials in the order they should run. This array contains only fixation, so the fixation trial runs once. If you later add more trials, list them in this array in the order you want participants to see them.

Change the stimulus size

The jsPsych stylesheet provides a default font size for experiment screens. A normal-sized plus sign may be too small to serve as a fixation point, so this example sets its size directly in the stimulus HTML:

stimulus: '<div style="font-size:60px">+</div>',

<div> creates a container around the plus sign. The style attribute contains a CSS rule: font-size is the property to change, and 60px is its value. The unit px means pixels.

Try changing 60px to 36px or 80px. Save the file and run the sample again to compare the size. This style changes the stimulus only; it does not change the font size of the lesson page.

Variables: const, let, and var

A variable is a name that lets you refer to a value later. In this example, jsPsych stores the initialized jsPsych object, and fixation stores the settings for the fixation trial.

const fixationDuration = 5000;

let trialCount = 0;
trialCount = trialCount + 1;

const prevents assigning a completely new value to that variable name. It does not mean every property inside an object is automatically frozen. For now, a useful beginner rule is: start with const; use let only when you need to assign a different value later.