Read the sample from top to bottom

1. Load jsPsych and the keyboard-response plugin

   dist/jspsych.js loads the jsPsych library. dist/plugin-html-keyboard-response.js provides the trial type used to show instructions, the fixation cross, and the colored circles while collecting keyboard responses. dist/jspsych.css supplies the default display styles.

   These paths are relative to the sample HTML file. The sample must remain next to dist/; do not move it into this lesson's en/ folder.

2. Initialize the experiment and define its finish behavior

   const jsPsych = initJsPsych({...}) creates the jsPsych controller. The on_finish callback runs after the full timeline ends.

   displayData('csv') displays the recorded data in CSV format on the page. localSave('csv', 'gonogo-data.csv') asks the browser to download the CSV file to the participant's device; it does not send data to a server.

3. Show the instructions

   The instruction object uses jsPsychHtmlKeyboardResponse. Its stimulus contains the task rules, and choices: [' '] means the spacebar advances from the instruction screen.

   The visible space between the quotation marks is intentional: ' ' represents the spacebar key. It is not the same as an empty string.

4. Define the fixation trial

   The fixation object displays a plus sign. choices: 'NO_KEYS' means no key can end the trial, and trial_duration: 500 ends it automatically after 500 milliseconds (half a second).

   This same fixation object is added before every colored-circle trial.

5. Make a list of conditions and shuffle their order

   originalSequence is an array containing four 'go' values and four 'nogo' values. An array is an ordered list; each value represents the condition for one stimulus trial.

   jsPsych.randomization.shuffle(originalSequence) returns the conditions in a randomized order. The counts stay at four of each, but the shuffle can still produce repeated Go or No-Go trials next to each other.

6. Start the timeline with the instruction screen

   const timeline = [instruction]; creates the experiment's ordered trial list and places the instruction screen first. The following loop adds the fixation and stimulus trials after it.

7. Use a loop to add each pair of trials

   for (const kind of sequence) takes each condition from the shuffled array, one at a time. For every condition, timeline.push(fixation) adds the fixation trial, and the next timeline.push({...}) adds its stimulus trial.

   This is why the code describes the fixation and stimulus once, then repeats the instructions for all eight conditions. kind is the current value: either 'go' or 'nogo'.

8. Choose the circle color from the condition

   In the stimulus template, kind === 'go' ? 'green' : 'red' is a conditional expression: if kind is 'go', use green; otherwise, use red. The circle is shown inside a <div> with a font size of 72 pixels.

   data: { condition: kind } stores the condition on that stimulus trial so the result can later be matched to the participant's response.

9. Set the response window and keep its duration fixed

   choices: [' '] accepts the spacebar. trial_duration: 1000 sets the response window to one second. response_ends_trial: false means that a keypress does not end the trial early; the circle remains on screen for the full second.

   If no key is pressed, the recorded response and rt (reaction time) are empty for that stimulus trial. If the key is pressed, rt is measured in milliseconds from the start of the stimulus.

10. Calculate whether each response was correct

    The on_finish function runs when a stimulus trial ends. It assigns a Boolean value (true or false) to data.correct.

    (kind === 'go') is true for Go trials. (data.response === ' ') is true when the spacebar was pressed. The two sides are compared: Go + press is correct, and No-Go + no press is correct.

11. Run the timeline and inspect the CSV

    jsPsych.run(timeline) starts the experiment. When it finishes, the data are displayed and a CSV download is offered.

    Use condition to identify Go and No-Go stimulus trials, response to see whether a key was pressed, rt for reaction time, and correct for the trial-by-trial judgment. Instruction and fixation rows also appear in the data; exclude rows without a Go/No-Go condition when summarizing the stimulus trials.