Unable to Reference Dynamic Stimulus List: Failure to Concatenate Timelines

[linda-jasmine-hoffman]

Good evening jsPsych experts,

I am new to coding in jsPsych, and with the help of my colleagues have undertaken somewhat of a lofty experimental coding pursuit. We have been trying to develop a script that will take subjects' responses to a series of multi-select trials to subset a larger stimulus array of possible experimental trials. In effect, we want this to trim what subjects are asked to do in the actual experiment pursuant to which trials subjects endorse having background knowledge of.

To do this, we attempt to create a second timeline where we select the shuffled subsetted list of trials to show to participants, and concatenate this timeline to the original. We got this idea form a similar jsPsych discussion poster, which can be referenced here. However, our attempts at this do not work, even though the rest of the code is correct for all intents and purposes. We are looking for advice on how to solve this problem. Our thinking is that we may be trying to concatenate the timelines in the wrong place.

Here is an abridged version of the code we have been using for development purposes:

// | - - - - - - - - - - - - - - - - - - - - - - - - - - |
// | - - - - - - - - - - Variables - - - - - - - - - - - |
// | - - - - - - - - - - - - - - - - - - - - - - - - - - |   

// Select Trials Based on Pre-Screener Prior Knowledge

// Define all global variables here
let stim_list = [];
let shuffledTrials = [];


var trialSelectionNurseryRhymes = {
  type: jsPsychSurveyMultiSelect,
  questions: [
    {
      prompt: style_instr + "Select 4 known <b>nursery rhymes</b> ", 
      options: ["I'm a Little Teapot", "Itsy Bitsy Spider", "Humpty Dumpty", "Little Miss Muffet", "Jack and Jill", "Hickory Dickory Dock", "Baa Baa Black Sheep", "Little Bo Peep"], 
      horizontal: true,
      required: true,
      name: 'Rhymes'}
      ],
        on_load: function(trial) {
        // Additional validation to ensure max 4 selections
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        const continueButton = document.querySelector('#jspsych-survey-multi-select-next');
            
        continueButton.disabled = true;  // Initially disable the button
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const checked = document.querySelectorAll('input[type="checkbox"]:checked');
                
                if (checked.length > 4) {
                    this.checked = false;
                }
                
                // Disable unchecked boxes if 4 are already selected
                checkboxes.forEach(box => {
                    if (!box.checked) {
                        box.disabled = checked.length >= 4;
                    }
                // Enable the continue button only if exactly 4 are selected
                continueButton.disabled = checked.length !== 4;
                    
                });
            });
        });
    },
      on_finish: function (data) {
          //I'm a Little Teapot
        if (data.response.Rhymes.includes("I'm a Little Teapot")) {
        little_teapot_stim = trials.filter((x) => {return x.descr.includes("I'm a Little Teapot")});
        stim_list = stim_list.concat(little_teapot_stim);
        } 
                        
        // Itsy Bitsy Spider
        if (data.response.Rhymes.includes("Itsy Bitsy Spider")) {
        itsy_bitsy_spider_stim = trials.filter((x) => {return x.descr.includes("Itsy Bitsy Spider")});
        stim_list = stim_list.concat(itsy_bitsy_spider_stim);
        } 
        
      // Humpty Dumpty
        if (data.response.Rhymes.includes("Humpty Dumpty")) {
        humpty_dumpty_stim = trials.filter((x) => {return x.descr.includes("Humpty Dumpty")});
        stim_list = stim_list.concat(humpty_dumpty_stim);
        } 

        // Little Miss Muffet
        if (data.response.Rhymes.includes("Little Miss Muffet")) {
        muffet_stim = trials.filter((x) => {return x.descr.includes("Little Miss Muffet")});
        stim_list = stim_list.concat(muffet_stim);
        } 

        // Jack and Jill
        if (data.response.Rhymes.includes("Jack and Jill")) {
        jack_jill_stim = trials.filter((x) => {return x.descr.includes("Jack and Jill")});
        stim_list = stim_list.concat(jack_jill_stim);
        } 
        
        // Hickory Dickory Dock
        if (data.response.Rhymes.includes("Hickory Dickory Dock")) {
        hickory_dickory_stim = trials.filter((x) => {return x.descr.includes("Hickory Dickory Dock")});
        stim_list = stim_list.concat(hickory_dickory_stim);
        } 
        
        // Baa Baa Black Sheep
        if (data.response.Rhymes.includes("Baa Baa Black Sheep")) {
        black_sheep_stim = trials.filter((x) => {return x.descr.includes("Baa Baa Black Sheep")});
        stim_list = stim_list.concat(black_sheep_stim);
        } 
                
        // Little Bo Peep
        if (data.response.Rhymes.includes("Little Bo Peep")) {
        little_bo_stim = trials.filter((x) => {return x.descr.includes("Little Bo Peep")});
        stim_list = stim_list.concat(little_bo_stim);
        }
        stim_list = stim_list;

        //RANDOMIZE STIMULI HERE
      shuffledTrials = jsPsych.randomization.shuffle(stim_list)
      console.log(shuffledTrials)
      }
  };


timeline.push(trialSelectionNurseryRhymes);


var second_timeline = [];
for (let i = 0; i < shuffledTrials.length; i++) {
  //Concat timelines
  var trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: function() {
      return shuffledTrials[i].prepPrompt;
    },
  choices: " ",
  data: {
  task: 'prepPrompt'
  }
}
second_timeline.push(trial)
}

timeline = timeline.concat(second_timeline);


// Run the experiment
jsPsych.run(timeline);

Any and all advice on this matter would be sincerely appreciated.

Kind regards,
Linda