I’m creating a task but am having issues changing the colour of my polygons.
In this task, participants have a series of routines where they are asked questions (using the audio component), and then can select from a series of options. These options are text components within polygons and can be selected by using the mouse. Participants can select multiple options. They can also deselect an option by clicking the polygon a second time. They can continue to the next routine by pressing an image in the bottom right corner (screen shoot can be seen further down).
I have specified the background colour of the polygons to be purple and both the line of the polygon and the text with in it to be black.
The polygons all look like this:
And the text components all look like this:
In the code, I have set the ‘toggle’ colours (how the colours of the component will change when clicked on) to purple and white:
Yet the boxes are black when run through Pavlovia and I can’t seem to change this. This is what they look like before any boxes are clicked:
And this is after the boxes are clicked (the top box is clicked but the colour change is only very subtle):
Any ideas why the boxes are black and how to change this?
Ideally, pre-click, we would like the background and the fill of the polygon to be purple [.812, .749 ,1], and outline of the polygon and the text placed within the polygon to be black. It doesn’t really matter all that much what happens when the buttons are clicked, though a white background/text changing to white might be good.
I’m using version 2020.2.2 but can’t update to a newer version.
Hi @lgunning, thanks for flagging, would it be possible to give me developer access to your repo, or send me the .psyexp for it so I can look at the code in more detail? Here to help, s.
Hi @sotiri,
Yes, of course! Here is the .psyexp but let me know if it’s easier to look if you have developer access (/if you need anything else). The screenshots are of the ‘distract_3’ routine, but it’s the same issue in ‘distract_2’ also.
Thank you!
Alright, cool, looks like a bug that has since been addressed. Can I ask why is upgrading not an option for you? Or would you be happy staging the project so that I can provide a custom PsychoJS build to fix the problem maybe? Thanks, x
Ah cool, no worries, you need to go Settings, then Members and look up my account making sure the permissions level is equal or greater than Developer as in the screenshot below. Thanks!
This is great, thank you so much for your help in this!
So if I wanted to make these changes in my Builder version, what bits of code would I need to add to the code components? I’m only a newbie and want to make sure I can fix this problem for myself in the future.
No problem @lgunning, you need to manually edit QC.js in Coder each time you export HTML if that’s OK. Basically, the first few lines should look as follows:
-import { PsychoJS } from './lib/core-2020.2.js';
-import * as core from './lib/core-2020.2.js';
-import { TrialHandler } from './lib/data-2020.2.js';
-import { Scheduler } from './lib/util-2020.2.js';
-import * as visual from './lib/visual-2020.2.js';
-import * as sound from './lib/sound-2020.2.js';
-import * as util from './lib/util-2020.2.js';
+import { PsychoJS } from './custom-lib/core-2021.1.4.js';
+import * as core from './custom-lib/core-2021.1.4.js';
+import { TrialHandler } from './custom-lib/data-2021.1.4.js';
+import { Scheduler } from './custom-lib/util-2021.1.4.js';
+import * as visual from './custom-lib/visual-2021.1.4.js';
+import * as sound from './custom-lib/sound-2021.1.4.js';
+import * as util from './custom-lib/util-2021.1.4.js';
The red import statements, which are the automatically generated ones in your version of PsychoPy, refer to an older PsychoJS where the bug is found and so you replace them with the ones in green, but please ignore the plus / minus characters. Those just signify deletions / additions for highlighting if that makes any sense!
Sorry but I can’t seem to get this to work for me, I must be doing something wrong…?
I’ve tried changing the .js in the coder and THEN syncing to Pavlovia but the incorrect, red bits from your above bit of code get uploaded (not the green bits I’ve manually changed it to).
I’ve also tried changing the .js file AFTER I’ve synced to Pavlovia (i.e., on gitlab.pavlovia.org), but then the experiment won’t run at all - it gets stuck on ‘initialising the experiment.’ Inspecting this gives me the below messages:
I’ve found a similar post on the forum (Loading module was blocked because of a disallowed MIME type) which attributes this to an incorrect output path, but mine IS set to html (like this post says it should be…?).
Any idea what I’m missing?
Hi @lgunning, OK, the import statements are fine, very well, yes, but ‘custom-lib’ is missing from the repo, so I created a merge request for you to include those extra 2021.1.4 PsychoJS modules into your project, x
Amazing it’s working now! Thank you so much for your help!
So, when facing this problem in the future, I have to add this ‘custom-lib’ folder and add the above green code in place of the red code to the .js file AFTER syncing with Pavlovia? (i.e., don’t add the code to the .js file in the coder of of PsychoPy before syncing). Is that correct?
It’s just that I still need to add routines to the experiment so want to make sure I can correctly sync later down the line
No problem, the ‘custom-lib’ folder should stay in place from now on, the import statements yes you need to change ahead of syncing, but after exporting for HTML, the reason being that PsychoPy writes the main QC.js script fresh each time to match the version you are on if that makes any sense
