How to Include an "N/A" Option in Carousel Questions
Hello,
We ask a battery of 5 statements on a 5pt agreement scale. We want to broaden the statements we ask our customers to rate us on, and in doing that, we acknowledge there may be instances where we ask someone to rate a statement that irrelevant to them.
As such, we’d like to include an “N/A” option… but we do NOT want it to appear as part of the scale.
This is a rough mock-up of what we would like it to look like. Has anyone had success in doing this? Or other ideas on how to include an N/A that doesn’t kill the symmetry of the scale, increasing cognitive load on survey respondents?
Many thanks!
Page 1 / 1
This can be achieved with the help of custom coding and CSS.
Hi, I was able to adapt the code in this post for a Matrix Carousel. I think it looks best in Classic Layout. First create a Matrix question with 6 scale points and set it to Carousel and Horizontal. Next, add the below to the OnReady section of the question's JavaScript:
var qid = this.questionId; var cont = '#'+qid+' > div.Inner.BorderColor.Likert > div > fieldset > div > div.CarouselAnswerContainer.Horizontal > div > fieldset'; var opt6 = '#'+qid+' > div.Inner.BorderColor.Likert > div > fieldset > div > div.CarouselAnswerContainer.Horizontal > div > fieldset > ul > li:nth-child(6)'; jQuery(opt6).detach().appendTo(cont);
Finally, add the below CSS to the Style section of the Look & Feel, updating the QID for your Carousel question:
Set alignment to Column and set the number of columns to 5. This will push the 6th scale point to a new row.
Add the below CSS. It will add a divider line between the last option and the rest of the scale points
@media only screen and (min-width:481px) { li:last-of-type { border-left: 1px solid grey; } } @media only screen and (max-width:480px) { li:last-of-type { border-top: 1px solid grey; } }
Thank you so much, @Tom_1842! I’m excited to try this.
Do you remember how this worked on Mobile devices?
On Mobile devices, the scale points are displayed vertically. I’ve updated the code so that it matches the desktop display.
First, unselect “Mobile Friendly” on the Carousel. This will cause the scale points to display horizontally.
Then, add the JS to the OnReady:
var qid = this.questionId; var cont = '#'+qid+' > div.Inner.BorderColor.Likert > div > fieldset > div > div.CarouselAnswerContainer.Horizontal > div > fieldset'; var opt6 = '#'+qid+' > div.Inner.BorderColor.Likert > div > fieldset > div > div.CarouselAnswerContainer.Horizontal > div > fieldset > ul > li:nth-child(6)'; jQuery(opt6).detach().appendTo(cont);
Finally, add the below CSS to the Style section of the Look & Feel, updating the QID for your Carousel question:
I’ve used your code (I’m FAR from a dev/coder) and had pretty good success, but ran into a few issues:
We still have some questions using the 5pt scale (without N/A), but now those appear very weird on Mobile (I’m assuming because we hard-coded the formatting into the CSS of the theme and is affecting all carousel questions, not the ones with an N/A):
The questions w/ the N/A option are centered on Desktop (and looks GREAT!), but are off-center (to the left) on Mobile… any ideas?
Curious your opinion -- is it too small to read the scale on Mobile and therefore should look for a different solution?
HUGE thank you,
Paul
On Mobile devices, the scale points are displayed vertically. I’ve updated the code so that it matches the desktop display.
First, unselect “Mobile Friendly” on the Carousel. This will cause the scale points to display horizontally.
Then, add the JS to the OnReady:
var qid = this.questionId; var cont = '#'+qid+' > div.Inner.BorderColor.Likert > div > fieldset > div > div.CarouselAnswerContainer.Horizontal > div > fieldset'; var opt6 = '#'+qid+' > div.Inner.BorderColor.Likert > div > fieldset > div > div.CarouselAnswerContainer.Horizontal > div > fieldset > ul > li:nth-child(6)'; jQuery(opt6).detach().appendTo(cont);
Finally, add the below CSS to the Style section of the Look & Feel, updating the QID for your Carousel question:
Hello! For your first point, I was able to reproduce your screen shot not by having 5 scale points but by having the "Mobile Friendly" toggle enabled. This will cause the scale points to display vertically and then the CSS that sets the width to 10px makes them looked squished. Make sure that the "Mobile Friendly" toggle is not enabled.
I am unfortunately not able to reproduce the answer options being left justified on Mobile.
I think I was being a little too safe when setting the font size to 8px with CSS. Try increasing this to 12px.
The CSS is currently in place throughout the survey so would affect all Carousel questions. To add it for just a specific page, the CSS can instead be included in the HTML of any question on that page. Try using the Rich Content Editor's HTML/Source view "<>" to update the 6pt Carousel Question Text with the below:
