Read the script from top to bottom

1. Load the library, plugins, and stylesheet

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

   jspsych.js is the main library that initializes and runs the experiment. plugin-preload.js provides the preload trial. plugin-image-keyboard-response.js provides a trial that displays an image and listens for a keyboard response. jspsych.css supplies the default appearance of jsPsych screens.

   These files are in the course's dist/ folder. The sample file sits beside that folder, so dist/plugin-preload.js means “go into the dist folder next to this HTML file.” The scripts are loaded in order: first the library, then the plugins that the experiment will use.

2. Initialize the experiment and choose what happens at the end

   const jsPsych = initJsPsych({
     on_finish: () => {
       jsPsych.data.displayData();
     }
   });

   initJsPsych({...}) prepares a new jsPsych experiment. The settings inside the curly braces customize it. The resulting jsPsych object is stored in the jsPsych variable so the script can use it later.

   on_finish is a callback: a function jsPsych runs after the whole experiment has finished. The arrow () => begins this function. Here, it calls jsPsych.data.displayData() to show the collected data on the screen. This is useful for inspecting a small example; it is not the same as securely saving research data to a server.

   The braces following on_finish are the function body. The semicolon after displayData() ends that instruction, and the closing braces finish the function and the initialization settings.

3. Define the preload trial

   const preload = {
     type: jsPsychPreload,
     images: ['media/ribbon.jpg']
   };

   preload is a variable that holds the settings for a trial. Its type selects the preload plugin. The images setting is an array: square brackets mark a list, and the quoted path tells jsPsych which image to load.

   The path is relative to sample-image.html. Because the sample file and media/ folder are siblings, media/ribbon.jpg means “open the media folder beside this file and load ribbon.jpg.” Preloading does not show the image; it only prepares the file.

4. Define the image-response trial

   const imageTrial = {
     type: jsPsychImageKeyboardResponse,
     stimulus: 'media/ribbon.jpg',
     prompt: '<p>Press any key to continue.</p>'
   };

   imageTrial is the second trial definition. Its type selects the image keyboard-response plugin. The stimulus is the image to display; here its path is the same one that was preloaded.

   prompt is optional HTML shown with the image. The <p> tags make the instruction a paragraph. The text is surrounded by quotation marks because it is a JavaScript string. In the shared sample, the prompt is written in both Japanese and English.

5. Use the default response behavior

   This trial does not specify choices or trial_duration. With this plugin's defaults, the participant may press a key and the trial ends when a key is pressed. If you want to accept only particular keys, add a choices setting. If you want the image to disappear after a fixed time, add a trial_duration in milliseconds.

6. Run the trials in order

   jsPsych.run([preload, imageTrial]);

   jsPsych.run(...) starts the experiment. The array lists the trials in the order they should run: first preload, then imageTrial. This order ensures that the image is loaded before it is shown. After the image trial ends, the experiment finishes and the on_finish callback displays the data.

Preload the files used in a task

For a single small image, the browser may load the file quickly. In a real experiment, images can be larger or there may be many of them. If a file is not ready when its trial starts, the participant may see a delay. Preloading gives the browser a chance to fetch resources before the experiment needs them.

const preload = {
  type: jsPsychPreload,
  images: ['media/ribbon.jpg']
};

List every image path in the images array. For example, multiple files can be listed with commas: images: ['media/one.jpg', 'media/two.jpg']. The files must exist at those paths.

The image path appears in two places in this example: once in images so it is preloaded, and once in stimulus so the image trial can display it. If you change the filename or folder, update both places. A typo in either path can prevent the image from loading.

What does auto_preload do?

When enabled, the preload plugin can inspect the experiment timeline and look for resources used by trials. In this introductory example, the explicit images list is easier to understand because it shows exactly which path is being loaded. For a larger experiment, automatic preloading may reduce the need to maintain a long list by hand.

What data does a keypress trial collect?

The image keyboard-response plugin records information about the trial, including the participant's key response and response time. Response time is typically measured in milliseconds from when the stimulus appears until the key is pressed.

When the timeline finishes, jsPsych.data.displayData() renders the collected data in the browser so you can inspect the example. This demonstration does not upload data to a server. Real studies need an appropriate, approved plan for participant consent, privacy, and secure data storage.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>画像提示 / Image presentation | jsPsych 8.3.0</title>
    <script src="dist/jspsych.js"></script>
    <script src="dist/plugin-preload.js"></script>
    <script src="dist/plugin-image-keyboard-response.js"></script>
    <link rel="stylesheet" href="dist/jspsych.css">
</head>
<body></body>
<script>
    const jsPsych = initJsPsych({
        on_finish: () => {
            jsPsych.data.displayData();
        }
    });

    const preload = {
        type: jsPsychPreload,
        images: ['media/ribbon.jpg']
    };

    const imageTrial = {
        type: jsPsychImageKeyboardResponse,
        stimulus: 'media/ribbon.jpg',
        prompt: '<p>何かキーを押すと次に進みます。<br>Press any key to continue.</p>'
    };

    jsPsych.run([preload, imageTrial]);
</script>
</html>