Turning a slider into bipolar | XM Community
Skip to main content
Solved

Turning a slider into bipolar

  • April 26, 2018
  • 18 replies
  • 1636 views
RachelTHREE
Level 2 ●●
Forum|alt.badge.img+2
Hey All! Anyone aware of if you can/how to make a slider scale into a bipolar when you have multiple row items, but without creating separate questions for each? Thanks!

Best answer by MohammedAli_Rajapkar

Hi @RachelTHREE The text which you want to show on the right-hand side of the slider bar can be done through JavaScript. Since the text on the right-hand side is just for display purpose. ! If above looks good to you then you can place the below code in the Javascript onload section jQuery(".statement-container div").eq(0).append("<span style='float: right;'> right side text 1 </span>"); jQuery(".statement-container div").eq(1).append("<span style='float: right;'> right side text 2 </span>"); jQuery(".statement-container div").eq(2).append("<span style='float: right;'> right side text 3 </span>"); if there are more rows then copy the same code and increment the value of eq().

18 replies

MohammedAli_Rajapkar
QPN Level 5 ●●●●●
Forum|alt.badge.img+20
  • MohammedAli_Rajapkar
  • QPN Level 5 ●●●●●
  • 482 replies
  • Answer
  • April 27, 2018
Hi @RachelTHREE The text which you want to show on the right-hand side of the slider bar can be done through JavaScript. Since the text on the right-hand side is just for display purpose. ! If above looks good to you then you can place the below code in the Javascript onload section jQuery(".statement-container div").eq(0).append("<span style='float: right;'> right side text 1 </span>"); jQuery(".statement-container div").eq(1).append("<span style='float: right;'> right side text 2 </span>"); jQuery(".statement-container div").eq(2).append("<span style='float: right;'> right side text 3 </span>"); if there are more rows then copy the same code and increment the value of eq().
Regards, Mohammed Ali
RachelTHREE
Level 2 ●●
Forum|alt.badge.img+2
  • RachelTHREE
  • Author
  • Level 2 ●●
  • 80 replies
  • May 1, 2018
Great — thanks so much!
U
Level 3 ●●●
Forum|alt.badge.img+5
  • uhrxx005
  • Level 3 ●●●
  • 204 replies
  • May 11, 2018
@Mohammedali_Rajapakar_Ugam, I haven't been able to get this to work. Can you clarify what I am doing incorrectly. Here is my javascript: ! And here is what the question looks like in preview mode: !
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6084 replies
  • May 11, 2018
@uhrxx005 - Check the mobile friendly box...it changes the html structure.
U
Level 3 ●●●
Forum|alt.badge.img+5
  • uhrxx005
  • Level 3 ●●●
  • 204 replies
  • May 11, 2018
Is this dependent on the theme you are using. Checking the mobile friendly box didn't seem to change anything.
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6084 replies
  • May 11, 2018
Are you running in SE (non-JFE)? That is the same as non-mobile friendly whether you check the mobile friendly box or not.
MohammedAli_Rajapkar
QPN Level 5 ●●●●●
Forum|alt.badge.img+20
@uhrxx005 I am not able to attach the qsf file. however here is the link for qsf where you can download it https://drive.google.com/file/d/1psUAbfEqN29dZ40h1VBw6UIITZ5kTafo/view?usp=sharing
Regards, Mohammed Ali
U
Level 3 ●●●
Forum|alt.badge.img+5
  • uhrxx005
  • Level 3 ●●●
  • 204 replies
  • May 11, 2018
Thank you @Mohammedali_Rajapakar_Ugam. I am a novice at javascript so I didn't know how to fix it. Here is the code in the QSF file which works: `jQuery(".statement-container div").eq(0).append("<span style='float: right;'> right side text 1 </span>"); jQuery(".statement-container div").eq(1).append("<span style='float: right;'> right side text 2 </span>"); jQuery(".statement-container div").eq(2).append("<span style='float: right;'> right side text 3 </span>");` I was missing the span style portion of the code. Thank you!
MohammedAli_Rajapkar
QPN Level 5 ●●●●●
Forum|alt.badge.img+20
Great... i am glad that it working :)
Regards, Mohammed Ali
A
  • Amina
  • 1 reply
  • May 7, 2020

I am trying to create a set of bipolar slider questions on qualtrics. Similar to the original post on this thread but it's not working.
I'm following the directions exactly and it's still not working. Please help.
Exactly what I've done:
(1) Pasted the following in Javascript onload section:
/*jQuery(".statement-container div").eq(0).append(" right side text 1 ");
jQuery(".statement-container div").eq(1).append(" right side text 2 ");
jQuery(".statement-container div").eq(2).append(" right side text 3 ");*/
(2) Pasted the following in Javascript onload section:
jQuery(".statement-container div").eq(0).append(" right side text 1 "); jQuery(".statement-container div").eq(1).append(" right side text 2 "); jQuery(".statement-container div").eq(2).append(" right side text 3 ");

I tried it with mobile friendly checked and unchecked. Not sure what I'm doing wrong.
Any help would be so appreciated.
Thank you,
Amina

A
  • aregan08
  • 1 reply
  • March 29, 2021

Hi there,
This is an excellent solution; however, my survey has two languages and because the right side text is in javascript, I'm not sure how to adjust the language for non-English speakers. Any suggestions for this?
Thanks

R
Forum|alt.badge.img
  • RebeccaT
  • 2 replies
  • April 5, 2021

https://www.qualtrics.com/community/discussion/comment/2220#Comment_2220This doesn't work. Has Qualtrics added this option since this was posted? I can't find it, but I don't know why it wouldn't be there..

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2050 replies
  • April 5, 2021

RebeccaT it appears to be working. This is a post from around 2 weeks back. It also has a simpler alternate solution.
This may also work for you aregan08 as it doesn't use JS.

R
Forum|alt.badge.img
  • RebeccaT
  • 2 replies
  • April 5, 2021

Thank you. I'll give it a try.

Q
Level 1 ●
Forum|alt.badge.img+1
  • QualtricsDude
  • Level 1 ●
  • 2 replies
  • April 18, 2024

Desperately trying to use this solution but it is not working. What am i doing wrong?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6084 replies
  • April 18, 2024

First, if you are using Simple layout, pretty much any code you see on the Community isn’t going to work unless it was specifically written for Simple layout.

If you aren’t using Simple layout, I have a function for bipolar sliders that you can contact me about if interested. It much more flexible and easier to implement than the code in the old post you linked to.

 

C
Forum|alt.badge.img
  • ChelsMay
  • 1 reply
  • May 31, 2024

@TomG I am not using simple layout and the above solution is not working, i walked through your function for bipolar sliders but cannot get it to work properly either. Any advice? 

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6084 replies
  • May 31, 2024

@ChelsMay -  You would need the bpSliders function code for it to work. Contact me by private message if interested in purchasing.


Terms & ConditionsAccessibility statement