Is there any way to use the builder to creater sliders for online experiments?

[JAQuent]

I am using the builder v2024.2.1 to create online experiments and I am currently a bit stuck/frustrated because when using the builder the local version of my experiments do not look like the online version at all. There is nothing in the documentation that addresses the issue (Slider Component — PsychoPy v2024.2.2).

Honestly, any general advise or specific suggestions are welcome. Do I have to use the coder for online experiments or at least custom code for all of these things?

For instance, in my current local version the slider looks like this:

While online it looks like this:

My target slider looks like this but I would even be happy if I managed to get the local version online.

I am aware of @wakecarter’s interactive demo (VESPR Demo Interactive Slider - #8 by mengsili) but I wonder what can be done in the builder itself.

A similar problem exists for the progress bar (Cannot load progress bar during plioting on pavlovia - #3 by JAQuent), as a PsychoPy new-comer I am wondering whether it is even prudent to use the builder for online experiments or whether I am overestimating its functionality.

[wakecarter]

Hi. I think that the primary issue may be one of colours. Please could you show the colours tab of your slider.

Coder is not recommended or supported for online experiments.

[JAQuent]

Yes, I heard that coder is not recommended and I definitely would prefer staying away from that but the builder is also not producing expected results.

[JAQuent]

I just realised that Styles rating looks much better than slider when comparing online vs. local and thanks to your code I at least found how to change the colour and size of the marker. By adding this to the Begin Routine:

slider.marker.color = 'red'
slider.marker.size = (0.05, 0.05);

Can I also change the marker type like this? Unfortunately, I don’t find where I can see what properties slider.marker even has in the documentation (Slider — PsychoPy v2024.2.2).

[wakecarter]

Why are you setting the colour in code rather than the slider component itself?

slider.marker.color = 'red'

This won’t translate automatically to JS in a code component. You could set up the colours in a Both code component Begin Experiment tab

red = 'red' # Python
red = new util.Color("red"); #JS

then use

slider.marker.color = red

[JAQuent]

This does indeed work but unfortunately using slider._markerSize = (.001,.001); doesn’t change the size for me online.

[wakecarter]

You could try using a separate polygon for the marker and give it a position based on slider.markerPos

Use image as slider on Pavlovia

This is most likely due to differences in how the slider is structured online. Instead of replacing the line with an image, you could set the line color to None (so that the line is invisible) and then have the image as an Image component behind it? So long as you line up the sizes it should have the same effect - I believe the width calculation would be: mySlider.size[0] / len(mySlider.labels) * (len(mySlider.labels) - 1) (replace mySlider with the name of your slider)