Only the last trial plays in randomly selected timeline (jsPsych 6.3.1)

[ggc1998]

Hi all,

Glad to finally be making a post in this board :-) So right now I'm trying to program an experiment that will have 3 conditions. As of right now, in the dummy/tester code I've made, I've set up one timeline per condition, made a function to randomly sample one condition, and then an if/else function to make it so whichever condition got sampled gets its timeline played.

As of right now the random sampling thing works fine. However, for some reason only the final trial (i.e. last part of the timeline) for the condition plays when you run the experiment. For reference, all the trial screens are just HTML response button trials, and when I click the button to advance, it does take me to the completion screen I set up and the data saves properly to the server afterwards.

Any idea why this might be happening? And is this problem possible to fix in my version of jsPsych? I know it's quite old, but it's the only one I know how to work with (and I use the phrase "know how to work with" loosely, I've only coded one other experiment before and that was a few weeks ago LOL) so I'd rather not start using a new version... Thanks so much in advance! Timeline code is below.

var timeline = [];

//1=C, 2=eT, 3=iT
var version = jsPsych.randomization.sampleWithoutReplacement([1,2,3],1)[0];
console.log('version: ', version);

var timeline_condition_control = [];
timeline_condition_control = timeline.concat(con_screen1);
timeline_condition_control = timeline.concat(con_screen2);
timeline_condition_control = timeline.concat(con_screen3);

var timeline_condition_eT = [];
timeline_condition_eT = timeline.concat(eT_screen1);
timeline_condition_eT = timeline.concat(eT_screen2);
timeline_condition_eT = timeline.concat(eT_screen3);

var timeline_condition_iT = [];
timeline_condition_iT = timeline.concat(iT_screen1);
timeline_condition_iT = timeline.concat(iT_screen2);
timeline_condition_iT = timeline.concat(iT_screen3);

var timeline_info;
if (version == 1) {
	timeline_info = timeline_condition_control;
} else if (version == 2) {
	timeline_info = timeline_condition_eT;
} else {
	timeline_info = timeline_condition_iT;
}

var flattenedTimeline = timeline_info.flat();

timeline = flattenedTimeline;
console.log('timeline: ', timeline.length);

===========================================

Also, if it helps, this is an example of what the console log says when I run it in Chrome:

version: 2
timeline: [{…}]
0: {type: 'html-button-response', stimulus: '

This is the 3rd screen of the eTraining Condition. Click A to end the test.

', choices: Array(1), data: {…}}
length: 1
[[Prototype]]: Array(0)

[becky-gilbert]

I think this is happening because each of your timeline.concat lines is merging the empty timeline array with con_screen1, con_screen2 etc. (not sure if these are arrays or objects?) and assigning the result to the same variable (e.g. timeline_condition_control). So the concat lines aren't combining all of these things into one array - instead each line is combining an empty array with something else, and then overwriting the same variable with that result.

If you're trying to add objects (trials or trial procedures) onto the end of these different timeline arrays, then you can try creating an empty array and using .push to add trials onto the end of it:

var timeline_condition_control = [];
timeline_condition_control.push(con_screen1);
timeline_condition_control.push(con_screen2);
timeline_condition_control.push(con_screen3);
console.log(timeline_condition_control) // should be an array with 3 objects

Or if you want to combine arrays of objects into one big array and then flatten it later, then you can try merging each new array into the larger array that you've previously modified, and overwrite it each time. The critical difference is that the code below is combining each new array with timeline_condition_control (which is being modified with each line) rather than with timeline (which is always empty at this point in the code).

var timeline_condition_control = [];
timeline_condition_control = timeline_condition_control.concat(con_screen1);
timeline_condition_control = timeline_condition_control.concat(con_screen2);
timeline_condition_control = timeline_condition_control.concat(con_screen3);

Does that help?

[ggc1998]

Hi Dr Gilbert,

It worked!! Yes all the trials were just objects, so the "push" thing was the solution. :-) Thank you so much!

Just so I know for when I code the actual experiment (sorry, I can't just do it myself and check right now because my stimulus files aren't ready): it's going to have trials that are just objects (e.g. the consent form and background questionnaire) and trials that are arrays (e.g. training and main trials). Is it possible to do both "push" and "concat" lines in a timeline, depending on the trial type? Like, as a small example timeline for one of the conditions:

var timeline_condition_control = [];
timeline_condition_control.push(consent); //this is an object
timeline_condition_control.push(bgq); //this is an object
timeline_condition_control = timeline_condition_control.concat(maintrials); //this is an array
timeline_condition_control.push(debrief); //this is an object

Thank you!
-Gianna

[becky-gilbert]

Hi Gianna, sorry for the delay. Yes I think you can use concat in that way. This line:

timeline_condition_control = timeline_condition_control.concat(maintrials); 

Should merge the timeline_condition_control and maintrials arrays into one long array, and save the result as timeline_condition_control.
If for some reason it doesn't work, then I suggest using console.logs to print the value of timeline_condition_control to the browser's JavaScript console after each step.
I hope that helps. Let us know if you need any further guidance.