CSS code to show labels below NPS question | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

CSS code to show labels below NPS question

  • September 20, 2023
  • 6 replies
  • 237 views
C
Forum|alt.badge.img+1

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();
			cc[index].hide();
		}
		else {
			this.setAttribute('width', width);
			cc[index].style.width = width;
		}	
	});	
});

 

 

Best answer by Deepak

@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!

View original
C
A
2 people like this
  • C
    Chintan_Chauhan_07
  • A
    ash123

6 replies

C
Forum|alt.badge.img+1
  • Chris2023
  • Author
  • 2 replies
  • September 25, 2023

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?

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1553 replies
  • Answer
  • September 25, 2023

@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!

C
1 person likes this
  • C
    Chris2023
C
Forum|alt.badge.img+1
  • Chris2023
  • Author
  • 2 replies
  • September 25, 2023

Thanks Deepak. That works a treat!

A
Level 1 ●
Forum|alt.badge.img+1
  • arezzo
  • Level 1 ●
  • 8 replies
  • March 13, 2024

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

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1553 replies
  • March 13, 2024

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

 

A
Level 1 ●
Forum|alt.badge.img+1
  • arezzo
  • Level 1 ●
  • 8 replies
  • March 13, 2024

It didn’t work.

Appears like thar 

 

Leave a Reply


Terms & Conditions