Photos not loading

[Heidi Vuletich]

Dear Yoav, 

We are trying to program a study with 4 experimental conditions, each with a corresponding set of photos from which we are randomly selecting 1 to be displayed as participants answer a questionnaire and also to be displayed during the IAT task itself (in the background). We have successfully done this for other studies, but for some reason the photos are not loading in this study and we can't figure out why. Here's our code in the manager file for the study that does not work (images are not showing up), followed by an example of code that is working. Thanks for your help!

define(['managerAPI'], function(Manager) {

    var API = new Manager();

    API.setName('mgr'); //Sets the task's name in the data, in case you use API.save to save data [should use the task 'post' instead, as shown below in the manager's sequence]

    API.addSettings('skip',true); //Allows using Esc+arrows to move between tasks when testing the study. 

    var global = API.getGlobal();

    

    var dummy = API.shuffle(['cond1','cond2', 'control1', 'control2'])[0];

    var cond1images = API.shuffle([

                'P1.jpg',

                'P2.jpg',

                'P3.jpg',

                'P4.jpg',

                'P5.jpg',

                'P6.jpg',

                'P7.jpg',

                'P8.jpg',

                'P9.jpg',

                'P10.jpg',

                'P11.jpg',

                'P12.jpg',

                'P13.jpg'

        ]);

    var cond2images = API.shuffle([

                'A1.jpg',

                'A2.jpg',

                'A3.jpg',

                'A4.jpg',

                'A5.jpg',

                'A6.jpg',

                'A7.jpg',

                'A8.jpg',

                'A9.jpg',

                'A10.jpg',

                'A11.jpg',

                'A12.jpg',

                'A13.jpg'

        ]);

   

    var control1images = API.shuffle([

                'Control_P1.jpg',

                'Control_P2.jpg',

                'Control_P3.jpg',

                'Control_P4.jpg',

                'Control_P5.jpg',

                'Control_P6.jpg',

                'Control_P7.jpg',

                'Control_P8.jpg',

                'Control_P9.jpg',

                'Control_P10.jpg',

                'Control_P11.jpg',

                'Control_P12.jpg',

                'Control_P13.jpg'

        ]);

    var control2images = API.shuffle([

                'Control_A1.jpg',

                'Control_A2.jpg',

                'Control_A3.jpg',

                'Control_A4.jpg',

                'Control_A5.jpg',

                'Control_A6.jpg',

                'Control_A7.jpg',

                'Control_A8.jpg',

                'Control_A9.jpg',

                'Control_A10.jpg',

                'Control_A11.jpg',

                'Control_A12.jpg',

                'Control_A13.jpg'

        ]);

        

 var backgroundImage;

if (dummy === 'cond1') {

    backgroundImage = cond1images[0];

} else if (dummy === 'cond2') {

    backgroundImage = cond2images[0];

} else if (dummy === 'control1') {

    backgroundImage = control1images[0];

} else if (dummy === 'control2') {

    backgroundImage = control2images[0];

}

    var params = {dummyCond:dummy, backgroundImage:backgroundImage}; 

    

    

    //var preload = [cond1images, cond2images, control1images, control2images];

    //var iImage;

    //for (iImage=1; iImage<=200; iImage++)

    //{

    //    preload.push(global.baseURL + iImage + '.jpg');

    //}

    

     var preload = [

       'P1.jpg','P2.jpg','P3.jpg','P4.jpg','P5.jpg', 'P6.jpg', 'P7.jpg', 'P8.jpg','P9.jpg','P10.jpg','P11.jpg', 'P12.jpg','P13.jpg',

         'A1.jpg','A2.jpg','A3.jpg','A4.jpg','A5.jpg','A6.jpg','A7.jpg','A8.jpg','A9.jpg','A10.jpg','A11.jpg','A12.jpg','A13.jpg',

                 'Control_P1.jpg','Control_P2.jpg','Control_P3.jpg','Control_P4.jpg','Control_P5.jpg','Control_P6.jpg','Control_P7.jpg',

                'Control_P8.jpg','Control_P9.jpg','Control_P10.jpg','Control_P11.jpg','Control_P12.jpg','Control_P13.jpg','Control_A1.jpg',

                'Control_A2.jpg','Control_A3.jpg','Control_A4.jpg','Control_A5.jpg','Control_A6.jpg','Control_A7.jpg','Control_A8.jpg',

                'Control_A9.jpg','Control_A10.jpg','Control_A11.jpg','Control_A12.jpg','Control_A13.jpg'

    ].map(function(filename) {

      return global.baseURL + filename;

    });

    API.addSettings('preloadImages', preload);

    

            API.setName('mgr');

            API.addSettings('skip',true);

            API.addSettings('DEBUG', {level: 'error'});

            

            API.addGlobal({

            //YBYB: change when copying back to the correct folder

            //  baseURL: '/implicit/user/education/weight/demo.weight.0003/images/'

                  baseURL: '/implicit/user/awinegar/trans_bias_ma/images',

                  mins: '10',

                  groupA : 'Cisgender People', //category2 in iat.js

            groupB : 'Transgender People',  //category1 in iat.js

            attributeA : 'Good words', //attribute2 in iat.js

            attributeB : 'Bad words',  //attribute1 in iat.js

            backgroundImage: backgroundImage,

            dummyCond: dummy

            });

Here is some sample code for a study that is currently working (with an abbreviated set of images just for easy of reading the code): 

define(['managerAPI'], function(Manager) {

    var API = new Manager();

    API.setName('mgr'); //Sets the task's name in the data, in case you use API.save to save data [should use the task 'post' instead, as shown below in the manager's sequence]

    API.addSettings('skip',true); //Allows using Esc+arrows to move between tasks when testing the study. 

    var global = API.getGlobal();

    

    //Randomly assigned a between participants condition.

    var dummy = API.shuffle(['cond1','cond2'])[0];

    //rich

    var cond1images = API.shuffle([

                'AZ_175_0_lowPov.jpg',

                'AZ_175_3_lowPov.jpg',

                'WI_631_13_lowPov.jpg'

        ]);

    //poor

    var cond2images = API.shuffle([

                'AZ_434_0_highPov.jpg', 

                'AZ_434_1_highPov.jpg',

                'WI_1004_13_highPov.jpg'

        ]);

    //var cond1images = API.shuffle(['location=37.7348602,-83.5440402&3a&75y&142.43h&88.59t&size=700x600&key=AIzaSyBQp3qQII_6clnZqCPts3TZTkE-aNQYOMw',

        //                        'location=33.1175957,-90.0468147&fov=75&heading=164.48&pitch=0&size=700x600&key=AIzaSyBQp3qQII_6clnZqCPts3TZTkE-aNQYOMw',

        //                        'location=31.9388696,-105.202726&fov=75&heading=337.54&pitch=-.79&size=700x600&key=AIzaSyBQp3qQII_6clnZqCPts3TZTkE-aNQYOMw',])

    //var cond2images = API.shuffle([]);

    var backgroundImage = dummy === 'cond1' ? cond1images[0] : cond2images[0];

    var params = {dummyCond:dummy, backgroundImage:backgroundImage}; 

    

    //The variables shared by all tasks

    API.addGlobal({

        //baseURL: 'https://maps.googleapis.com/maps/api/streetview?',

        baseURL: '/implicit/user/heidiv/places_iat_fixed/images/',

        mins: '9', 

        cat1: 'Black', 

        cat2: 'White',

        backgroundImage: backgroundImage,

        BlackStim : API.shuffle([

               'aaB1.jpg',

               'aaB2.jpg',

               'aaB3.jpg',

               'aaB4.jpg',

               'aaB5.jpg',

               'aaB6.jpg' ]),

        WhiteStim : API.shuffle([

               'aaW1.jpg',

               'aaW2.jpg',

               'aaW3.jpg',

               'aaW4.jpg',

               'aaW5.jpg',

               'aaW6.jpg'

        ])

        //BlackStim: BlackStim, 

        //WhiteStim: WhiteStim 

    });

    

    var preload = [];

    var iImage;

    for (iImage=1; iImage<=200; iImage++)

    {

        preload.push(global.baseURL + 'pic' + iImage + '.jpg');

    }   

    API.addSettings('preloadImages', preload);

[Andrew Dzik]

Hey Heidi,

I think the problem is you forgot the trailing / in your baseUrl.  See if that fixes it

 baseURL: '/implicit/user/awinegar/trans_bias_ma/images',

needs to be

 baseURL: '/implicit/user/awinegar/trans_bias_ma/images/',

Andy Dzikiewicz

--
You received this message because you are subscribed to the Google Groups "Minno.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to minnojs+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/minnojs/DS0PR11MB7926AAF6AF8FE4EA2AC2DC72EABC2%40DS0PR11MB7926.namprd11.prod.outlook.com.

[Heidi Vuletich]

Hi Andy,

Thank you so much! That fixed it. The hours we spent trying to figure this one out 😭

---

From: Andrew Dzik <andy...@gmail.com>
Sent: Thursday, April 17, 2025 10:14 AM
To: Heidi Vuletich <Heidi.V...@du.edu>
Cc: min...@googlegroups.com <min...@googlegroups.com>
Subject: [EXTERNAL] Re: [Minno.js] Photos not loading

 

[External Email From]: andy...@gmail.com

[Andrew Dzik]

Next time you run into a problem with images appearing you should be able to open the browser console and check the URL that the images are loading from (you might need the network tab open when you get to the page that uses the images).  You can check that the image url actually loads an image if you go to it directly.  So for instance you see https://app-prod-03.implicit.harvard.edu/implicit/user/andy/contract.msu.4iat/images/wf00004.png and then plug that into your browser.  In your case it would have been something like https://app-prod-03.implicit.harvard.edu/implicit/user/andy/contract.msu.4iat/imageswf00004.png which would give an error.  In the dashboard you can copy the url of the image to compare to the one appearing in your browser and compare them to see where the problem is.