Slider does not appear on Pavlovia

URL of the experiment: https://pavlovia.org/run/yuheetran/testexp/html/

In my experiment, participants will need to choose 1 emotion from 4 options appearing on the screen that describes the audio sound. I initially built it to run offline, and it works perfectly fine (picture below).


However, when I tried to upload this experiment on Pavlovia, the slider does not appear properly (picture below).

I tried out some codes to change the color of the slider (my background is white, and the slider should be black), but everything remains the same. Any idea of what the problem might be?

Not sure what the issue is, but does it display if you set the position using a code component? To do that, add a code component to the relevant block and go to the “begin routine” tab. Then, if “code type” is set to “Both”, write on the right side of the code component (the javascript side):

emotion_slider.setPos([0, 0]);

Where you replace emotion_slider with the name of your slider component, and [0, 0] with the specific X and Y coordinates that you’re interested in.

As a side comment, putting these four emotions on a single scale might not make sense unless you have reason to think that they are ordinal (i.e. angry is on extreme end of the scale and disgusted is on the other, with sorry and fond in between). You can set the slider’s “appearance” setting to “radio” to display each option as an individual button.

Hello there,
Thank you very much for your reply. I did put a code component in the experiment. For the first slider, I use these following codes:

#Begin Routine
function shuffle(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;
}
list_of_labels_2 = [Choice1,Choice2,Choice3,Choice4]
shuffle(list_of_labels_2)
slider.marker.color = 'red'
slider.color='black'
ResponseChoice2=visual.Slider(win: psychoJS.window, ticks=(1,2,3,4), readOnly=False, showValue=False,showAccept=False, textColor='black', name='ResponseChoice2', choices=list_of_labels_2, textSize=0.5, size=1.5, pos=[0,0.3],mouseOnly=True, tickHeight=1.0)

For the second slider, I have these:

slider.marker.color = 'red'
slider.color='black'
Gender=visual.Slider(win: psychoJS.window,ticks=(1,2,3,4), readOnly=False, textColor='black', name='Gender', choices=list_of_labels_3,textSize=1, size=1.5, showValue=False,showAccept=False, pos=[0,-0.3], mouseOnly=True, tickHeight=1.0)

As for your side comment, I actually didn’t clarify it in the original post, but my experiment does not relate to any scale or rating. I utilize the slider as a “multiple choice question,” and the options below the “line” (the slider) will appear fully random (as you see the shuffle code I had in my codes).
Thank you very much for your suggestion on using the “radio” appearance. I checked it out, and apparently it does not work offline. Psychopy keeps giving me the unexpected keyword argument “…” Do you have any idea? Below are the codes after I changed it with radio style:

list_of_labels_2 = [Choice1,Choice2,Choice3,Choice4]
shuffle(list_of_labels_2)
ResponseChoice2 = visual.Slider(win=win, name='radio', style=['radio'],showValue=False,showAccept=False, textColor='black',lineColor='black', name='ResponseChoice2', choices=list_of_labels_2,marker='circle', textSize=0.5, markerColor='darked', size=1.5, pos=[0,0.3],mouseOnly=True, tickHeight=1.0)

I’ve found that you can’t use named colours online

slider.marker.color = 'red'
slider.color='black'

I therefore set them as variables in a code_Both component at the start of the experiment so I can then write

slider.marker.color = red
slider.color=black

or possibly

slider.marker.setColor(red)
slider.setColor(black)

Check my crib sheet for how to set up the colours

Best wishes,

Wakefield