| Reference | Downloads | Github

Present a certain image based on participant's response


I have a set of images, each image corresponds to a particular participant ID. I want my participants to insert their ID and next I want a certain (one) image to appear. I have a list of ID’s and images which correspond to them. Do you have an advice on how I can do that?

I have a code snippet in the linked document where I download images of the participant based on their participant number

Thank you, I found that code!
Begin Routine (in code_JS)


{ name: (expInfo[“participant”] + “s.jpg”), path: ("/faces/" + expInfo[“participant”] + “s.jpg”) },

{ name: (expInfo[“participant”] + “.jpg”), path: ("/faces/" + expInfo[“participant”] + “.jpg”) }


I’ll be very thankful if you could advise how the image should be named in the image properties. Since they all have different names (ID’s are embedded in them)

They should be named as the name you use to download them in the code.

Sorry, I am not sure I understand that JS code.
/faces/ - is the name of the folder which contains the images?
and “$name” should be the image name?

My images were called 1.jpg and 1s.jpg for participant 1 (and were in the faces folder)

great, thank you! and how did you name the image in the image properties?

$expInfo['participant'] + ".jpg"

Thanks so much!
The experiment is launching, it registers participant’s name as I type (e.g., Greg). The image is named Greg.jpg and stored in the folder “faces”. I also added all images in the Experiment settings, Additional resources. However, I get this error:

I think that error is because you are trying to download the face image twice, once via additional resources and once on the fly using my code. Unless the image is shown on the first screen then you should have time for it to download before needed and avoid having to download everyone else’s faces too.

Thank you, the image is not displayed on the first screen.
When I delete the my images from the Additional resources, I get the same error.
When I delete your code, I get this error:

Maybe there’s an issue with the path in this code.

If your experiment is running in an html folder and your faces are in a separate faces folder try

{ name: "Greg.jpg"), path: ("../faces/Greg.jpg") }

If your experiment is running in the main folder and your faces are in a separate faces folder try

{ name: "Greg.jpg"), path: ("faces/Greg.jpg") }

In both cases just use the filename in the experiment. You could also check the console log to see if the file has downloaded correctly.

Make sure that Greg.jpg isn’t loaded in Begin Experiment and there’s a delay of at least a few seconds before the routine where it gets displayed starts.

Thank you very much for your help!

The faces folder is located in the main experiment folder.
This code is not even allowing me to load the experiment:

{ name: “Greg.jpg”), path: ("…/faces/Greg.jpg") }

And this one shows the same error loading file:

{ name: (expInfo[“participant”] + “.jpg”), path: ("…faces/" + expInfo[“participant”] + “.jpg”) },

If there is a demo of an experiment which uses this code, I’ll be very thankful to access it

You’ve put …/ instead of…/

Do you mean …/faces instead of …/faces? It isn’t working either way, unfortunately…

We seem to both be having issues with numbers of dots.

One dot means same folder

Two dots means parent folder

You need to work out the location of the image files relative to the index.html file

I tried all possible configurations of this code, and it always failed to load the resources. It looks like it fails to explain where the images are located. So I saved my images in the main experiment folder instead of the faces folder inside the main experiment folder. And it worked locally on my laptop, but not online. Next I deleted the code component completely and inserted the images manually in the Experiment settings (Additional resources). This solved the problem and I can now run the study online. The only issue is that without the code, I have to insert all my images manually and I have a lot of images (100 approx).

Is your main issue that each participant is going to have to wait for 99 irrelevant images to be downloaded, or that you aren’t able to dynamically pick the correct image at the point it’s needed. If it’s the latter then you should still be able to use expInfo to pick the image.

What version of PsychoPy are you using? If it’s 2020.2.10 then it wouldn’t take me long to fix both issues for you.

Thanks a lot! Can I share the experiment with you?

My issue is that I won’t be able to dynamically pick the correct image at the point it’s needed, yep. I am using the 2021.1.2

Sure I should be able to take a look if you add me as a developer.