How can I use Javascript to implement the changes in CSS | XM Community
Skip to main content

I am new in using Javascript and I want to use Javascript to implement the CSS code below. I need to use javascript since the client want to have this for a specific logic only.

.Skin label.MultipleAnswer, .Skin label#QID2-0-label.SingleAnswer{
background: #E43E3D;
}
.Skin label.MultipleAnswer, .Skin label#QID2-1-label.SingleAnswer{
background: #EA484D;
}
.Skin label.MultipleAnswer, .Skin label#QID2-2-label.SingleAnswer{
background: #EC654E;
}
.Skin label.MultipleAnswer, .Skin label#QID2-3-label.SingleAnswer{
background: #EF874C;
}
.Skin label.MultipleAnswer, .Skin label#QID2-4-label.SingleAnswer{
background: #F3A74C;
}
.Skin label.MultipleAnswer, .Skin label#QID2-5-label.SingleAnswer{
background: #F8C43D;
}
.Skin label.MultipleAnswer, .Skin label#QID2-6-label.SingleAnswer{
background: #E1C63B;
}
.Skin label.MultipleAnswer, .Skin label#QID2-7-label.SingleAnswer{
background: #C1CC36;
}
.Skin label.MultipleAnswer, .Skin label#QID2-8-label.SingleAnswer{
background: #9FCD35;
}
.Skin label.MultipleAnswer, .Skin label#QID2-9-label.SingleAnswer{
background: #7FCD31;
}
.Skin label.MultipleAnswer, .Skin label#QID2-10-label.SingleAnswer{
background: #5AAF2B;
}

image.pngI will use that code for the encircled question

Qualtrics.SurveyEngine.addOnload(function() {
var colors = ["#E43E3D","#EA484D","#EC654E","#EF874C","#F3A74C","#F8C43D","#E1C63B","#C1CC36","#9FCD35","#7FCD31","#5AAF2B"];
jQuery("#"+this.questionId+" label.SingleAnswer").each(function(i) { jQuery(this).css("background",colors[i]); });
});

TomG It is working. Thank you so much for your help.

@TomG thank you. Please, is there a way to change the background color only while unselected? If I select the answer, it would be as default setting.  

 

Leave a Reply


Terms & Conditions