📂 L06
├── 📄 index.html
├── 📄 exp.js
├── 📄 style.css
└── 📂 jspsych16 Lab 6: Creativity
16.1 Research in Brief: Divergent and Convergent Thinking in Creativity
16.1.1 The Research Area
Creative cognition involves the generation of novel and useful ideas, solutions, or products. Researchers have traditionally divided creative thinking into two primary components: divergent thinking, which involves generating multiple creative possibilities and expanding the range of potential solutions, and convergent thinking, which requires narrowing down options to identify the single best solution from among alternatives.
This distinction between divergent and convergent thinking has shaped creativity research for decades. Divergent thinking is associated with brainstorming, ideation, and the ability to think “outside the box” by producing many different responses to a given prompt. Convergent thinking involves analytical evaluation, critical assessment, and the ability to synthesize information to arrive at the most appropriate solution.
Understanding these cognitive processes has important implications for education, workplace innovation, and creative problem-solving across domains. However, recent research suggests that the relationship between divergent and convergent thinking may be more complex than originally theorized, with both processes often working together during creative tasks rather than operating independently.
16.1.2 Individual Differences in Creative Thinking
People vary considerably in their creative abilities, with some individuals excelling at generating many novel ideas while others are particularly skilled at evaluating and refining creative solutions. These individual differences appear across various domains, from artistic creativity to scientific innovation and everyday problem-solving.
Research has identified several factors that influence creative thinking ability, including cognitive flexibility, working memory capacity, and the ability to make remote associations between seemingly unrelated concepts. Some individuals demonstrate strong divergent thinking skills but struggle with convergent evaluation, while others excel at critical analysis but generate fewer original ideas. Understanding these patterns helps researchers develop more targeted approaches to creativity training and assessment.
16.1.3 The Research Design
Creativity research relies heavily on standardized tasks designed to measure divergent and convergent thinking abilities. The most widely used measures are the Alternative Uses Task (AUT) for divergent thinking and the Remote Associates Test (RAT) for convergent thinking, though researchers increasingly question whether these tasks measure pure forms of each construct.
The Alternative Uses Task presents participants with common objects such as a brick, newspaper, or paperclip and requires them to generate as many creative, unusual uses as possible within a time limit, typically 3 minutes per object. The task is designed to measure the ability to generate multiple creative possibilities without constraints on the “correct” answer. Responses are scored on multiple dimensions including fluency (total number of responses), flexibility (number of different categories), and originality (statistical rarity of responses). Trained raters evaluate responses for appropriateness, creativity, and elaboration. For example, using a brick as a “doorstop” would score low on originality, while using it as a “canvas for miniature painting” would receive higher creativity ratings.
The Remote Associates Test presents participants with sets of three seemingly unrelated words such as “pine,” “sauce,” and “crab,” and requires them to identify a fourth word that forms meaningful associations with all three stimulus words. In this example, “apple” creates the compound words “pineapple,” “applesauce,” and “crab apple.” Items vary in difficulty, with some requiring common associations and others demanding more remote connections between concepts. The task is intended to measure the ability to converge on a single correct solution by identifying the common link among disparate elements. Success requires both generating potential connections and evaluating which option best fits all three stimulus words.
16.1.4 Key Findings
Research examining the AUT and RAT has revealed that neither task measures pure divergent or convergent thinking. Instead, both tasks involve combinations of generative and evaluative processes, challenging traditional assumptions about their construct validity.
While the Alternative Uses Task requires generating multiple ideas, successful performance also demands evaluating each potential response for appropriateness and creativity before including it in the final list. Participants must critically assess whether their ideas meet the task criteria, representing a convergent evaluation process embedded within the divergent generation task. When asked to think of alternative uses for a brick, someone might have the fleeting thought “geranium,” but would likely discard this unusual but implausible response in favor of more viable alternatives.
The Remote Associates Test requires identifying a single correct answer, but participants must first generate multiple potential solutions before selecting the best option. Additionally, many RAT items rely on structural word associations such as compound words and common phrases rather than semantic relationships, making the task more similar to word puzzles than creative thinking challenges. Analysis of RAT items reveals that many associations are functionally unrelated in meaning, with solutions connected to stimulus words primarily through linguistic structure rather than conceptual similarity.
Studies consistently find little to no correlation between AUT and RAT performance, raising questions about whether they measure components of the same underlying creativity construct. This lack of relationship contrasts sharply with intelligence research, where different cognitive abilities typically show moderate positive correlations. The absence of correlation may reflect fundamental differences in the cognitive processes required by each task rather than measuring different aspects of the same creative ability.
16.1.5 Implications
These findings reveal significant limitations in current creativity measurement approaches and suggest that the field requires substantial theoretical and methodological reconceptualization. The mixed cognitive processes found in both tasks indicate that creativity emerges from the dynamic interaction between divergent and convergent thinking rather than their independent operation. Contemporary dual process models propose that effective creativity requires the coordinated application of both generative and evaluative processes, with individuals cycling rapidly between generating possibilities and evaluating their potential.
The field currently lacks the comprehensive battery of validated measures that has enabled progress in intelligence research. Without multiple reliable tasks measuring each construct, researchers cannot establish divergent and convergent thinking as separable components of creativity. This limitation means that studies showing variables correlating with only one creativity task may reflect task-specific factors rather than fundamental differences between thinking styles.
Moving forward, researchers are developing new approaches that measure both divergent and convergent thinking using similar criteria and contexts, allowing for more direct comparisons. Some promising developments include domain-specific creativity tasks that can assess both types of thinking along the same dimensions. Future progress will likely depend on developing better measurement approaches and achieving greater clarity about the fundamental constructs underlying creative cognition, ultimately leading to more effective approaches for fostering creativity in educational and professional settings.
16.1.6 Further Reading
Cortes, R. A., Weinberger, A. B., Daker, R. J., & Green, A. E. (2019). Re-examining prominent measures of divergent and convergent creativity. Current Opinion in Behavioral Sciences, 27, 90-93.
Goldstein, E. (2021). Problem-Solving and Creativity in Cognitive Psychology.
Madore, K. P., Addis, D. R., & Schacter, D. L. (2015). Creativity and memory: Effects of an episodic-specificity induction on divergent thinking. Psychological Science, 26(9), 1461-1468.
Laukkonen, R. E., Kaveladze, B. T., Tangen, J. M., & Schooler, J. W. (2020). The dark side of Eureka: Artificially induced Aha moments make facts feel true. Cognition, 196, 104122.
Ritter, S. M., & Ferguson, S. (2017). Happy creativity: Listening to happy music facilitates divergent thinking. PLoS One, 12(9), e0182210.
16.2 Program a Creativity Task
In this exercise, we’re going to program the divergent and convergent creativity tasks, with a particular focus on labeling our data and saving the data locally at the end of our experiment.
We’re going to have participants type in responses for the AUT. This will require a new plugin we haven’t used before called jsPsychSurveyText.
Before you begin, you should have a quick read over the documentation to see how this plugin operates and give you a sense of how we’ll use it in our experiment:
https://www.jspsych.org/v8/plugins/survey-text/
For the RAT, we’re going to program a multiple-choice version of this task using keyboard responses. This probably isn’t the most ideal way to carry out the RAT, but it will provide a better demonstration of data labeling.
Our initial folder contains the same, general, boilerplate jsPsych files as always, with nothing new added.
16.2.1 Initiate jsPsych
Let’s begin by loading and initiating jsPsych with a welcome screen.
Since we need additional plugins, we should add that here. I’ve added the survey text and the instructions plugins below.
I’m also going to add our save local data trial now. It’s going to be part of our boilerplate jsPsych from here on out.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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 saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.2.2 Add the AUT instructions
We’ll start with the AUT task first. Let’s begin by giving participants some instructions. I also added some basic styling in the CSS file using the .instructionStyle class.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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"
}
let aut_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see the name of a common object and think of creative, unusual uses for it.</p>
<p>For example, if the object were "brick," you might think of:</p>
<ul>
<li>Use as a paperweight</li>
<li>Grind up to make red paint pigment</li>
<li>Heat in oven as a bed warmer</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>Your responses should be:</p>
<ul>
<li><strong>Creative</strong> - think of unusual uses</li>
<li><strong>Useful</strong> - the use should actually work</li>
<li><strong>Specific</strong> - relate to the object"s properties</li>
</ul>
<p>Avoid generic responses like "throw it away" that could apply to any object.</p>
</div>`,
`<div class="instructionStyle">
<p>You will generate 10 creative uses for the object.</p>
<p>Type one use at a time and press SUBMIT after each response.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true
}
const saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
aut_instructions,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.2.3 Add the AUT trials
Now let’s add our AUT trials. If you read the survey text plugin documentation, you’d find that it has a different format than our other plugins.
It requires a questions parameter. The format for the questions parameter is an array TYPE, which lists all the questions.
Each question is an object with prompt, name, and required as parameters.
So it should look like this
We only need to ask one question on every trial, since the prompt never changes. We can set the repetitions parameter to make that single trial repeat 5 times.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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"
}
let aut_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see the name of a common object and think of creative, unusual uses for it.</p>
<p>For example, if the object were "brick," you might think of:</p>
<ul>
<li>Use as a paperweight</li>
<li>Grind up to make red paint pigment</li>
<li>Heat in oven as a bed warmer</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>Your responses should be:</p>
<ul>
<li><strong>Creative</strong> - think of unusual uses</li>
<li><strong>Useful</strong> - the use should actually work</li>
<li><strong>Specific</strong> - relate to the object"s properties</li>
</ul>
<p>Avoid generic responses like "throw it away" that could apply to any object.</p>
</div>`,
`<div class="instructionStyle">
<p>You will generate 10 creative uses for the object.</p>
<p>Type one use at a time and press SUBMIT after each response.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true
}
let aut = {
timeline: [
{
type:jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000
},
{
type: jsPsychSurveyText,
questions: [
{
prompt: "What is a creative and unusual use for a BRICK?",
name: "AUT",
required: true
}
],
button_label: "SUBMIT"
}
],
repetitions: 5
}
const saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
aut_instructions,
aut,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.2.4 Add the RAT instructions
Now let’s add our instructions for the RAT
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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"
}
let aut_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see the name of a common object and think of creative, unusual uses for it.</p>
<p>For example, if the object were "brick," you might think of:</p>
<ul>
<li>Use as a paperweight</li>
<li>Grind up to make red paint pigment</li>
<li>Heat in oven as a bed warmer</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>Your responses should be:</p>
<ul>
<li><strong>Creative</strong> - think of unusual uses</li>
<li><strong>Useful</strong> - the use should actually work</li>
<li><strong>Specific</strong> - relate to the object"s properties</li>
</ul>
<p>Avoid generic responses like "throw it away" that could apply to any object.</p>
</div>`,
`<div class="instructionStyle">
<p>You will generate 10 creative uses for the object.</p>
<p>Type one use at a time and press SUBMIT after each response.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true
}
let aut = {
timeline: [
{
type:jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000
},
{
type: jsPsychSurveyText,
questions: [
{
prompt: "What is a creative and unusual use for a BRICK?",
name: "AUT",
required: true
}
],
button_label: "SUBMIT"
}
],
repetitions: 5
}
let rat_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see three words that seem unrelated. Your job is to find a fourth word that connects to all three.</p>
<p>For example, if you see:</p>
<p><strong>PINE / SAUCE / CRAB</strong></p>
<p>The answer would be <strong>APPLE</strong> because it forms compound words with all three:</p>
<ul>
<li>PINE + APPLE = pineapple</li>
<li>APPLE + SAUCE = applesauce</li>
<li>CRAB + APPLE = crab apple</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>The connecting word can go either before or after each of the three given words to form a common compound word or phrase.</p>
<p>Sometimes the connection might be a common phrase rather than a compound word.</p>
<p>Take your time to think about each problem - some are easier than others.</p>
</div>`,
`<div class="instructionStyle">
<p>You will see one set of three words at a time, followed by four answer choices.</p>
<p>Press the number key (1, 2, 3, or 4) that corresponds to your answer.</p>
<p>Try to answer each question - make your best guess if you"re unsure.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true
}
const saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
aut_instructions,
aut,
rat_instructions,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.2.5 Add the RAT trials
Now let’s add our trials for the RAT. Since every trial has a different three-word combination and multiple choice options, we’ll use timeline variables like we have in the past.
For this multiple choice version, we’ll put the entire stimulus (including the word triad and answer choices) directly in the timeline_variables. This keeps everything organized and makes it easy to randomize the trials. I created an HTML display much in the same way we have for the instructions.
Notice that each timeline variable includes four parameters:
stimulus: The HTML content showing the word triad and multiple choice optionscorrect: The correct answer key (1, 2, 3, or 4)words: The three-word combination as a clean stringanswer: The correct answer word
Although we only use stimulus in the actual trial, the words and answer parameters are helpful labels that we can use when we analyze and label our data in the next steps.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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"
}
let aut_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see the name of a common object and think of creative, unusual uses for it.</p>
<p>For example, if the object were "brick," you might think of:</p>
<ul>
<li>Use as a paperweight</li>
<li>Grind up to make red paint pigment</li>
<li>Heat in oven as a bed warmer</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>Your responses should be:</p>
<ul>
<li><strong>Creative</strong> - think of unusual uses</li>
<li><strong>Useful</strong> - the use should actually work</li>
<li><strong>Specific</strong> - relate to the object"s properties</li>
</ul>
<p>Avoid generic responses like "throw it away" that could apply to any object.</p>
</div>`,
`<div class="instructionStyle">
<p>You will generate 10 creative uses for the object.</p>
<p>Type one use at a time and press SUBMIT after each response.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true
}
let aut = {
timeline: [
{
type:jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000
},
{
type: jsPsychSurveyText,
questions: [
{
prompt: "What is a creative and unusual use for a BRICK?",
name: "AUT",
required: true
}
],
button_label: "SUBMIT"
}
],
repetitions: 5
}
let rat_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see three words that seem unrelated. Your job is to find a fourth word that connects to all three.</p>
<p>For example, if you see:</p>
<p><strong>PINE / SAUCE / CRAB</strong></p>
<p>The answer would be <strong>APPLE</strong> because it forms compound words with all three:</p>
<ul>
<li>PINE + APPLE = pineapple</li>
<li>APPLE + SAUCE = applesauce</li>
<li>CRAB + APPLE = crab apple</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>The connecting word can go either before or after each of the three given words to form a common compound word or phrase.</p>
<p>Sometimes the connection might be a common phrase rather than a compound word.</p>
<p>Take your time to think about each problem - some are easier than others.</p>
</div>`,
`<div class="instructionStyle">
<p>You will see one set of three words at a time, followed by four answer choices.</p>
<p>Press the number key (1, 2, 3, or 4) that corresponds to your answer.</p>
<p>Try to answer each question - make your best guess if you"re unsure.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true
}
let rat = {
timeline: [
{
type: jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000
},
{
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable("stimulus"),
choices: ["1", "2", "3", "4"],
prompt: "<p>Press 1, 2, 3, or 4 to select your answer</p>"
}
],
timeline_variables: [
{
stimulus: `<p><strong>COTTAGE - SWISS - CAKE</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. CHEESE</div>
<div>2. HOUSE</div>
<div>3. FOOD</div>
<div>4. WHITE</div>
</div>`,
correct_response: "1",
words: "COTTAGE SWISS CAKE",
answer: "CHEESE"
},
{
stimulus: `<p><strong>CREAM - SKATE - WATER</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. COLD</div>
<div>2. ICE</div>
<div>3. SMOOTH</div>
<div>4. WINTER</div>
</div>`,
correct_response: "2",
words: "CREAM SKATE WATER",
answer: "ICE"
},
{
stimulus: `<p><strong>MAGIC - PITCH - ROOM</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. BLACK</div>
<div>2. NIGHT</div>
<div>3. DARK</div>
<div>4. DEEP</div>
</div>`,
correct_response: "3",
words: "MAGIC PITCH ROOM",
answer: "DARK"
},
{
stimulus: `<p><strong>SHIP - OUTER - CRAWL</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. SPACE</div>
<div>2. TRAVEL</div>
<div>3. MOVE</div>
<div>4. OCEAN</div>
</div>`,
correct_response: "1",
words: "SHIP OUTER CRAWL",
answer: "SPACE"
},
{
stimulus: `<p><strong>APPLE - FAMILY - HOUSE</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. HOME</div>
<div>2. TREE</div>
<div>3. GREEN</div>
<div>4. FRUIT</div>
</div>`,
correct_response: "2",
words: "APPLE FAMILY HOUSE",
answer: "TREE"
}
],
randomize_order: true
}
const saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
aut_instructions,
aut,
rat_instructions,
rat,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.2.6 Add data labels
Now it’s time to provide labels for our data. I typically leave this step towards the end, because you need to see all the different trials to know what needs to be labeled.
This step is about working out which parts of the experiment you might need to find or filter when you’re analyzing your data later.
Let’s think about what we need for this experiment:
- Phase labels - We need to identify different sections of the experiment so we can select all AUT or RAT trials and filter out instructions/save data trials
- Labels: phase: “Welcome”, “AUT Instructions”, “AUT”,“RAT Instructions”, “RAT”, “Save Data”
- Trial part labels - We need to distinguish between the actual response trials and the fixation crosses within each task
- Labels: trial_part: “stimulus”, “fixation”
- RAT-specific labels - For the RAT trials, we need the dynamic information from our timeline_variables so we can analyze correctness and see what words/answers were presented
- Labels: words, answer, correct (these come automatically from timeline_variables)
Note: Don’t forget that when we add new properties to the list, the previous line needs a comma! I always highlight the line before our addition to note that we need that comma.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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",
data: {
phase: "welcome"
}
}
let aut_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see the name of a common object and think of creative, unusual uses for it.</p>
<p>For example, if the object were "brick," you might think of:</p>
<ul>
<li>Use as a paperweight</li>
<li>Grind up to make red paint pigment</li>
<li>Heat in oven as a bed warmer</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>Your responses should be:</p>
<ul>
<li><strong>Creative</strong> - think of unusual uses</li>
<li><strong>Useful</strong> - the use should actually work</li>
<li><strong>Specific</strong> - relate to the object"s properties</li>
</ul>
<p>Avoid generic responses like "throw it away" that could apply to any object.</p>
</div>`,
`<div class="instructionStyle">
<p>You will generate 10 creative uses for the object.</p>
<p>Type one use at a time and press SUBMIT after each response.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true,
data: {
phase: "AUT Instructions"
}
}
let aut = {
timeline: [
{
type:jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000,
data: {
trial_part: "fixation"
}
},
{
type: jsPsychSurveyText,
questions: [
{
prompt: "What is a creative and unusual use for a BRICK?",
name: "AUT",
required: true
}
],
button_label: "SUBMIT",
data: {
trial_part: "stimulus"
}
}
],
repetitions: 5,
data: {
phase: "AUT"
}
}
let rat_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see three words that seem unrelated. Your job is to find a fourth word that connects to all three.</p>
<p>For example, if you see:</p>
<p><strong>PINE / SAUCE / CRAB</strong></p>
<p>The answer would be <strong>APPLE</strong> because it forms compound words with all three:</p>
<ul>
<li>PINE + APPLE = pineapple</li>
<li>APPLE + SAUCE = applesauce</li>
<li>CRAB + APPLE = crab apple</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>The connecting word can go either before or after each of the three given words to form a common compound word or phrase.</p>
<p>Sometimes the connection might be a common phrase rather than a compound word.</p>
<p>Take your time to think about each problem - some are easier than others.</p>
</div>`,
`<div class="instructionStyle">
<p>You will see one set of three words at a time, followed by four answer choices.</p>
<p>Press the number key (1, 2, 3, or 4) that corresponds to your answer.</p>
<p>Try to answer each question - make your best guess if you"re unsure.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true,
data: {
phase: "RAT Instructions"
}
}
let rat = {
timeline: [
{
type: jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000,
data: {
trial_part: "fixation"
}
},
{
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable("stimulus"),
choices: ["1", "2", "3", "4"],
prompt: "<p>Press 1, 2, 3, or 4 to select your answer</p>",
data: {
trial_part: "stimulus",
words: jsPsych.timelineVariable("words"),
answer: jsPsych.timelineVariable("answer"),
correct_response: jsPsych.timelineVariable("correct_response")
}
}
],
timeline_variables: [
{
stimulus: `<p><strong>COTTAGE - SWISS - CAKE</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. CHEESE</div>
<div>2. HOUSE</div>
<div>3. FOOD</div>
<div>4. WHITE</div>
</div>`,
correct_response: "1",
words: "COTTAGE SWISS CAKE",
answer: "CHEESE"
},
{
stimulus: `<p><strong>CREAM - SKATE - WATER</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. COLD</div>
<div>2. ICE</div>
<div>3. SMOOTH</div>
<div>4. WINTER</div>
</div>`,
correct_response: "2",
words: "CREAM SKATE WATER",
answer: "ICE"
},
{
stimulus: `<p><strong>MAGIC - PITCH - ROOM</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. BLACK</div>
<div>2. NIGHT</div>
<div>3. DARK</div>
<div>4. DEEP</div>
</div>`,
correct_response: "3",
words: "MAGIC PITCH ROOM",
answer: "DARK"
},
{
stimulus: `<p><strong>SHIP - OUTER - CRAWL</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. SPACE</div>
<div>2. TRAVEL</div>
<div>3. MOVE</div>
<div>4. OCEAN</div>
</div>`,
correct_response: "1",
words: "SHIP OUTER CRAWL",
answer: "SPACE"
},
{
stimulus: `<p><strong>APPLE - FAMILY - HOUSE</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. HOME</div>
<div>2. TREE</div>
<div>3. GREEN</div>
<div>4. FRUIT</div>
</div>`,
correct_response: "2",
words: "APPLE FAMILY HOUSE",
answer: "TREE"
}
],
randomize_order: true,
data: {
phase: "RAT"
}
}
const saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
},
data: {
phase: "Save Data"
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
aut_instructions,
aut,
rat_instructions,
rat,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.2.7 Update RAT data with accuracy
Since we used the multiple-choice version of the RAT, we can easily determine if participants provided the correct response or not. Let’s use the on_finish parameter to update our data with their accuracy.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6: Creativity</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-instructions.js"></script>
<script src="jspsych/plugin-survey-text.js"></script>
<!-- custom CSS -->
<link href="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",
data: {
phase: "welcome"
}
}
let aut_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see the name of a common object and think of creative, unusual uses for it.</p>
<p>For example, if the object were "brick," you might think of:</p>
<ul>
<li>Use as a paperweight</li>
<li>Grind up to make red paint pigment</li>
<li>Heat in oven as a bed warmer</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>Your responses should be:</p>
<ul>
<li><strong>Creative</strong> - think of unusual uses</li>
<li><strong>Useful</strong> - the use should actually work</li>
<li><strong>Specific</strong> - relate to the object"s properties</li>
</ul>
<p>Avoid generic responses like "throw it away" that could apply to any object.</p>
</div>`,
`<div class="instructionStyle">
<p>You will generate 10 creative uses for the object.</p>
<p>Type one use at a time and press SUBMIT after each response.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true,
data: {
phase: "AUT Instructions"
}
}
let aut = {
timeline: [
{
type:jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000,
data: {
trial_part: "fixation"
}
},
{
type: jsPsychSurveyText,
questions: [
{
prompt: "What is a creative and unusual use for a BRICK?",
name: "AUT",
required: true
}
],
button_label: "SUBMIT",
data: {
trial_part: "stimulus"
}
}
],
repetitions: 5,
data: {
phase: "AUT"
}
}
let rat_instructions = {
type: jsPsychInstructions,
pages: [
`<div class="instructionStyle">
<p>In this task, you will see three words that seem unrelated. Your job is to find a fourth word that connects to all three.</p>
<p>For example, if you see:</p>
<p><strong>PINE / SAUCE / CRAB</strong></p>
<p>The answer would be <strong>APPLE</strong> because it forms compound words with all three:</p>
<ul>
<li>PINE + APPLE = pineapple</li>
<li>APPLE + SAUCE = applesauce</li>
<li>CRAB + APPLE = crab apple</li>
</ul>
</div>`,
`<div class="instructionStyle">
<p>The connecting word can go either before or after each of the three given words to form a common compound word or phrase.</p>
<p>Sometimes the connection might be a common phrase rather than a compound word.</p>
<p>Take your time to think about each problem - some are easier than others.</p>
</div>`,
`<div class="instructionStyle">
<p>You will see one set of three words at a time, followed by four answer choices.</p>
<p>Press the number key (1, 2, 3, or 4) that corresponds to your answer.</p>
<p>Try to answer each question - make your best guess if you"re unsure.</p>
<p>Press NEXT when you are ready to begin.</p>
</div>`
],
show_clickable_nav: true,
show_page_number: true,
data: {
phase: "RAT Instructions"
}
}
let rat = {
timeline: [
{
type: jsPsychHtmlKeyboardResponse,
stimulus: `<p style="font-size: 72px">+</p>`,
choices: "NO_KEYS",
trial_duration: 1000,
data: {
trial_part: "fixation"
}
},
{
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable("stimulus"),
choices: ["1", "2", "3", "4"],
prompt: "<p>Press 1, 2, 3, or 4 to select your answer</p>",
data: {
trial_part: "stimulus",
words: jsPsych.timelineVariable("words"),
answer: jsPsych.timelineVariable("answer"),
correct_response: jsPsych.timelineVariable("correct_response")
},
on_finish: function(data){
// Use compareKeys() to properly compare key responses
if (jsPsych.pluginAPI.compareKeys(data.response, data.correct_response)) {
data.accuracy = true;
} else {
data.accuracy = false;
}
}
}
],
timeline_variables: [
{
stimulus: `<p><strong>COTTAGE - SWISS - CAKE</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. CHEESE</div>
<div>2. HOUSE</div>
<div>3. FOOD</div>
<div>4. WHITE</div>
</div>`,
correct_response: "1",
words: "COTTAGE SWISS CAKE",
answer: "CHEESE"
},
{
stimulus: `<p><strong>CREAM - SKATE - WATER</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. COLD</div>
<div>2. ICE</div>
<div>3. SMOOTH</div>
<div>4. WINTER</div>
</div>`,
correct_response: "2",
words: "CREAM SKATE WATER",
answer: "ICE"
},
{
stimulus: `<p><strong>MAGIC - PITCH - ROOM</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. BLACK</div>
<div>2. NIGHT</div>
<div>3. DARK</div>
<div>4. DEEP</div>
</div>`,
correct_response: "3",
words: "MAGIC PITCH ROOM",
answer: "DARK"
},
{
stimulus: `<p><strong>SHIP - OUTER - CRAWL</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. SPACE</div>
<div>2. TRAVEL</div>
<div>3. MOVE</div>
<div>4. OCEAN</div>
</div>`,
correct_response: "1",
words: "SHIP OUTER CRAWL",
answer: "SPACE"
},
{
stimulus: `<p><strong>APPLE - FAMILY - HOUSE</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. HOME</div>
<div>2. TREE</div>
<div>3. GREEN</div>
<div>4. FRUIT</div>
</div>`,
correct_response: "2",
words: "APPLE FAMILY HOUSE",
answer: "TREE"
}
],
randomize_order: true,
data: {
phase: "RAT"
}
}
const saveData = {
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<div style="text-align: center;">
<p>Experiment complete!</p>
<p>Click the button below to save your data locally:</p>
<button id="save-btn" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Click here to save the data locally
</button>
</div>
`,
choices: "NO_KEYS",
trial_duration: null,
on_load: function() {
document.getElementById("save-btn").addEventListener("click", function() {
jsPsych.data.get().localSave("csv", "creativity_data.csv");
});
},
data: {
phase: "Save Data"
}
};
// 3. Run jsPsych with our trials
jsPsych.run([
welcome,
aut_instructions,
aut,
rat_instructions,
rat,
saveData
]);
Live JsPsych Demo
Click inside the demo to activate demo
16.3 Stretch Goals
16.3.1 Add RT Performance Category to the RAT data
It could be useful to categorize participant response times to identify unusually fast or slow responses. Use the on_finish function to add a data.rt_performance label to each RAT trial.
You’ll need to use if-else statements to categorize response times:
rt < 500= “too_fast” (likely guessing)rt > 10000= “too_slow” (may indicate distraction)rt >= 500 && rt <= 10000= “normal” (reasonable thinking time)
This will help you identify and potentially exclude problematic responses during analysis.
16.3.2 Add a practice block of RAT trials
Let’s add a separate practice block that gives participants feedback on their responses. This helps them understand the task before the main trials.
- RAT instructions (already included, but updated to tell them that they will first complete practice trials)
- Practice trials - Each consisting of:
- Fixation cross
- RAT multiple choice question
- After they respond, show them the correct response: “The correct response was CHEESE”
- Note: To do this, you’ll just need to add a new ‘feedback’ timeline variable with the appropriate html to insert on the feedback trial
- End of Practice Instructions
- Let participants know that the practice is over and to press any key to begin the experimental phase (Hint: this could like the welcome screen)
Your experiment timeline at the end should look something like this:
jsPsych.run([
welcome,
aut_instructions,
aut,
rat_instructions,
rat_practice,
rat_end_practice,
rat,
saveData
]);For the feedback trial, we will just insert the answer using a stimulus like:
stimulus: `<p>The correct answer was: <strong>${jsPsych.timelineVariable("answer")}</strong></p>
<p>Press any key to continue to the next practice trial.</p>`Here are two RAT stimuli you can use for your practice trials:
{
stimulus: `<p><strong>BLUE COTTAGE SWISS</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. CHEESE</div>
<div>2. HOUSE</div>
<div>3. MILK</div>
<div>4. WHITE</div>
</div>`,
correct: '1',
words: 'BLUE COTTAGE SWISS',
answer: 'CHEESE'
},
{
stimulus: `<p><strong>SLEEPING CONTEST SHIP</strong></p>
<div style="text-align: left; display: inline-block;">
<div>1. WATER</div>
<div>2. BEAUTY</div>
<div>3. NIGHT</div>
<div>4. DREAM</div>
</div>`,
correct: '2',
words: 'SLEEPING CONTEST SHIP',
answer: 'BEAUTY'
}Important reminders:
- Label this block appropriately (e.g., phase: “RAT_practice”)
- Add the practice block to your main experiment timeline before the actual RAT block