Randomization within a timeline #2547

LinusZeuwts · 2022-03-16T09:10:37Z

LinusZeuwts
Mar 16, 2022

Dear

I'm writing an experiment in which i would like to present the participant with four stimuli. Each stimuli includes four images which are presented in a fixed order. This is essential as each image requires a specific button press. The stimuli are preceded by a "get ready" trial and then a short black interval. The sum of the four keystrokes will be calculated and presented as feedback (debrief) after each stimuli.

Now I want to present the stimuli, that are nested onto a timeline, in a random order. However, I fail to get them randomized.
Does anybody know how to get them presented in a randomized order? I included the entire code and stimuli . The var "test", at the bottom of the code, is where I experience difficulties

Thanks in advance!!

Linus

Get Ready.pptx

Trial D.pptx

Practice Trial.pptx

Trial A.pptx

Trial B.pptx

Trial C.pptx

Empty.pptx

Example.pptx

<!DOCTYPE html>
<html>

<head>
  <title>My Experiment</title>
  <script src="jspsych-6.0.5/jspsych.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-html-keyboard-response.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-preload.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-canvas-keyboard-response.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-html-button-response.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-image-keyboard-response.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-fullscreen.js"></script>
  <script src="jspsych-6.0.5/plugins/jspsych-survey-text.js"></script>
  <link href="jspsych-6.0.5/css/jspsych.css" rel="stylesheet" type="text/css">
</head>

<body></body>
<script>

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

  timeline.push({
  type: 'fullscreen',
  fullscreen_mode: true
});

  /* define welcome message trial */
  var welcome = {
    type: "html-keyboard-response",
    stimulus: `<img src = 'JND/stim/logo_UGent_NL_RGB_2400_kleur.png'></img>
    <p style="font-size:30px;color:red;"><strong>Contextual Interference</strong></p>
    <p>Press any key to continue</p>`
};
timeline.push(welcome);
  

  /* instructions test */
  var instructions_test = {
    type: "html-keyboard-response",
    stimulus: `<p style="font-size:30px;color:red;"><strong>Welcome to the test.</strong></p>
   <p>1) Your task is to press the keys on the keyboard in the sequence presented to you
     as soon as possible after the sequence appears on the screen. Use the index 
     finger of your preferred hand and try to be as fast and accurate as possible.
     If you make a sequence error, you will receive a message telling you that the 
     response was in error.</p>
    <p>2) Following these instructions, click the "Start" button to start the experiment.</p>
    <p>3) Remember to complete the sequence as fast as possible. Try not to make errors.</p>
    <img src = "CI/stim/Example.png"></img>
    <p>4) Press any key to continue</p>`,
    post_trial_gap: 1000
  };

  /* test variables*/
  //* trial stimuli *//
  var test_stimuli_A = [
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial A.png'></img>`, correct_response: 101},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial A.png'></img>`, correct_response: 100},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial A.png'></img>`, correct_response: 104},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial A.png'></img>`, correct_response: 99}];
  var test_stimuli_B = [
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial B.png'></img>`, correct_response: 99},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial B.png'></img>`, correct_response: 104},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial B.png'></img>`, correct_response: 105},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial B.png'></img>`, correct_response: 98}];
  var test_stimuli_C = [
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial C.png'></img>`, correct_response: 105},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial C.png'></img>`, correct_response: 97},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial C.png'></img>`, correct_response: 100},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial C.png'></img>`, correct_response: 99}];
  var test_stimuli_D = [
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial D.png'></img>`, correct_response: 104},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial D.png'></img>`, correct_response: 102},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial D.png'></img>`, correct_response: 98},
    {stimulus: `<p style="font-size:30px;color: white;">Get Ready!</p><img src = 'CI/stim/Trial D.png'></img>`, correct_response: 100}];

  //* test trials *//
  ///* empty Get Ready *///
  var get_ready = {
    type: "html-keyboard-response",
    stimulus: `<p style="font-size:30px;color:red;"><strong>Get Ready!</strong></p><img src = 'CI/stim/Empty.png'></img>`,
    choices: "NO_KEYS",
    render_on_canvas: true,
    trial_duration: 2000
  };
  ///* empty *///
  var empty = {
    type: "html-keyboard-response",
    stimulus: `<p style="font-size:30px;color: white;"><strong>Get Ready!</strong></p><img src = 'CI/stim/Empty.png'></img>`,
    choices: "NO_KEYS",
    render_on_canvas: true,
    trial_duration: function(){
        return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];}     };

  ///* test A *///
  var test_A = {
    type: "html-keyboard-response",
    stimulus: jsPsych.timelineVariable('stimulus'),
    data: {
      task: 'response',
      correct_response: jsPsych.timelineVariable('correct_response')
    },
    on_finish: function(data){
      data.correct = jsPsych.pluginAPI.compareKeys(data.key_press, data.correct_response);
    }
  };
  //* test procedure A*//
  var test_procedure_A = {
    timeline: [test_A],
    timeline_variables: test_stimuli_A
  };
  //* debrief test A *//
  var debrief_block_A = {
      type: "html-keyboard-response",
      trial_duration: 2500,
      choices: "NO_KEYS",
      stimulus: function() {
        var trials = jsPsych.data.get().last(4);
        var correct_trials = trials.filter({correct: true});
        var rt = Math.round(correct_trials.select('rt').sum());
        var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
        if (accuracy == 100 && rt < 3000) {
          return `<p style="font-size:30px;color:red;"><strong>${rt}ms</strong></p><img src = "CI/stim/Trial A.png"></img>`
        } else if (accuracy == 100 && rt > 3000) {
          return `<p style="font-size:30px;color:red;"><strong>Too Slow!</strong></p><img src = "CI/stim/Trial A.png"></img>`
        } else if (accuracy == 100 && rt < 400) { 
          return `<p style="font-size:30px;color:red;"><strong>Too Fast! Anticipated?</strong></p><img src = "CI/stim/Trial A.png"></img>`
        } else { return `<p style="font-size:30px;color:red;"><strong>WRONG!</strong></p><img src = "CI/stim/Trial A.png"></img>
        `};
      }
    };
  //* test A *// 
  var test_A = {
  timeline: [get_ready, empty, test_procedure_A, debrief_block_A]
  };

  ///* test B *///
  var test_B = {
    type: "html-keyboard-response",
    stimulus: jsPsych.timelineVariable('stimulus'),
    data: {
      task: 'response',
      correct_response: jsPsych.timelineVariable('correct_response')
    },
    on_finish: function(data){
      data.correct = jsPsych.pluginAPI.compareKeys(data.key_press, data.correct_response);
    }
  };
  //* test procedure B*//
  var test_procedure_B = {
    timeline: [test_B],
    timeline_variables: test_stimuli_B
  };
  //* debrief test B *//
  var debrief_block_B = {
      type: "html-keyboard-response",
      trial_duration: 2500,
      choices: "NO_KEYS",
      maintain_aspect_ratio: true,
      render_on_canvas: true,
      stimulus: function() {
        var trials = jsPsych.data.get().last(4);
        var correct_trials = trials.filter({correct: true});
        var rt = Math.round(correct_trials.select('rt').sum());
        var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
        if (accuracy == 100 && rt < 3000) {
          return `<p style="font-size:30px;color:red;"><strong>${rt}ms</strong></p><img src = "CI/stim/Trial B.png"></img>`
        } else if (accuracy == 100 && rt > 3000) {
          return `<p style="font-size:30px;color:red;"><strong>Too Slow!</strong></p><img src = "CI/stim/Trial B.png"></img>`
        } else if (accuracy == 100 && rt < 400) { 
          return `<p style="font-size:30px;color:red;"><strong>Too Fast! Anticipated?</strong></p><img src = "CI/stim/Trial B.png"></img>`
        } else { return `<p style="font-size:30px;color:red;"><strong>WRONG!</strong></p><img src = "CI/stim/Trial B.png"></img>
        `};
      }
    };
  //* test B *// 
  var test_B = {
  timeline: [get_ready, empty, test_procedure_B, debrief_block_B]
  };

  ///* test C *///
  var test_C = {
    type: "html-keyboard-response",
    stimulus: jsPsych.timelineVariable('stimulus'),
    data: {
      task: 'response',
      correct_response: jsPsych.timelineVariable('correct_response')
    },
    on_finish: function(data){
      data.correct = jsPsych.pluginAPI.compareKeys(data.key_press, data.correct_response);
    }
  };
  //* test procedure C*//
  var test_procedure_C = {
    timeline: [test_C],
    timeline_variables: test_stimuli_C
  };
  //* debrief test C *//
  var debrief_block_C = {
      type: "html-keyboard-response",
      trial_duration: 2500,
      choices: "NO_KEYS",
      maintain_aspect_ratio: true,
      render_on_canvas: true,
      stimulus: function() {
        var trials = jsPsych.data.get().last(4);
        var correct_trials = trials.filter({correct: true});
        var rt = Math.round(correct_trials.select('rt').sum());
        var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
        if (accuracy == 100 && rt < 3000) {
          return `<p style="font-size:30px;color:red;"><strong>${rt}ms</strong></p><img src = "CI/stim/Trial C.png"></img>`
        } else if (accuracy == 100 && rt > 3000) {
          return `<p style="font-size:30px;color:red;"><strong>Too Slow!</strong></p><img src = "CI/stim/Trial C.png"></img>`
        } else if (accuracy == 100 && rt < 400) { 
          return `<p style="font-size:30px;color:red;"><strong>Too Fast! Anticipated?</strong></p><img src = "CI/stim/Trial C.png"></img>`
        } else { return `<p style="font-size:30px;color:red;"><strong>WRONG!</strong></p><img src = "CI/stim/Trial C.png"></img>
        `};
      }
    };
  //* test C *// 
  var test_C = {
  timeline: [get_ready, empty, test_procedure_C, debrief_block_C]
  };

  ///* test D *///
  var test_D = {
    type: "html-keyboard-response",
    stimulus: jsPsych.timelineVariable('stimulus'),
    data: {
      task: 'response',
      correct_response: jsPsych.timelineVariable('correct_response')
    },
    on_finish: function(data){
      data.correct = jsPsych.pluginAPI.compareKeys(data.key_press, data.correct_response);
    }
  };
  //* test procedure D*//
  var test_procedure_D = {
    timeline: [test_D],
    timeline_variables: test_stimuli_D
  };
  //* debrief test D *//
  var debrief_block_D = {
      type: "html-keyboard-response",
      trial_duration: 2500,
      choices: "NO_KEYS",
      maintain_aspect_ratio: true,
      render_on_canvas: true,
      stimulus: function() {
        var trials = jsPsych.data.get().last(4);
        var correct_trials = trials.filter({correct: true});
        var rt = Math.round(correct_trials.select('rt').sum());
        var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
        if (accuracy == 100 && rt < 3000) {
          return `<p style="font-size:30px;color:red;"><strong>${rt}ms</strong></p><img src = "CI/stim/Trial D.png"></img>`
        } else if (accuracy == 100 && rt > 3000) {
          return `<p style="font-size:30px;color:red;"><strong>Too Slow!</strong></p><img src = "CI/stim/Trial D.png"></img>`
        } else if (accuracy == 100 && rt < 400) { 
          return `<p style="font-size:30px;color:red;"><strong>Too Fast! Anticipated?</strong></p><img src = "CI/stim/Trial D.png"></img>`
        } else { return `<p style="font-size:30px;color:red;"><strong>WRONG!</strong></p><img src = "CI/stim/Trial D.png"></img>
        `};
      }
    };
  //* test D *// 
  var test_D = {
  timeline: [get_ready, empty, test_procedure_D, debrief_block_D]
  };

  //* test *// THIS IS WHERE THE RANDOMZATION SHOULD OCCUR
  var test = {
    timeline: [test_A, test_B, test_C, test_D],
    randomization: true,
    repetitions: 2}; 


  /* timeline */
  timeline.push(welcome);
  timeline.push(instructions_test);
  timeline.push(test);



  /* end */
  jsPsych.init({
    timeline: timeline,
    override_safe_mode: true,
    on_finish: function(){
      jsPsych.data.displayData();
    }
  })
</script>

</html>

becky-gilbert · 2022-03-19T18:16:53Z

becky-gilbert
Mar 19, 2022
Maintainer

Hi @LinusZeuwts, I haven't looked at your code closely but I did notice that your test block includes a parameter called randomization. I think this should be randomize_order (see timeline docs.

var test = { 
  timeline: [test_A, test_B, test_C, test_D],
  randomize_order: true, 
  repetitions: 2
};

Does that solve the problem?

2 replies

Ricardo-Piccolo May 8, 2023

Hey, can you help me with randomization as well? That code you've written didn't work with me. Here's a part of my code:

var test1 = {
type: 'image-keyboard-response',
choices: ' ',
timeline: [
{stimulus: 'bluesquare.png'},
{stimulus: 'yellowsquare.png'},
{stimulus: 'bluesquare.png'},
{stimulus: 'yellowsquare.png'},
{stimulus: 'bluesquare.png'},
],
randomize_order: true,
post_trial_gap: 300,
response_ends_trial: false,
trial_duration: 1000,
};
timeline.push(test1);

jodeleeuw May 8, 2023
Maintainer

The randomize_order parameter only applies to timeline_variables. Try this:

var test1 = {
	type: 'image-keyboard-response',
	choices: ' ',
	stimulus: jsPsych.timelineVariable('stimulus'),
	post_trial_gap: 300,
	response_ends_trial: false,
	trial_duration: 1000
}

var test1_trials = {
	timeline: [test1],
	timeline_variables: [
  		{stimulus: 'bluesquare.png'},
		{stimulus: 'yellowsquare.png'},
		{stimulus: 'bluesquare.png'},
		{stimulus: 'yellowsquare.png'},
		{stimulus: 'bluesquare.png'},
	],
	randomize_order: true
}
timeline.push(test1_trials);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Randomization within a timeline #2547

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

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!

Randomization within a timeline #2547

Uh oh!

LinusZeuwts Mar 16, 2022

Replies: 1 comment · 2 replies

Uh oh!

becky-gilbert Mar 19, 2022 Maintainer

Uh oh!

Ricardo-Piccolo May 8, 2023

Uh oh!

Uh oh!

jodeleeuw May 8, 2023 Maintainer

LinusZeuwts
Mar 16, 2022

Replies: 1 comment 2 replies

becky-gilbert
Mar 19, 2022
Maintainer

jodeleeuw May 8, 2023
Maintainer