Images/text do not display correctly

Online experiments
1

URL of experiment: https://pavlovia.org/run/juliankl/audioexperiment/html/

Description of the problem: The images and text do not display correctly in the online version. I have tried using ‘norm’ and ‘height’ and it does not make a difference. The current version uses ‘use preferences’ and can be found here: https://gitlab.pavlovia.org/juliankl/audioexperiment.

Is there something I am missing in the translation to the online version, or is it simply the wrong units? The only important result is that all images and text are displayed on the same screen. Any help would be greatly appreciated.

2

@Nessimon, I think this is a problem with how the units are set up for your experiment. As you “use preferences” as your screen units in your Experiment Settings, the online experiment will default to ‘height’ units. I think you just need to change your screen units to “norm” in experiment settings, and all components which use the window units for sizing and positioning will use “norm” units.

3

Thanks, that was my guess as well, however it did not work. I’ve tried changing the units, both for the overall experiment and for each individual picture to ‘norm’, and I still get the same problem. When displaying it offline from the builder, I do not have the same problem. Am I missing something?

4

Thanks @Nessimon, can you describe what is different about the images offline and online? Is it related to proportion, size, position?

5

Yes, the online version is streched:

PNG
PNG1915×942 135 KB

While the offline version isn’t:

introA
introA1280×720 79.2 KB

6

I see, well in your initial link that is the case because the screen units are set to “height”, however, I am seeing the following when units are set to “Norm”. This screen shot was taken from Chrome. BTW, I cloned your task and uploaded to Pavlovia using version 3.0.6, but I think the units were already set to norm.

image

7

I just wanted to comment on this and bump it to the top in case anyone else is also having this issue. I use Microsoft Edge as my default brower and it was vertically stretching my instructions so that they would display off-screen. I tried changing my units to ‘norm’ as suggested in the previous comments but when I pushed this experiment to Pavlovia from PsychoPy’s Builder the units were already set to ‘norm’. I went into my .js scripts and updated my units to match. This made no difference. I then relized it may be a browser difference, and it appears that this was the reason for the display issues afterall.

8

What version of PsychoPy are you using Bianca? In general setting text to use height units is not causing problems. e.g. does the stroop task work on your Edge set up?

9

I am using PsychoPy v2020.1.3, and yes Stroop works just fine on my Edge Browser (Microsoft Edge 44.18362.449.0; Microsoft EdgeHTML 18.18362). Not sure if this is relevant but I am running .xlsx files, and I editted this after reading the documentation “Status of Online Options” Section 7.5. And also I apologize for not including this earlier…https://gitlab.pavlovia.org/biancaisla1/aprt

10

So, if Stroop works and your study doesn’t then the debugging emthod is to work through what’s different between them. As you morph a study gradually from the working stroop to your not-working study you’ll find some setting that makes the difference. The different unit options are definitely the place to start though.

It would be great to feed back here if/when you make progress. Maybe it’s somethig we can fix, or at least warn about, for future users.

11

I have made some commits to my file ‘12_APRT_20180907.js’ in the Web IDE based off of what I was seeing in the Stroop Task file ‘stroop.js’. In the Stroop Task I was able to decipher that variables are listed e.g.
var instructClock and then defined in function experimentInit() {}. Where the curly brackets are left open from lines 98-147, whereas mine are open from lines 167-688. Given the amount of variables in this task that was very difficult to ascertain at first. I inserted variables that were previously undefined in the var list and then inserted definitions like so:

function experimentInit() {
    
  // Initialize Variables
  health = 100;
  pts = 0;
  injuryProbability = 5;
  rewardProbability = 10;

  // Initialize display variables
  hlthDisplay="""Health\n   %s""" %health;
  ptsDisplay="""Points\n   %s""" %pts;
  statusDisplay = "DO IT!";
  showDeath = 0;

  // Initialize colors
  solidColor = "gray";
  stripeColor = "brown";

The problem that I’m still having is that the hlthDisplay, and ptsDisplay, are still formatted in Python and Builder could not translate them due to a syntax error:

convert
convert1604×1050 208 KB

Am I making the right changes, and how do I convert this into a JS statement that my experiment will understand?

12

Ah, OK, so you’ve got quite a bit of code in code components. Well then I wonder if one of those is the issue. The point is not particularly about using stroop or the specific code there - it’s just that you should start with something simple and get that working right then build up from there. But, also, it seems you’ve got someone nearby that has more technical skills (who wrote this code)? Maybe they could help you understand what’s going on rather than us trying to debug remotely?

The error you’ve got in the code above is because auto-translate doesn’t work yet with formatted strings (with %s). Rather than the line

hlthDisplay = """Health\n   %s""" %health

you need to write:

hlthDisplay = "Health\n   " +str(health)

and this will then auto-translate to the JavaScript:

hlthDisplay = ( "Health\n   " + health.toString());
1 Like
13

Thank you for your help @jon ! That seems to have fixed quite a few issues, and I think I’m starting to get the hang of the flow from py script to html script, especially by comparing and contrasting, as well as using the code converter in PsychoPy!

14

Glad you’re making progress! :slight_smile:

15

Hello, I am having an error that is very similar.
I’ve changed all my experimental units to height so I have the correct proportions of my image/movie stimuli irrespectively of the window size.
I have experiments that are basically the same, except in one of them I use images ( https://run.pavlovia.org/lpvolpi/3d-object-recognition-shading/html/ and https://gitlab.pavlovia.org/lpvolpi/3d-object-recognition-shading ) and in another, I use movies ( https://run.pavlovia.org/lpvolpi/3d-object-recognition-movie/html/ and https://gitlab.pavlovia.org/lpvolpi/3d-object-recognition-movie ).
Changing the units for the image experiment makes ir run well online, but not for the movies, they are stretched. Does anyone know how I can fix this? I am using Win 10, my browser is Chrome and PsychoPy version 2020.1.3 (I just updated it).

Thank you in advance for your help!