My code is not working and I don't know why!!

[sophief10]

Hi everyone!

I am having trouble running a code that I wrote in 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?

[becky-gilbert]

Hi @woodenchair, unfortunately it's not possible to generate a timeline_variables array dynamically, i.e. during the experiment. So I think what's happening is that jsPsych is setting up your test procedure using whatever the imagesNatural array is before the experiment starts, when the page first loads. This is obviously not what you want!

What you can do instead is set up your test procedure with a looping timeline instead of using timeline variables - that way you can set/change the imagesNatural array during the experiment, and then use its current value when you get to your test procedure. One way to do this is to initialize a global counter variable that starts at 0 and keeps track of the current test trial number. Then, in your loop_function, you will want to increment this counter by 1, and if the counter has exceeded the length of imagesNatural - 1, then you should end the loop (return false), otherwise continue (return true).

If you go with the loop solution, then another change you'll have to make is that instead of using the jsPsych.timelineVariable function in your test trial:

stimulus: jsPsych.timelineVariable('food'),

You'll want to get the stimulus value directly from your imagesNatural array, using your counter variable as the index. This will have to go inside of a function so that you are using the updated imagesNatural array:

stimulus: function() {
  return imagesNatural[counter].food;
}

Finally, the randomize_order: true parameter won't work if you switch to a looping timeline, so instead I suggest randomizing the imagesNatural array using jsPsych.randomization.shuffle after you create the array inside of your conditionAssignment function.

Does that solution work for you? If you get stuck, I suggest putting some console.logs inside of your loop_function and stimulus function to check the values of imagesNatural and your counter variable. Let us know if you need further guidance.

[sophief10]

Dear @becky-gilbert ,

So sorry for the late reply! I was assigned to a different coding project for the past few days.

I tried your method, but I still found bugs in my program. I am currently trying the following code:

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,
                    name: jsPsych.timelineVariable('name'),
                    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,
            on_timeline_finish: function() {
                var imageNames = [{name: 'salad'}, {name: 'pear'}, {name: 'lollipop'}, {name: 'grapes'}, {name: 'cotton candy'}, {name: 'cookie'}, {name: 'carrot'}, {name: 'cake'}, {name: 'brownie'}, {name: 'apple'}]; //list the category names
                var imageNames_shuffled = jsPsych.randomization.shuffle(imageNames); //shuffle the category names list
                console.log(imageNames_shuffled);
                var data = []; //create a data array
                var leftovers = []; //create a leftovers array
                var imagesNatural_temp = []; //create a temporary imagesNatural array
                var imagesHealthy_temp = []; //create a temporary imagesHealthy array

                for (let i = 0; i < imageNames_shuffled.length; i++) {
                    var responseData = jsPsych.data.getLastTimelineData().filter(imageNames_shuffled[i]).select('response').sum();
                    var pictureData = jsPsych.data.getLastTimelineData().filter(imageNames_shuffled[i]).select('stimulus').values;
                    var object = {
                        rating: responseData,
                        picture1: pictureData[0],
                        picture2: pictureData[1]
                    };
                    data.push(object);
                };
                console.log(data);
               
                function matchedAssignment(item) {
                    var x = item;
                    data.shift();
                    function findMatch(element) {
                        return element.response==x.response;
                    };
                    data.findIndex(findMatch);
                    if (data.findIndex(findMatch)!=-1) {
                        var y = data.splice(data.findIndex(findMatch), 1);
                        imagesNatural_temp.push(x);
                        imagesHealthy_temp.push(y[0]);
                    } else {
                        var z = jsPsych.randomization.sampleWithoutReplacement([imagesNatural_temp, imagesHealthy_temp], 1);
                        z[0].push(x);
                    }
                };
                data.forEach(matchedAssignment);
                

                
                
                
            }
        };
        finalTimeline.push(likingRatingTask_1);

When I execute console.log(imageNames_shuffled), my console returns an array with 10 elements, as it should. However, when I execute console.log(data), my console returns an array with only 2 elements. It is as though the on_timeline_finish function only executes twice even though I would like it to execute 10 times. Would you have any idea as to what might be happening? If so, would you please share your insights here?

[becky-gilbert]

It is as though the on_timeline_finish function only executes twice even though I would like it to execute 10 times

The on_timeline_finish function should actually only be called once, because it executes after the likingRatingTask_1 has finished, i.e. when it's finished running all of the trials specified in your timeline variables.

Within the on_timeline_finish function, I see that you're looping over the length of imageNames_shuffled, which has 10 elements. So if each iteration of that loop should be adding something to your data array, but that array only ends up having 2 elements, then I'm guessing something is going wrong in that loop. I wonder if your filter function might not be working. The jsPsych data filter function should take an object with one or more key-value pairs to filter on, whereas it looks like you're just passing in the image names. So for example, if the image name is stored as name in the trial data, you could try changing your responseData line like this:

var responseData = jsPsych.data.getLastTimelineData().filter({name: imageNames_shuffled[i]}).select('response').sum();

And the same for the picture data.

If you want to check whether your data filtering/selection code is working, you can always print out various parts of those statements, e.g.

console.log('image trial data: ', jsPsych.data.getLastTimelineData().filter({name: imageNames_shuffled[i]}));
console.log('image trial responses: ', jsPsych.data.getLastTimelineData().filter({name: imageNames_shuffled[i]}).select('response');

Does that help?