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!
Page 1 / 1
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().
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().
Great — thanks so much!
@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:
!
Here is my javascript:
!
And here is what the question looks like in preview mode:
!
@uhrxx005 - Check the mobile friendly box...it changes the html structure.
Is this dependent on the theme you are using. Checking the mobile friendly box didn't seem to change anything.
Are you running in SE (non-JFE)? That is the same as non-mobile friendly whether you check the mobile friendly box or not.
@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
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
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!
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!
Great... i am glad that it working 
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
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
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..
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.
Thank you. I'll give it a try.
Desperately trying to use this solution but it is not working. What am i doing wrong?
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.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.