Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Turning a slider into bipolar

RachelTHREE
RachelTHREE Cary, NC Guru ✭✭
edited April 2 in Custom Code

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

  • MohammedAli_Rajapkar
    MohammedAli_Rajapkar Mumbai - India Wizard ✭✭✭✭✭
    Accepted Answer

    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(" 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 ");

    if there are more rows then copy the same code and increment the value of eq().

Answers

  • RachelTHREE
    RachelTHREE Cary, NC Guru ✭✭

    Great — thanks so much!

  • uhrxx005
    uhrxx005 Guru ✭✭

    @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
    TomG Raleigh, NC Wizard ✭✭✭✭✭

    @uhrxx005 - Check the mobile friendly box...it changes the html structure.

  • uhrxx005
    uhrxx005 Guru ✭✭

    Is this dependent on the theme you are using. Checking the mobile friendly box didn't seem to change anything.

  • TomG
    TomG Raleigh, NC Wizard ✭✭✭✭✭

    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
    MohammedAli_Rajapkar Mumbai - India Wizard ✭✭✭✭✭

    @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

  • uhrxx005
    uhrxx005 Guru ✭✭

    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
    MohammedAli_Rajapkar Mumbai - India Wizard ✭✭✭✭✭

    Great... i am glad that it working :)

  • Amina
    Amina New York Qubie ✭

    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("<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 tried it with mobile friendly checked and unchecked. Not sure what I'm doing wrong.

    Any help would be so appreciated.

    Thank you,

    Amina

  • aregan08
    aregan08 Orange, CA Qubie ✭

    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

  • RebeccaT
    RebeccaT Qubie ✭

    This 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..

  • ahmedA
    ahmedA India Wizard ✭✭✭✭✭
    edited April 5

    @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.

  • RebeccaT
    RebeccaT Qubie ✭

    Thank you. I'll give it a try.