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
How to use a multiple choice format, but visually blot out some of the options
+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
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
+38I 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');
+6Well, 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
+27I'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"});
```
+6Thanks 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
+27If you post a preview link to to that question, we would have something to go by.
+6https://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.
+6On 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.
+27On 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.
+6This 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!
+2I 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.
!
+3> $('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?
+3Figured 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!
Sign up
Already have an account? Login
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login to the Community
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.