Assigning Participant condition

[kassyec]

Hi there, I am designing an experiment that will need subjects randomly assigned to one of four conditions. So far, I have

var condition_assignment = jsPsych.randomization.sampleWithoutReplacement(['LIST1', 'LIST2', 'LIST3', 'LIST4'], 1)[0];
jsPsych.data.addProperties({
condition: condition_assignment
});

How do I make only the materials specific for the condition play for the participant?
Do I need to use conditional variables, or would it be easier to just make 4 separate experiments?

Sorry if this is a bad question! This is my first time coding!

[becky-gilbert]

Hi @kassyec! First of all, there are no bad questions. Lots of researchers are new coding, and especially to web programming.

Assuming you have some different stimulus lists that correspond to each of these conditions, then what I would do is create some if/else statements that check the value of condition_assignment, and use that to create an array of trial information. Then, you would use that trial information array to run your experiment. Here's a little example using timeline variables:

  // randomly assign a condition
  var condition_assignment = jsPsych.randomization.sampleWithoutReplacement(['LIST1', 'LIST2'], 1)[0];
  jsPsych.data.addProperties({
    condition: condition_assignment
  });

  // trial information for each condition
  var list_1 = [{stimulus: 'List 1, trial 1'}, {stimulus: 'List 1, trial 2'}];
  var list_2 = [{stimulus: 'List 2, trial 1'}, {stimulus: 'List 2, trial 2'}];

  // create a variable to hold the trial information, which changes based on the condition
  var stimuli;
  if (condition_assignment == "LIST1") {
    stimuli = list_1;
  } else if (condition_assignment == "LIST2") {
    stimuli = list_2;
  }

  // define the trial 
  // here the value of the stimulus will come from the timeline variables (stimuli) array, 
  // so it will change according to the condition that was assigned
  var trial = {
    type: 'html-keyboard-response',
    stimulus: jsPsych.timelineVariable('stimulus')
  };

  // use the stimuli array as your timeline variables array
  // this will repeat the trial for each object in your stimuli array, and use the appropriate stimulus value
  var trial_procedure = {
    timeline: [trial],
    timeline_variables: stimuli
  }
 
  jsPsych.init({
    timeline: [trial_procedure],
    on_finish: function(){jsPsych.data.displayData();}
  });

Of course, your solution might look quite a bit different, for instance if you're not using timeline variables. I hope this helps! Feel free to follow up here if you're not sure how to make this idea work for your experiment.

[becky-gilbert]

Edit: fixed an error in defining the all_stimuli variable - should have been initialized as an empty array rather than left undefined.

---

Hi @kassyec, sorry for the delay getting back to you - I hope this is still helpful.

What you can do is just have a single if/else statement that checks the condition that was assigned, and use that to create all of the stimuli arrays that you need.

I can't tell for sure from your code, but it looks like the trials for each block (block1,block2,block3,block4) are all the same, and that you want the 4 blocks to run one after another? If that's the case, then you can just have one trial that's used for all the blocks, and you can append the stimuli information from each block into one big array.

Because each of your stimuli lists (list1_block1, etc.) is an array, if you combine these into a stimuli array then you'll end up with a nested array (i.e. an array containing 4 arrays, one for each block), and this won't work for timeline variables. So after creating the combined array with all of the block stimuli, you need to use the JavaScript flat function to flatten the this stimuli array. This will give you an array that has 8 objects - one for each of the trials across all 4 blocks, e.g. the stimulus array for LIST1 will look like this:

[
  {stimulus: 'sound/ListA/arabic18A.wav'}, 
  {stimulus: 'sound/ListB/arabic18B.wav'},
  {stimulus: 'sound/ListB/arabic18B.wav'}, 
  {stimulus: 'sound/ListA/arabic18A.wav'},
  {stimulus: 'sound/ListA/arabic18A.wav'}, 
  {stimulus: 'sound/ListB/arabic18B.wav'},
  {stimulus: 'sound/ListA/arabic18A.wav'}, 
  {stimulus: 'sound/ListB/arabic18B.wav'}
]

And this flattened array is what you need to use for timeline variables. Here's the code you can use to do all of this:

// create a variable to hold the stimuli list for all 4 blocks
var all_stimuli = [];

// check the condition that was assigned, and use that to create the array that contains the stimuli for all 4 blocks
if (condition_assignment == "LIST1") {
    all_stimuli.push(list_1_block1, list_1_block2, list_1_block3, list_1_block4);
} else if (condition_assignment == "LIST2") {
    all_stimuli.push(list_2_block1, list_2_block2, list_2_block3, list_2_block4);
} else if (condition_assignment == "LIST3") {
    all_stimuli.push(list_3_block1, list_3_block2, list_3_block3, list_3_block4);
} else if (condition_assignemnt == "LIST4") {
    all_stimuli.push(list_4_block1, list_4_block2, list_4_block3, list_4_block4);
}

// flatten the all_stimuli array
all_stimuli = all_stimuli.flat();

// create the trial
var block_trial = {
    type: 'audio-keyboard-response',
    prompt: "<div>this is a speaker</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
};

// repeat the trial for each of the 8 objects in your all_stimuli array
var procedure = {
    timeline: [block_trial],
    timeline_variables: all_stimuli
}

Does this solution work for you?

[kassyec]

Hi! Thank you for your response. I feel like I have hit a roadblock honestly, so any help is greatly appreciated.

The blocks I have are actually going to be using different prompts each time. I just haven't added all of the details because I was trying to work on the bones of the code. It's the same for the stimuli, before I add the 32 stimuli to each list I want to be sure it will work.

Here is my code now:

// randomly assign a condition
  var condition_assignment = jsPsych.randomization.sampleWithoutReplacement(['LIST1', 'LIST2', 'LIST3', 'LIST4'], 1)[0];
  jsPsych.data.addProperties({
    condition: condition_assignment
  });
  
var all_stimuli = []; 
// block 1 stimuli 
  var list_1_block1 = [{stimulus: 'sound/ListA/arabic18A.wav'}, {stimulus: 'sound/ListB/arabic18B.wav'}];
  var list_2_block1 = [{stimulus: 'sound/ListB/arabic18B.wav'}, {stimulus: 'sound/ListA/arabic18A.wav'}];
  var list_3_block1 = [{stimulus: 'sound/ListB/arabic34B.wav'}, {stimulus: 'sound/ListA/arabic34A.wav'}];
  var list_4_block1 = [{stimulus: 'sound/ListB/farsi12B.wav'}, {stimulus: 'sound/ListA/farsi12A.wav'}];
//block 2 stimuli 
  var list_1_block2 = [{stimulus: 'sound/ListA/arabic18A.wav'}, {stimulus: 'sound/ListB/arabic18B.wav'}];
  var list_2_block2 = [{stimulus: 'sound/ListB/arabic18B.wav'}, {stimulus: 'sound/ListA/arabic18A.wav'}];
  var list_3_block2 = [{stimulus: 'sound/ListB/arabic34B.wav'}, {stimulus: 'sound/ListA/arabic34A.wav'}];
  var list_4_block2 = [{stimulus: 'sound/ListB/farsi12B.wav'}, {stimulus: 'sound/ListA/farsi12A.wav'}];
//block 3 stimuli 
  var list_1_block3 = [{stimulus: 'sound/ListA/arabic18A.wav'}, {stimulus: 'sound/ListB/arabic18B.wav'}];
  var list_2_block3 = [{stimulus: 'sound/ListB/arabic18B.wav'}, {stimulus: 'sound/ListA/arabic18A.wav'}];
  var list_3_block3 = [{stimulus: 'sound/ListB/arabic34B.wav'}, {stimulus: 'sound/ListA/arabic34A.wav'}];
  var list_4_block3 = [{stimulus: 'sound/ListB/farsi12B.wav'}, {stimulus: 'sound/ListA/farsi12A.wav'}];
//block 4 stimuli 
  var list_1_block4 = [{stimulus: 'sound/ListA/arabic18A.wav'}, {stimulus: 'sound/ListB/arabic18B.wav'}];
  var list_2_block4 = [{stimulus: 'sound/ListB/arabic18B.wav'}, {stimulus: 'sound/ListA/arabic18A.wav'}];
  var list_3_block4 = [{stimulus: 'sound/ListB/arabic34B.wav'}, {stimulus: 'sound/ListA/arabic34A.wav'}];
  var list_4_block4 = [{stimulus: 'sound/ListB/farsi12B.wav'}, {stimulus: 'sound/ListA/farsi12A.wav'}];

  // check the condition that was assigned, and use that to create the array that contains the stimuli for all 4 blocks
if (condition_assignment == "LIST1") {
    all_stimuli.push(list_1_block1, list_1_block2, list_1_block3, list_1_block4);
} else if (condition_assignment == "LIST2") {
    all_stimuli.push(list_2_block1, list_2_block2, list_2_block3, list_2_block4);
} else if (condition_assignment == "LIST3") {
    all_stimuli.push(list_3_block1, list_3_block2, list_3_block3, list_3_block4);
} else if (condition_assignemnt == "LIST4") {
    all_stimuli.push(list_4_block1, list_4_block2, list_4_block3, list_4_block4);
}

// flatten the all_stimuli array
all_stimuli = all_stimuli.flat();

  var native_speaker = {
  type: 'html-button-response',
  stimulus: '<p>Are you a native speaker of English?</p>',
  choices: ['Yes', 'No']
  }
  
  // define the trial 
  // here the value of the stimulus will come from the timeline variables (stimuli) array, 
  // so it will change according to the condition that was assigned
  
  var block1 = {
    type: 'audio-keyboard-response',
    prompt: "<div>please rate the following speaker</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  var block2 = {
    type: 'audio-keyboard-response',
    prompt: "<div>this speaker is an immigrant</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  var block3 = {
    type: 'audio-keyboard-response',
    prompt: "<div>this is a Canadian speaker</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  var block4 = {
    type: 'audio-keyboard-response',
    prompt: "<div>this speaker is a new Canadian</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };


  // use the stimuli array as your timeline variables array
  // this will repeat the trial for each object in your stimuli array, and use the appropriate stimulus value
  var procedure = {
    timeline: [block1, block2, block3, block4],
    timeline_variables: all_stimuli
  }
 
  jsPsych.init({
    timeline: [native_speaker, procedure],
    on_finish: function(){jsPsych.data.displayData();}
  });

This is still not doing what I want it to be doing! I can't seem to get the code to run.

Here are a few questions:
The timeline variable is "all_stiuli", but then within the blocks we only put it as "stimulus". Is this correct?

Also, I do not think I listed the arrays correctly. I am getting an error Cannot read property 'push' of undefined here: if (condition_assignment == "LIST1") {
all_stimuli.push(list_1_block1, list_1_block2, list_1_block3, list_1_block4);`

So is my array still not working? I figure that I need to have 16 arrays since there are 4 lists which each have 4 blocks, I have a feeling I did not create my all stimuli variable correctly since the arrays are not being defined. Am i not listing the stimuli properly in the all_stimuli variable?

I would love to have a consultation from you or someone who could help me get this running within the next week or two. Could I email you and figure out how to go about getting some help?

[becky-gilbert]

Hi @kassyec, ah ok, I didn't realize that the trials were different across the different blocks. I'm guessing you want all of the block 1 trials to run first, then all of the block 2 trials, etc. (rather than alternating 1-2-3-4-1-2-3-4 etc.). If that's the case, then instead of creating an all_stimuli array for your timeline variables, you can create 4 different timeline variables arrays - one for each block - and then create separate trials and trial procedures for each block. (For the record - there are other ways you could set this up, but I'm just going to suggest this one method).

  // initialize 4 variables - one to hold the stimuli for each block
  var block1_stimuli, block2_stimuli, block3_stimuli, block4_stimuli;

  // check the condition that was assigned, and use that to decide what stimuli should be used in each block
  if (condition_assignment == "LIST1") {
    block1_stimuli = list_1_block1;
    block2_stimuli = list_1_block2;
    block3_stimuli = list_1_block3;
    block4_stimuli = list_1_block4;
  } else if (condition_assignment == "LIST2") {
    block1_stimuli = list_2_block1;
    block2_stimuli = list_2_block2;
    block3_stimuli = list_2_block3;
    block4_stimuli = list_2_block4;
  } else if (condition_assignment == "LIST3") {
    block1_stimuli = list_3_block1;
    block2_stimuli = list_3_block2;
    block3_stimuli = list_3_block3;
    block4_stimuli = list_3_block4;
  } else if (condition_assignemnt == "LIST4") {
    block1_stimuli = list_4_block1;
    block2_stimuli = list_4_block2;
    block3_stimuli = list_4_block3;
    block4_stimuli = list_4_block4;
  }

  var native_speaker = {
    type: 'html-button-response',
    stimulus: '<p>Are you a native speaker of English?</p>',
    choices: ['Yes', 'No']
  }
  
  // define the trials for the 4 blocks
  // here the value of the stimulus will come from the timeline variables array, 
  // so it will change according to the condition that was assigned
  var block1 = {
    type: 'audio-keyboard-response',
    prompt: "<div>please rate the following speaker</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  var block2 = {
    type: 'audio-keyboard-response',
    prompt: "<div>this speaker is an immigrant</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  var block3 = {
    type: 'audio-keyboard-response',
    prompt: "<div>this is a Canadian speaker</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  var block4 = {
    type: 'audio-keyboard-response',
    prompt: "<div>this speaker is a new Canadian</div>",
    stimulus: jsPsych.timelineVariable('stimulus'),
    response_ends_trial: true,
  };

  // create the procedure for each block
  // these will repeat the block trial for each object in the timeline variables array
  var block1_procedure = {
    timeline: [block1],
    timeline_variables: block1_stimuli
  }

  var block2_procedure = {
    timeline: [block2],
    timeline_variables: block2_stimuli
  }

  var block3_procedure = {
    timeline: [block3],
    timeline_variables: block3_stimuli
  }

  var block4_procedure = {
    timeline: [block4],
    timeline_variables: block4_stimuli
  }
 
  jsPsych.init({
    timeline: [native_speaker, block1_procedure, block2_procedure, block3_procedure, block4_procedure],
    on_finish: function(){jsPsych.data.displayData();}
  });

The timeline variable is "all_stiuli", but then within the blocks we only put it as "stimulus". Is this correct?

Yes this is correct. The timeline variable should be an array that contains one or more objects, where each object contains any information needed for one trial (e.g. block1_stimuli). And when you define a trial (e.g. block1), if you want any of the parameters to come from the timeline variables array, then you need to use jsPsych.timelineVariable along with the variable name that's used inside the trial object. So in your case, you want the trial's stimulus parameter to come from the variable called stimulus that's given in each of the objects in your timeline variables array. If this is confusing then have a read through jsPsych's timeline variables documentation page.

Also, I do not think I listed the arrays correctly. I am getting an error Cannot read property 'push' of undefined here:
if (condition_assignment == "LIST1") {
all_stimuli.push(list_1_block1, list_1_block2, list_1_block3, list_1_block4);

This was my fault - sorry!! I should have initialized the all_stimuli variable to be an array before trying to push anything onto it, like this: var all_stimuli = [];. I'll fix this error in my comment above to make sure no one else gets confused. And you shouldn't get this same error using the code above, because now we're setting the block stimuli variables to be equal to an array, rather than trying to add elements onto them with the .push function.

[inesmar7]

Hi there!
Is it possible to define the lists automatically by some kind of function? For my stimuli, I have a js-file which includes all stimuli for all lists, so it looks something like this (there are 8 lists in total):
{ list: "1", set: "coffee", condition: "C", img: "coffee_s1.jpg" }, { list: "2", set: "coffee", condition: "A", img: "coffee_s2.jpg" },
I would like to write a code that states something like "if list ==1, add this stimulus to stimuli_list_1" etc. instead of creating manually 8 different files from my complete file.
I'm sorry if this is a stupid question, but I'm quite new to coding.
Thanks a lot in advance for any help!

[jodeleeuw]

Hi @inesmar7,

Would you mind posting this as a new question so that it is easier for others to find in the future?

Thanks!