No marker for slider online

URL of experiment: https://pavlovia.org/run/ellenhan/story_online_test_v2/html/

Description of the problem: when running on a local machine, the slider would show the triangle marker (I set that style), but when running it online, no matter what style I choose, I don’t see any marker showing up.

Hi @YT_HAN, I believe the problem you are experiencing is because the trial ends before the slider draws the marker. One way to get around this until a fix is made is to allow your participant to make their ratings, and use the space key to continue on to the next trial. This way, slider gets a chance to draw the marker before the trial has ended.

1 Like

Thanks for replying so quickly. so I tried to set the style to be ‘rating’ (so circle instead of triangle), for that, I have noticed that if I start with my mouse in the middle of the slider, the circle marker would show up, but not if I start anywhere else. For triangle, even if I start in the middle, it doesn’t always work.

Hi @dvbridges, I am having the same issue in this link: https://pavlovia.org/run/sparmar34/high_accuracy/html/
but not in this one: https://pavlovia.org/run/sparmar34/masters_second_phase/html/

Even though only images differ in the two links.

@Sweta_Parmar, I think the marker is working, the problem is with the color of the marker when you use radio, the marker is the same color as the background. If you go to Slider in Builder, go to Appearance tab, and change the Color param to black, or some other non-white color, you will see the marker when you click it.

See GitHub for the radio issue:

Thanks, @dvbridges, I changed it to blue and it is working now.

Hi @dvbridges I’m having what I think is the same issue when trying to host online.

I’m using a slider component with radio buttons.
The option labels don’t show up and I can’t click any of the options.

I’ve added a code component in builder to allow progression with the spacebar after an option is selected. Everything works fine locally but not online.

Here is my code component in “Each Frame”:

keys = key_resp.getKeys()

if slider_5.getRating() != None:
    if 'space' in keys:
        continueRoutine=False

Should I put it in ‘Begin Routine’ instead?

Here are my slider settings:
image

Would it be better if I got rid of all custom code components?
I’d really appreciate any help on this. I’m going to be using mostly sliders so my online task depends on this.
Should I make a new issue for this?

@Alex-A14, I have had a look at your Builder file, and the first issue to resolve is the use of Form components, and coded Button components. Neither of these are supported for online studies yet, but you can make the equivalent using clickable stimuli for buttons (shapes, text), and sliders for surveys. To get this working online, you will first need to remove the use of Button stim, and Form components.

Here is an example, using a slider to get a rating, and then using a keyboard to end the routine.
sliderRadio.psyexp (7.1 KB)

Hi David,

thank you for the example.
I know the form and button components won’t work, I was planning to remove them later. I just want to get the sliders working so I can confidently go through and update everything. But I’ve removed them now just in case they were creating problems in other parts of the experiment.

When trying your code locally I am still able to continue with spacebar without selecting a response. And when I try online I get the error that theseKeys is not defined.

Here is my code based on the example:

if slider_5.getRating():
    if len(theseKeys):
        if 'space' == theseKeys[0].name:
            continueRoutine = False

Would it be a problem if my key response component is named “key_resp_3” instead of just “key_resp”, like in the example? It looks like the ‘theseKeys’ variable should be the same either way?

Also, is there an issue with the code I gave earlier to check for a response?

keys = key_resp.getKeys()

if slider_5.getRating() != None:
    if 'space' in keys:
        continueRoutine=False

This worked perfectly fine locally but my slider wasn’t properly drawn online. (No error given)

Hi @dvbridges

I hosted the example study you gave me on Pavlovia and it also gave the ‘theseKeys not defined’ error.
Have sliders been shown to work online before? Is it the radio buttons?

Sorry to be a pain about this. But I’ve tried a lot of different combinations already and haven’t got it to work.
My experiment is fairly simple. It’s just rating sliders and a couple slider with radio buttons. (I know I had some of the old rating scales in there. I will replace them with sliders)

Apologies if replies lead to multiple notifications. But I wanted to give you all the info I have in case it’s useful.

Using your demo experiment as a test, I’ve tried different combinations of the radio slider and rating slider; both with and without the keyboard component and custom code. In all examples, the slider doesn’t work. i.e. The rating scale comes up, or he radio buttons come up, but there are no labels and you can’t click anything.

I’m using the newest version from Github ‘2020.1.3’ if that helps. But I originally tried it using 2020.1.1 and that didn’t work either.
I know someone who used rating scales online in the pre-2020 version. But surely, someone has used them in the last couple of months too?

Again, sorry if this is a lot. But I hope that it’s useful for you in case there’s a bug somewhere (and hopefully I’m not making a stupid mistake somewhere). I really feel like I’ve tested everything.

@Alex-A14, here is another example, with the online code:

thisKey = key_resp.getKeys({keyList: ['return'], waitRelease: false});

if (slider.getRating()) 
{
  if (thisKey.length > 0)
  {
    if ('return' == thisKey[0].name) 
    {
      continueRoutine = false;
    }
  }
}

Note, for some reason, "space"is not working as a response, so I have changed this to ‘return’, and all is working. The slider marker is not visible, because it is the same color as the marker placeholder, which is a bug. However, I have change the appearance in the Slider using the appearance “black on white” setting, so now you can see the marker. (Example below).

sliderRadio.psyexp (7.5 KB)

Hi @dvbridges
Sorry for the delayed reply. Thank you for this.

When I run this, I get the error: “slider.markerPos() is not a function”
I made sure to update the code to reflect the slider and key response names in my exp
I’m running on Chrome if that’s helps

@Alex-A14, looks like markerPos is not a method, so try:

slider.markerPos

Hi @dvbridges ,

I’ve gotten things working without error using the original code you gave.
But I’ve found out the markers don’t show up in Chrome specifically. Everything works fine in Firefox.

In Chrome, I can still click a radio button without any marker coming up. And then press enter/return to move to the next trial, which has a numeric slider; no triangle marker shows up for that either.

Have there been any issues across browsers before?
I really should have checked Firefox from the start.

@Alex-A14, could you try a different marker color by setting the appearance to black on white? ITs possible the marker is the same color as the radio box.

Hi @dvbridges,

No luck. I’ve tried the whiteonBlack setting and some different text colours and they don’t show up on chrome. It isn’t just the marker that isn’t showing, the labels aren’t there either.

I’ve been trying to debug with just the example you gave me.

@Alex-A14, I have just run your task, and it seems to be working fine, at least on Win 10 Chrome. I think perhaps you need to refresh your browser cache - try pressing Shift + F5 (windows) or see here for your OS.

1 Like

Hi @dvbridges, thank you for this suggestion. I am currently using this method to work around this issue. While it worked smoothly, participants are able to press the space bar without doing the rating. Is there a way we can set the onset of the keyboard to when a rating is stored?

Hi again, i have found your suggestion re: this in another post. and it worked perfectly. thanks!