Unable to retrieve image when image name is code generated

URL of experiment:

Description of the problem:
I am programming a Dot Probe Task, using JS code to randomize the image file name for my image stimulus components “positiveimage” and “negaltimage” . Yet, I keep encountering the same error (see screenshot).


I don’t think there’s a problem with the image file being uploaded, as the programme ran perfectly when I input the file name “images/test_p2.jpeg” directly instead of the variable that is set every repeat. Yet, the error message said that I couldn’t retrieve the value images/test_p2.jpeg when I use my JS randomization code.

Hence, I suspect it could be an issue of the JS code producing a string e.g. “images/test_p2.jpeg” instead of a file path images/test_p2.jpeg.



In case you’re wondering why I don’t just use a conditions Excel file for the image names, it’s because I’m randomizing multiple variables of this experiment – image file, image stimulus position (left/right), probe position (left/right), probe symbol (up/down arrow) – and i won’t be fully counterbalancing all conditions, so I can’t list out all the trials in conditions file. I only input the conditions that I am fully counterbalancing in the conditions file.

Note: this topic title is similar to this, but their solution isn’t relevant for me: Image doesn't appear on Pavlovia when image name is code-generated

You need to either attach all the possible images via Experiment Resources / Online or use code to attach the ones you need.

Hi, thanks for the quick reply. The resources seem to be uploaded to the Pavlovia server already though. My programme runs perfectly when I type the file path “images/test_p2.jpeg” directly instead of the variable $positive[snapshot.thisN]

Is it necessary to add this code for downloading resources? If so, which portion of the code from here should I add?

Uploaded to the server is different from made available to the experiment during the run.

The code to do this is:

psychoJS.serverManager.prepareResources([
        {
          'name': fileName,
          'path': folderName+'/'+fileName,
          'download': true
        }
    ]);

You can create a list of these dictionaries (using append/push) and give them to prepareResources in a single step.

1 Like

Hi @wakecarter sorry I’m pretty new to Javascript and Pavlovia. Could you help me with my code?

If the participant ID is “test”, and I want to make available these 24 files:
“images/test_p1.jpeg”, …, “images/test_p8.jpeg”,
“images/test_n1.jpeg”, …, “images/test_n8.jpeg”,
“images/a1.jpeg”, …, “images/a8.jpeg”,

How should I write the code for the “each frame” tab? I’ve written a draft below but it doesn’t work, hope you can help me with it:

// fetch the selection - this could be the participant ID
selection = expInfo['participant'];//'cute_sloth';
    
// info on the folder name where the resources are stored and the extension
ext = '.jpeg';
directory = 'images/';
    
selectedResource = selection + ext;
psychoJS.serverManager.prepareResources([
        {
          'name': selectedResource,
          'path': directory + selectedResource,
          'download': true
        }
]);

for (var i = 1; i <= 8; i++) {
    psychoJS.serverManager.prepareResources.push('images/' + selection +'_p'+ i + '.jpeg'); //  e.g. 'images/test_p1.jpeg' 
    psychoJS.serverManager.prepareResources.push('images/' + selection +'_n'+ i + '.jpeg'); //  e.g. 'images/test_n1.jpeg' 
    psychoJS.serverManager.prepareResources.push('images/a' + i + '.jpeg'); // e.g. 'images/a1.jpeg' 
}

Begin Experiment

// fetch the selection - this could be the participant ID
selection = expInfo['participant'];//'cute_sloth';
    
// info on the folder name where the resources are stored and the extension
ext = '.jpeg';
directory = 'images/';
    
selectedResources = [];

for (var i = 1; i <= 8; i++) {
    selectedResources.push({name: selection +'_p'+ i + '.jpeg', path: 'images/' + selection +'_p'+ i + '.jpeg'}); //  e.g. 'images/test_p1.jpeg' 
    selectedResources.push({name: selection +'_p'+ i + '.jpeg', path: 'images/' + selection +'_n'+ i + '.jpeg'}); //  e.g. 'images/test_n1.jpeg' 
    selectedResources.push({name: 'a'+ i + '.jpeg', path: 'images/a'+ i + '.jpeg'}); //  e.g. 'images/a1.jpeg' 
}

psychoJS.serverManager.prepareResources(selectedResources);

I wouldn’t worry about the each frame test yet. The resources should download while the participant is reading the instructions.

1 Like

Sorry for the delay in reply. Thanks so much for your help! I used the more manual method of adding my image resources via the Experiment Settings > Online instead, and it worked :slight_smile:

I referred to this Keep getting unknown resource errors - #9 by Becca