Changing the simple RT task to the Simon task #1285

InaQuadt · 2020-12-05T08:17:20Z

InaQuadt
Dec 5, 2020

Hello,

I have never before coded anything, so I'm very new to all this. However, I really want to do a reaction time experiment for my undergraduate project, which is only possible online due to COVID.
I came across the "simple RT task", and I thought I might be able to change it into the Simon task.
Which means I have to change where on the screen the circle appears.
The participant should press "J" for the red circle no matter if the red circle appears on the right side of the screen or the left.
And the same for the blue circle, the participant should press "F" no matter where the circle appears.
How can I change the position of the circles that appear?

Best regards,
Ina

This is what I have copied (I have already made a few changes)

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych/jspsych.js"></script>
    <script src="jspsych/plugins/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych/plugins/jspsych-image-keyboard-response.js"></script>
    <link rel="stylesheet" href="jspsych/css/jspsych.css">
  </head>
  <body></body>
  <script>

    /* create timeline */
    var timeline = [];

    /* define welcome message trial */
    var welcome_block = {
      type: "html-keyboard-response",
      stimulus: "Welcome to the experiment. Press any key to begin."
    };
    timeline.push(welcome_block);

    /* define instructions trial */
    var instructions = {
      type: "html-keyboard-response",
      stimulus: "<p>In this experiment, a shape will appear somewhere on the screen." +
          "<p> If you see a <strong>circle</strong>, press the <strong>F</strong> on your keyboard.</p>" +
          "<p> If you see a <strong>triangle</strong>, press the <strong>J</strong> on your keyboard.</p>" +
          "Try to be as <strong>fast</strong> and as <strong>accurate</strong> as you can.</p>" +
          "<div style='width: 700px;'>"+
          "<div style='float: left;'><img src='img/small_blue_circle.png'></img>" +
          "<p class='small'><strong>Press the F key</strong></p></div>" +
          "<div class='float: right;'><img src='img/small_red_triangle.png'></img>" +
          "<p class='small'><strong>Press the J key</strong></p></div>" +
          "</div>"+
          "<p>Press any key to begin.</p>",
      post_trial_gap: 2000
    };
    timeline.push(instructions);

    /* test trials */

    var test_stimuli = [
      { stimulus: "img/small_blue_circle.png", data: { test_part: 'test', correct_response: 'f' } },
      { stimulus: "img/small_red_triangle.png", data: { test_part: 'test', correct_response: 'j' } }
    ];

    var fixation = {
      type: 'html-keyboard-response',
      stimulus: '<div style="font-size:60px;">+</div>',
      choices: jsPsych.NO_KEYS,
      trial_duration: function(){
        return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
      },
      data: {test_part: 'fixation'}
    }

    var test = {
      type: "image-keyboard-response",
      stimulus: jsPsych.timelineVariable('stimulus'),
      choices: ['f', 'j'],
      data: jsPsych.timelineVariable('data'),
      on_finish: function(data){
        data.correct = data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.correct_response);
      },
    }

    var test_procedure = {
      timeline: [fixation, test],
      timeline_variables: test_stimuli,
      repetitions: 2,
      randomize_order: true
    }
    timeline.push(test_procedure);

    /* define debrief */

    var debrief_block = {
      type: "html-keyboard-response",
      stimulus: function() {

        var trials = jsPsych.data.get().filter({test_part: 'test'});
        var correct_trials = trials.filter({correct: true});
        var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
        var rt = Math.round(correct_trials.select('rt').mean());

        return "<p>You responded correctly on "+accuracy+"% of the trials.</p>"+
        "<p>Your average response time was "+rt+"ms.</p>"+
        "<p>Press any key to complete the experiment. Thank you!</p>";

      }
    };
    timeline.push(debrief_block);

    /* start the experiment */
    jsPsych.init({
      timeline: timeline,
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });
  </script>
</html>

Answered by becky-gilbert

Dec 10, 2020

There are a few different ways of doing this. One option is to create 'left' and 'right' versions of your images, where you add white space so that the image appears shifted to the left or right:

var test_stimuli = [
  { stimulus: "img/small_blue_circle_left.png", data: { test_part: 'test', correct_response: 'f', side: 'left' } },
  { stimulus: "img/small_red_triangle_right.png", data: { test_part: 'test', correct_response: 'j', side: 'right' } }
];

One annoying thing about this solution is that the size of the shift would be fixed (rather than e.g. a percentage of the screen width), and you'd have to edit your image files anytime you want to tweak the size of the shift.

Another option is…

View full answer

becky-gilbert · 2020-12-10T23:03:05Z

becky-gilbert
Dec 10, 2020
Maintainer

There are a few different ways of doing this. One option is to create 'left' and 'right' versions of your images, where you add white space so that the image appears shifted to the left or right:

var test_stimuli = [
  { stimulus: "img/small_blue_circle_left.png", data: { test_part: 'test', correct_response: 'f', side: 'left' } },
  { stimulus: "img/small_red_triangle_right.png", data: { test_part: 'test', correct_response: 'j', side: 'right' } }
];

One annoying thing about this solution is that the size of the shift would be fixed (rather than e.g. a percentage of the screen width), and you'd have to edit your image files anytime you want to tweak the size of the shift.

Another option is to add some CSS to the images so that they appear further to the left or right. I could be wrong, but I don't thing there's a way to do this using the image-keyboard-response plugin. But you can do this with the html-keyboard-response plugin, because this will allow you to position the images with CSS inside the <img> tags. Then you can create the stimulus HTML string by using a dynamic stimulus parameter to combine the image file (stimulus in your timeline_variables array) and left/right side (side in your timeline_variables array). Here's an example:

// in the timeline variables array, add a variable called "side" to each object,
// as well as to the nested "data" object
var test_stimuli = [
  { stimulus: "jspsych-6.1.0/examples/img/1.gif", side: 'left', data: { test_part: 'test', correct_response: 'f', side: 'left'}},
  { stimulus: "jspsych-6.1.0/examples/img/2.gif", side: 'left', data: { test_part: 'test', correct_response: 'j', side: 'left' }},
  { stimulus: "jspsych-6.1.0/examples/img/1.gif", side: 'right', data: { test_part: 'test', correct_response: 'f', side: 'right'}},
  { stimulus: "jspsych-6.1.0/examples/img/2.gif", side: 'right', data: { test_part: 'test', correct_response: 'j', side: 'right'}}
];

...

var test = {
  type: "html-keyboard-response",
  stimulus: function() {
      // define a variable called "shift" that determines the left/right shift value, based on "side" from timeline variables
      var shift;
      if (jsPsych.timelineVariable('side', true) == 'left') {
        // shift image 300 px to the left - percentages also work
        shift = "-300px";
      } else if (jsPsych.timelineVariable('side', true) == 'right') {
        // shift image 300 px to the right - percentages also work
        shift = "300px";
      }
      // combine the "stimulus" (image file path) and "shift" in a single HTML string to use for the trial stimulus
      return '<img src="'+jsPsych.timelineVariable('stimulus',true)+'" style="transform: translate('+shift+'); width:300px;"/>'
  },
  choices: ['f', 'j'],
  data: jsPsych.timelineVariable('data'),
  on_finish: function(data){
    data.correct = data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.correct_response);
  }
};

...

jsPsych.init({
  timeline: timeline,
  // because the images are embedded in the HTML stimulus string, we need to manually preload all images
  preload_images: ['jspsych-6.1.0/examples/img/1.gif','jspsych-6.1.0/examples/img/2.gif'],
  on_finish: function() {
    jsPsych.data.displayData();
  }
});

0 replies

InaQuadt · 2020-12-21T13:25:07Z

InaQuadt
Dec 21, 2020
Author

Hi Becky,

Thank you very much for your help and sorry for the late reply!
The second option works well. This has basically saved my project!
I have one more question, though, and I hope there is an easy solution to this...
I realised that I need different results (i.e. mean reaction times) for congruent and incongruent trials.
Is it possible or rather is it difficult to include this?
I would also have to include this / change it in Qualtrics.

Best wishes and
Happy Christmas,

Ina

2 replies

InaQuadt Jan 9, 2021
Author

Hi,

Just to let you know, I am now using https://cognition.run instead of Qualtircs which is much easier!!
I can just download the participant's data and use excel to calculate reaction times for congruent and incongruent trials.

Best wishes,
Ina

becky-gilbert Jan 9, 2021
Maintainer

Great! Sorry for the slow response, and glad you were able to figure out how to calculate separate RTs for the two conditions 👍 Feel free to post here or start a new discussion if you need more guidance.

kafriebe · 2023-03-23T12:00:29Z

kafriebe
Mar 23, 2023

I tried implementing the above mentioned code. However, I receive type error asking me to provide a type for var. What would I need to do there? I suspect the error refers to the shift variable.

1 reply

kafriebe Mar 23, 2023

The code now looks like this and works well:

<title>My experiment</title> <script src="https://unpkg.com/[email protected]"></script> <script src="https://unpkg.com/@jspsych/[email protected]"></script> <script src="https://unpkg.com/@jspsych/[email protected]"></script> <script src="https://unpkg.com/@jspsych/[email protected]"></script> <script>

/* initialize jsPsych */
var jsPsych = initJsPsych({
  on_finish: function() {
    jsPsych.data.displayData();
  }
});

/* create timeline */
var timeline = [];

/* preload images */
var preload = {
  type: jsPsychPreload,
  images: ['img/green.png', 'img/red.png']
};
timeline.push(preload);

/* define welcome message trial */
var welcome = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);

/* define instructions trial */
var instructions = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `
    <p>In this experiment, a circle will appear in the center 
    of the screen.</p><p>If the circle is <strong>green</strong>, 
    press the letter S on the keyboard as fast as you can.</p>
    <p>If the circle is <strong>red</strong>, press the letter K 
    as fast as you can.</p>
    <div style='width: 700px;'>
    <div style='float: left;'><img src='img/green.png'></img>
    <p class='small'><strong>Press the S key</strong></p></div>
    <div style='float: right;'><img src='img/red.png'></img>
    <p class='small'><strong>Press the K key</strong></p></div>
    </div>
    <p>Press any key to begin.</p>
  `,
  post_trial_gap: 2000
};
timeline.push(instructions);

/* define trial stimuli array for timeline variables */
var test_stimuli = [
    { stimulus: "img/green.png", side: 'left', data: { test_part: 'test', correct_response: 's', side: 'left' } },
    { stimulus: "img/red.png", side: 'left', data: { test_part: 'test', correct_response: 'k', side: 'left' } },
    { stimulus: "img/green.png", side: 'right', data: { test_part: 'test', correct_response: 's', side: 'right' } },
    { stimulus: "img/red.png", side: 'right', data: { test_part: 'test', correct_response: 'k', side: 'right' } }
];
/* define fixation and test trials */
var fixation = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: "NO_KEYS",
  trial_duration: function(){
    return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
  },
  data: {
    task: 'fixation'
  }
};

var test = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: function() {
      // define a variable called "shift" that determines the left/right shift value, based on "side" from timeline variables
      var shift;
      if (jsPsych.timelineVariable('side', true) == 'left') {
        // shift image 300 px to the left - percentages also work
        shift = "-300px";
      } else if (jsPsych.timelineVariable('side', true) == 'right') {
        // shift image 300 px to the right - percentages also work
        shift = "300px";
      }
      // combine the "stimulus" (image file path) and "shift" in a single HTML string to use for the trial stimulus
      return '<img src="'+jsPsych.timelineVariable('stimulus',true)+'" style="transform: translate('+shift+'); width:300px;"/>'
  },
  choices: ['s', 'k'],
  data: jsPsych.timelineVariable('data'),
  on_finish: function(data){
      data.correct = jsPsych.pluginAPI.compareKeys(data.response, data.correct_response);
      
  }
};


/* define test procedure */
var test_procedure = {
  timeline: [fixation, test],
  timeline_variables: test_stimuli,
  repetitions: 5,
  randomize_order: true
};
timeline.push(test_procedure);

/* define debrief */
var debrief_block = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: function() {

    var trials = jsPsych.data.get().filter({task: 'response'});
    var correct_trials = trials.filter({correct: true});
    var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
    var rt = Math.round(correct_trials.select('rt').mean());

    return `<p>You responded correctly on ${accuracy}% of the trials.</p>
      <p>Your average response time was ${rt}ms.</p>
      <p>Press any key to complete the experiment. Thank you!</p>`;

  }
};
timeline.push(debrief_block);

/* start the experiment */
jsPsych.run(timeline);

</script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Changing the simple RT task to the Simon task #1285

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Changing the simple RT task to the Simon task #1285

Uh oh!

Uh oh!

InaQuadt Dec 5, 2020

Replies: 3 comments · 3 replies

Uh oh!

becky-gilbert Dec 10, 2020 Maintainer

Uh oh!

InaQuadt Dec 21, 2020 Author

Uh oh!

InaQuadt Jan 9, 2021 Author

Uh oh!

becky-gilbert Jan 9, 2021 Maintainer

Uh oh!

kafriebe Mar 23, 2023

Uh oh!

Uh oh!

kafriebe Mar 23, 2023

InaQuadt
Dec 5, 2020

Replies: 3 comments 3 replies

becky-gilbert
Dec 10, 2020
Maintainer

InaQuadt
Dec 21, 2020
Author

InaQuadt Jan 9, 2021
Author

becky-gilbert Jan 9, 2021
Maintainer

kafriebe
Mar 23, 2023