📂 L03
-- 📄 index.html
-- 📄 exp.js
-- 📄 style.css
-- 📂 jspsych8 Lab 3: Language & Thought
8.1 Research in Brief: Age of Acquisition Effects in Word Recognition
8.1.1 The Research Area: Language and Thought
The relationship between language and thought has fascinated researchers for decades. One particularly intriguing aspect of this relationship involves how the timing of word learning affects our ability to process language throughout our lives. When we encounter a word, whether reading it silently or saying it aloud, our brain must rapidly access stored knowledge about that word’s meaning, pronunciation, and spelling. But does it matter when in our lives we first learned that word?
This question touches on fundamental issues in cognitive psychology: How is linguistic knowledge organized in memory? Do words learned early in childhood enjoy some special status in our mental lexicon? And what can patterns of word recognition tell us about the architecture of language processing systems?
8.1.2 The Research Design: Individual Differences Approach
Cortese and Khanna (2007) employed a correlational design to investigate these questions, examining how individual word characteristics relate to processing performance across a large sample of words. This approach treats each word as a case, allowing researchers to identify which word properties predict faster or more accurate recognition.
The researchers used two classic experimental paradigms:
Lexical Decision Task: Participants view letter strings on a computer screen and must quickly decide whether each string forms a real English word (like “table”) or a made-up nonword (like “blark”). This task requires accessing stored word knowledge to make the word/nonword judgment.
Naming Task: Participants see real words and must pronounce them aloud as quickly and accurately as possible. This task requires converting visual letter patterns into spoken sounds.
8.1.2.1 Individual Differences Methodology
Rather than manipulating variables experimentally, this study examined naturally occurring variation across 2,342 monosyllabic English words. Each word varied on multiple dimensions:
- Age of acquisition (when people typically learn the words
- Frequency (how often the word appears in written English)
- Imageability (how easily the word evokes mental images)
- Length, spelling patterns, and phonological characteristics
The researchers used hierarchical multiple regression to determine which word characteristics uniquely predict processing speed and accuracy, while statistically controlling for other factors. This correlational approach allows researchers to identify the independent contribution of each variable to word recognition performance.
8.1.3 Key Findings: Age of Acquisition Matters
The study’s central finding was that words learned earlier in life are processed faster than words learned later, even after controlling for 22 other important factors including word frequency, length, and imageability. This “age of acquisition effect” appeared in both tasks but was stronger for lexical decisions than naming.
Their key findings were:
- Age of acquisition predicted performance above and beyond 22 other variables, demonstrating its unique importance in word processing
- The effect was stronger for lexical decisions than naming, suggesting age of acquisition particularly influences semantic (meaning-based) processing
- Early-learned words maintained their processing advantage throughout adulthood, indicating that childhood language learning creates lasting effects on the mental lexicon
8.1.4 Implications
These findings support the semantic locus hypothesis, the idea that age of acquisition effects arise because early-learned words form the foundation of our semantic memory system. According to this view, words learned in childhood become deeply embedded in our conceptual knowledge, with later-learned words building upon this established foundation.
The stronger effects in lexical decision (which requires accessing word meaning) compared to naming (which primarily requires converting spelling to sound) suggests that age of acquisition particularly influences the arbitrary mappings between word forms and their meanings, rather than the more systematic relationships between spelling and pronunciation.
This research contributes to our understanding of how language knowledge is organized and accessed in the mind. The persistent advantage for early-learned words suggests that there may be critical or sensitive periods in language development, with implications for education, second language learning, and understanding individual differences in language processing abilities.
The correlational approach demonstrates how individual differences research can reveal fundamental principles of cognitive organization. By examining natural variation across many words, researchers can identify which factors matter most for language processing, informing both theoretical models and practical applications in education and clinical settings.
8.1.5 Further Reading
Boroditsky, L. (2000). Metaphoric structuring: Understanding time through spatial metaphors. Cognition, 75(1), 1-28.
Christianson, K., Hollingworth, A., Halliwell, J. F., & Ferreira, F. (2001). Thematic roles assigned along the garden path linger. Cognitive Psychology, 42(4), 368-407.
Cortese, M. J., & Khanna, M. M. (2007). Age of acquisition predicts naming and lexical-decision performance above and beyond 22 other predictor variables: An analysis of 2,342 words. Quarterly Journal of Experimental Psychology, 60(8), 1072-1082.
Enochson, K., & Culbertson, J. (2015). Collecting psycholinguistic response time data using Amazon Mechanical Turk. PLoS ONE, 10(3), e0116946.
8.2 Program a Lexical Decision Task
Our exercise this week, is to use jsPsych to program a simplified version of the lexical decision task.
Before we begin, let’s have a look at what’s included in our Lab 3 folder:
We 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 first jsPsych experiment. As always, we 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 3 website, you’ll currently just find a blank screen:
8.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.
I’ve highlighted the changes I’ve made and also added some organizational comments to keep things neat and organized.
Of course, just loading empty files won’t actually change anything, so the result is still a blank page so far.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>
Live JsPsych Demo
Click inside the demo to activate demo
8.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.
Important Note: I’ve decided to use the backticks around the stimuli text rather than quotation marks. This will become more important later, but for now let’s make sure you’re using backticks ` ` and not other kinds of quotation marks. One reason is that sometimes when we’re writing text we want to be able to use the quotation marks (e.g., she said "Hello! Why don't you come over?") and we can only do that if we’re wrapping our stimuli in backticks like this `she said "Hello! Why don't you come over?"`.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>
Live JsPsych Demo
Click inside the demo to activate demo
8.2.3 Add a Trial
Now, let’s add a trial. In the lexical decision task, participants are presented with either words or non-words (e.g., “book” versus “berv”) and must determine whether the presented string is a word by pressing one of two keys.
Let’s create a trial using the word “HERO” and then add it to our timeline. Note that we change our keyboard response choices from "ALL_KEYS", which allowed participants to press anything to ["w","n"]. This is an array (list) that restricts the allowable keys to “w” or “n”. If you hit any other key, nothing will happen.
Participants would press “W” if it’s a word and “N” if it’s a non-word.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>// 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"
}
const trial_1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HERO`,
choices: ["w", "n"]
}
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
trial_1
]);
Live JsPsych Demo
Click inside the demo to activate demo
8.2.4 Add More Trials
Ok, let’s follow the same format so that there are now four trials: “HERO”, “DIET”, “HESA”, and “MIEL”.
The words are carefully paired, such that one represents an early age of acquisition and the other a late age of acquisition. Specifically, “HERO” is acquired early in language development, whereas “DIET” is acquired later. The non-words, “HESA” and “MIEL”, were crafted by altering two letters of their corresponding words.
This procedure is a simplified version used in previous studies such as Cortese and Khanna (2007).
Before you look at the code below, you think about how you would adapt your code to add these three additional trials.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>// 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"
}
const trial_1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HERO`,
choices: ["w", "n"]
}
const trial_2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `DIET`,
choices: ['w', 'n']
}
const trial_3 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HESA`,
choices: ['w', 'n']
}
const trial_4 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `MIEL`,
choices: ['w', 'n']
}
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
trial_1,
trial_2,
trial_3,
trial_4
]);
Live JsPsych Demo
Click inside the demo to activate demo
8.2.5 Debrief
Let’s add a final, “debrief” screen at the end of the experiment, to let the participant know they are finished. Since this is the final screen and we don’t want participants doing anything else after, I’ve changed the choices to NO_KEYS. This disables the keyboard for that trial.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>// 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"
}
const trial_1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HERO`,
choices: ["w", "n"]
}
const trial_2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `DIET`,
choices: ['w', 'n']
}
const trial_3 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HESA`,
choices: ['w', 'n']
}
const trial_4 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `MIEL`,
choices: ['w', 'n']
}
const debrief = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `Great! You've completed your first experiment. You can refresh the page to do it again.`,
choices: "NO_KEYS"
}
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
trial_1,
trial_2,
trial_3,
trial_4,
debrief
]);
Live JsPsych Demo
Click inside the demo to activate demo
8.2.6 Adding Trial Parameters
The experiment is technically finished! But we can add a few more things to make it a bit better.
Let’s add a brief gap between each of our trials. It seems a bit abrupt to have each word appear right after the other. One of the general trial parameters available to us is post_trial_gap which takes a number in milliseconds for how long that gap should be. Let’s add a longer one after our welcome screen, then shorter ones after each trial.
When you add the post_trial_gap: 1000, don’t forget to add the comma that goes on the line before it. The comma indicates that there will be another item.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>// 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: 1000
}
const trial_1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HERO`,
choices: ["w", "n"],
post_trial_gap: 500
}
const trial_2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `DIET`,
choices: ['w', 'n'],
post_trial_gap: 500
}
const trial_3 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `HESA`,
choices: ['w', 'n'],
post_trial_gap: 500
}
const trial_4 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `MIEL`,
choices: ['w', 'n'],
post_trial_gap: 500
}
const debrief = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `Great! You've completed your first experiment. You can refresh the page to do it again.`,
choices: "NO_KEYS"
}
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
trial_1,
trial_2,
trial_3,
trial_4,
debrief
]);
Live JsPsych Demo
Click inside the demo to activate demo
8.2.7 Replace Text with HTML
The final thing we will do is replace our text with HTML. By replacing it with HTML, we have more control over the layout and how it is styled by adding inline styles.
First, I added <p> tags around our welcome and debrief messages to create separate paragraphs. You’ll notice how I added line breaks inside the backticks. These line breaks are ignored when the HTML is rendered, but makes it much easier to read.
Then, I added a <span> tag around our word stimuli and changed the font size using inline styling.
<!DOCTYPE html>
<html>
<head>
<title>Lab 3: Language & Thought</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>
<!-- custom CSS -->
<link href="jspsych/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- custom JS -->
<script src="exp.js"></script>
</body>
</html>// 1. Initialize jsPsych
const jsPsych = initJsPsych();
// 2. Define our trials
const welcome = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `<p>Welcome to the Experiment!</p>
<p>Press any key to begin.</p>`,
choices: "ALL_KEYS",
post_trial_gap: 1000
}
const trial_1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `<span style="font-size:48px;">HERO</span>`,
choices: ["w", "n"],
post_trial_gap: 500
}
const trial_2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `<span style="font-size:48px;">DIET</span>`,
choices: ['w', 'n'],
post_trial_gap: 500
}
const trial_3 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `<span style="font-size:48px;">HESA</span>`,
choices: ['w', 'n'],
post_trial_gap: 500
}
const trial_4 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `<span style="font-size:48px;">MIEL</span>`,
choices: ['w', 'n'],
post_trial_gap: 500
}
const debrief = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `<p>Great! You've completed your first experiment.</p>
<p>You can refresh the page to do it again.</p>`,
choices: "NO_KEYS"
}
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
trial_1,
trial_2,
trial_3,
trial_4,
debrief
]);
Live JsPsych Demo
Click inside the demo to activate demo
8.3 Stretch Goals
Now that you’ve programmed a simple lexical decision task, there are many things that can be added or modified to improve the experiment. Here are a few that you can try on your own:
8.3.1 Add instructions
There are currently no instructions for participants! Try adding a few more pages of instructions that tell participants what they will be doing in the experiment and how they will respond.
8.3.2 Add a fixation before each trial
Often, we put a “fixation cross” between trials to prepare participants for the upcoming stimulus. A fixation cross is just a “+” sign. Can you add the fixation cross before each trial? Note, that participants shouldn’t be able to respond during a fixation cross and it should automatically proceed without a response. The fixation may also need to have a larger font set.
Hint: You’ll need to set the choices parameter to “NO_KEYS”, so they cannot respond. You’ll also need to set the trial_duration parameter to something like 500, trial_duration: 500. This will cause the fixation to appear for 500ms and then disappear without a keypress.
8.3.3 Replace our inline style with a re-usable class
If you noticed, we repeated the same CSS code four times. This is a good case for creating a class and using that instead. Can you create a CSS class called “wordStyle”, define it in the style.css file, and apply it to our trials?
Once you’ve successfully added that class, try changing other styling for our word style. Two you could try are font-weight: bold; and font-family: monospace.