Customize slider online

Online experiments
1

URL of experiment: https://run.pavlovia.org/Crible/active1/html
Sign in · GitLab

Description of the problem: I would like to customize my slider for an online study. I have four categorical ticks/labels. At the moment they always show up in the same order (the one I wrote in the Conditions file). They also show as white, and nothing shows up when I click on an option (no visible marker, or if it’s visible it’s white too so invisible).

  1. Is it possible to randomize the order of presentation of the labels across trials (and participants)? So sometimes it will show A-B-C-D, others B-D-C-A, etc.

  2. I’ve seen other posts about the colour issue but haven’t found the solution really. I’m fine with the radio buttons showing up white, but I would like the participants to see when they click on one, in any other colour.

When run locally, the radio buttons are smaller and white, and the tick shows up red. I would be happy with something similar that works online.
I have tried the following code, to no avail:

#BeginExperiment
col = new util.Color(‘black’)
newMarkerSize = 35

#Each Frame
try {
if (slider_2._markerColor.int !== col.int) {
slider_2._markerColor = col;
slider_2._marker.lineStyle(1, col.int, 1, 0.5);
slider_2._marker.beginFill(col.int, 1);
slider_2._marker.drawCircle(0, 0, newMarkerSize / 2);
slider_2._marker.endFill();
slider_2._needUpdate = true;
slider_2._updateIfNeeded();
}
} catch (err) {}

Thanks a lot!