NPS question - color after selection | XM Community
Skip to main content

Hi All

We are aiming to make the button to have colour while the respondent select the score, if they select 8 for example, 0-8 will also have the colour, and the 0-6 will be in red colour ,7-8 in yellow color.

I've updated the custom code inside that nps question,it is not getting color for the last number.

for example: selected 9 means it showing color for 0-8 fine but 9 is not geting color.placed my code here.

Please help me resolve

Qualtrics.SurveyEngine.addOnload(function()

{

        jQuery('.ColumnLabel.First').css('color','red');

jQuery('.ColumnLabel.Last').css('color','green');

    var qid = this.questionId;

var leftpoint = document.getElementById(qid+'-0-label');

jQuery(".SingleAnswer").click(function() {

for (var i=0;i<=11;i++){

jQuery("td:eq(" + i +")").find('label').css("background-color", "rgba(0,0,0,.06)");

jQuery("td:eq(" + i +")").find('label span').css("color", "#0000ff");}

    

var selected = jQuery(this).text();

for (var i=0;i<=selected;i++){

    if((i==0)||(i==1)||(i==2)||(i==3)||(i==4)||(i==5)||(i==6)||(i==7)){

jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(255,0,0)");

    }

    if((i==8)||(i==9))

    {

    jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(255,165,0)");

jQuery("td:eq(" + i +")").find('label span').css("color", "#ff0000")}

    if((i==10)||(i==11))

    {

    jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(60,179,113)");

jQuery("td:eq(" + i +")").find('label span').css("color", "#ff0000")}

}

})

});

Thanks in Advance.

 

Hi,

You can refer this post

 


Hi,

You can refer this post

 

Hi

I referred to that post, it’s for a single selection. my code is working fine but it is not getting color for the last one.

here I posted a screenshot I’ m selecting 9 ,color appears for till 8 i need to include 9 also.

 


Try using the below. I added lines at the bottom that sets the styling for the selected choice.

Qualtrics.SurveyEngine.addOnload(function()
{

jQuery('.ColumnLabel.First').css('color','red');
jQuery('.ColumnLabel.Last').css('color','green');

var qid = this.questionId;
var leftpoint = document.getElementById(qid+'-0-label');

jQuery(".SingleAnswer").click(function() {

for (var i=0;i<=11;i++){

jQuery("td:eq(" + i +")").find('label').css("background-color", "rgba(0,0,0,.06)");
jQuery("td:eq(" + i +")").find('label span').css("color", "#0000ff");

}

var selected = jQuery(this).text();

for (var i=0;i<=selected;i++){

if((i==0)||(i==1)||(i==2)||(i==3)||(i==4)||(i==5)||(i==6)||(i==7))
{
jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(255,0,0)");
}

if((i==8)||(i==9))
{
jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(255,165,0)");
jQuery("td:eq(" + i +")").find('label span').css("color", "#ff0000");
}

if((i==10)||(i==11))
{
jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(60,179,113)");
jQuery("td:eq(" + i +")").find('label span').css("color", "#ff0000");
}

if(i==0)
{
jQuery("td:eq(1)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==1)
{
jQuery("td:eq(2)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==2)
{
jQuery("td:eq(3)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==3)
{
jQuery("td:eq(4)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==4)
{
jQuery("td:eq(5)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==5)
{
jQuery("td:eq(6)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==6)
{
jQuery("td:eq(7)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==7)
{
jQuery("td:eq(8)").find('label').css("background-color", "rgb(255,165,0)");
jQuery("td:eq(8)").find('label span').css("color", "#ff0000");
}

if(i==8)
{
jQuery("td:eq(9)").find('label').css("background-color", "rgb(255,165,0)");
jQuery("td:eq(9)").find('label span').css("color", "#ff0000");
}

if(i==9)
{
jQuery("td:eq(10)").find('label').css("background-color", "rgb(60,179,113)");
jQuery("td:eq(10)").find('label span').css("color", "#ff0000");
}

if(i==10)
{
jQuery("td:eq(11)").find('label').css("background-color", "rgb(60,179,113)");
jQuery("td:eq(11)").find('label span').css("color", "#ff0000");
}

}

});

});

 


Try using the below. I added lines at the bottom that sets the styling for the selected choice.

Qualtrics.SurveyEngine.addOnload(function()
{

jQuery('.ColumnLabel.First').css('color','red');
jQuery('.ColumnLabel.Last').css('color','green');

var qid = this.questionId;
var leftpoint = document.getElementById(qid+'-0-label');

jQuery(".SingleAnswer").click(function() {

for (var i=0;i<=11;i++){

jQuery("td:eq(" + i +")").find('label').css("background-color", "rgba(0,0,0,.06)");
jQuery("td:eq(" + i +")").find('label span').css("color", "#0000ff");

}

var selected = jQuery(this).text();

for (var i=0;i<=selected;i++){

if((i==0)||(i==1)||(i==2)||(i==3)||(i==4)||(i==5)||(i==6)||(i==7))
{
jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(255,0,0)");
}

if((i==8)||(i==9))
{
jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(255,165,0)");
jQuery("td:eq(" + i +")").find('label span').css("color", "#ff0000");
}

if((i==10)||(i==11))
{
jQuery("td:eq(" + i +")").find('label').css("background-color", "rgb(60,179,113)");
jQuery("td:eq(" + i +")").find('label span').css("color", "#ff0000");
}

if(i==0)
{
jQuery("td:eq(1)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==1)
{
jQuery("td:eq(2)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==2)
{
jQuery("td:eq(3)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==3)
{
jQuery("td:eq(4)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==4)
{
jQuery("td:eq(5)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==5)
{
jQuery("td:eq(6)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==6)
{
jQuery("td:eq(7)").find('label').css("background-color", "rgb(255,0,0)");
}

if(i==7)
{
jQuery("td:eq(8)").find('label').css("background-color", "rgb(255,165,0)");
jQuery("td:eq(8)").find('label span').css("color", "#ff0000");
}

if(i==8)
{
jQuery("td:eq(9)").find('label').css("background-color", "rgb(255,165,0)");
jQuery("td:eq(9)").find('label span').css("color", "#ff0000");
}

if(i==9)
{
jQuery("td:eq(10)").find('label').css("background-color", "rgb(60,179,113)");
jQuery("td:eq(10)").find('label span').css("color", "#ff0000");
}

if(i==10)
{
jQuery("td:eq(11)").find('label').css("background-color", "rgb(60,179,113)");
jQuery("td:eq(11)").find('label span').css("color", "#ff0000");
}

}

});

});

 

Thank you @Tom_1842 .


If possible I would just suggest explore using a different measure, colouring NPS selection provides bias results and takes away from the intent/behaviour science behind NPS. When there is a need to educate customer on what the right or good score is, NPS is typically the wrong measure or it’s misunderstood on what it is measuring. You may not be able to change it, however if you can I’d personally simplify the question away from NPS vs guiding customers responses.


Leave a Reply