psychopy.org | Reference | Downloads | Github

Two questions: (1) steps for generating the online version of my task (2) JS code

URL of experiment: I was not able to generate an URL

Description of the problem:

Hello!

I have two major problems with an online experiment.
(1) Based on the description (https://www.psychopy.org/online/fromBuilder.html#onlineexporthtml) I tried to generate HTML files. When I clicked on File>Export HTML nothing happened (no window popped up etc.). I was logged in to Pavlovia. When I clicked on the web run button and sync button also nothing happened. When I switched to Pavlovia I saw that my project was generated. When I tried to launch the experiment the message ‘403 forbitten’ appeared.
Prerequisite that my second problem can be solved it would be great to have a more detailed (beginners) step by step guide how I can transform my PsychoPy task into an online version.

(2) When I searched for a solution to this problem I mentioned above I came across a post
where an important note was mentioned namely that when you have a code component in your experiment it is necessary to translate it into a JavaScript (JS) code. Therefore, my second problem is how I can translate the PsychoPy code into JS code and I wanted to ask whether someone could help me generating the correct JS code:

PsychoPy code:
if mouse_3.isPressedIn®:
if R == eval(MathCorr):
msg = ‘Correct!’
thisExp.addData(‘Mathscore’, int(R == eval(MathCorr)))

if mouse_3.isPressedIn(F) == False and mouse_3.isPressedIn® == False:
msg = ‘Wrong! Click buttons more exactly’
thisExp.addData(‘Mathscore’, int(F == eval(MathCorr)))

What I have tried so far:
if (mouse_3.isPressedIn®) {
if (“R” ==eval(MathCorr) {
msg = ‘Correct!’
…?

if (mouse_3.isPressedIn(F) == false && mouse_3.isPressedIn® == false) {
msg = ‘Wrong! Click buttons more exactly’
…?

Thank you very much for any help!
Best
M

Hi @M11, if the code is not being output correctly, it means there is some issue stopping the code from being compiled. The translations above would be made easier if you surround your code in backticks (```). Try:

msg = '';
if (mouse.getPressed()[0] === 1) { // If left mouse button pressed 
  clickable = [R, F];  // clickable stim
  for (const obj of clickable) {  // for each clickable stim, check if it contains the mouse
    if (obj.contains(mouse)) {
      if (obj === R && R === eval(MathCorr) ) {
         msg = "Correct";
         psychoJS.experiment.addData('MathScore', R === eval(MathCorr));
      } else if (obj === F && F === eval(MathCorr) ) {
        msg = "Wrong. Click buttons more exactly";
        psychoJS.experiment.addData('MathScore', F === eval(MathCorr));
      }
    }
  }
}
        


Hi @dvbridges, thank you very much for your great support!
I have tried to adapt your code to my full (working) psychopy code as “I understood it”, but I am not sure whether it is correct. Here is the code and below a screenshot of the PsychoPy + JS code:

msg = '';
col = '';

if (mouse.getPressed()[0] === 1) { // If left mouse button pressed 
  clickable = [R, F];  // clickable stim
  for (const obj of clickable) {  // for each clickable stim, check if it contains the mouse
    if (obj.contains(mouse)) {
      if (obj === R && R === eval(MathCorr) ) {
        msg = "Richtig!"; 
        col = 'white';
        psychoJS.experiment.addData('MathScore', R === eval(MathCorr))
      }
      if (obj === F && F === eval(MathCorr) ) {
        msg = "Richtig!";
        col = 'white';
        psychoJS.experiment.addData('MathScore', F === eval(MathCorr))
      }
      if (obj !== R && R !== eval(MathCorr) ) {
        msg = "Falsch!";
        col = 'red';
        psychoJS.experiment.addData('MathScore', R === eval(MathCorr))
      }
      if (obj !== F && F !== eval(MathCorr) ) {
        msg = "Falsch!"; 
        col = 'red';
        psychoJS.experiment.addData('MathScore', F === eval(MathCorr))
      }
    } else if (obj !== R && obj !== F) {
        msg = "Genauer klicken";
        col = 'red';
        psychoJS.experiment.addData('MathScore', F === eval(MathCorr));
      }
    }
  }

Thank you very much!