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.