using multiple timeline_variables?

[joshkenney]

Hi,

We are trying to code an experiment where it would helpful to use two timeline variables and iterate through the two of them as pairs.

Ideally, something like this:
let procedurePhase3= {
timeline:[decisionPhase],
timeline_variables: [timeline1, timeline2]
choices: [49, 57],
};

We are wondering how to access these timelines alternately when they are called where [0] and [1] indicate timeline1 and timeline2 respectively:

let decisionPhase = {
type: "html-keyboard-response",
stimulus: function(){
var html="<img src='"+jsPsych.timelineVariable('stimulus', true)[0]+"'>" +
"<img src='"+jsPsych.timelineVariable('stimulus2', true)[1]+"'>";
return html;
},
}

Alternately, we could also combine the timeline variable as an set of paired arrays:

timelineVariable.push(
[stimArrayForObjectsForDecision[0], stimArrayForObjectsForDecision[3]],
'...'

We get errors when running either way.

If anyone has any solution that would be greatly appreciated!

[becky-gilbert]

Hi @joshkenney! I don't the there's a way to incorporate two timeline variables arrays into the same procedure - jsPsych expects the timeline variables parameter to be an array of objects, rather than a nested array. So if you've created two separate arrays and want to use stimuli from both arrays on each trial, then what I would do is combine the two arrays into one, and then use that combined array as your timeline_variables parameter value.

Assuming that you have two separate stimuli arrays and you want to combine them based on their index (i.e. first object in timeline1 and timeline2 correspond to the same trial), then you could create an array that contains one object per trial, like this:

var timeline1 = [{stimulus: 'jspsych-6.3.0/examples/img/happy_face_1.jpg'}, {stimulus: 'jspsych-6.3.0/examples/img/happy_face_2.jpg'}];
var timeline2 = [{stimulus2: 'jspsych-6.3.0/examples/img/happy_face_3.jpg'}, {stimulus2: 'jspsych-6.3.0/examples/img/happy_face_4.jpg'}];

// create a new array to hold the combined trial info objects
var timeline_vars = [];

// for each element in timeline1, take the stimulus from this object,
// and the stimulus2 from the object with the same index in the timeline2 array,
// then combine these into the same object, and add that object on to the timeline_vars array
timeline1.forEach(function(el, ind) {
  timeline_vars.push({stimulus: el.stimulus, stimulus2: timeline2[ind].stimulus2});
})

 let decisionPhase = {
  type: "html-keyboard-response",
  stimulus: function(){
    // now each object in timeline_vars contains both stimulus and stimulus2, so you don't need the [0] and [1] here
    var html="<img src='"+jsPsych.timelineVariable('stimulus', true)+"'>" +
        "<img src='"+jsPsych.timelineVariable('stimulus2', true)+"'>";
    return html;
  },
  choices: ['1','9']  // note that as of jsPsych v6.3.0, the key choices must be characters rather than numbers
}

let procedurePhase3 = {
  timeline:[decisionPhase],
  timeline_variables: timeline_vars
};

And as for the second solution you proposed, I think the reason this doesn't work is because you'll end up with a nested array (since each element that you're adding into timelineVariable is an array). So you could try flattening this array with the array.flat() method. Or you could try pushing the same information as objects rather than arrays onto the timelineVariable array (which is the same as what I've done above with the array.forEach function):

timelineVariable.push(
  {stimulus: stimArrayForObjectsForDecision[0], stimulus2: stimArrayForObjectsForDecision[3]},
  ... etc.
);

Do any of these solutions work for you?