Issues with translating Python to Javascript - colour changes executed at specific times through code

I’m designing a new memory task that I’ve previously run locally on PsychoPy. I need the new version of the task to run on Pavlovia. Importantly, I’m relatively familiar with/can get by using Python, but I have never worked in Javascript before.

In this task, there are 60 white circles displayed on a screen, and then a prespecified number of circles turn black. These are ‘target circles’. Participants have to memorise these and attempt to recall them after a 5-second delay.

It runs perfectly locally, but when I run the study in PsychoJS on a local browser, none of the target circles change colour. It also doesn’t run on Pavlovia (gets stuck at the ‘initialising’ stage) but I believe that’s because there are still a few aspects of the project that haven’t translated nicely to Javascript.

Here’s the code from the ‘P1 Targets’ routine, where participants see the target circles turn black.

Please ignore the commented out target lists (haven’t got around to updating them) and also everything below ‘#timer’, because this works perfectly. I have the code type set to both because I needed to manually change the JS code for the timer component.

I’ve read a few forum posts about ‘.thisN’ not working properly in JS, and also issues with named colours like ‘black’ (rather than -1,-1,-1). I tried using named colours and defining them as specified in this document, but it also didn’t work: PsychoPy Python to Javascript crib sheet 2021 - Google Docs

I’m trying to work out which part of my code isn’t working - is it that the targetlists aren’t being saved properly, that this.N isn’t working, that ‘t’ should be defined differently, or that the colour change isn’t working?

Would appreciate any help! Thank you.

.thisN was fixed a while ago.

When you say that my method of using named colours didn’t work, please could you show how you tried and what error message you got, since it’s still my recommendation for changing colours with code components.

Thanks for the reply. I’m not getting any error messages, which is why I don’t think the issue is with your method of changing colours. I think the issue is with my lists not saving properly - I’ve tried printing the lists using console.log and I’m not seeing anything (although I’ve also tried printing something at the start of the experiment, and that’s also not showing up in the console).

So rather than seeing these circles turn black, as intended, all the circles stay white and the routine ends when the time runs out (as intended).

The 5-second delay then occurs, and afterwards, participants should be able to click on the circles and receive feedback as to whether they are/are not a target. In that routine, I am getting an error message that says “list not defined”.

Any help would be greatly appreciated!