Change bar colors in Constant Sum question | XM Community
Skip to main content
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?
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