How do I define a parameter for use in my code?

[sophief10]

Hi everyone!

I am trying to run the following code:

var likert_scale = [
            "Strong No", 
            "No",
            "Yes",
            "Strong Yes", 
        ];
var ratingsAndimages = [];
        
        var pre_task = {
            timeline: [
                {
                    type: 'survey-likert',
                    preamble: jsPsych.timelineVariable('food'),
                    questions: [
                        {
                            labels: likert_scale, 
                            prompt: "I would like to eat this food right now, in its presented quantity."
                        }
                    ],
                    save_trial_parameters: {
                        preamble: true
                    },
                    on_finish: function(data) {
                        data.rating = data.response.Q0;
                        data.foodImage = jsPsych.timelineVariable('food', true);
                        ratingsAndimages.push({rating: data.rating, foodImage: data.foodImage}) 
                    }
                }
            ],
            timeline_variables: [
            { food:'<img src="Images/small_pear.jpeg"></img>'},
            { food:'<img src="Images/small_lollipop.jpeg"></img>'},
            { food:'<img src="Images/small_grapes.jpeg"></img>'},
            { food:'<img src="Images/small_cotton_candy.jpeg"></img>'},
            { food:'<img src="Images/small_cookie.jpeg"></img>'},
            { food:'<img src="Images/small_carrot.jpeg"></img>'},
            { food:'<img src="Images/small_brownie.jpeg"></img>'},
            { food:'<img src="Images/small_apple.jpeg"></img>'},
            { food:'<img src="Images/large_salad.jpeg"></img>'},
            { food:'<img src="Images/large_pear.jpeg"></img>'},
            { food:'<img src="Images/large_lollipop.jpeg"></img>'},
            { food:'<img src="Images/large_grapes.jpeg"></img>'},
            { food:'<img src="Images/large_cotton_candy.jpeg"></img>'},
            { food:'<img src="Images/large_cookie.jpeg"></img>'},
            { food:'<img src="Images/large_carrot.jpeg"></img>'},
            { food:'<img src="Images/large_cake.jpeg"></img>'},
            { food:'<img src="Images/large_brownie.jpeg"></img>'},
            { food:'<img src="Images/large_apple.jpeg"></img>'},
            { food:'<img src="Images/small_cake.jpeg"></img>'}
            ],
            randomize_order: true
        };

        /*assign pictures to conditions*/ 
        var images_NATURAL = [];
        var images_HEALTHY = [];

        var rAi_1 = ratingsAndimages.slice(0,10);
        var rAi_2 = ratingsAndimages.slice(10);

        var select_stimuli = {
            type: 'html-keyboard-response',
            stimulus: 'Just a moment...',
            choices: jsPsych.NO_KEYS,
            trial_duration: 500, 
            on_finish: function(data) {
                for (let i = 0; i < rAi_1.length; i++) {
                    if (rAi_1[i].rating==0|1) {
                        images_NATURAL.push({picture: rAi_1[i].foodImage});
                    } else {
                        images_HEALTHY.push({picture: rAi_1[i].foodImage});
                    }
                };
                for (let i = 0; i < rAi_2.length; i++) {
                    if (rAi_2[i].rating==0|1) {
                        images_HEALTHY.push({picture: rAi_2[i].foodImage});
                    } else {
                        images_NATURAL.push({picture: rAi_2[i].foodImage});
                    }
                };
            } 
        };

        var run1_NATURAL = {
            timeline: [
                {
                    type: 'survey-likert',
                    preamble: jsPsych.timelineVariable('picture'),
                    questions: [
                        {
                            labels: likert_scale,
                            prompt: "I would like to eat this food right now, in its presented quantity."
                        }
                    ],
                    on_load: function() {
                        jsPsych.data.getDataByTimelineNode(3.0);
                    }
                }
            ],
            timeline_variables: images_NATURAL        
        };

Essentially, what I would like to do is have my participant rate a series of pictures during the pre-task. Then, I would like the computer to divide those pictures between two conditions (NATURAL and HEALTHY) based on the rating of each picture. The division process would follow a matching technique; at the end of the process, the NATURAL condition should have about the same number of Strong No, No, Yes, and Strong Yes pictures as the HEALTHY condition. Once division is complete, the participant would complete the rating task again using only the pictures from the NATURAL condition.

I have spent many hours adjusting my code in the hopes of getting the above result, but my code has always failed. According to my debugger, the code cannot work because "picture" is undefined.

Does anyone know how I could define "picture" in my code, or know another way to obtain the result I am after? If so, I would greatly appreciate it if you would share your insights here.