Experiment terminates right after the start

Online experiments
1

Dear all,

I am in the process of porting my experiment to Pavlovia. As expected, it does not work right out of the box :wink: So I decided to build my experiment anew from the bottom up and to check if the “easy” things might work.

So, I have created a single routine where I simply want to present the consent sheet (and some additional stuff as well). The consent sheet is a png file which I present in an image component.

When I start the experiment, I can very briefly see the consent image but instead of waiting for the right key press, the experiment terminates immediately and a window pops up that allows me to download the “data” of this very short session. I suspect that specifying “$consent_key.status==FINISHED” in the Basic tab of the image component does is not translated properly to JS, right? How can I fix this?

Also, I am getting lots of warnings of this sort:
“WebGL context was lost.”
“setting the mask of… with argument: undefined” and
“setting the value of attribute… as undefined”

However, I tried manually specifying the arguments that JS complained were “undefined” and I can see those changes in the *.js file in my repo but JS somehow does not recognize this, it seems.

  1. Why does my experiment terminate right after the beginning?
  2. Could the “undefined” warnings have something to do with this?
  3. How can I change the “undefined” arguments to something that JS will not complain about?

My problem is somewhat similar to what has been described here Unable to run experiment on pavlovia - "Warning setting value of attribute"

… and I am aware of the crib sheet PsychoPy Python to Javascript crib sheet 2021 - Google Docs

What could be the problem?

Cheers,
Michael

2

Dear Michael,

does your experiment run locally without problems and as expected? I would avoid to edit the JS manually. Changes will probably lost over the various iterations in experiment development. The fact that your changes were ignored might be due to reading the old version from the browser cache.

You need to provide more information, e.g. how do show the consent form, why and where do you use $consent_key.status == FINISHED?

Best wishes Jens

3

Dear Jens,

Thanks very much for your reply. Yes, the whole experiment runs without problems locally.

I also feel a little uneasy about manually editing the JS code. I was almost sure that the auto-translation would not possibly be able to translate all of the code from Python to JS. But if this is not the PsychoPy approved way of doing things, I will gladly refrain from getting my hands dirty with JS :slight_smile: (which I do not really understand well anyway.) I’m assuming that I can recover a pristine version of my JS code using the “Compile to JS script” button in the Builder.

My workflow looks like this: I edit the experiment locally in the Builder, I sync everything with the remote repo, I reload the page of my project, hit the “Pilot” button, look what happens and then assess “the damage” using the Developer Tools in Firefox (i.e., Ctrl+Alt+I). And based on that output, I directly changed the JS file and sync again…

Assuming that just refreshing the experiment web page might not be enough, I also just tried clearing the whole browser cache in Firefox. Same difference.

I entered $consent_key.status==FINISHED in the “Stop / condition” box under the Basic tabs of the image component that is supposed to show the consent form. “consent_key” refers to a keyboard component that should detect whether or not the participant has pressed the right key to indicate their consent.

See below a screen shot of the “experiment”.

  1. An image presenting the consent form stored in a png file.
  2. Keyboard component to detect whether the participant consent
  3. Keyboard component to scroll across consent form using up and down arrow keys
  4. Text box where instructions will appear telling participant what they are reading and how they can scroll (text added in point 11).
  5. Mouse component that can also be used for scrolling
  6. Image with png file of the German flag to switch between languages
  7. Image with png file of the British flag
  8. Polygon in which the German flag should appear and where mouse clicks will be detected.
  9. Polygon in which the British flag should appear and where mouse clicks will be detected
  10. Some code that adjusts the y position of the consent form based on participant’s scrolling and that updates text and consent form based on language settings.
  11. The explanation of what this consent form is all about and how to scroll.

Screenshot from 2022-02-02 10-58-25
Screenshot from 2022-02-02 10-58-251255×1003 62.4 KB

I could also share the experiment if that helps. I am not entirely sure exactly which URL would need to be shared. And I think I might have to switch my experiment status from “Pilot” to “Running”, I presume?

Thanks & best,
Michael

4

Hello Michael,

well, that is a lot for a routine. I usually have one “major thing” per routine, so consent is one routine, language selection another aso. Condition as a stop for a component are usually the duration a of a stimulus. I haven’t used conditions to stop displaying an image.

If you split up routine into several routines, you could use the key-component to finish the routine. This might make things easier.

If you want to share the experiment, either make to git-repository public or add a specific person to the repository or make a toy-version of your experiment and post it here.

Best wishes Jens

5

Ah, thanks very much! I might be getting somewhere… :slight_smile:

I replaced all definitions of when each component should stop to “duration (s)” and left that field blank. Now I have only enabled the “force end routine” option in the keyboard component that detects whether the participant has indicated content. And this is just one particular key. So that should work.

Unfortunately, the images cannot be read properly in JS. For instance, in the initialization step of the component for the consent sheet, the image argument now read “undefined”. Why is that? I have clear the browser cache, so that cannot be the problem. (The fact that it says “undefined” suggests anyways that the problem is in the JS code, not the browser cache.) I have added the stimulus files manually to the “Additional Resources” section of the “Online” tab in the experiment settings. I can see them in my repo just fine! The file names are also visible in the JS code in the psychoJS.start object/call/whatever…

The files are stored in a separate sub-folder of my project called stimuli. Is this problematic?

To sum up: the timing looks fine now. Just the pretty images are missing.

Cheers,
Michael

6

Please could you show the exact text of your error message?

What version of PsychoPy are you using?

7

Hi

The Console in the Developer Tools says:

WebGL context was lost. isWebGLSupported.ts:44:36
WARN 12:44:38.439 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the image of ImageStim: consent_sheet with argument: undefined. log4javascript.js:148:83
WARN 12:44:38.440 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: image in PsychObject: consent_sheet as: undefined log4javascript.js:148:83
WARN 12:44:38.440 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the mask of ImageStim: consent_sheet with argument: undefined. log4javascript.js:148:83
WARN 12:44:38.440 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: mask in PsychObject: consent_sheet as: undefined log4javascript.js:148:83
WARN 12:44:38.442 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: size in PsychObject: read_consent_sheet as: undefined log4javascript.js:148:83
WARN 12:44:38.445 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the mask of ImageStim: adenauer with argument: undefined. log4javascript.js:148:83
WARN 12:44:38.445 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: mask in PsychObject: adenauer as: undefined log4javascript.js:148:83
WARN 12:44:38.446 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the mask of ImageStim: union_jack with argument: undefined. log4javascript.js:148:83
WARN 12:44:38.446 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: mask in PsychObject: union_jack as: undefined log4javascript.js:148:83
WARN 12:44:38.447 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: size in PsychObject: german_switch as: undefined log4javascript.js:148:83
WARN 12:44:38.449 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: size in PsychObject: english_switch as: undefined log4javascript.js:148:83
WARN 12:44:38.450 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | setting the value of attribute: size in PsychObject: read_instructions as: undefined log4javascript.js:148:83
WARN 12:44:38.457 node_modules/log4javascript/log4javascript.js/</PatternLayout.prototype.format psychojs-2021.2.3.js:7 | the Pixi.js representation of this stimulus is undefined. log4javascript.js:148:83
WebGL context was lost.

I’m using PsychoPy 2021.2.3 in a virtual environment on Ubuntu 20.04 LTS

8

Do you have anything in the Mask fields of your images? I think it should be blank.

9

I did put “None” into the mask field of the consent image. I have removed it but it still does not show up on screen. It looks as follows in JS:

consent_sheet = new visual.ImageStim({
    win : psychoJS.window,
    name : 'consent_sheet', units : 'height', 
    image : undefined, mask : undefined,
    ori : 0.0, pos : [0, (((- 0.5) * (2.52 - 1)) - 0.1)], size : [1, 2.52],
    color : new util.Color([1, 1, 1]), opacity : 1.0,
    flipHoriz : false, flipVert : false,
    texRes : 128.0, interpolate : true, depth : 0.0 
  });

It is interesting though that in the corresponding definitions of the two flags, the correct file locations are specified:

adenauer = new visual.ImageStim({
    win : psychoJS.window,
    name : 'adenauer', units : undefined, 
    image : 'stimuli/bundesflagge.png', mask : undefined,
    ori : 0.0, pos : [(- 0.55), 0.45], size : [0.05, 0.025],
    color : new util.Color([1, 1, 1]), opacity : undefined,
    flipHoriz : false, flipVert : false,
    texRes : 128.0, interpolate : true, depth : -5.0 
  });
  union_jack = new visual.ImageStim({
    win : psychoJS.window,
    name : 'union_jack', units : undefined, 
    image : 'stimuli/union_jack.png', mask : undefined,
    ori : 0.0, pos : [(- 0.49), 0.45], size : [0.05, 0.025],
    color : new util.Color([1, 1, 1]), opacity : undefined,
    flipHoriz : false, flipVert : false,
    texRes : 128.0, interpolate : true, depth : -6.0 
  });

I can’t see them right now, however, because I do not know how to make the clickable polygons that I have to place in the same locations transparent. I set the opacity argument to 0 but that does not seem to do the trick.

german_switch = new visual.Rect ({
    win: psychoJS.window, name: 'german_switch', 
    width: [0.05, 0.025][0], height: [0.05, 0.025][1],
    ori: 0.0, pos: [(- 0.55), 0.45],
    lineWidth: 1.0, lineColor: new util.Color(undefined),
    fillColor: new util.Color(undefined),
    opacity: 0.0, depth: -7, interpolate: true,
  });
  
  english_switch = new visual.Rect ({
    win: psychoJS.window, name: 'english_switch', 
    width: [0.05, 0.025][0], height: [0.05, 0.025][1],
    ori: 0.0, pos: [(- 0.49), 0.45],
    lineWidth: 1.0, lineColor: new util.Color(undefined),
    fillColor: new util.Color(undefined),
    opacity: 0.0, depth: -8, interpolate: true,
  });