What is really happening is that they can select them, but they can’t see what they’ve selected. Because you’ve applied the background color directly to the elements, those are overriding the .q-checked style.
You can add an important CSS style something like this to the question text:
<style>
.Skin .NPS label.SingleAnswer.q-checked { background: #0091e4 !important; }
</style>
Also, your JS could be more efficient:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery(this.questionContainer).find("td label.SingleAnswer").each(function(i) {
var label = jQuery(this);
label.find("span").css("color","#ffffff");
if(i<7) label.css("background-color","rgb(255,0,0)");
else if(i<9) label.css("background-color","rgb(255,165,0)");
else label.css("background-color","rgb(60,179,113)");
});
});
@TomG Thank you! It worked.
Hello, I am facing the same problem, but the tips are not working with me.
Here is my js code:
label#QID4-0-label.SingleAnswer{
color :red !Important;
}
label#QID4-1-label.SingleAnswer{
color :red !Important;
}
label#QID4-2-label.SingleAnswer{
color :red !Important;
}
label#QID4-3-label.SingleAnswer{
color :red !Important;
}
label#QID4-4-label.SingleAnswer{
color :red !Important;
}
label#QID4-5-label.SingleAnswer{
color :red !Important;
}
label#QID4-6-label.SingleAnswer{
color :red !Important;
}
label#QID4-7-label.SingleAnswer{
color : #f9d71c !Important;
}
label#QID4-8-label.SingleAnswer{
color : #f9d71c!Important;
}
label#QID4-9-label.SingleAnswer{
color :green !Important;
}
label#QID4-10-label.SingleAnswer{
color :green !Important;
}
label#QID4-0-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-1-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-2-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-3-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-4-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-5-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-6-label.SingleAnswer.q-checked {
background-color :red !Important;
color:white !Important;
}
label#QID4-7-label.SingleAnswer.q-checked {
background-color : #f9d71c !Important;
color:white !Important;
}
label#QID4-8-label.SingleAnswer.q-checked {
background-color : #f9d71c !Important;
color:white !Important;
}
label#QID4-9-label.SingleAnswer.q-checked {
background-color :green !Important;
color:white !Important;
}
label#QID4-10-label.SingleAnswer.q-checked {
background-color :green !Important;
color:white !Important;
}
It is not working for my.
Here is my js code
Qualtrics.SurveyEngine.addOnload(function() { for (var i = 0; i <= 11; i++) { if ((i >= 0 && i <= 7)) { jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FF8E8E"); jQuery("td:eq(" + i + ")").find('label span').css("color", "#ff0000"); } else if ((i >= 8 && i <= 9)) { jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FFFAAE"); jQuery("td:eq(" + i + ")").find('label span').css("color", "#ffe500"); } else if ((i >= 10 && i <= 11)) { jQuery("td:eq(" + i + ")").find('label').css("background-color", "#AEFFB3"); jQuery("td:eq(" + i + ")").find('label span').css("color", "#00ff00"); } } });
tks for the help
@arezzo - The code won’t work with Simple layout.
I’m trying using the classic layout.
Is it possible just to have a line contouring the number selected?
