adding 2 timeline variables to one timeline?

[nrschoen]

Hello,

I am building a priming experiment so first trial: random prime (running_men); second trial: simon trial (stimuli). If I put them in a single timeline variable they will always be paired together as defined in the variable. However, I would like them to be randomly paired each trial. How could I implement this?

/* simon stimuli */
var stimuli = [
  { stimulus: '<img class="simon_right" src="img/blue.png">',
  data: {congruent: false, correct_response: 'leftarrow'}},
  { stimulus: '<img class="simon_left" src="img/blue.png">',
  data: {congruent: true, correct_response: 'leftarrow'}},
  { stimulus: '<img class="simon_right" src="img/orange.png">',
  data: {congruent: true, correct_response: 'rightarrow'}},
  { stimulus: '<img class="simon_left" src="img/orange.png">',
  data: {congruent: false, correct_response: 'rightarrow'}}
  ];


/* stick man animations */
var running_men = [
  { animation: 'fast_left.gif',
  data: {run_direction: 'left', run_speed: 'fast'}},
  { animation: 'fast_right.gif',
  data: {run_direction: 'right', run_speed: 'fast'}},
  { animation: 'slow_left.gif',
  data: {run_direction: 'left', run_speed: 'slow'}},
  { animation: 'slow_right.gif',
  data: {run_direction: 'right', run_speed: 'slow'}},
  { animation: 'standing_man.jpg',
  data: {run_direction: 'none', run_speed: 'standing'}},
  { animation: 'standing_man2.jpg',
  data: {run_direction: 'none', run_speed: 'standing'}}
  ];

var fixation = {
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: jsPsych.NO_KEYS,
  trial_duration: 500,
  data: {test_part: 'fixation'}
};

var run_display = {
  type: "image-keyboard-response",
  stimulus: jsPsych.timelineVariable('animation'),
  choices: jsPsych.NO_KEYS,
  render_on_canvas: false,
  trial_duration: 1000,
  stimulus_height: 100,
  stimulus_width: 100,
  data: {test_part: "prime"}
};

var simon_trial = {
  type: "html-keyboard-response",
  stimulus: jsPsych.timelineVariable('stimulus'),
  choices: ['leftarrow', 'rightarrow'],
  data: jsPsych.timelineVariable('data'),
};


var procedure = {
  timeline: [fixation, run_display, simon_trial],
  timeline_variables: running_men, // here is where I would like to add the second timeline variable (stimuli)
  randomize_order: true,
  repetitions: 4
};

[pjkohler]

perhaps use https://www.jspsych.org/core_library/jspsych-randomization/ like so:

var factors = {
        stimuli: stimuli,
        running_men: running_men
}

var full_design = jsPsych.randomization.factorial(factors)

and then use full_design as input to timeline_variables.

Not sure that the content of the arrays running_men and stimuli would work as direct input to "html-keyboard-response" and "image-keyboard-response" though.

[becky-gilbert]

Quick note about @pjkohler's answer: I think this works in jsPsych v6.3.0, but in earlier versions you need the second true argument in jsPsych.timelineVariable when it's used inside of a function, i.e.

// for jsPsych versions before 6.3.0
var cur_struct = jsPsych.timelineVariable('stimuli',true);

[nrschoen]

This works thank you!

[pjkohler]

Happy to help! Thanks for the assist, @becky-gilbert.

[nrschoen]

Ok this is not that important but still confusing to me: Putting the function you suggested on_load and then only referencing the variable at stimulus for some reason causes the following error (see image at the bottom).

var run_display = {
  type: "image-keyboard-response",
  on_load: function() {
    current_stim = jsPsych.timelineVariable('running_men');
  },
  stimulus: current_stim['animation'],
  choices: jsPsych.NO_KEYS,
  render_on_canvas: false,
  trial_duration: 1000,
  stimulus_height: 100,
  stimulus_width: 100,
  data: current_stim['data'],
  on_finish: function(data) {
    data.test_part = "run_display";
  }
};

[becky-gilbert]

Hi @nrschoen! The problem here is that your stimulus parameter is a 'normal' parameter rather than a dynamic parameter, which means its value is set when the page first loads. This means that jsPsych will use the initial value of current_stim['animation'], which I'm guessing is undefined. You can test this by adding console.log(current_stim['animation']) somewhere in your main script (not inside a function).

If current_stim changes during the experiment and you want the trial stimulus to be the current value of this variable, then it needs to be a dynamic parameter, i.e. a function that returns current_stim['animation']. It might help to read the jsPsych documentation page about dynamic parameters.

Another thing I noticed is that you're setting the value of current_stim in the trial's on_load function. This probably isn't what you want, because the on_load function runs after the trial has already started, so by that time the trial's stimulus has already been defined. You could change the on_load function to be the on_start function, so that the value of current_stim is changed before the trial starts. But since you need to change the stimulus parameter into a function anyway, and that function will also run right before the trial starts, then it probably makes more sense to move the code from the on_load function into the stimulus function:

stimulus: function() {
    // set the current_stim variable to be the current value of running_men from your timeline variables array
    current_stim = jsPsych.timelineVariable('running_men');
    // return the value of animation as the stimulus for this trial
    return current_stim['animation'];
}

I hope this helps clarify things. Let us know if you have more questions.