+12Hi! How can I change the appearance of the “don't know” option in a Likert Multiple Choice question?
I'm using the Simple Layout, so I can't use JS on the question but I can use CSS in Look&Feel.
I would like “don't know” (weet niet in Dutch) to look different, for example a square or a grey background.
I know I can edit the tekst, but this is about the circle where the respondent clicks.
Best answer by Tom_1842
Hi, Simple layout appears to use grids when laying out choices. This makes targeting particular rows and columns sort of tricky.
For Multiple Choice questions, there is fortunately an element within each column that takes up the whole cell so this can be selected directly to change the background color. Try using the below CSS, updating the qid for your survey.
#question-QID5 > div > div > div > div > div > div.question-content > div > div:nth-child(1) {
background-color: #e8e8e8;
}The elements within the Matrix grid columns do not take up the whole cell, so I'm not sure if the background of the entire cell can be changed.
Like in your solution though, the radio buttons can be modified to be visually distinct from the rest of the answer options. The CSS to apply that styling to the radio buttons in the first column is below:
div.matrix-statement-items > div:nth-child(1) > div > span > span.radio-button.radio {
border-radius: 0px;
background-color: #e8e8e8;
}
+44You can write JS in look n feel > general header > source in a script tag format for simple layout.
Also, you cannot do for column as matrix identifies statements as each row and not columns. You will have to write JS/CSS for each row’s first radio button separately.
If you had used other layout side by side question type would have solved your problem.
<script>
document.getElementById('question-QID3').querySelectorAll('.matrix-statement-items .radio-button')[0].style.borderRadius="0";
</script>Update the QID and change the eq “[0]” to whichever row you want repeat the process it will make your radio button to square.
Hope it helps!
+12Hi
+44JavaScript is enabled in simple layout as well. You need to update the QID with your Questions id and it will work.
You can include this onload without script tag as well.
Hope it helps!
+12BTW, in the Classic Layout it works fine:
+12This is the correct solution to make the first option of matrix questions in Simple Layout square and gray:
+28Hi, Simple layout appears to use grids when laying out choices. This makes targeting particular rows and columns sort of tricky.
For Multiple Choice questions, there is fortunately an element within each column that takes up the whole cell so this can be selected directly to change the background color. Try using the below CSS, updating the qid for your survey.
#question-QID5 > div > div > div > div > div > div.question-content > div > div:nth-child(1) {
background-color: #e8e8e8;
}The elements within the Matrix grid columns do not take up the whole cell, so I'm not sure if the background of the entire cell can be changed.
Like in your solution though, the radio buttons can be modified to be visually distinct from the rest of the answer options. The CSS to apply that styling to the radio buttons in the first column is below:
div.matrix-statement-items > div:nth-child(1) > div > span > span.radio-button.radio {
border-radius: 0px;
background-color: #e8e8e8;
}
+12Thank you
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.