Randomize blocks

[lily2brain]

Hello, I'm having trouble randomizing my 4 blocks between participants. The idea is that the order of the blocks by participants is random, but I'm not getting it. Part of my script I will insert for a better understanding.

var blockstimuli_faces1 = [
      {stimulus: 'alegria.jpg', prompt:"<div style='position:absolute;font-size:30px;text-align:right;width:650px;top:2%'><p><strong>ALEGRIA1</strong></div>", prompt1: "<div style=font-size:30px;><p>Qual face expressa <strong>ALEGRIA</strong> ?</div>", data: {correct_response: '1', vi1: "feminino", vi2: "alegria", vi3: "direita"}},
	];
			
	// create the question screen, with no key choices and a fixed duration (2 seconds in this example)
   var question_block_faces1 = {
      type: 'html-keyboard-response',
      stimulus: jsPsych.timelineVariable('prompt1'),
      choices: jsPsych.NO_KEYS,
      trial_duration: 2000
    };
	
   // create blocktrial_faces
   var blocktrial_faces1 = {
      type: "image-button-response", 
      stimulus: jsPsych.timelineVariable('stimulus'),
      prompt: jsPsych.timelineVariable('prompt'),
      stimulus_height: 630,
		  stimulus_width: 1080,
	    stimulus_duration: 10000,
      choices: ["<div style=font-size:15px;><p><strong>ESQUERDA</strong></div>", "<div style=font-size:15px;><p><strong>DIREITA</strong></div>"],
      margin_horizontal: '250px',
     
  
     data: jsPsych.timelineVariable('data'),
     on_finish: function(data){
     data.correct = data.response == data.correct_response;
     }
  };
	
  // create blocktrial_procedure_faces
  var blocktrial_procedure_faces1 = {
      timeline: [fixation, question_block_faces1, blocktrial_faces1],  // <---- add the question trial to the procedure timeline
      timeline_variables: blockstimuli_faces1, 
      randomize_order: true
  };
  
  // create blockstimuli_faces
	var blockstimuli_faces2 = [
		  {stimulus: 'alegria.jpg', prompt:"<div style='position:absolute;font-size:30px;text-align:right;width:650px;top:2%'><p><strong>ALEGRIA2</strong></div>", prompt1:"<div style=font-size:30px;><p>Qual face expressa <strong>ALEGRIA</strong> ?</div>", data: {correct_response: '1', vi1: "feminino", vi2: "alegria", vi3: "direita"}} 
		 ];
	// create the question screen, with no key choices and a fixed duration (2 seconds in this example)
   var question_block_faces2 = {
      type: 'html-keyboard-response',
      stimulus: jsPsych.timelineVariable('prompt1'),
      choices: jsPsych.NO_KEYS,
      trial_duration: 2000
    };
	
   // create blocktrial_faces
   var blocktrial_faces2 = {
      type: "image-button-response", 
      stimulus: jsPsych.timelineVariable('stimulus'),
      prompt: jsPsych.timelineVariable('prompt'),
      stimulus_height: 630,
		  stimulus_width: 1080,
	    stimulus_duration: 10000,
      choices: ["<div style=font-size:15px;><p><strong>ESQUERDA</strong></div>", "<div style=font-size:15px;><p><strong>DIREITA</strong></div>"],
      margin_horizontal: '250px',
  
     data: jsPsych.timelineVariable('data'),
     on_finish: function(data){
     data.correct = data.response == data.correct_response;
     }
  };
	
  // create blocktrial_procedure_faces
  var blocktrial_procedure_faces2 = {
      timeline: [fixation, question_block_faces2, blocktrial_faces2],  // <---- add the question trial to the procedure timeline
      timeline_variables: blockstimuli_faces2, 
      randomize_order: true
  };

	// create blockstimuli_faces
	var blockstimuli_faces3 = [
      {stimulus: 'alegria.jpg', prompt:"<div style='position:absolute;font-size:30px;text-align:right;width:650px;top:2%'><p><strong>ALEGRIA3</strong></div>", prompt1:"<div style=font-size:30px;><p>Qual face expressa <strong>ALEGRIA</strong> ?</div>", data: {correct_response: '1', vi1: "feminino", vi2: "alegria", vi3: "direita"}},
	];
	// create the question screen, with no key choices and a fixed duration (2 seconds in this example)
   var question_block_faces3 = {
      type: 'html-keyboard-response',
      stimulus: jsPsych.timelineVariable('prompt1'),
      choices: jsPsych.NO_KEYS,
      trial_duration: 2000
    };
	
   // create blocktrial_faces
   var blocktrial_faces3 = {
      type: "image-button-response", 
      stimulus: jsPsych.timelineVariable('stimulus'),
      prompt: jsPsych.timelineVariable('prompt'),
      stimulus_height: 630,
		  stimulus_width: 1080,
	    stimulus_duration: 10000,
      choices: ["<div style=font-size:15px;><p><strong>ESQUERDA</strong></div>", "<div style=font-size:15px;><p><strong>DIREITA</strong></div>"],
      margin_horizontal: '250px',
  
     data: jsPsych.timelineVariable('data'),
     on_finish: function(data){
     data.correct = data.response == data.correct_response;
     }
  };
	
  // create blocktrial_procedure_faces
  var blocktrial_procedure_faces3 = {
      timeline: [fixation, question_block_faces3, blocktrial_faces3],  // <---- add the question trial to the procedure timeline
      timeline_variables: blockstimuli_faces3, 
      randomize_order: true
  };
  
  // create blockstimuli_faces
	var blockstimuli_faces4 = [
		  {stimulus: 'alegria.jpg', prompt:"<div style='position:absolute;font-size:30px;text-align:right;width:650px;top:2%'><p><strong>ALEGRIA4</strong></div>", prompt1: "<div style=font-size:30px;><p>Qual face expressa <strong>ALEGRIA</strong>?</div>", data: {correct_response: '1', vi1: "feminino", vi2: "alegria", vi3: "direita"}},
		 ];
	// create the question screen, with no key choices and a fixed duration (2 seconds in this example)
   var question_block_faces4 = {
      type: 'html-keyboard-response',
      stimulus: jsPsych.timelineVariable('prompt1'),
      choices: jsPsych.NO_KEYS,
      trial_duration: 2000
    };
	
   // create blocktrial_faces
   var blocktrial_faces4 = {
      type: "image-button-response", 
      stimulus: jsPsych.timelineVariable('stimulus'),
      prompt: jsPsych.timelineVariable('prompt'),
      stimulus_height: 630,
		  stimulus_width: 1080,
	    stimulus_duration: 10000,
      choices: ["<div style=font-size:15px;><p><strong>ESQUERDA</strong></div>", "<div style=font-size:15px;><p><strong>DIREITA</strong></div>"],
      margin_horizontal: '250px',
  
     data: jsPsych.timelineVariable('data'),
     on_finish: function(data){
     data.correct = data.response == data.correct_response;
     }
  };
	
  // create blocktrial_procedure_faces
  var blocktrial_procedure_faces4 = {
      timeline: [fixation, question_block_faces4, blocktrial_faces4],  // <---- add the question trial to the procedure timeline
      timeline_variables: blockstimuli_faces4, 
      randomize_order: true
  };
  timeline.push(blocktrial_procedure_faces1, blocktrial_procedure_faces2, blocktrial_procedure_faces3, blocktrial_procedure_faces4);  
 
	jsPsych.init({
    timeline: [ fullscreen, preload, welcome, instructions_experiment11, blocktrial_procedure_faces1, blocktrial_procedure_faces2, blocktrial_procedure_faces3, blocktrial_procedure_faces4, end_experiment, fullscreen_exit ], 

I await a help :)

[becky-gilbert]

FYI @lily2brain, I just edited your post to make your code block easier to read. See #1113 😃

[lily2brain]

Thanks for warning me :)

[becky-gilbert]

Edit: Fixed earlier error with the result of the concat function not being assigned back to the timeline variable, which resulted in the randomized blocks not being added to the timeline.

Hi @lily2brain, one way to do this is to create an array of just the blocks that you want to randomize, randomize that array using jsPsych.randomization.shuffle, and then concatenate the randomized blocks with your timeline array using the JavaScript array concat function. Here's an example:

// create an empty array to store your experiment's timeline
var timeline = [];

// define the trials/procedures that come before your blocks, and add them to the timeline array
timeline.push(fullscreen);
timeline.push(preload);
timeline.push(welcome);
timeline.push(instructions_experiment11);

// after defining your 4 blocks, put these into an array, and then randomize the order
var blocks = [blocktrial_procedure_faces1, blocktrial_procedure_faces2, blocktrial_procedure_faces3, blocktrial_procedure_faces4];
var blocks_rand = jsPsych.randomization.shuffle(blocks);

// add the randomized blocks onto the end of your timeline array
//   (unlike .push, .concat doesn't automatically modify the original array, so the result has to be assigned back
//   to the timeline variable)
timeline = timeline.concat(blocks_rand);

// add the trials/procedures that come after the blocks
timeline.push(end_experiment);
timeline.push(fullscreen_exit);

Does that work for you?

[lily2brain]

Hi @becky-gilbert, the blocks are not yet randomized!

[becky-gilbert]

HI @lily2brain, sorry, I forgot that the concat function doesn't automatically modify the array. So instead of:

timeline.concat(blocks_rand);

it should be:

timeline = timeline.concat(blocks_rand);

I edited my answer above to correct this.

I also created a minimal example that works for me. So you can try running this to make sure that it works for you, and then use it as a reference:

  var timeline = [];

  var start = {
    type: 'html-keyboard-response',
    stimulus: 'Press any key to start.'
  };

  var block1_trial_info = [
    {stim: 'Block 1, trial 1'},
    {stim: 'Block 1, trial 2'}
  ];

  var block2_trial_info = [
    {stim: 'Block 2, trial 1'},
    {stim: 'Block 2, trial 2'}
  ];

  var trial = {
    type: 'html-keyboard-response',
    stimulus: jsPsych.timelineVariable('stim')
  };

  var block1_procedure = {
    timeline: [trial],
    timeline_variables: block1_trial_info
  };

  var block2_procedure = {
    timeline: [trial],
    timeline_variables: block2_trial_info
  };

  var end = {
    type: 'html-keyboard-response',
    stimulus: 'The end!'
  };

  timeline.push(start);

  // randomize the order of the blocks, then add them to the timeline
  var blocks = [block1_procedure, block2_procedure];
  var blocks_rand = jsPsych.randomization.shuffle(blocks);
  timeline = timeline.concat(blocks_rand);

  timeline.push(end);

  // log the timeline to the console, to check the block order without having to run through the whole task
  console.log(timeline);

  jsPsych.init({
    timeline: timeline
  });

I hope this helps!

[lily2brain]

Hi @becky-gilbert , tried with the new changes, but it does not work. I am editing my script completely ready for search through the Cognition.run platform. In jsPsych.init ({ timeline: [... insert timeline ...] , you inserted only timeline, in my case, if you put just that, I don't have the preload of the images, so I do the manual filling, as in this example: jsPsych.init({ timeline: [ fullscreen, preload, welcome, instructions_experiment11, blocktrial_procedure_faces1, blocktrial_procedure_faces2, blocktrial_procedure_faces3, blocktrial_procedure_faces4, end_experiment, fullscreen_exit ], . Would the non-randomization of the blocks be due to the lack of something that called the randomization of blocks in jsPsych.init?

[becky-gilbert]

@lily2brain the reason I just used jsPsych.init({ timeline: timeline }) is because I created a variable called timeline, which is an array containing all of trials and trial procedures that should run during the experiment. This is exactly the same as jsPsych.init({ timeline: [ fullscreen, preload ... etc. ]}), it's just a different way of writing it.

But the reason I did it this way is so that I can use the concat method to combine two arrays together: the main experiment timeline and the randomly-ordered blocks. So please try this:

// create an empty timeline array
var timeline = [];
 
// ... define all of your trial objects and procedures ...

// add everything to the timeline that comes before the blocks
timeline.push(fullscreen);
timeline.push(preload);
timeline.push(welcome);
timeline.push(instructions_experiment11);

// randomize the block order and add them to the timeline
var blocks = [blocktrial_procedure_faces1, blocktrial_procedure_faces2, blocktrial_procedure_faces3, blocktrial_procedure_faces4];
var blocks_rand = jsPsych.randomization.shuffle(blocks);
timeline = timeline.concat(blocks_rand);

// add everything to the timeline that comes after the blocks
timeline.push(end_experiment);

// use the timeline variable as the timeline array in jsPsych.init
jsPsych.init({
  timeline: timeline
});

[lily2brain]

@becky-gilbert I tested your last post now and it worked really well, thank you for all your help! :)