Translating PsychoPy code to Javascript & general documentation

Online experiments
1

Hi there,

I am completely new to Pavlovia and just tried running an experiment I programmed in Builder 3.1.0 online, but it fails and creates a ReferenceError. I read in a related post that this is because I need to translate code components into JavaScript.

Where can I find documentation on:

  • where I need to replace the code (in Builder or on Pavlovia / Github, for example
  • what bits need to be replaced
  • how to translate them

Many thanks for indulging my ignorance!
Marc

2

Hi @Marc_Buehner, the documentation is currently being updated. The reference error is probably because you have added some Python code in a code component, but have not translated this into JavaScript. This means that any variables created in the code component will not be carried through to the JS, and so you would get the equivalent of a Python NameError - a variable is being used that has not been defined. If you have a code component, open up the dialog and select the code type as “Both”, so you can see Python and JavaScript panels on the left and right, respectively. JS is not so different from Python, so translating the code will not be too challenging if you have already written some Python code.

If there are no code components in your task, please paste the full error so we can see what is happening, and also provide the URL so we can help debug.

2 Likes
3

HI @dvbridges, thanks that makes sense. Yes, there are code components and I have started translating them.
One thing I am stuck in is that some of the code reads in csv files using pandas pd.read_csv, and then later on uses values.tolist() to read the content of a column into a list.

Any pointers in how this can be done in javascript — the reading of csv file and then some pandas equivalent to basically convert columns in the csv file into lists?

Many thanks

Marc

4

I think the easiest method would be to use trialhandler code, then you can refer to your columns as in a list of dicts/JS objects. E.g.,

myList = new TrialHandler({
    psychoJS: psychoJS,
    nReps: 1, method: TrialHandler.Method.SEQUENTIAL,
    extraInfo: expInfo, originPath: undefined,
    trialList: "myConditions.xlsx",
    seed: undefined, name: 'myList'});

aValue = myList.trialList[0]['variableName']  // Get value from row 0

You just need to make sure you conditions Excel file is in your resources folder. Just coding it like this will mean that PsychoPy will not recognise it as a necessary resource, and so will not move it to the resources folder for you.

5

HI David - Thanks for this. I have tried as best as I can but now the experiment just won’t launch at all on Pavlovia. Still fine on Builder, but Pavlovia gets stuck on ‘loading the experiment’ page. Because I don’t get an error message I have no pointer as to where I am going wrong. Any ideas what I can do?
Thank you!

6

Sure, would you mind sharing the URL so I can take a look?

7

You’re a star!
The URL is https://gitlab.pavlovia.org/MJB/immanentjustice and I have set the permissions to Internal

Marc

8

Thanks. The first issue that arises how you defined nTrials as type int. You do not need to define your variables like this, or at all using var. This is because PsychoPy will do this for you, to make your variables global scope. If you do actually want your variables to be defined with a local scope e.g., to a particular function, then use var.

Your next issue will be with the use of the shuffle function. Shuffle is not part of the imported methods in JavaScript, as it is in Python. Instead, you will have to make your own. E,g., try this to get a global scope function called shuffle:

shuffle = function (a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}
1 Like
9

HI David,

Thanks so much for this.

I have eliminated all the variable declarations and added the shuffle function to the “Begin Experiment” tab of the relevant routine.

But it still won’t start.

I played around with the originPath parameter — the .xlsx files that I need to read in reside in the subfolder auxFiles.

I have tried both originPath: “auxFiles” and originPath: “/auxFiles” as well as originPath “\auxFiles” — which is the correct one?

Anyway, it still does not work.

Would you have any other pointers as to what might need fixing?

Thanks!

Marc

10

Looks like a couple of syntax errors. E.g., for loops are different in JS.

for (let thisRater of catchList) {
  // code
}

Also, boolean types are lower case, e.g., False becomes false.

If you press F12, you can see the developers tools in a browser. These are useful for debugging and finding out what went wrong with your task.

11

Ah OK — Fixed these now but still no luck.

Did you mean press F12 in PsychoPy or in the browser window? Either way, nothing happens when I press F12.

I also tried from within the gitHub page.

Which is the correct syntax for the originPath for the .xlsx files? I assume I denote subdirectories with / but do I need to just provide the directory or also the filename?

So, if the file is ’names.xlsx’ in subdirectory. ‘auxFiles’, do I need to set originPath: “/auxFiles” or “/auxFiles/names.xlsx”?

Many thanks!

Marc

12

Hello David,

sorry to pester you – could you please clarify where and how I can track the syntax errors for JS?
I am not getting any joy with F12. – I assume this is on Pavlovia rather than PsychoPy?

Also, I am not actually sure which file I need to look at. I have not used gitHub before so I don’t know where to look for what. Which file is that actually translated JS file (where presumably the syntax errors are)?

THank you
Marc

13

Hi @Marc_Buehner, when you attempt to run your experiment from a browser, you will see a loading screen if you have an error. This is where you can use F12 to open the developers tools. In Chrome, when I load your task, I get the loading screen, so I press F12, and in the Console tab it shows a syntax error has been raised, and it also tells you what line of your JS code is causing the problem (line 860). Click the link to your JS file on the same line, and scroll to line 860 where you will find the and statement which is causing your problem (use && instead). Also, if you cannot see line numbers, right click on the code and select “View page source”.

14

Hello David,

Thank you for this.

I can see that my issue was that I had used Safari and the F12 did not work on that. With Chrome It did work and I fixed the error.

Now I am back to the problem with the code not being able to read in the xlsx files, which you earlier mentioned need to be in the resources folder.

I can see that they are not. How can I copy them across — PsychoPy has uploaded them along with all other files, but it has only copied the trials.xlsx file into the resources sub-folder inside the html folder. The other files are in an auxFiles folder on the top level so I need to shift them across.

Apologies again — I just don’t know how gitHub works!

THanks

Marc

15

No problem, it is just a case of copying the files locally into the resources folder, and then syncing with Pavlovia. The newly copied files will then be pushed to the resources folder in your remote project repo on Pavlovia.

16

HI David,

Thanks for this. It’s a bit strange, though, since the trials.xlsx and the other files already had been in the same director anyway, yet only the former was copied over.

However, I have renamed the subdirectory on the Mac from auxFiles to resources and that seems to have copied the files over.

However, it is still throwing an error, though a different one now:

log4javascript.min.js:1 FATAL unknown | {“origin”:“TrialHandler.importConditions”,“context”:“when importing condition: deeds_outcomes.xlsx”,“error”:{“origin”:“ServerManager.getResource”,“context”:“when getting the value of resource: deeds_outcomes.xlsx”,“error”:"unknown resource”}}

So something is still not quite right.

Any further pointers?

Many thanks!

Marc

17

Hi David – ignore previous message. I have worked it out. Still getting errors now but I think I will be able to track them down.
Many thanks for your patience and pointers!

marc

18

Hello David,

sorry to trouble you again, but it is still not working. The code does not like whatever happens with the lists I created using the trialHandler code you gave me earlier.
I get an unexpected Type error – it cannot do pop (or shift) from the list.
I tried playing around with this and added a console.log() before it, but that does not make any difference either. I fail to understand why it cannot pop from the list.
Can you shed light on this? Thanks.

marc

19

Hi @Marc_Buehner, yes the reason why you are getting that error is because of the way you are trying to fill your list of deed conditions (GD etc) using the deeds_outcomes.trialList command. This statement is actually returning a list of JS objects (or a list of dicts in Python). So, your command of GD = deeds_outcomes.trialList['Good Deeds'] returns nothing, because you are attempting to index a list with a string, and so your GD variable remains undefined. What you need to do, is create an empty list for each deed condition and push to that list for every entry in the trialList using a loop: E.g.,

GD = []; // create empty list
BD = []; // etc for each list

for (let deed of deeds_outcomes.trialList) {
  GD.push(deed['Good Deeds']);
  BD.push(deed['Bad Deeds']);
}
20

HI David,

Thank you massively for this.

I have fixed all the other instances where the code elements read in content from lists accordingly.

However, the experiment still does not run:

On the first trial where some text that should be drawn in from these lists should be displayed, it only shows NaN.

The next trial, which has different text (also read from one of these lists) also shows NaN.

On that trial there should also be a slider component for a response, and that does not appear at all.

Less importantly : on the local PsychoPy version, the text is showing as left aligned, but on Pavlovia it reads centred, which does not look good. Can this be fixed?

Many thanks as always!

Marc