Change Background Color Based on Survey Response

Question

I use a 5-point scale for our closed-end survey questions.: 5 = Very Satisfied the 1 = Very Dissatisfied.  I would like to color the background of the respondent's selection after they've made their choice:  Very Satisfied and Satisfied would turn GREEN:  Neither Satisfied nor Dissatisfied would turn TAN, and the Dissatisfied and Very Dissatisfied scores would turn the choice RED.I don't know if this can be done and if it can, how to do it.  Can anyone point me in the right direction?  Thanks.

Tom_1842 · Answer

Hi there, if you still need, I was able to put what you are describing in place by adapting the CSS discussed in this thread. Over in the Builder, create a Multiple Choice question with 5 answer options and add the below CSS to the Question Text using the Rich Content Editor's HTML/Source View "". The below is set up for both vertical and horizontal alignments..Skin tr td.LabelContainer:nth-child(1) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(1) label.SingleAnswer.q-checked{background-color:rgba(238, 50, 70, 1);}.Skin tr td.LabelContainer:nth-child(2) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(2) label.SingleAnswer.q-checked{background-color:rgba(245, 150, 30, 1);}.Skin tr td.LabelContainer:nth-child(3) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(3) label.SingleAnswer.q-checked{background-color:rgba(255, 203, 8, 1);}.Skin tr td.LabelContainer:nth-child(4) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(4) label.SingleAnswer.q-checked{background-color:rgba(178, 210, 53, 1);}.Skin tr td.LabelContainer:nth-child(5) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(5) label.SingleAnswer.q-checked{background-color:rgba(0, 165, 81, 1);}.Skin li:nth-child(1) label.MultipleAnswer.q-checked, .Skin li:nth-child(1) label.SingleAnswer.q-checked{background-color:rgba(238, 50, 70, 1);}.Skin li:nth-child(2) label.MultipleAnswer.q-checked, .Skin li:nth-child(2) label.SingleAnswer.q-checked{background-color:rgba(245, 150, 30, 1);}.Skin li:nth-child(3) label.MultipleAnswer.q-checked, .Skin li:nth-child(3) label.SingleAnswer.q-checked{background-color:rgba(255, 203, 8, 1);}.Skin li:nth-child(4) label.MultipleAnswer.q-checked, .Skin li:nth-child(4) label.SingleAnswer.q-checked{background-color:rgba(178, 210, 53, 1);}.Skin li:nth-child(5) label.MultipleAnswer.q-checked, .Skin li:nth-child(5) label.SingleAnswer.q-checked{background-color:rgba(0, 165, 81, 1);}Click to write the question textTo make it so that the answer options have different color backgrounds before selection as well, try using the below:.Skin tr td.LabelContainer:nth-child(1) label.MultipleAnswer, .Skin tr td.LabelContainer:nth-child(1) label.SingleAnswer{background-color:rgba(238, 50, 70, 0.3);}.Skin tr td.LabelContainer:nth-child(2) label.MultipleAnswer, .Skin tr td.LabelContainer:nth-child(2) label.SingleAnswer{background-color:rgba(245, 150, 30, 0.3);}.Skin tr td.LabelContainer:nth-child(3) label.MultipleAnswer, .Skin tr td.LabelContainer:nth-child(3) label.SingleAnswer{background-color:rgba(255, 203, 8, 0.3);}.Skin tr td.LabelContainer:nth-child(4) label.MultipleAnswer, .Skin tr td.LabelContainer:nth-child(4) label.SingleAnswer{background-color:rgba(178, 210, 53, 0.3);}.Skin tr td.LabelContainer:nth-child(5) label.MultipleAnswer, .Skin tr td.LabelContainer:nth-child(5) label.SingleAnswer{background-color:rgba(0, 165, 81, 0.3);}.Skin li:nth-child(1) label.MultipleAnswer, .Skin li:nth-child(1) label.SingleAnswer{background-color:rgba(238, 50, 70, 0.3);}.Skin li:nth-child(2) label.MultipleAnswer, .Skin li:nth-child(2) label.SingleAnswer{background-color:rgba(245, 150, 30, 0.3);}.Skin li:nth-child(3) label.MultipleAnswer, .Skin li:nth-child(3) label.SingleAnswer{background-color:rgba(255, 203, 8, 0.3);}.Skin li:nth-child(4) label.MultipleAnswer, .Skin li:nth-child(4) label.SingleAnswer{background-color:rgba(178, 210, 53, 0.3);}.Skin li:nth-child(5) label.MultipleAnswer, .Skin li:nth-child(5) label.SingleAnswer{background-color:rgba(0, 165, 81, 0.3);}.Skin tr td.LabelContainer:nth-child(1) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(1) label.SingleAnswer.q-checked{background-color:rgba(238, 50, 70, 1);}.Skin tr td.LabelContainer:nth-child(2) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(2) label.SingleAnswer.q-checked{background-color:rgba(245, 150, 30, 1);}.Skin tr td.LabelContainer:nth-child(3) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(3) label.SingleAnswer.q-checked{background-color:rgba(255, 203, 8, 1);}.Skin tr td.LabelContainer:nth-child(4) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(4) label.SingleAnswer.q-checked{background-color:rgba(178, 210, 53, 1);}.Skin tr td.LabelContainer:nth-child(5) label.MultipleAnswer.q-checked, .Skin tr td.LabelContainer:nth-child(5) label.SingleAnswer.q-checked{background-color:rgba(0, 165, 81, 1);}.Skin li:nth-child(1) label.MultipleAnswer.q-checked, .Skin li:nth-child(1) label.SingleAnswer.q-checked{background-color:rgba(238, 50, 70, 1);}.Skin li:nth-child(2) label.MultipleAnswer.q-checked, .Skin li:nth-child(2) label.SingleAnswer.q-checked{background-color:rgba(245, 150, 30, 1);}.Skin li:nth-child(3) label.MultipleAnswer.q-checked, .Skin li:nth-child(3) label.SingleAnswer.q-checked{background-color:rgba(255, 203, 8, 1);}.Skin li:nth-child(4) label.MultipleAnswer.q-checked, .Skin li:nth-child(4) label.SingleAnswer.q-checked{background-color:rgba(178, 210, 53, 1);}.Skin li:nth-child(5) label.MultipleAnswer.q-checked, .Skin li:nth-child(5) label.SingleAnswer.q-checked{background-color:rgba(0, 165, 81, 1);}Click to write the question text

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded