Image doesn't appear on Pavlovia when image name is code-generated

[hellenjingyuan]

URL of experiment: https://run.pavlovia.org/hellenjingyuan/plw_development_04/html/?__pilotToken=9bf31c7ff062936a96d3c8bd1f8f2ff3&__oauthToken=c82cee331f74a4e143dd61f501df51a300a46d5cf65d075ce792a5e5be7f0bf2

Description of the problem:
OS: Windows 10
PsychoPy version: v2020.1.3
Standard Standalone? If not then what?: Not sure

Problem summary: When an image name is a variable generated in previous code components, the image is not presented (doesn’t appear) when running in Pavlovia, but it works fine when running locally.

What are you trying to achieve?:
I have 60 images in the resources folder. The image names are listed in a CSV file. I want to use code components to determine which image to present in a particular routine.

I first loaded the image names from the CSV file using this JS code:

Then I reordered the images and created a variable “lastFrame” which should contain the name of the image to be presented

I used “$lastFrame” as the image name in an image component

When I run the experiment locally, this presents the desired image. But when pushed to Pavlovia, the image does not appear. There is also no error message popping up or in the browser developer tools console.

What did you try to make it work?:

If I explicitly define the variable “lastFrame” as
lastFrame = "plw_collinear_images/plw_collinear_01.png", then the appriopriate image is presented on Pavlovia. I don’t know what’s different in the “lastFrame” variable when it’s generated from the code in the previous screenshots. So to check what’s in the variable when it’s generated by my code (not directly defined as the path to an image), I added a text component to print out the “lastFrame” variable at the same time as the image (like this)

This printed the name of the desired image when running locally. But when running on Pavlovia, it printed “Hello World” on the screen. I have no idea where that came from…

Please help me… Thank you so much for your time!

[wakecarter]

You have lastFrame set to constant. Try Each Repeat.

Also Hello World might be telling you that PsychoPy is already using that variable name. Try changing it to finalFrame

[hellenjingyuan]

Thank you @wakecarter! I changed the variable name to “finalFrame”, but it still printed “Hello World” on Pavlovia.

I then changed the text component from Constant to Set Every Repeat, now the text component doesn’t show up at all (like the image component).

Following both changes above, the stimulus presentation was normal and unchanged when running locally.

[wakecarter]

Does the code component come above the text component so it gets executed first?

[hellenjingyuan]

The code components are actually in a different routine.

The code components are in routine “stimLocIndication”. The image and text components are in “responsePeriod”.

[wakecarter]

Have you used my append=push definition in code_JS as per my crib sheet?

[hellenjingyuan]

Yes. I have this JS code component in the instructions rountine

[wakecarter]

My notes on the import conditions are:
Python

myData = data.TrialHandler(nReps=1, method='sequential', extraInfo=expInfo, originPath=-1, trialList=data.importConditions('conditions.xlsx'), seed=None, name='myData')

Access individual values using: aValue = myData.trialList[Idx]['variableName']  

JS

myData = new TrialHandler({
psychoJS: psychoJS,
nReps: 1, method: TrialHandler.Method.SEQUENTIAL,
extraInfo: expInfo, originPath: undefined,
trialList: 'conditions.xlsx',
seed: undefined, name: 'myData'});

I think I tried and failed to use a csv file so it might be worth trying an xlsx file. Can you spot any other differences between your import code and mine?

[hellenjingyuan]

I copied your code in the first place Just tried using .xlsx file, made no difference.

[wakecarter]

Have you tried console.log?

I’m wondering if there’s an issue with one of your variables in your Excel. Maybe you’re using a protected name

[hellenjingyuan]

I added a JS code component with console.log(finalFrame) below the code component that created the variable “finalFrame”, and another identical JS code component under the text component. Both returned “undefined” in the browswer’s console. [Making progress!!]

[wakecarter]

In that case work the variable backwards. Is reordered correctly defined?

[hellenjingyuan]

Hi @wakecarter! I printed out variables “newOrder”, “reordered” and “imageNamesRel” in the browser console.

I also printed reordered[0]['collinearImages'], which also says “undefined”

Any idea? Many thanks!

[hellenjingyuan]

I think I figured it out. The problem is with the code that created my “newOrder” variable.

How I initially did it is like this (it resulted in “newOrder” to be undefined when running on Pavlovia)

How I fixed it is by replacing the code above with this

Now the desired images are presented on Pavlovia. There are still other glitches and the experiment crashes at the end, but these are probably unrelated to the problem of this thread

[wakecarter]

Cool. I should have spotted that, since I already knew you couldn’t use multiplication to create bigger arrays. I’ve added it to my crib sheet.