Change bar colors in Constant Sum question | XM Community
Solved

Change bar colors in Constant Sum question

  • 27 July 2018
  • 1 reply
  • 19 views
Nico_Leussink
Rank
Userlevel 3
Badge +5
In my survey I have several Constant Sum questions where 3 choices are visable. I would like to give each bar their own color. Now they are all green. But I would like to have i.e. the first bar blue, the second one orange and the 3rd one red. How can I setup colors in this kind of questions?
See the screenshot below.
!

Second part of my question: how do I make these bars Readonly using Javascript?
icon

Best answer by mattyb513 27 July 2018, 16:48

View original

1 reply

mattyb513
Rank
Userlevel 6
Badge +6
You could use CSS to do this. Something like this should work for you:

```css
/* slider 1 */
.Skin #QID1 .HBAR table tbody tr:nth-child(1) .trackHolderRel .track:hover, .Skin #QID1 .HBAR table tbody tr:nth-child(1) .trackHolderRel.activated .track {
border-color: green !important;
}

.Skin #QID1 .HBAR table tbody tr:nth-child(1) .trackHolderRel.activated .track {
border-color: green !important;
}

.Skin #QID1 .horizontalbar table tbody tr:nth-child(1) .activated .bar {
background: green !important;
}
/* slider 2 */
.Skin #QID1 .HBAR table tbody tr:nth-child(2) .trackHolderRel .track:hover, .Skin #QID1 .HBAR table tbody tr:nth-child(2) .trackHolderRel.activated .track {
border-color: red !important;
}

.Skin #QID1 .HBAR table tbody tr:nth-child(2) .trackHolderRel.activated .track {
border-color: red !important;
}

.Skin #QID1 .horizontalbar table tbody tr:nth-child(2) .activated .bar {
background: red !important;
}
```

Keep in mind that you will need to change the QID, as well as the `nth-child`. `nth-child(1)` will be the first slider, `nth-child(2)` will be the second, and so on.

Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_6QG3irvLHEVWPAN?Q_SurveyVersionID=current&Q_CHL=preview

Leave a Reply


Terms & Conditions