Hi everyone,
URL of experiment: sentencerating [PsychoPy] (let me know if this is expired)
Description of the problem:
I have attached a ‘consent form’ at the beginning of my experiment using text and some polygons which change colour as they are clicked. I am using a code component inside a routine to realise the colour-changing effect, like @Becca demonstrates here: Using Multiple Mouse Clicks in One Trial in PsychoPy 🖱️ - YouTube. The experiment runs fine on my laptop.
All is well until the experiment is synced to Pavlovia - I do not see the polygons change colour as they are clicked, and the text does not align (also part of my code component). I therefore conclude that the coding component somehow did not work after syncing. I don’t see any obvious error messages.
I am relatively new to Psychopy and Pavlovia, so I feel like I am missing something obvious. Any tips on possible things to try would be appreciated!
Thanks in advance
Qingyuan
Hello
links to experiment in Pilot-mode expires within 60 minutes. So, it is better to provide access to your repository if possible or set the experiment to Run.
Best wishes Jens
Thank you Jens. I have updated the info to my experiment above 
Gitlab repository: Qingyuan Gardner / aspect_pilot2 · GitLab
Code concerning this problem:
Begin routine:
text_7.alignText='left'
text_9.alignText='left'
clicked_things=[]
Each frame:
clickables = [circle_1,circle_2,circle_3,circle_4]
for clickable in clickables:
if mouse.isPressedIn(clickable):
clicked_things.append(clickable.name)
clickedN = 0
for clickable in clickables:
if clickable.name in clicked_things:
clickable.Color = 'yellow'
clickedN += 1
if clickedN == 4:
continueRoutine = False
Hello
it might be a problem with named colors. See here
So define colors as variables in a code-component set to code both in the first routine of your experiment.
Best wishes Jens
Thank you for this @JensBoelte !
New link (been having problems with syncing project) Qingyuan Gardner / aspect_pilot3 · GitLab
I have done what you suggested, plus a check on my other codes according to PsychJS, including changing ‘color’ into ‘fillColor’, and ‘alignText’ into ‘setAlignHoriz’. The problem persists with the code component with both text alignment and colour-changing polygons, and the code component with only the text alignment code. The fact that it works on my laptop but not on Pavlovia seems to suggest a bug in the PsychJS side of things. I have attached some screenshots here in case they are helpful.
Hello
in code-component in the Begin Experiment tab add
yellow=[1,1,0]
instead of
yellow = 'yellow'
on the Python-side and
yellow = new util.Color([1, 1, 0]);
on the JS-script side of the component, instead of
yellow = new util.Color(['yellow']);
Does this help?
Best wishes Jens
Hi Jens,
That worked! The Text components still would not align though - it is a minor detail but I would still like to get it working. The code I am using for PsychoJS (from the crib sheet) is:
text_7.setAlignHoriz = 'left';
text_9.setAlignHoriz = 'left';
Any suggestions?
Best
Qingyuan
Hello Qingyuan,
the JS-script code is:
text_component.setAlignHoriz('left');
instead of
text_component.setAlignHoriz = 'left';
Best wishes Jens
Oops… thanks for picking it up Jens. I also had to clear my cache to make sure it was loading the most updated version. It works now. Thanks for being so patient with me, I will read the crib sheet more closely now 
Just to provide a summary here to the solution here, in case anyone else finds it helpful - the problem lied with translating Python into Javascript (Psychopy → PsychoJS)
In the routine where the colour-changing effect takes place:
Begin Experiment (PsychoJS):
set colour as variable name, e.g.
yellow = new util.Color([1, 1, 0]);
Each frame (PsychoJS)
Use fillColor instead of Color e.g.
clickables = [circle_1, circle_2, circle_3, circle_4];
for (var clickable, _pj_c = 0, _pj_a = clickables, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
clickable = _pj_a[_pj_c];
if (mouse.isPressedIn(clickable)) {
clicked_things.push(clickable.name);
}
}
clickedN = 0;
for (var clickable, _pj_c = 0, _pj_a = clickables, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
clickable = _pj_a[_pj_c];
if (_pj.in_es6(clickable.name, clicked_things)) {
clickable.fillColor = "yellow";
clickedN += 1;
}
}
if ((clickedN === 4)) {
continueRoutine = false;
}
For aligning text:
Begin Routine (PsychoJS)
text_7.setAlignHoriz('left');
text_9.setAlignHoriz('left');
Note: the position of the text will then have to be realigned inside the builder. This code alone will align the text against (0.0) i.e. all text will appear on the right-hand side of the screen.
This is a summary of what had gone wrong for me. For more detailed code and explanations, please refer to the video tutorial by @Becca.
1 Like
