More interesting stimuli¶
So far the experiments we’ve created have only used simple text and static images.
In this section we’ll take a look at other stimulus types.
The exercises in this section give you fewer hints to make things a bit more challenging. If you need more clues, take a look at the previous pages and past examples.
Multiple images using HTML¶
Using a HTML stimulus you can show text in different sizes, different colours, different fonts – you can do anything with a HTML stimulus that can be done on a web page! For example, you could use a HTML stimulus to show two images side-by-side:
var two_images = {
type: 'html-keyboard-response',
stimulus: '<img src="Dog1.jpg"> <img src="Dog2.jpg">'
}
Optional Exercise - multiple images¶
Copy the factorial
experiment to make a new experiment. Modify experiment.js
to show two images in the
full-factorial design – in other words, your list of factors will have two lists of images in it. When you add
these to the node above, it will look something like this:
var two_images = {
type: 'html-keyboard-response',
stimulus: function() {
return (
'<img src="'+jsPsych.timelineVariable("image1")+'">'
+'<img src="'+jsPsych.timelineVariable("image2")+'">'
);
}
}
Some notes on this:
The parentheses inside the function are just to allow us to break the line by adding two strings using
+
. If we didn’t do this it would be a really long line (which is absolutely allowed in JavaScript, but really hard to read!)When using a single timeline variable with no modification, one can just use the
timelineVariable
function directly:
stimulus: timelineVariable('myvariable');
There is another way to do this which doesn’t involve timeline variables. Instead, create a loop over the result of the factorial function to create a list of nodes. This may be easier to understand, and it’s good to know this approach as some experiment structures will require you to do this.
Solution¶
Here is an example solution using the first approach (timeline variables).
Here is an example solution using the second approach.
Text changes using HTML¶
Normally, information about text size, colour, font etc. would go into the CSS file. In the web page there would be something like this:
<p class="positivefeedback">Well done!</p>
and in the CSS file, something like this:
.positivefeedback {
color: green;
}
In experiments it’s often more expedient to put this directly into the HTML. You can do this using the style
attribute:
<p style="color: green">Well done!</p>
Important
CSS uses the American spelling for “color”. If you write “colour” it will be ignored!
Optional Exercise – Stroop, list approach¶
The Stroop effect works as follows. In a congruent Stroop trial the name of a colour is printed in that colour, e.g.
red
In an incongruent trial, the name of a colour is printed in a different colour:
blue
The Stroop effect means that, on average, participants take longer to name the colour of the text in an incongruent trial than a congruent one.
You could (as above) write another full-factorial experiment to implement a Stroop test. If you did this with four colours (for example) then a quarter of the trials would be congruent and three-quarters would be incongruent:
Colour |
Text |
Condition |
---|---|---|
red |
red |
congruent |
red |
green |
incongruent |
red |
blue |
incongruent |
red |
yellow |
incongruent |
green |
red |
congruent |
green |
green |
incongruent |
green |
blue |
incongruent |
green |
yellow |
incongruent |
etc. |
etc. |
etc. |
In a real experiment you’d want to statistically compare the congruent and incongruent conditions – and for this it would be better to have half of each.
The most straightforward way to do this would be to write a list yourself, with half congruent and half incongruent trials:
var stroop_variables = [
{ colour: "blue", text: "blue", condition: "congruent" },
{ colour: "red", text: "blue", condition: "incongruent" },
....
];
You can use this the same way you use the output from the factorial
function. Define a
fixation node and a Stroop test node, using one of the approaches above, either:
Use
jsPsych.timelineVariable
where you need thecolour
andtext
values.Use a loop to accumulate a list of nodes.
condition
can go in to the data
field of the node, so you will see “congruent”
and “incongruent” in the results.
Once you’ve got this working, see if you can use jsPsych.randomization.repeat
to
show the trials in a random order.
Solution¶
Here is an example solution using timeline variables.
Here is an example solution using a loop.
Optional Exercise – Stroop, automated approach¶
Rather than having a fixed list of trials, you could generate an equal number of congruent and incongruent trials. First, write a function that generates a random congruent trial, and one that generates a random incongruent trial 1. Then, write a loop that adds one congruent and one incongruent trial to the timeline for each time around the loop. This will ensure that there are equal numbers of congruent and incongruent trials.
Solution¶
Here is an example solution using functions.
Footnotes
- 1
You can use
jsPsych.randomization.sampleWithoutReplacement
andjsPsych.randomization.sampleWithReplacement
to choose colours and words.