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 the colour and text 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 and jsPsych.randomization.sampleWithReplacement to choose colours and words.