psychopy.org | Reference | Downloads | Github

Hints for those working with the "proof of concept" code

As noted here, the online experiment code is very pre-production and a commercial company has taken on the job. We’re several months out it seems. If you’re diving in though, as I am, a few hints.

  • Your browser’s JavaScript console is your friend. In Safari, enable the developer menu and then just turn on the JavaScript console. In Chrome it’s View, Developer, JavaScript console
  • The generated JavaScript will be buggy. I don’t know JavaScript, but I’ve been programming for ages which has helped spot things. So for example, my generated code had this:
          if (key_resp_2.status === psychoJS.STARTED && t >= frameRemains) {
            key_resp_2.status = psychoJS.STOPPED;
          if (key_resp_2.status == psychoJS.STARTED) {

instead of

          if (key_resp_2.status === psychoJS.STARTED && t >= frameRemains) {
            key_resp_2.status = psychoJS.STOPPED;
          }
          if (key_resp_2.status == psychoJS.STARTED) {

Note the missing “}”. Given the correct indentation of the code, I could see where the closing brace should be even if I wasn’t able to parse the logic. Here, though, the logic is pretty clear – it’s trying to catch an odd case of being beyond the time limit. Odds are we just want to set that status to be STOPPED and not to have the next 30 lines of code be run (where the curly end of brace closes the whole function). So a bit of detective debugging, but you’re not writing the code from scratch.

  • You’ll have some missing files. I was missing seedrandom.min.js and pixi.min.js.map from the js/vendors folder. The console told me what I was missing, so I found them online and put them in the directory. No rocket science there.
  • Build your code up piece by piece. Getting something to work and then being able to look at a diff between what’s working and what’s not was a big help

In the end, though, I have something that’s mostly working. I’m showing images and I’m logging responses. As I need several variants of this, I’m going to now edit the .html code to make the tweaks rather than have PsychoPy try to regenerate each variant. I’ve also got a few things like image sizes / aspect ratios to work out, but again – I’ll do that outside of things rather than try to have the pre-alpha code handle it correctly. But, I may just be able to run an experiment online!

Craig

1 Like

Hi Craig,

Thank you for sharing this information. I am now about to turn my original python code to JS in order to run an online experiment. I am doing so in the code components I created using the psychopy builder.

Do you have any tips on how to correctly export the data using JS, in python it was ‘thisExp.addData(‘nameVar’, var)’ . Additionally, how do I add the missing files to the directory?

-Daniela