CSS code to show labels below NPS question | XM Community
Skip to main content

I’m using the javascript code that @TomG kindly provided here to show a custom NPS question scale that runs from 0 to 6.  It works beautifully.

However, I’d like to put the words “Not bothering me” and “Bothers me greatly” plus an image below the scale at opposite ends. In other words, I don’t want any labels above the NPS question scale.

Can anyone help this non programmer with altering TomG’s code below to do this?  Many thanks.

Qualtrics.SurveyEngine.addOnload(function() {
	//Market In View LLC
	//Change NPS question scale
	var scaleStart = 0;			//Change - 0 or more and no greater than end
	var scaleEnd = 6;			//Change - 10 or less and no less than start

	//No changes below
	var width = 100/(scaleEnd - scaleStart + 1) + "%";
	var q = jQuery("#"+this.questionId);
	var cc = q.find('td.ControlContainer');
	q.find('td.LabelContainer').each(function(index) {
		if(index<scaleStart || index>scaleEnd) {
			this.hide();
			cctindex].hide();
		}
		else {
			this.setAttribute('width', width);
			cctindex].style.width = width;
		}	
	});	
});

 

 

I think I might not have provided enough information for someone to help.

I have 2 labels that currently sit above an adapted NPS scale. I’ve used @TomG ‘s code that changes the NPS scale from 10 to whatever number you want (thank you Tom).

I’ve checked the code structure in a survey preview and the table element I want to move below the adapted NPS question scale is called td.ColumnLabels.

Because I have no experience with JavaScript, I’m not sure how to add code to Tom’s javascript above so I can do this.

Can anyone help please?

@Chris2023 

You need to just add two lines more to existing code before last closing bracket (“});”):


    var columnLabels = q.find('.ColumnLabels').detach();
    q.find('tbody').after(columnLabels);

Hope it helps!

Thanks Deepak. That works a treat!

Hello!! unfortunatelly it didn’t work for me :(

 

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"); } } });

@arezzo 

Try below code

Qualtrics.SurveyEngine.addOnload(function() {
    for (var i = 0; i <= 11; i++) {
        if (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 <= 9) {
            jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FFFAAE");
            jQuery("td:eq(" + i + ")").find('label span').css("color", "#ffe500");
        } else {
            jQuery("td:eq(" + i + ")").find('label').css("background-color", "#AEFFB3");
            jQuery("td:eq(" + i + ")").find('label span').css("color", "#00ff00");
        }
    }
});

 

It didn’t work.

Appears like thar 

 

Leave a Reply


Terms & Conditions