Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introducing transparency as default #5

Open
indianed opened this issue Aug 3, 2022 · 8 comments
Open

Introducing transparency as default #5

indianed opened this issue Aug 3, 2022 · 8 comments

Comments

@indianed
Copy link

indianed commented Aug 3, 2022

Hi @mofya1, hi SurveyCTO team,

Do you think you could introduce an option such that the default display doesn't show an initial slider location? I'm afraid setting the initial location to either 0 or 50 will create anchoring issues: respondents will be more likely to pick that location (or a location close to the initial value). Here is the behavior I'd prefer

  1. The slider is empty.
  2. Respondents have to pick any location on the slider.
  3. Then, the bubble shows up at that location and can be moved around.

You may be able to do that by setting the initial bubble to transparent, and changing the transparency level once the slider has been touched. What do you think---Is this something you could add here (and to the other slider plugin)?

@de-barros
Copy link

Hi @mofya1, hi SurveyCTO team, sorry I was logged in with another GitHub account. I'm adding my correct account here to follow your response to this issue

@mofya1
Copy link
Contributor

mofya1 commented Aug 3, 2022

Hi @de-barros,

Thanks for engaging with us here. That is an interesting observation. From the initial design, the indicator is important because it makes it intuitive for the user to understand how to interact with the widget. Without that indicator, it would not be clear for someone who reaches the widget to know exactly what to do. We have a likert appearance on the select_one field that starts off empty. In that case, the individual radio buttons on the scale give the user the indication that they can be selected.
Could you share a bit more about how you use the slider? It might be possible to add a parameter that adds this option to the slider and understanding your use case will help us think through how best we can support this.

@de-barros
Copy link

de-barros commented Aug 3, 2022

Hi @mofya1 , thank you very much. We administer the question one-on-one, the enumerator hands over the tablet, and tells the respondent that they can place their finger on the slider. That way, the respondent knows what to do. We may also add a sample question right before that, for the respondent to observe how the enumerator does this with an example question. With this setup, it would be really helpful to have an option that implements the blank / transparent behavior I suggested above.

@jdimeo
Copy link

jdimeo commented Jan 6, 2023

We have the exact same situation and need a similar fix due to anchoring issues

@mofya1
Copy link
Contributor

mofya1 commented Jan 12, 2023

@jdimeo @de-barros
Thanks for expressing interest in this issue.

@de-barros - apologies its taken a while to get back on this issue.

We have a proof of concept in this branch based on my understanding. What we have done is to add a new parameter handle_transparency - if you give it a value of 1, then the slider handle will be hidden at the start.

Could you confirm that is the expectation you have? Its still rough around the edges but hopefully easy enough to follow. Just install the plug-in file as usual (should be version 1.56) and include that parameter in your form definition.

@de-barros
Copy link

Thank you, @mofya1 (and hi @jdimeo)! Let me loop in @rahulk2495, who will reply for the two of us

@rahulk2495
Copy link

Thank you, @de-barros
Hi @mofya1, thanks for creating this plugin.

We wanted a slider with a button (thumb) on it which appears only when you touch it or click on it. We created a plug-in for that in 2022. I used the slider plug-in as my base plug-in and edited the CSS file. In the CSS file I used the "hover" over the thumb to make the button(thumb) transparent. I kept the opacity of button(thumb) at 0 and the opacity of "hover" at 1. It worked fine for us.

In your plug-in, I really liked that you created a parameter to make the button transparent, this gives us the liberty to make the button invisible only when we want it to be invisible. I tried your plug-in and it actually works, the button on the slider is transparent and it appears only when we click on it. There is just one glitch. The button on slider was working smooth when my finger was constantly on the button, but when I stopped touching the button and touched it back again and tried moving it on the slider, the button automatically moved to the extreme left side on the slider.

@mofya1
Copy link
Contributor

mofya1 commented Jan 13, 2023

@rahulk2495, thanks for sharing your solution, sounds very neat.

And thanks for taking the time to test the plug-in. It was meant as a proof of concept, so given that it meets your requirements, we will proceed to finalize it. We will take time to do some internal quality control, update the documentation and then we will release a new version. I will provide an update once that is done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants