11  Lab 4: Memory

11.1 Research in Brief: Associative Memory Illusions and the DRM Paradigm

11.1.1 The Research Area: Memory

Memory is not a perfect recording device. Instead, it operates as a reconstructive system that can create vivid recollections of events that never actually occurred. One of the most striking demonstrations of this phenomenon comes from research on associative memory illusions, where people confidently “remember” words, events, or details that were never presented but are strongly related to what they actually experienced.

This research area challenges our intuitive beliefs about memory’s accuracy and reveals fundamental principles about how our minds organize and retrieve information. The findings have profound implications for understanding eyewitness testimony, therapeutic memory recovery, and the general reliability of human recollection.

11.1.2 The Research Design: Repeated Measures Experimental Design

The Deese-Roediger-McDermott (DRM) paradigm employs a repeated measures experimental design where the same participants are tested on multiple types of items, allowing researchers to directly compare performance across different item categories within the same individuals.

11.1.2.1 The DRM Methodology

Study Phase: Participants hear lists of 15 words that are all strongly associated with a critical word that is never presented. For example, they might hear: bed, rest, awake, tired, dream, wake, snooze, blanket, doze, slumber, snore, nap, peace, yawn, drowsy (all related to the unpresented word “sleep”).

Test Phase: Participants complete memory tests using two different retrieval methods:

11.1.2.2 Free Recall Tests

Participants are given blank paper and asked to write down as many words as they can remember from the study lists, in any order. No cues or prompts are provided - they must generate the words entirely from memory.

11.1.2.3 Recognition Tests

Participants are presented with a list of words (including studied items, critical lures, and unrelated lures) and must decide whether each word was presented during the study phase. They typically respond “yes” (old) or “no” (new) for each item, often with confidence ratings.

11.1.2.4 Within-Subjects Comparisons

Both test types include three categories of items:

• Critical lures: The unpresented words that were thematically related to the study list (e.g., “sleep”)
• Studied items: Words that were actually presented during the study phase
• Unrelated lures: New words that have no relationship to the study lists

The repeated measures approach allows researchers to compare participants’ responses to these different item types within the same test session and across different retrieval conditions.

11.1.3 Key Findings: Different Tests, Same Illusion

The comparison between free recall and recognition reveals important patterns:

Free Recall Results:

• False recall rates of 40-65% for critical lures across different word lists
• Critical lures are often recalled with high confidence and in primacy or recency positions
• Participants sometimes recall critical lures first, suggesting strong activation
• False recall occurs even when participants are warned about the possibility

Recognition Results:

• False recognition rates often exceed 80% for critical lures
• False recognition can be higher than true recognition for some studied items
• Confidence ratings for false recognition approach those for true recognition
• “Remember” responses (indicating vivid recollection) are common for critical lures

Key Differences Between Test Types:

• Recognition typically shows higher false memory rates than free recall
• Recognition provides more external cues that can trigger false memories
• Free recall requires more effortful retrieval, potentially allowing more monitoring of memory accuracy
• Both test types show the illusion, but recognition makes it more pronounced

11.1.4 Implications

The comparison between recall and recognition tests supports dual-process theories that distinguish between:

• Familiarity-based processes: Critical lures feel familiar due to their semantic relationship with studied items, leading to high false recognition
• Recollection-based processes: Critical lures can trigger vivid but false recollections of their “presentation” during study

The fact that false memories occur in both recall (which relies more on recollection) and recognition (which can rely on familiarity) suggests that multiple memory processes contribute to the illusion.

This research demonstrates that false memories are not simply due to guessing or response bias. The occurrence of false memories in free recall, where participants must generate responses without external cues, shows that people genuinely believe they remember experiencing events that never occurred.

The comparison between test types reveals that different retrieval conditions can influence the magnitude of false memories while the underlying illusion remains robust across testing methods. This has important implications for understanding how false memories might emerge in different real-world contexts, from eyewitness testimony (more like recognition) to therapeutic memory recovery (more like free recall).

11.1.5 Further Reading

Crump, M. J. C. (2021). Memory I. In M. J. C. Crump, Instances of Cognition: Questions, Methods, Findings, Explanations, Applications, and Implications (Chapter 8). https://crumplab.com/cognition/textbook

Crump, M. J. C. (2021). Memory II. In M. J. C. Crump, Instances of Cognition: Questions, Methods, Findings, Explanations, Applications, and Implications (Chapter 9). https://crumplab.com/cognition/textbook

Roediger, H. L., & McDermott, K. B. (1995). Creating false memories: Remembering words not presented in lists. Journal of Experimental Psychology: Learning, Memory, and Cognition, 21(4), 803-814.

11.2 Program a Recognition DRM Task

Our exercise this week, is to use jsPsych to program a simplified version of the recognition version of the DRM task.

Before we begin, let’s have a look at what’s included in our Lab 4 folder:

📂 L04
--  📄 index.html
--  📄 exp.js
--  📄 style.css
--  📂 jspsych

This should look familiar: have three files in the main folder, an index.html, exp.js and style.css. These are the files we will be editing to create our DRM experiment. We also have another folder called jspsych which contains all the jsPsych library code. We will not be editing these files and can leave them as is.

The three files are basically empty, since we haven’t done anything yet. If you load up your Lab 4 website, you’ll currently just find a blank screen:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Lab 4: Memory</title>
</head>
<body>
</body>
</html>

exp.js

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.1 Basic jsPsych Setup

Let’s first begin by loading our (1) jsPsych JavaScript and CSS files, (2) our custom JavaScript and CSS files, and (3) our keyboard plugin. We’ll do this by editing the index.html file to link to all of our external files. The experiment is still blank, so the webpage will be blank.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.2 Initiate jsPsych

To begin our experiment, let’s edit our exp.js file to initiate jsPsych, create a ‘welcome’ screen to start,, and run the experiment with our one, welcome screen.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>

       <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.3 Add a Single Study Trial

There are two phases to our memory experiment: the study phase and the recognition phase.

Let’s make a single trial of the study phase using the jsPsychKeyboardResponse plugin.

First, the study trial should be a word displayed for a set amount of time. No responses are required and the trial should move on after the set time has passed. It should look like the welcome message, but we need to change choices: "NO_KEYS" and add trial_duration: 1000.

I’m going to put our single trial in a timeline, which we’ll need later.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "BED",
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000
    }
  ]
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  study
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.4 Add a Single Test Trial

Now we’ll add a single test phase trial. For this one, we use the jsPsychButtonResponse plugin. We’ll set the stimulus, the post_trial_gap again. We’ll also add the button labels with choices.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "BED",
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000
    }
  ]
}

let test = {
  timeline: [
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: "AWAKE",
      post_trial_gap: 500,
      choices: ["OLD", "NEW"]
    }
  ]
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  study,
  test
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.5 Replace with Timelines

In the original study, they presented 15 words during the study phase and 32 words during the test phase (half old, half new). This is common practice is word recognition experiments.

It would take us quite a while to type out 47 trials, so instead, we will use jsPsych timeline and timeline_variables present all the words.

For both the study and test phases, we replace the stimulus with our placeholder jsPsych.timelineVariable("word") and put our word stimuli in the timeline_variables instead.

Let’s start by adding two words each. We’ll also set randomize_order: true to randomize the order for us.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500,
}

let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: jsPsych.timelineVariable("word"),
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000
    }
  ],
  timeline_variables: [
    {word: "BED"},
    {word: "REST"}
  ],
  randomize_order: true
}

let test = {
  timeline: [
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: jsPsych.timelineVariable("word"),
      post_trial_gap: 500,
      choices: ["OLD", "NEW"]
    }
  ],
  timeline_variables: [
    {word: "BED"},
    {word: "REST"}
  ],
  randomize_order: true
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  study,
  test
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.6 Add Full Word List

Let’s finish adding all the words now. The study list will have 15 words. The test list will have the 15 OLD words, plus 15 NEW words. One of the new words will be our ‘critical lure’.

I’ve added some comments inside my lists for my own organization.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: jsPsych.timelineVariable("word"),
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000
    }
  ],
  timeline_variables: [
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"}
  ],
  randomize_order: true
}

let test = {
  timeline: [
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: jsPsych.timelineVariable("word"),
      post_trial_gap: 500,
      choices: ["OLD", "NEW"]
    }
  ],
  timeline_variables: [
         // OLD WORDS 
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"},
        // NEW WORDS
        {word: "DOCTOR"},
        {word: "NURSE"},
        {word: "SICK"},
        {word: "LAWYER"},
        {word: "MEDICINE"},
        {word: "HEALTH"},
        {word: "HOSPITAL"},
        {word: "DENTIST"},
        {word: "PHYSICIAN"},
        {word: "ILL"},
        {word: "PATIENT"},
        {word: "OFFICE"},
        {word: "STETHOSCOPE"},
        {word: "SURGEON"},
        {word: "CLINIC"},
        {word: "CURE"},
        // critical word 
        {word: "SLEEP"}
  ],
  randomize_order: true
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  study,
  test
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.7 Add Fixation Cross

Our experiment is essentially complete! But we can always add a few more elements to make it a better experience.

First, let’s add a fixation cross to our Study phase. This will get added to the Study timeline so it appears on every trial.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "+",
      choices: "NO_KEYS",
      post_trial_gap: 250,
      trial_duration: 500
    },
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: jsPsych.timelineVariable("word"),
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000
    }
  ],
  timeline_variables: [
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"}
  ],
  randomize_order: true
}

let test = {
  timeline: [
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: jsPsych.timelineVariable("word"),
      post_trial_gap: 500,
      choices: ["OLD", "NEW"]
    }
  ],
  timeline_variables: [
         // OLD WORDS 
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"},
        // NEW WORDS
        {word: "DOCTOR"},
        {word: "NURSE"},
        {word: "SICK"},
        {word: "LAWYER"},
        {word: "MEDICINE"},
        {word: "HEALTH"},
        {word: "HOSPITAL"},
        {word: "DENTIST"},
        {word: "PHYSICIAN"},
        {word: "ILL"},
        {word: "PATIENT"},
        {word: "OFFICE"},
        {word: "STETHOSCOPE"},
        {word: "SURGEON"},
        {word: "CLINIC"},
        {word: "CURE"},
        // critical word 
        {word: "SLEEP"}
  ],
  randomize_order: true
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  study,
  test
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.8 Add Instructions

We’re going to use the Instructions plugin (type: jsPsychInstructions) to add some instructions to the beginning of our experiment.

We’ll need to edit our index.html to load the plugin, then create the instructions trial object in the exp.js file. We also need to add our new instructions to our experiment timeline when we run it.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>
    <script src="jspsych/plugin-instructions.js"></script>
    
    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

const instructions = {
  type: jsPsychInstructions,
  pages: [
    // Page 1: Welcome and Overview
    `<div>
      <p>You will participate in a memory experiment with two phases:</p>
     <p><strong>Phase 1:</strong> Study a list of words</p>
     <p><strong>Phase 2:</strong> Decide if words are OLD or NEW</p>
     <p>Click Next to continue.</p>
     </div>`,

    // Page 2: Study Phase Instructions  
    `<div>
      <p>During the study phase, you will see words appear one at a time. Read each word carefully and try to remember it.</p>
     <p>Each word appears for 1 second.You will study about 15 words total.</p>
     <p>You do not need to press any keys during this phase.</p>
     </div>`,

    // Page 3: Test Phase Instructions
    `<div>
      <p>During the test phase, you will see words one at a time. Some words are OLD (from the study list). Some words are NEW (not from the study list).</p>
     <p>Press the 'OLD' button if the word was old.</p>
     <p>Press the 'NEW' button if the word was new</p>
     </div>`,

    // Page 4: Stay focused
    `<div>
      <p>Trust your first instinct.</p>
      <p>If unsure, make your best guess.</p>
    </div>`,

    // Page 5: Final Instructions
    `<div>
      <p>Try to stay focused throughout the experiment. The experiment only takes a few minutes.</p>
      <p>Click Next to start the study phase.</p>
     </div>`
  ],
  key_forward: 'ArrowRight',
  key_backward: 'ArrowLeft',
  allow_backward: true,
  show_clickable_nav: true,
  button_label_previous: 'Back',
  button_label_next: 'Next'
};

let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "+",
      choices: "NO_KEYS",
      post_trial_gap: 250,
      trial_duration: 500
    },
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: jsPsych.timelineVariable("word"),
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000
    }
  ],
  timeline_variables: [
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"}
  ],
  randomize_order: true
}

let test = {
  timeline: [
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: jsPsych.timelineVariable("word"),
      post_trial_gap: 500,
      choices: ["OLD", "NEW"]
    }
  ],
  timeline_variables: [
         // OLD WORDS 
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"},
        // NEW WORDS
        {word: "DOCTOR"},
        {word: "NURSE"},
        {word: "SICK"},
        {word: "LAWYER"},
        {word: "MEDICINE"},
        {word: "HEALTH"},
        {word: "HOSPITAL"},
        {word: "DENTIST"},
        {word: "PHYSICIAN"},
        {word: "ILL"},
        {word: "PATIENT"},
        {word: "OFFICE"},
        {word: "STETHOSCOPE"},
        {word: "SURGEON"},
        {word: "CLINIC"},
        {word: "CURE"},
        // critical word 
        {word: "SLEEP"}
  ],
  randomize_order: true
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  instructions,
  study,
  test
]);

style.css

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.9 Styling

Finally, we can change the style of our experiment display and the words being presented.

To add custom styling to our word stimuli, I’ll create a new CSS class called wordStyle in my style.css and then we add the class name using a parameter called css_classes in our study and test objects, which we’ll point to our newly created style that we named wordStyle.

To add custom styling to our instruction HTML, I’ve created a new CSS class called instructionStyle in the style.css and then added that CSS class to each of the instruction pages in the <div> (i.e., <div class='instructionStyle'>).

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Recognition DRM</title>
    <!-- jsPsych -->
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    
    <!-- jPsych plugins -->
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>

    <!-- custom CSS -->
    <link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- custom JS -->
  <script src="exp.js"></script>
</body>
</html>

exp.js

// 1. Initialize jsPsych
const jsPsych = initJsPsych();

// 2. Define our trials
const welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `Welcome to the Experiment! Press any key to begin.`,
  choices: "ALL_KEYS", 
  post_trial_gap: 500
}

const instructions = {
  type: jsPsychInstructions,
  pages: [
    // Page 1: Welcome and Overview
    `<div class='instructionStyle'>
      <p>You will participate in a memory experiment with two phases:</p>
     <p><strong>Phase 1:</strong> Study a list of words</p>
     <p><strong>Phase 2:</strong> Decide if words are OLD or NEW</p>
     <p>Click Next to continue.</p>
     </div>`,

    // Page 2: Study Phase Instructions  
    `<div class='instructionStyle'>
      <p>During the study phase, you will see words appear one at a time. Read each word carefully and try to remember it.</p>
     <p>Each word appears for 1 second.You will study about 15 words total.</p>
     <p>You do not need to press any keys during this phase.</p>
     </div>`,

    // Page 3: Test Phase Instructions
    `<div class='instructionStyle'>
      <p>During the test phase, you will see words one at a time. Some words are OLD (from the study list). Some words are NEW (not from the study list).</p>
     <p>Press the 'OLD' button if the word was old.</p>
     <p>Press the 'NEW' button if the word was new</p>
     </div>`,

    // Page 4: Stay focused
    `<div class='instructionStyle'>
      <p>Trust your first instinct.</p>
      <p>If unsure, make your best guess.</p>
    </div>`,

    // Page 5: Final Instructions
    `<div class='instructionStyle'>
      <p>Try to stay focused throughout the experiment. The experiment only takes a few minutes.</p>
      <p>Click Next to start the study phase.</p>
     </div>`
  ],
  key_forward: 'ArrowRight',
  key_backward: 'ArrowLeft',
  allow_backward: true,
  show_clickable_nav: true,
  button_label_previous: 'Back',
  button_label_next: 'Next'
};


let study = {
  timeline: [
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "+",
      choices: "NO_KEYS",
      post_trial_gap: 250,
      trial_duration: 500,
      css_classess: "wordStyle"
    },
    {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: jsPsych.timelineVariable("word"),
      choices: "NO_KEYS",
      post_trial_gap: 500,
      trial_duration: 1000,
      css_classess: "wordStyle"
    }
  ],
  timeline_variables: [
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"}
  ],
  randomize_order: true
}

let test = {
  timeline: [
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: jsPsych.timelineVariable("word"),
      post_trial_gap: 500,
      choices: ["OLD", "NEW"],
      css_classess: "wordStyle"
    }
  ],
  timeline_variables: [
         // OLD WORDS 
        {word: "BED"},
        {word: "REST"},
        {word: "AWAKE"},
        {word: "TIRED"},
        {word: "DREAM"},
        {word: "WAKE"},
        {word: "SNOOZE"},
        {word: "BLANKET"},
        {word: "DOZE"},
        {word: "SLUMBER"},
        {word: "SNORE"},
        {word: "NAP"},
        {word: "PEACE"},
        {word: "YAWN"},
        {word: "DROWSY"},
        // NEW WORDS
        {word: "DOCTOR"},
        {word: "NURSE"},
        {word: "SICK"},
        {word: "LAWYER"},
        {word: "MEDICINE"},
        {word: "HEALTH"},
        {word: "HOSPITAL"},
        {word: "DENTIST"},
        {word: "PHYSICIAN"},
        {word: "ILL"},
        {word: "PATIENT"},
        {word: "OFFICE"},
        {word: "STETHOSCOPE"},
        {word: "SURGEON"},
        {word: "CLINIC"},
        {word: "CURE"},
        // critical word 
        {word: "SLEEP"}
  ],
  randomize_order: true
}

// 3. Run jsPsych with our trials
jsPsych.run([
  welcome,
  instructions,
  study,
  test
]);

style.css

.wordStyle {
  font-size: 36pt;
  font-family: monospace;
  line-height: 1em;
}

.instructionStyle {
  max-width: 750px;
  text-align: left;
}

Result

Live JsPsych Demo Click inside the demo to activate demo

11.2.10 Stretch Goals

1. Use the jsPsychKeyboardResponse plugin to add a final screen to our experiment that says “The experiment is finished. Thank you for completing our study!”. Make sure the choices is set to “NO_KEYS” so they can’t advance any further.
2. Use the jsPsychKeyboardResponse plugin to add a screen between our study and test phase that says “You are now about to begin the memory test phase. Press any key to begin.”
3. Add a new CSS class called fixationStyle and apply it only to the fixation trial to make the fixation bigger (48pt).
4. Use the button_html function to Style the OLD and NEW buttons so that they are different colors.