Change Answer Colors | XM Community
Solved

Change Answer Colors

  • 22 August 2019
  • 7 replies
  • 223 views
K
Rank
Userlevel 7
Badge +19
  • Kate
  • Level 5 ●●●●●
  • 544 replies
I'm trying to change the colors of a likert scale so that if they select a dissatisfied option, it turns red, satisfied green, etc.. But I'm having trouble getting it to work. I'm still trying to learn some of this so I'm a little lost! Here's what I have so far:

```<style>
.Skin #QID7.li:nth-child(1) label.MultipleAnswer.q-checked, .Skin #QID7.li:nth-child(1) label.SingleAnswer.q-checked{background-color:red;}
.Skin #QID7.li:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID7.li:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}
.Skin #QID7.li:nth-child(3) label.MultipleAnswer.q-checked, .Skin #QID7.li:nth-child(3) label.SingleAnswer.q-checked{background-color:yellow;}
.Skin #QID7.li:nth-child(4) label.MultipleAnswer.q-checked, .Skin #QID7.li:nth-child(4) label.SingleAnswer.q-checked{background-color:green;}
.Skin #QID7.li:nth-child(5) label.MultipleAnswer.q-checked, .Skin #QID7.li:nth-child(5) label.SingleAnswer.q-checked {background-color:green;}
</style>```

But what is really weird: The first question in my survey flashes the colors I have identified when you hit "Next"- but the question I WANT the colors to go on to does nothing at all. So I'm doing _something_ but it's not the something I want to be happening. The issue appears to be with the question ID, and with when the action occurs.

Apprechaite the help!
icon

Best answer by TomG 23 August 2019, 15:11

View original

7 replies

TomG
Rank
Userlevel 7
Badge +27
@Kate,

For starters, you need a space instead of a period between #QID7 and li.
K
Rank
Userlevel 7
Badge +19
Thanks, @TomG! Removed. But still testing the same described expereince.
TomG
Rank
Userlevel 7
Badge +27
@Kate,

This works:
```
Click to write the question text
<style>
.Skin #QID1 li:nth-child(1) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(1) label.SingleAnswer.q-checked{background-color:red;}
.Skin #QID1 li:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}
.Skin #QID1 li:nth-child(3) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(3) label.SingleAnswer.q-checked{background-color:yellow;}
.Skin #QID1 li:nth-child(4) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(4) label.SingleAnswer.q-checked{background-color:green;}
.Skin #QID1 li:nth-child(5) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(5) label.SingleAnswer.q-checked {background-color:green;}
</style>
```
Example survey:
https://marketinview.ca1.qualtrics.com/jfe/preview/SV_1BKNhTUhnAlbojz?Q_SurveyVersionID=current&Q_CHL=preview
K
Rank
Userlevel 7
Badge +19
Thanks, @TomG But I still must be doing somrthing wrong. Am I placing it in the wrong area or something? It's still not working.

!

!
TomG
Rank
Userlevel 7
Badge +27
Kate,

When you put the question in horizontal mode, it changes the underlying html from an unordered list to a table. So, there are no `<li>` elements. Instead there are table elements. This CSS works when I change the demo survey to horizontal:
```
Click to write the question text
<style>
.Skin #QID1 tr td.LabelContainer:nth-child(1) label.MultipleAnswer.q-checked, .Skin #QID1 tr td.LabelContainer:nth-child(1) label.SingleAnswer.q-checked{background-color:red;}
.Skin #QID1 tr td.LabelContainer:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID1 tr td.LabelContainer:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}
.Skin #QID1 tr td.LabelContainer:nth-child(3) label.MultipleAnswer.q-checked, .Skin #QID1 tr td.LabelContainer:nth-child(3) label.SingleAnswer.q-checked{background-color:yellow;}
.Skin #QID1 tr td.LabelContainer:nth-child(4) label.MultipleAnswer.q-checked, .Skin #QID1 tr td.LabelContainer:nth-child(4) label.SingleAnswer.q-checked{background-color:green;}
.Skin #QID1 tr td.LabelContainer:nth-child(5) label.MultipleAnswer.q-checked, .Skin #QID1 tr td.LabelContainer:nth-child(5) label.SingleAnswer.q-checked{background-color:green;}
</style>
```
Demo:
https://marketinview.ca1.qualtrics.com/jfe/preview/SV_1BKNhTUhnAlbojz?Q_SurveyVersionID=current&Q_CHL=preview
NiC
Rank
Userlevel 7
Badge +27
> @TomG said:
> @Kate,
>
> This works:
> ```
> Click to write the question text
> <style>
> .Skin #QID1 li:nth-child(1) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(1) label.SingleAnswer.q-checked{background-color:red;}
> .Skin #QID1 li:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}
> .Skin #QID1 li:nth-child(3) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(3) label.SingleAnswer.q-checked{background-color:yellow;}
> .Skin #QID1 li:nth-child(4) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(4) label.SingleAnswer.q-checked{background-color:green;}
> .Skin #QID1 li:nth-child(5) label.MultipleAnswer.q-checked, .Skin #QID1 li:nth-child(5) label.SingleAnswer.q-checked {background-color:green;}
> </style>
> ```
> Example survey:
> https://marketinview.ca1.qualtrics.com/jfe/preview/SV_1BKNhTUhnAlbojz?Q_SurveyVersionID=current&Q_CHL=preview

Hi Kate,

The above code will be applicable to Options where Position is set to Vertical. As per your screenshot it seems that your Options Position is set to Horizontal. You can use the following code for Horizontal Aligned options:

.Skin #QID7 td:nth-child(1) label.SingleAnswer.q-checked, .Skin #QID7 td:nth-child(1) label.MultipleAnswer.q-checked{
background-color: green;
}
.Skin #QID7 td:nth-child(2) label.SingleAnswer.q-checked, .Skin #QID7 td:nth-child(2) label.MultipleAnswer.q-checked{
background-color: green;
}
.Skin #QID7 td:nth-child(3) label.SingleAnswer.q-checked, .Skin #QID7 td:nth-child(3) label.MultipleAnswer.q-checked{
background-color: yellow;
}
.Skin #QID7 td:nth-child(4) label.SingleAnswer.q-checked, .Skin #QID7 td:nth-child(4) label.MultipleAnswer.q-checked{
background-color: red;
}
.Skin #QID7 td:nth-child(5) label.SingleAnswer.q-checked, .Skin #QID7 td:nth-child(5) label.MultipleAnswer.q-checked{
background-color: red;
}

Here is the preview link for the same :
https://ugamsandbox.ca1.qualtrics.com/jfe/preview/SV_3axV8UiJR5YStG5?Q_SurveyVersionID=current&Q_CHL=preview
XM Engineer | Zill Consulting
K
Rank
Userlevel 7
Badge +19
Amazing! Thank you, @TomG, Thank you @NiC

Leave a Reply


Terms & Conditions