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?
Solved
Change bar colors in Constant Sum question
Best answer by mattyb513
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
View original```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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.