Nested timeline unable to find audio files

[Swatermx]

Hiya!

I'm not that used to jsPsych and am running into a problem with nesting a timeline so a bunch of audio files will run. Essentially, for a trial I have three parts: the participant sees a button, presses it, it plays a sound then they have to write what they heard. I've divided this into button-html, audio-button and survey-text plugins. This ran fine with set audio files. But I need 16 audio files to play, 8 of them repeated. I have used a function to define the audio files and what needs repeating, but I think I'm nesting the timeline wrong? I currently get an error saying audio files couldn't be loaded, I'm guessing because I've mixed things up. I was wondering if anyone was able to see where I've gone wrong? Below see the code (didn't know how to properly input it nicely, as new to github, sorry!)

function make_pretest_stimulus(sound) {
  var sound_file = "pretest_sounds/" + sound + ".wav";
  var stim = { stimulus: sound_file};
return stim;
}
/*
  Now we can use this function to make a list of the sounds. The object of the function
  is the audio file. I've separated them into decoy and test since the decoy trials are repeated twice
  whereas the test trials are not. Here there are the decoy trials.
  */
  var decoy_stim_list_unshuffled = [
    make_pretest_stimulus(
      'bra'
      ),
    make_pretest_stimulus(
      'car'
      ),
    make_pretest_stimulus(
      'far'
      ),
    make_pretest_stimulus(
      'jar'
      ),
    make_pretest_stimulus(
      'scar'
      ),
    make_pretest_stimulus(
      'spa'
      ),
    make_pretest_stimulus(
      'star'
      ),
    make_pretest_stimulus(
      'tar'
      ),
    ];
  /*
  For the test stimulus below, again the object of the function is the audio file. 
  */
  var test_stim_list_unshuffled = [
    make_pretest_stimulus(
      'b-par_10_VOT'
    ),
    make_pretest_stimulus(
      'b-par_20_VOT'
    ),
    make_pretest_stimulus(
      'b-par_30_VOT'
    ),
    make_pretest_stimulus(
      'b-par_40_VOT'
    ),
    make_pretest_stimulus(
      'b-par_50_VOT'
    ),
    make_pretest_stimulus(
      'b-par_60_VOT'
    ),
    make_pretest_stimulus(
      'b-par_70_VOT'
    ),
    make_pretest_stimulus(
      'b-par_80_VOT'
    ),
  ];
  
  /*
  We need the decoy sounds to be repeated multiple times, to infer they are as important as 
  the test trials. This function can repeat trials, in this instance we repeat the decoy sound
  trials twice.
  */
  var decoy_stim_list_unshuffled_repeated = jsPsych.randomization.repeat([decoy_stim_list_unshuffled], 2);
  
  /*
  We then put together the test and decoy sounds into a list (using concat) and
  shuffle them so they are randomly picked in the trial.
  */
  var pretest_trial_sound_unshuffled = [].concat(
    decoy_stim_list_unshuffled_repeated, test_stim_list_unshuffled
    );
  var pretest_stimulus = jsPsych.randomization.shuffle(pretest_trial_sound_unshuffled); 

/* Now we can plug in the stimulus into the trial as a nested timeline with the audio selection
randomised.

The html-button plugin is used so the sound doesn't automatically play, instead the 
participant must press the button. This moves the trial onto the audio-button response
in which the button plays. I have added the trial_ends_after_audio parameter so that the
trial automatically takes the participant to the survey where the participant must
give a response.
*/
//Button to start trial
var pre_button = {
 type: 'html-button-response',
  stimulus: '',
  choices: ["audio_symbol.png"],
  prompt: "<p>Press to play</p>",
  button_html:'<button class="jspsych-btn"><img src="images/%choice%" width=100px></button>',
};
//plays CV syllable
var audio_button = {
  type: 'audio-button-response',
  choices: ['audio_symbol.png'],
  prompt: "<p>Press to play</p>",
  timeline: pretest_stimulus,
  trial_ends_after_audio: true,
  button_html:
    '<button class="jspsych-btn"><img src="images/%choice%" width=100px></button>',
};
var audio_choice = {
type:'survey-text',
questions: [
    {prompt: 'What did you hear?', name: 'pretest_heard', required: true}
  ],
};
var pretest_trial = { 
  timeline: [
    pre_button, 
    audio_button, 
    audio_choice
    ],
  };

[becky-gilbert]

Hi @Swatermx, one problem might be that in this line:

var decoy_stim_list_unshuffled_repeated = jsPsych.randomization.repeat([decoy_stim_list_unshuffled], 2);

decoy_stim_list_unshuffled is inside of square brackets, but it's already an array. So the randomization function is repeating an array with just one element (the decoy stim list) and returning an array with two of those stim arrays. I'm guessing that's not what you want, and instead you need an un-nested array with two repetitions of each element in the decoy stim array? If so then you can just remove the square brackets.

BTW when debugging these sorts of problems, you might find it helpful to inspect the values of your variables. One way to do this is to print the variable's value to the browser's JavaScript console using console.log.

var decoy_stim_list_unshuffled_repeated = jsPsych.randomization.repeat(decoy_stim_list_unshuffled, 2);
console.log(decoy_stim_list_unshuffled_repeated);

I hope this helps!

[Swatermx]

Thanks @becky-gilbert! That worked! Now it just plays all the audio files at once haha. But that's been very helpful

[becky-gilbert]

Glad that helped!
I think the reason why all the audio files are playing one after another is because you're using a nested timeline in the audio trial - that will repeat that one trial for every object in the nested timeline. If you want to repeat a set of one or more trials, then you need to use timeline variables instead. Let us know if you need any help setting that up.

[Swatermx]

Thanks for the tip, yeah I think I overcomplicated, it worked with timeline variables instead!