How to use a multiple choice format, but visually blot out some of the options | XM Community
Skip to main content
Michael_Cooksey
Administrator
10 days ago

How to use a multiple choice format, but visually blot out some of the options

L
Level 1 ●
Forum|alt.badge.img+6
!

Hello. I need to have a multiple choice scale with around 29 options, and I want the options on each edge to be unavailable. At the moment, I am planning to use custom content validation and imagery in the in the options to indicate this - but what I really need is for the circle where people select the option to be greyed out or invisible - to make it super clear to survey takers that they are not meant to and cannot select it, even before the validation tells them.

Is there a good way of doing this? Any javascript maybe I can use to make the selection invisible, while keeping the option label above the circle visible? In the attached image, I would want to keep all the numbers above the options, but just grey out or make invisible the selection circles below the option labels.

thanks so much to anybody who tries to help!
Josh

    13 replies

    bstrahin
    Level 6 ●●●●●●
    Forum|alt.badge.img+38
    • bstrahin
    • Level 6 ●●●●●●
    • 638 replies
    • March 28, 2018
    I had this question a couple of weeks ago and got a great solution from a Slack forum. I think @TomG might have actually been the brains behind it so I can't take full credit.

    I had set up a matrix question and the code will hide the check box in a given slot:
    You can find the question ID and row/column number by previewing the survey and inspecting your element.
    $('QR~_questionID_~_rowNumber_~_columnNumber_').up('td').childElements().invoke('hide');

    A snippet of my actual code. If it's not working for you it might be that I was using check boxes and not radio buttons.
    $('QR~QID16~1~2').up('td').childElements().invoke('hide');
    AnthonyR
    TomG
    cwaterbury
    6 people like this
    • AnthonyR
      AnthonyR
    • TomG
      TomG
    • cwaterbury
      cwaterbury
    • L
      lejoshua
    • fleb
      fleb
    • Sunsiree
      Sunsiree
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • 5911 replies
    • March 28, 2018
    Yes, that was me on Slackoverflow!
    Akdashboard
    bstrahin
    L
    3 people like this
    • Akdashboard
      Akdashboard
    • bstrahin
      bstrahin
    • L
      lejoshua
    L
    Level 1 ●
    Forum|alt.badge.img+6
    • lejoshua
    • Author
    • Level 1 ●
    • 11 replies
    • March 28, 2018
    Well, thank you both, this has been very helpful! I have a small follow up question: Is there a way to move the labels closer together in the matrix setting ? Or, alternatively, a way to implement this in the multiple choice setting, without deleting the label as well as the radio button? The only drawback of how it looks at the moment is that the radio buttons are too far apart and are struggling to fit on the screen all at once (unfortunately I need 29 options!).

    Thanks again for the useful feedback so far - I am almost there! And it does work using the matrix setting!

    Josh
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • 5911 replies
    • March 28, 2018
    I'm guessing you can reduce the right and left padding on the column headers to 1. You can do it with CSS, but this line of JavaScript should also do the trick:
    ```
    jQuery("#"+this.questionId+" th[role=columnheader]").css({"padding-left":"1px","padding-right":"1px"});
    ```
    L
    Sunsiree
    2 people like this
    • L
      lejoshua
    • Sunsiree
      Sunsiree
    L
    Level 1 ●
    Forum|alt.badge.img+6
    • lejoshua
    • Author
    • Level 1 ●
    • 11 replies
    • March 28, 2018
    Thanks Tom. It seems the padding is already at 1 or 0 - but there's some other thing preventing the radio buttons getting as close together as for the multiple choice question, for a given text size. I will keep looking for a solution.

    If there's a way to hide just the radio button and not the label of the multiple choice scale that might be a more promising way to go.

    Cheers,
    Josh
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • 5911 replies
    • March 28, 2018
    If you post a preview link to to that question, we would have something to go by.
    L
    Level 1 ●
    Forum|alt.badge.img+6
    • lejoshua
    • Author
    • Level 1 ●
    • 11 replies
    • March 28, 2018
    https://wharton.ca1.qualtrics.com/jfe/preview/SV_4HOhEmi7ulmy6wt/BL_1GM8BMux5U5nMax

    Here's one! It's the first question - currently in plain jane look and feel.
    L
    Level 1 ●
    Forum|alt.badge.img+6
    • lejoshua
    • Author
    • Level 1 ●
    • 11 replies
    • March 28, 2018
    On the second page you can see where I tried to do it before and successfully hide the radio button and the label for the multiple choice scale - either getting the numbers a bit more compact for the first option, or, getting the labels to show for the second option, would be great! Thank you so much.
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • 5911 replies
    • March 28, 2018
    On the multiple choice, the script given earlier hides everything in the cell. In this case, you only want to to hide the radio button. You can do that directly using the id: `$('QR~questionID~choiceID').hide();`. There are probably smarter ways to do it. I don't know how you are coloring the boxes, but if you added a class to those spans it would make it easy to find them then walk the DOM to find matching radio button.

    On the matrix, you still have 5px of padding on column headers. The JS line I gave earlier would reduce that. Your bigger issue is the label column. You can hide anything with a class of c1, c2 and c3. However, if you do that, I think you may have to recalculate the widths and update them.
    L
    fleb
    2 people like this
    • L
      lejoshua
    • fleb
      fleb
    L
    Level 1 ●
    Forum|alt.badge.img+6
    • lejoshua
    • Author
    • Level 1 ●
    • 11 replies
    • March 28, 2018
    This is perfect.

    This is actually my first time ever using JS - so I think I misunderstood your JS line and tried to edit it - in fact, it works perfectly if i just copy and paste it. These solutions are great. Thank you so much for being patient - it's very, very appreciated!
    O
    Forum|alt.badge.img+2
    • OI899
    • 3 replies
    • April 3, 2019
    I am also trying to accomplish this, however I'd like to remove certain dropdown items on a side by side question. Like for example the "Route of Administration choice on D1 and D2 in this example. Can you help? I am new to Java Script.

    !
    G
    Level 1 ●
    Forum|alt.badge.img+3
    • guzman_r105
    • Level 1 ●
    • 11 replies
    • November 14, 2019
    > $('QR~questionID~rowNumber~columnNumber').up('td').childElements().invoke('hide');

    I tried this but it didn't work for me. I wanted to remove the Not applicable radio button from some of the likert scale statements. I use the QID from the exported data file and changed the row and column numbers. Nothing changed after I saved the JS editor. How frustrating! Can someone help please?
    G
    Level 1 ●
    Forum|alt.badge.img+3
    • guzman_r105
    • Level 1 ●
    • 11 replies
    • November 15, 2019
    Figured it out! The column number is not something my logic can explain. I used pipe text to find out the actual column number and dream came true! Than you for the codes!

    Leave a Reply


    Terms & Conditions