Stroop with timeline variablesΒΆ

Example experiment.html. You may have to change this slightly depending on the location of your copy of jsPsych on the server.

It contains some extra style information to make the background grey, and make the text of the stimulus bigger and boldface.

<html>
    <head>
        <title>stroop_timeline_variables</title>
        <script src="https://unpkg.com/jspsych@8.0.2"></script>
        <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
        <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
        <script src="stroop_timeline_variables.js"></script>
        <link href="https://unpkg.com/jspsych@8.0.2/css/jspsych.css" rel="stylesheet" type="text/css" />

        <style>
          body {
            background-color: #777777;
          }
          .jspsych-display-element {
             font-size: xx-large;
             font-family: sans;
             font-weight: bold
          }
        </style>

        </head>
    <body></body>
</html>

And experiment.js:

var jsPsych = initJsPsych({
    on_finish: function() {
        jsPsych.data.displayData('csv');
    }
});

var stroop_variables = [
    { colour: "blue", text: "blue", condition: "congruent" },
    { colour: "red", text: "red", condition: "congruent" },
    { colour: "yellow", text: "yellow", condition: "congruent" },
    { colour: "green", text: "green", condition: "congruent" },
    { colour: "blue", text: "yellow", condition: "incongruent" },
    { colour: "red", text: "green", condition: "incongruent" },
    { colour: "yellow", text: "blue", condition: "incongruent" },
    { colour: "green", text: "red", condition: "incongruent" }
];

// these are in HTML, so <br> means "line break"
var instructions = {
    type: jsPsychInstructions,
    pages: [
      "Welcome to the experiment.<br>Press Space to continue.",
      "In this experiment you will be presented with the words blue, red, yellow and green.<br>Press Space to continue.",
      "As soon as you see a new word, press its first letter.<br>For example, press the B key for blue.<br>Press Space to continue.",
      "Try to answer as quickly as you can!<br>Press Space to start the experiment.",
    ],
    key_forward: ' '
}

var fixation = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: '+',
    trial_duration: 500,
    response_ends_trial: false
};

// blank (ITI stands for "inter trial interval")
var iti = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: '',
  trial_duration: 250,
  response_ends_trial: false
}

var trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: function () {
        // note: the outer parentheses are only here so we can break the line
        return (
             '<p style="color: '+jsPsych.timelineVariable("colour")+'">'
             +jsPsych.timelineVariable("text")
             +'</p>'
        );
    },
    // 'choices' restricts the available responses for the participant
    choices: ['r','g','b','y'],
    data: {
      colour: jsPsych.timelineVariable('colour'),
      text: jsPsych.timelineVariable('text'),
      condition: jsPsych.timelineVariable('condition')
    }
};

var trials_with_variables = {
    timeline: [iti, fixation, trial],
    timeline_variables: stroop_variables
};

jsPsych.run([instructions, trials_with_variables]);