Difficulty assigning images to array

Question

I am having trouble running a code that I wrote in the JavaScript library jsPsych. The code uses a custom plugin that I created for the purpose of the experiment I am designing. My plugin, "image-button-response-with-name," is the same as the "image-button-response" plugin except that it also incorporates a parameter called "name," where I can input a string to identify the trial in question.

Here is what I am trying to do in my code:

1. In my experiment, there are images of 10 different foods. For each of the 10 foods, there are two images. Therefore, there are 20 images in total. The 20 images fall into 10 categories identified by the "name" parameter (salad, pear, etc.).

2. The subject rates each image on a scale of 1 - 6 (which the computer understands as a response scale ranging from 0 - 5).

3. The computer gathers the data from the rating trials and identifies the trials that used images from the same category. In other words, the computer would identify 10 groups of trials: the salad trials, the pear trials, etc.

4. For each trial category, the computer sums the responses for the trials. For example, if the subject chose '1' on the first salad trial and '3' on the second salad trial, then the computer would calculate a sum of 4 for the salad trials.

5. For the first 5 trial categories, the computer retrieves the images associated with each category and assigns those images to imagesNatural if the sum of the category is 5 or less, and imagesHealthy if the sum of the category is above 5.

6. For the next 5 trial categories, the computer retrieves the images associated with each category and assigns those images to imagesHealthy if the sum of the category is 5 or less, and imagesNatural if the sum of the category is above 5.

7. There should now be 10 images in imagesNatural, and 10 images in imagesHealthy. Each image category should appear in only 1 array (ex. both salad images should appear in imagesNatural).

8. The subject begins a new timeline called "test," where they rate only the images in imagesNatural. Here is my code:

    //set-up    
    var finalTimeline = [];
    var preload = {
        type: 'preload',
        images: ['Images/small_salad.jpeg', 'Images/small_pear.jpeg', 'Images/small_lollipop.jpeg', 'Images/small_grapes.jpeg', 'Images/small_cotton_candy.jpeg', 'Images/small_cookie.jpeg', 'Images/small_carrot.jpeg', 'Images/small_cake.jpeg', 'Images/small_brownie.jpeg', 'Images/small_apple.jpeg', 'Images/large_salad.jpeg', 'Images/large_pear.jpeg', 'Images/large_lollipop.jpeg', 'Images/large_grapes.jpeg', 'Images/large_cotton_candy.jpeg', 'Images/large_cookie.jpeg', 'Images/large_carrot.jpeg', 'Images/large_cake.jpeg', 'Images/large_brownie.jpeg', 'Images/large_apple.jpeg']
    };
    finalTimeline.push(preload);
    var welcome = {
        type: 'html-keyboard-response',
        stimulus: "Welcome to the experiment! Press any key to begin."
    };
    finalTimeline.push(welcome);
    var instructionsGeneral = {
        type: 'instructions',
        pages: ['blah blah blah. A general overview of the experiment.'],
        show_clickable_nav: true
    };
    finalTimeline.push(instructionsGeneral);
   
    //Liking Rating Task - Set 1
    var instructionsLiking_1 = {
        type: 'instructions',
        pages: ['blah blah blah. Instructions for the Liking Rating Task.'],
        show_clickable_nav: true
    };
    finalTimeline.push(instructionsLiking_1);
    var likingScale = [
        "1 (Strongly Dislike)",
        "2",
        "3",
        "4",
        "5",
        "6 (Strongly Like)"
    ];
    var likingRatingTask_1 = {
        timeline: [
            {
                type: 'image-button-response-with-name',
                stimulus: jsPsych.timelineVariable('food'),
                choices: likingScale,
                prompt: "I would like to eat this food right now, in its presented quantity.",
                render_on_canvas: true,
                save_trial_parameters: {
                    name: true
                }
            }
        ],
        timeline_variables: [
        {food: "Images/small_salad.jpeg", name: 'salad'},
        {food: "Images/small_pear.jpeg", name:'pear'},
        {food: "Images/small_lollipop.jpeg", name:'lollipop'},
        {food: "Images/small_grapes.jpeg", name:'grapes'},
        {food: "Images/small_cotton_candy.jpeg", name:'cotton candy'},
        {food: "Images/small_cookie.jpeg", name:'cookie'},
        {food: "Images/small_carrot.jpeg", name:'carrot'},
        {food: "Images/small_cake.jpeg", name:'cake'},
        {food: "Images/small_brownie.jpeg", name:'brownie'},
        {food: "Images/small_apple.jpeg", name:'apple'},
        {food: "Images/large_salad.jpeg", name:'salad'},
        {food: "Images/large_pear.jpeg", name:'pear'},
        {food: "Images/large_lollipop.jpeg", name:'lollipop'},
        {food: "Images/large_grapes.jpeg", name:'grapes'},
        {food: "Images/large_cotton_candy.jpeg", name:'cotton candy'},
        {food: "Images/large_cookie.jpeg", name:'cookie'},
        {food: "Images/large_carrot.jpeg", name:'carrot'},
        {food: "Images/large_cake.jpeg", name:'cake'},
        {food: "Images/large_brownie.jpeg", name:'brownie'},
        {food: "Images/large_apple.jpeg", name:'apple'}
        ], 
        randomize_order: true
    };
    finalTimeline.push(likingRatingTask_1);
   
    //condition assignment 
    imageNames = ["'salad'", "'pear'", "'lollipop'", "'grapes'", "'cotton candy'", "'cookie'", "'carrot'", "'cake'", "'brownie'"];
    imagesNatural_almost = [];
    imagesHealthy_almost = [];
    imagesNatural = [];
    imagesHealthy = [];
    function conditionAssignment(imageNames, imagesNatural_almost, imagesHealthy_almost, imagesNatural, imagesHealthy) {
        var imageNames_shuffled = jsPsych.randomization.shuffle(imageNames);
        for (let i = 0; i <= 4; i++) {
            var trialsSum_1 = jsPsych.data.get().filter({name: imageNames_shuffled[i]}).select('response').sum();
            if (trialsSum_1 <= 5) {
                imagesNatural_almost.push(''+ jsPsych.data.get().filter({name: imageNames_shuffled[i]}).select('stimulus').values );
            } else {
                imagesHealthy_almost.push(''+ jsPsych.data.get().filter({name: imageNames_shuffled[i]}).select('stimulus').values );
            }
        };
        for (let i = 5; i <=9; i++) {
            var trialsSum_2 = jsPsych.data.get().filter({name: imageNames_shuffled[i]}).select('response').sum();
            if (trialsSum_2 <= 5) {
                imagesHealthy_almost.push('' + jsPsych.data.get().filter({name: imageNames_shuffled[i]}).select('stimulus').values );
            } else {
                imagesNatural_almost.push('' + jsPsych.data.get().filter({name: imageNames_shuffled[i]}).select('stimulus').values );
            }
        };
        for (let i = 0; i < imagesNatural_almost.length; i++) {
            imagesNatural.push(
                {food: imagesNatural_almost[i]}
            );
        };
        for (let i = 0; i < imagesHealthy_almost.length; i++) {
            imagesHealthy.push(
                {food: imagesHealthy_almost[i]}
            );
        }
    };
    var selectStimuli_1 = {
        type: 'html-keyboard-response',
        stimulus: "Just a moment...",
        choices: jsPsych.NO_KEYS,
        trial_duration: 1000,
        on_load: conditionAssignment(imageNames, imagesNatural_almost, imagesHealthy_almost, imagesNatural, imagesHealthy)
    };
    finalTimeline.push(selectStimuli_1);
   
    //test
    var test = {
        timeline: [
            {
                type: 'image-button-response-with-name',
                stimulus: jsPsych.timelineVariable('food'),
                choices: likingScale,
                prompt: "I would like to eat this food right now, in its presented quantity.",
                render_on_canvas: true
            }
        ],
        timeline_variables: imagesNatural,
        randomize_order: true
    };
    finalTimeline.push(test);
   
   
    //initiate experiment
    jsPsych.init({
        timeline: finalTimeline,
        override_safe_mode: true,
        on_finish: function() {
            jsPsych.data.displayData();
        }
    });
   

This code is not working. When my computer gets to the "test" timeline, it runs 5 trials instead of the desired 10. Furthermore, it does not display any images during the trials. This makes me think that my imagesNatural array contains the items from the imageNames_shuffled array and not the paths to my images. Unfortunately, I do not know how to fix my code such that the imagesNatural array will contain the paths to my images.

If anyone has any suggestions as to how I could fix my code, would you please share them here?