How do I create a nested timeline when using dynamic parameters?

[sophief10]

Hi everyone!

I am trying to build an experiment using nested timelines. Unfortunately, the order of the experimental trials is a bit complicated, so I am having trouble creating the timelines.

In my experiment, there are 2 trial blocks. Block A consists of the following timelines: resetCounterTrial, randomizeNatural, instructionsNatural, and trialsNatural. Block B consists of these timelines: resetCounterTrial, randomizeHealthy, instructionsHealthy, and trialsHealthy.

I would like my experiment to run Block A once, followed by Block B. Then, I would like to run Blocks A and B each 7 more times in random order (e.g., Block B, Block A, Block A, Block B, Block A, Block B, Block B, etc.). So, the first run of my experiment contains Block A followed by Block B. The other 7 runs of my experiment each contain Blocks A and B, but the order of the blocks is randomized.

I am having trouble creating a nested timeline to model the above trial order. What makes things especially hard is that Blocks A and B both use dynamic parameters, so (if I understand jsPsych correctly) I cannot simply create an array of blocks before the experiment starts and then run the blocks as timeline variables using jsPsych.timelineVariable.

If you have any suggestions as to how I could code the above trial order, would you please share them here?

Here is a copy of the relevant part of my code for reference:

 var holdingCell = []; //create a holding cell to temporarily store data

       var imageNames = ['salad', 'pear', 'lollipop', 'grapes', 'cotton candy', 'cookie', 'carrot', 'cake', 'brownie', 'apple']; //create an array of image names to cycle through

       var getData = function() {
           var imageNames_shuffled = jsPsych.randomization.shuffle(imageNames); //randomize the order of image names
           for (let i = 0; i < imageNames_shuffled.length; i++) {
               var responseData = jsPsych.data.getLastTimelineData().filter({name: imageNames_shuffled[i]}).select('response').sum(); //for each image category, retrieve the responses and sum them
               var pictureData = jsPsych.data.getLastTimelineData().filter({name: imageNames_shuffled[i]}).select('stimulus').values; //for each image category, retrieve the image paths

               holdingCell.push({rating: responseData, picture1: pictureData[0], picture2: pictureData[1]}); //for each image category, create an object to store the response sum and the image paths, and place the object in the holding cell
           };
       };
               
       var getDataTrial = {
           type: 'call-function',
           func: getData
       };
       finalTimeline.push(getDataTrial); //initiate the above processes

       var counter = 0; //initiate a counter variable

       const updateCounter = function() {
           counter+=1;
           return counter;
       }; //the counter variable will increase by 1 each time updateCounter() is called

       var selectStimuli = {
           timeline: [
               {
                   type: 'html-keyboard-response-picture',
                   stimulus: "Waiting...",
                   choices: "NO_KEYS",
                   trial_duration: 150,
                   answer: function() {
                       return holdingCell[counter].rating; //store the liking response sums as trial data
                   },
                   firstPicture: function() {
                       return holdingCell[counter].picture1; //store the liking image paths as trial data
                   },
                   secondPicture: function() {
                       return holdingCell[counter].picture2;
                   },
                   save_trial_parameters: {
                       answer: true,
                       firstPicture: true,
                       secondPicture: true
                   }
               }
           ],
           on_timeline_finish: function() {
               updateCounter(); //cycle through each entry in the holding cell
           },
           loop_function: function(data) {
               if (counter < holdingCell.length) {
                   return true;
               } else {
                   return false;
               }
           }
       };
       finalTimeline.push(selectStimuli);

       var imagesNatural_temp = []; 
       var imagesHealthy_temp = [];
       var imagesNatural = [];
       var imagesHealthy = [];
       var leftovers = [];

       var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //create an array of numbers to cycle through, where the numbers represent the possible response sums

       var sortData = function() {
           for (let j = 0; j < numbers.length; j++) {
               var groupedPictureData = jsPsych.data.get().filter({answer: j}).values(); //for each response sum, retrieve the values
               if (groupedPictureData.length%2 ==0) { //is there an even number of image path objects for this response sum?
                   for (let k = 0; k < groupedPictureData.length/2; k++) {
                       imagesNatural_temp.push(groupedPictureData[k]); //place the first half of the image paths in imagesNatural_temp
                   };
                   for (let k = groupedPictureData.length/2; k < groupedPictureData.length; k++) {
                       imagesHealthy_temp.push(groupedPictureData[k]); //place the second half of the image paths in imagesHealthy_temp
                   };
               } else { //is there an odd number of image path objects for this response sum?
                   leftovers.push(groupedPictureData[0]); //remove one image path object and place it in the leftovers array
                   var adjustedGroup = groupedPictureData.slice(1); 
                   for (let k = 0; k < adjustedGroup.length/2; k++) { //place the first half of the remaining image paths in imagesNatural_temp
                       imagesNatural_temp.push(adjustedGroup[k]);
                   };
                   for (let k = adjustedGroup.length/2; k < adjustedGroup.length; k++) { //place the second half of the remaining image paths in imagesHealthy_temp
                       imagesHealthy_temp.push(adjustedGroup[k]);
                   };    
               }
           }; 
       };
                    
       var sortDataTrial = {
           type: 'call-function',
           func: sortData
       };
       finalTimeline.push(sortDataTrial);

       var assignData = function() {
           for (let j = 0; j < imagesNatural_temp.length; j++) {
               imagesNatural.push(imagesNatural_temp[j].firstPicture); //extract the raw image paths from the image path objects and place them in the final image arrays
               imagesNatural.push(imagesNatural_temp[j].secondPicture);
           };
           for (let j = 0; j < imagesHealthy_temp.length; j++) {
               imagesHealthy.push(imagesHealthy_temp[j].firstPicture);
               imagesHealthy.push(imagesHealthy_temp[j].secondPicture);
           }; 
           for (let j = 0; j < leftovers.length/2; j++) {
               imagesNatural.push(leftovers[j].firstPicture);
               imagesNatural.push(leftovers[j].secondPicture);
           };
           for (let j = leftovers.length/2; j < leftovers.length; j++) {
               imagesHealthy.push(leftovers[j].firstPicture);
               imagesHealthy.push(leftovers[j].secondPicture);
           };
       };

       var assignDataTrial = {
           type: 'call-function',
           func: assignData
       };
       finalTimeline.push(assignDataTrial);
       

       //SET-UP - BLOCKS

       const resetCounter = function() {
           counter = 0;
           return counter;
       }; //create a function to reset the counter variable

       var resetCounterTrial = {
           type: 'call-function',
           func: resetCounter
       }; //reset the counter

       var imagesNatural_shuffled = []; //create an array to hold the NATURAL images in a random order

       var imagesHealthy_shuffled = []; //create an array to hold the HEALTHY images in a random order

       var shuffleImagesNatural = function() {
           imagesNatural_shuffled = jsPsych.randomization.shuffle(imagesNatural);
           return imagesNatural_shuffled;
       }; //create a function to randomize the order of the NATURAL images

       var shuffleImagesHealthy = function() {
           imagesHealthy_shuffled = jsPsych.randomization.shuffle(imagesHealthy);
           return imagesHealthy_shuffled;
       }; //create a function to randomize the order of the HEALTHY images

       var randomizeNatural = {
           type: 'call-function',
           func: shuffleImagesNatural
       }; //randomize the order of the NATURAL images

       var randomizeHealthy = {
           type: 'call-function',
           func: shuffleImagesHealthy
       }; //randomize the order of the HEALTHY images

       var desireScale = [
           'Strong No',
           'No',
           'Yes',
           'Strong Yes'
       ]; //create the rating scale for the NATURAL and HEALTHY tasks
      
       var instructionsNatural = { //instructions for the NATURAL condition
           type: 'instructions',
           pages: ['blah blah blah. Instructions for the NATURAL condition.'],
           show_clickable_nav: true
       };

       var instructionsHealthy = { //instructions for the HEALTHY condition
           type: 'instructions',
           pages: ['blah blah blah. Instructions for the HEALTHY condition.'],
           show_clickable_nav: true
       };

       var trialsNatural = { //the NATURAL trials
           timeline: [
               {
                   type: 'image-button-response',
                   stimulus: function() {
                       return imagesNatural_shuffled[counter]; 
                   },
                   choices: desireScale,
                   prompt: "I would like to eat this food right now, in its presented quantity.",
                   render_on_canvas: true,
                   trial_duration: 4000
               }
           ],
           on_timeline_finish: function() {
               updateCounter(); //cycle through each image in imagesNatural_shuffled
           },
           loop_function: function(data) {
               if (counter < imagesNatural_shuffled.length) {
                   return true;
               } else {
                   return false;
               }
           }
       };

       var trialsHealthy = { //the HEALTHY trials
           timeline: [
               {
                   type: 'image-button-response',
                   stimulus: function() {
                       return imagesHealthy_shuffled[counter]; 
                   },
                   choices: desireScale,
                   prompt: "I would like to eat this food right now, in its presented quantity.",
                   render_on_canvas: true,
                   trial_duration: 4000
               }
           ],
           on_timeline_finish: function() {
               updateCounter(); //cycle through each image in imagesNatural_shuffled
           },
           loop_function: function(data) {
               if (counter < imagesHealthy_shuffled.length) {
                   return true;
               } else {
                   return false;
               }
           }
       };

       var blockNatural = [resetCounterTrial, randomizeNatural, instructionsNatural, trialsNatural];

       var blockHealthy = [resetCounterTrial, randomizeHealthy, instructionsHealthy, trialsHealthy];

[sophief10]

Update: I figured it out!

   var desireScale = [
            'Strong No',
            'No',
            'Yes',
            'Strong Yes'
        ]; //create the rating scale for the runs

        const resetCounter_function = function() {
            counter = 0;
            return counter;
        }; //create a function to reset the counter variable

        var resetCounter = {
            type: 'call-function',
            func: resetCounter_function
        };
        finalTimeline.push(resetCounter); //reset the counter variable

        var sevenRuns = ['N', 'H', 'N', 'H', 'N', 'H', 'N', 'H', 'N', 'H', 'N', 'H', 'N', 'H']; //N = NATURAL; H = HEALTHY;

        var oneRun = ['N', 'H'];

        var blockOrder = [];

        var prepareRuns_function = function() {
            var sevenRuns_shuffled = jsPsych.randomization.shuffle(sevenRuns); //runs 2 - 7 randomize the order of N and H
            blockOrder = oneRun.concat(sevenRuns_shuffled); //in run 1, N comes before H
            return blockOrder; //create the final order of blocks
        };

        var prepareRuns = {
            type: 'call-function',
            func: prepareRuns_function
        };
        finalTimeline.push(prepareRuns); 

        var images_shuffled = [];

        let counter_blockOrder = 0; //create a counter variable to keep track of how many blocks have passed

        var chooseImagestoShuffle = function() {
            if (blockOrder[counter_runOrder]=='N') {
                images_shuffled = jsPsych.randomization.shuffle(imagesNatural); //for N blocks, show a randomized array of NATURAL images
            } else {
                images_shuffled = jsPsych.randomization.shuffle(imagesHealthy); //for H blocks, show a randomized array of HEALTHY images
            };
        };

        const updateCounter_blockOrder = function() {
            counter_blockOrder+=1;
            return counter_blockOrder;
        }; //the block counter will update by 1 each time a block passes

        var runs = {
            timeline: [ //each block consists of instructions followed by 10 trials
                {
                    type: 'instructions',
                    show_clickable_nav: true,
                    pages: function() {
                        if (blockOrder[counter_blockOrder] == 'N') {
                            return ['blah blah blah. Here are the instructions for the NATURAL condition.'];
                        } else {
                            return ['blah blah blah. Here are the instructions for the HEALTHY condition.'];
                        };
                    }
                },
                {
                    timeline: [
                        {
                            type: 'image-button-response',
                            choices: desireScale,
                            prompt: "I would like to eat this food right now, in its presented quantity.",
                            render_on_canvas: true,
                            trial_duration: 4000,
                            stimulus: function() {
                                return images_shuffled[counter];
                            }
                        }
                    ],
                    on_timeline_finish: function() {
                        updateCounter();
                    },
                    loop_function: function(data) {
                        if (counter < images_shuffled.length) {
                            return true;
                        } else {
                            return false;
                        };
                    }
                }
            ],
            on_timeline_start: function() { //at the start of each block, prepare the images array
                chooseImagestoShuffle();
            },
            on_timeline_finish: function() { //at the end of each block, prepare to move to the next block and reset the images counter
                updateCounter_blockOrder();
                resetCounter_function();
            },    
            loop_function: function(data) {
                if (counter_blockOrder < blockOrder.length) {
                    return true;
                } else {
                    return false;
                }
            }
        };
        finalTimeline.push(runs);