Mouse.clicked_image not saved in online study

URL of experiment: https://pavlovia.org/run/SeoheeHan/statab2020/html/

Description of the problem:
Hello,
I want to save the image file name of the mouse-clicked image in my csv data file, so I added ‘image’ in the ‘store params for clicked’ box of the mouse properties. However, I am cannot save the variables ‘T1_mouse.clicked_image’ and ‘T2_mouse.clicked_image’ when running my experiment online. There are columns of that variable but nothing is saved on those columns.
I don’t have problems saving those variables when I run it offline.

Thank you!

Hi @osooni2,

Thanks for the heads-up! I’ll go make a little test for this feature and pitch it with the PsychoJS devs. Meanwhile I’ve got an (admittedly not too elegant) workaround for you. Via mouse.isPressedIn(...) you could check which stimulus was clicked by the mouse and so log it into your data. See this demo: Thomas Pronk / demo_buttons · GitLab

Best, Thomas

Thank you for your reply!
I have tried mouse.isPressedIn as your recommendation.

I wrote the following lines and Auto changed to JS code

ImgList = [T1_image, T1_image_2, T1_image_3, T1_image_4, T1_image_5, T1_image_6, T1_image_7, T1_image_8, T1_image_9, T1_image_10, T1_image_11, T1_image_12]
for clicked in ImgList:
    if T1_mouse.isPressedIn(clicked):
        T1_clicked = clicked.image
thisExp.addData('T1_clicked', T1_clicked)

However, the same error appeared again even with mouse.isPressedIn. I cannot store the image variables of image stimuli (e.g., T2_image.image). It works well when I run it offline but it doesn’t work only when I run it online.
I think the error occurs generally when you are trying to get an ‘image’ variable of an image component. Would there be any other way to store the image file name of a clicked image stimulus?

I’m re-attaching the URL of my experiment!
https://gitlab.pavlovia.org/SeoheeHan/statab2020/tree/master/html

With an error, do you mean that the CSV file does not contain the data you’d like in there?

Yes! The image file name of the image stimulus doesn’t get stored in the CSV file.

The code you posted looks legit, but apparently something goes wrong somewhere. I’ve got two pointers for you:

1)To test whether storing anything via thisExp.addData is going right, try to store some random string, like this:

thisExp.addData('T1_clicked', 'does_this_get_stored')

2)To test whether your algorithm works, try adding a whole bunch of debug code via print statements, which should be auto-translated to console.log. See this tutorial for an explanation: https://run.pavlovia.org/tpronk/tutorial_js_console_log

Thank you for your reply!

  1. Yes, I checked thisExp.addData works fine.
  2. To test, I added an image component(e.g., TESTimage) with a designated image file (e.g., resources/tar01.png) and used a text component to show it on the screen ($TESTimage.image). This is what I got.
    Screenshot 2021-04-27 at 11.45.26 PM
    I don’t think it’s the case that the variable is there but not able to store it in the CSV file.
    It seems like when running online, you cannot get the variable ‘ImageName.image’ at all.

Don’t use image as a variable name.

Variable names to avoid are: core, image, index, Length, list, Object, Number, round, sound, Symbol, t, thisTrial, trials, util, visual

Sorry – I jumped on the wrong issue there.

Shouldn’t you be using T1_clicked = clicked.name ?

I want to get what image file of the image component is (e.g., imgfilename.png; which can be brought by .image in psychopy), not the name of the image component! It works in psychopy offline but not in Pavlovia.

It sounds like .name could be replaced by .getName()

However, I think that the issue may be that your stimuli aren’t all defined at the point the code tries to get their names. How are you creating them?

I have tried image.getName() and it was the same as image.name, which was the name of the image component, not the actual image file name.

T1_image.setImage(tar_images[0]);
T1_image_2.setImage(tar_images[1]);
(…and so on)

ImgList = [T1_image, T1_image_2, T1_image_3, T1_image_4, T1_image_5, T1_image_6, T1_image_7, T1_image_8, T1_image_9, T1_image_10, T1_image_11, T1_image_12];

These lines are in the JS code before the codes where I get the variable in two different ways, which are

    for (var clicked, _pj_c = 0, _pj_a = ImgList, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
        clicked = _pj_a[_pj_c];
        if (T1_mouse.isPressedIn(clicked)) {
            T1_clicked = clicked.getName();
        }
    }
          for (const obj of [T1_image, T1_image_2, T1_image_3, T1_image_4, T1_image_5, T1_image_6, T1_image_7, T1_image_8, T1_image_9, T1_image_10, T1_image_11, T1_image_12]) {
            if (obj.contains(T1_mouse)) {
              gotValidClick = true;
              T1_mouse.clicked_name.push(obj.name)
              T1_mouse.clicked_image.push(obj.image)
            }
          }

In this second one, getting obj.name works fine, only obj.image doesn’t work.

I think you can’t get the filename of an image from within PsychoJS. To examine this I started this experiment: Thomas Pronk / tutorial_js_expose_psychojs · GitLab

Then I opened the console and typed in my_image, so that I could inspect all of the properties of an ImageStim