How do I color-code my response options? | XM Community
Skip to main content

Hello!
I am creating a satisfaction survey.
A few questions involve answers from 'Strongly Agree' to 'Strongly Disagree'.
As we all know, sometimes respondents totally reverse their answers and I hope have them coded in green (for agreement) and red (for disagreement) would reduce these kinds of mistakes. Ideally these should in different hues so for 'Strongly Agree' bright red to 'Strongly Disagree' bring green. and maybe yellow for 'Neutral'.
How could I do this? In custom CSS box?

Thanks a lot in advance!

Is there a reason why you are not using the "Rich Content Editor" for coloring the individual answer options?
image.png


Thank you for your advice @ManfredBM
I've tried the Rich Content Editor but the colors do no show in the preview. Please see below:
Capture2.JPGCapture1.JPGIs there something I did wrong?


Hello vickietwk ,
The configuration looks correct, it could be an issue of the theme or layout you selected or you can also try opening the survey in new browser it could be a cache issue as well. If any of those don't work you can use custom CSS to change the background color as shown below:
CSS:
To change tiles color (all same):
.Skin label.MultipleAnswer, .Skin label.SingleAnswer {
background: #1df2eb;}
image.pngTo change label color (all same):
.Skin label.MultipleAnswer.LabelPositionBELOW, .Skin label.SingleAnswer.LabelPositionBELOW { color: blue;
}
image.pngTo change individual tiles color (change QID as needed):
#QID65-1-label
{background: #b81d13;}
#QID65-2-label
{background: #efb700;}
#QID65-3-label
{background: #008450;}
image.pngTo change individual label text color (change QID as needed):
#QID65-1-label
{color: #ffffff;}
#QID65-2-label
{color: #008450;}
#QID65-3-label
{color: #b81d13;}
image.pngHope this helps!


Hi Deepak, would you please help me understand the syntax for this snippet in particular:
"To change individual tiles color (change QID as needed):
#QID65-1-label
{background: #b81d13;}"
In my example, the question name is "CES" so would my CSS look like this?
#QIDCES-1-label {background: #b81d13;}
When I try that, it does not work and I'd wager I'm getting the syntax wrong but don't know whether I'm using the wrong QID or where to even find that or if I'm inserting the question name incorrectly into your code. Thank you in advance!


pfitzgerald
You don't need to enter text you can find QID of each element by previewing the survey and inspecting that element by right clicking as you can see in image below:
image.pngHope it helps!


Deepak thank you, that worked perfectly!
image.png


Leave a Reply