Marker of the slider is not displayed online until mouse click

Online experiments
1

URL of experiment:
general issue

Description of the problem:
Hi all,

I have a question and I’m stuck since a few days, because none of the solutions I tried worked. I hope you can help :slight_smile:

I have a rating scale that works great offline. As soon as it is uploaded online, the marker is not visible anymore until clicking on the scale with the mouse. Once clicked on it, everything works fine again.

Is there any way to make the marker visible before the mouse is clicked? This would be important because the mouse should not be used by the participants during the rest of the experiment.

I use PsychoPy v2021.2.3 and have taken a simple slider with style “rating” (Ticks from 1 to 9, granularity = 1, starting value = 2) and triangleMarker (default/circle does not work either).

To move the marker along the scale by the left and right arrow buttons I use the following short code (and it works offline and online after clicking with the mouse on the scale):

#Each Frame:
keys = event.getKeys()

if len(keys):
if ‘left’ in keys:
rating_1.markerPos = rating_1.markerPos - 1
elif ‘right’ in keys:
rating_1.markerPos = rating_1.markerPos + 1

Thank you in advance.

Best,

Vasko

2

Hi There,

Thanks for reporting this - that sounds as though “starting value” is not yet implemented in PsychoJS. After trying this locally I actually found I couldn’t set a value in “starting value” did you find this too?

Here are a couple of work around demos that I hope might help with your experiment for now!

Thanks,
Becca

3

Hi Becca,

thank you very much for your answer and the suggestions. Unfortunately I have not found a solution for the start position. I can’t even try the interactive slider online because I get an error message. I thought it was some little thing and I’m too inexperienced to find it, but it seems to be a basic problem.

Locally, setting the start value works for me. Though, in the JS I can’t find the value I set. However, setting rating_1.markerPos = 2 maually did not help. Until the mouse click, the marker remains invisible.

Do you know what exactly happens when I click the mouse? Could I simulate such a click?

Best,

Vasko

4

Please could you share with us the error message? do you get that error message when online or locally?

Thanks,
Becca

5

Of course, but first it is important to mention that I download the slider, unzip it locally, open it with Psychopy and then upload it to pavlovia. The error message is:

TypeError: slider.setLabelHeight is not a function

image

It’s not the only problem though, I think.

Best,

Vasko

6

Hi Vasko,

Aha I see I think this is using wakes demo which I am less familiar with - were you able to please try the other demo in that thread that I posted?

Thanks,
Becca

7

Hi Becca,

thanks for the advice. I have indeed tried the slider from wakecarter.

Did you mean this slider?:

https://run.pavlovia.org/lpxrh6/color_slider_demo

Unfortunately, when I download it, it doesn’t run for me both locally and online. Locally I get the error message:

…line 168, in
startMarker.setFillColor([thisRed, 0, thisBlue], log=False)
NameError: name ‘thisRed’ is not defined

(even after I define thisRed = 0.5; at the beginning of the experiment)

When I upload it I get the error message:

TypeError: Cannot set property ‘ori’ of undefined

Do you eventually know a way how I simulate a mouse click? So a random position on the scale could be clicked immediately after it is displayed.

Best,

Vasko

8

Hi Becca,

I have found a solution! It is not perfect but it works :smiley:

I set the code type to both and entered the following JS code under each frame:

if (frameN < 3) {
  if (Math.random() >= 0) {
    rating_1.markerPos = Math.floor(Math.random() * 10);
  }

  console.log('get marker pos', rating_1.getMarkerPos())
}

where rating_1 is the name of the slider and multiplied by 10 to get values between 0 and 9.

I found the code for the slider here:

https://pavlovia.org/thewhodidthis/slider

And the info about Math.random here:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_random_0_9

Thanks a lot for the support and thanks to thewhodidthis for sharing the code.

Best,

Vasko

1 Like
9

Does this work in 2021.2.3? I’m having issues with my pie chart demo where I want the marker to appear at the start and then change colour and move when you click on a different colour in the chart.

https://run.pavlovia.org/vespr/interactive-pie-chart/

10

Yes, this method should work for setting marker position at the start of the routine. For changing marker color I’de suggest having a look at this Hsv color slider - #2 by Becca

11

Hi Vasko,
Thank you for your solution :slight_smile:
I was wondering why you put the line ‘if (Math.random() >= 0) {’ in - what does this do?
Thank you :slight_smile:

12

I came up with a different work around. I set the .markerPos setting on the first frameupdate in a code routine. Just set a boolean or a counter in the begin routine section and test it in the each frame section
eg

> if testcounter == 0 :
>     testcounter = 1
>     volume_slider.markerPos = desired_initial_value