An odd disconnect between code on computer and on cognition.run

[ricardojromeu]

Hello all,

I have an odd problem trying to run my experiment on cognition.run. About a week ago, I could run the entire experiment just fine on it. But, all of a sudden, the experiment becomes unresponsive when it enters on of the conditions. This did not happen before, and worse, when I try running the exact same code on my computer locally, the experiment works as intended.

Originally, I tried to calculate percent correct in the task to display to the participant at the end. The original way I tried doing this did not work, so I tried fixing it. (It seems like) After the attempted fix, I started running into this problem of stopping at the start of one of my conditions. So, naturally, I thought maybe I did something wrong in my attempt to fix the percent correct problem. But even when I took that part of the code out, I still ran into the same problem. In other words, even when I had my code as it was a couple weeks ago, I still get the problem and I'm not sure why. (And again, this problem doesn't happen when I run the html file on my computer.)

There are 2 conditions in my experiment: A Beliefs Questionnaire and the "Beads and Survey" portion of the experiment. When the experiment starts with the Beads and Survey, it shows the first introduction slide and then does not respond (i.e., pressing any key does not advance the slides as it should). I can't for the life of me figure out what's going wrong.
Here's the link to the experiment as of March 1st 2021: https://zg7fwrtokt.cognition.run

Of course, any help would be greatly appreciated.

[becky-gilbert]

Hi @ricardojromeu, I can see that you're getting a console error on the welcome page that you mentioned.

The error is happening in the image-keyboard-response plugin below, because the display_element.querySelector('#jspsych-image-keyboard-response-stimulus') is returning undefined.

jsPsych/plugins/jspsych-image-keyboard-response.js

Line 222 in bf9dec2

display_element.querySelector('#jspsych-image-keyboard-response-stimulus').className += ' responded';

I'm not sure why you're getting this error, because I can see that you have a canvas element on the page with that ID.
A few things you can try:

• download a copy of the image-keyboard-response plugin and remove that line, then upload your modified plugin file to cognition.run
• set render_on_canvas: false in the trial that produces the error, which I think is this one?

var welcome_to_exp = {
    type: 'image-keyboard-response',
    stimulus: jar_img_path,
    prompt: welcome
};

[ricardojromeu]

Hi @becky-gilbert ,

Thanks for your help.

I first tried setting render_on_canvas: false. I could continue in the experiment but it didn't display the images I wanted.

So instead I uploaded the version of image-keyboard-response I have and it started to work again. I could continue with the experiment. But originally, I showed the image on two welcome screens, now it'll only show on the second. This isn't a terrible problem (I can live with it), but I'm not sure what's going wrong with the first welcome slide with the image (the timeline variables "welcome_to_exp" and "welcome_to_exp_s").

Okay, so far, what seemed to work is to change the settings to use jsPsych version 6.3.0, then I uploaded all the plugins that I needed, i.e. the versions I was using on my computer. This still causes one of the welcome pages to not show the images, but like I said, this isn't the end of the world. I'm just glad this is working again haha!

I'm also curious as to how you could see the error messages on cognition.run, since I can't find out how to myself.

Thanks again for your help :)

[becky-gilbert]

But originally, I showed the image on two welcome screens, now it'll only show on the second.

One problem might be that your images aren't preloaded. With jsPsych v6.3.0, preloading is done through a new preload plugin, instead of through jsPsych.init. But I think the preload plugin might not be available on cognition.run right now - see this comment for a work-around.

Okay, so far, what seemed to work is to change the settings to use jsPsych version 6.3.0, then I uploaded all the plugins that I needed, i.e. the versions I was using on my computer.

Glad to hear this worked! But which jsPsych version are you using on your computer - 6.3.0 or a different one? I ask because if you're using v6.3.0 on cognition.run and then you upload plugins that were made for an earlier version of jsPsych, then that might cause compatibility problems. But if you tested it and everything's working, then great! 👍

I'm also curious as to how you could see the error messages on cognition.run, since I can't find out how to myself.

After clicking on your cognition.run experiment, I opened my browser's developer tools, then looked at the console tab.

I'm still confused about why you were getting the "cannot read "className" of null" error... If you want to, you could create a minimal reproducible example (e.g. an "experiment" that just contains the one trial that produces this error) and put it in a Github issue, and we'll investigate it further.

[ricardojromeu]

Thanks! Using the preload plugin worked like a charm. Now all the images are showing up just fine and the experiment is running as intended again (can't thank you enough for this!).

One note I'd like to make: when I didn't use the preload plugin, not only did some images in the beginning not show, but the ones that would show later in the experiment had a bad latency, showing up on screen up to half a second after the start of the trial. But, like I said, the preload plugin eliminated all these problems.

Thanks for the tip on the developer tools - I hadn't thought of such a simple thing haha!

And sure, I'll try to recreate the problem and post it to the issues tab.