Javascript in NPS question conflicting with CSS coloring rules | XM Community
Skip to main content

I need a NPS question options to color when hovering and selecting.

The following code works fine, except for the selecting part. When I select the option, it doesn't keep the hovering color but reverts to the default gray.

/* Color the question*/
#QID10 td.LabelContainer:nth-child(1) label.q-checked, 
#QID10 td.LabelContainer:nth-child(1) label:hover {
  background-color: #E73F12 !important;
  color: #ffffff;
}

#QID10 td.LabelContainer:nth-child(2) label.q-checked,
#QID10 td.LabelContainer:nth-child(2) label:hover {
  background-color: #EE5C1C !important;
  color: #ffffff;
}

#QID10 td.LabelContainer:nth-child(3) label.q-checked,
#QID10 td.LabelContainer:nth-child(3) label:hover {
  background-color: #EF8200 !important;
  color: #ffffff;
}

etc...

The strange thing is, the CSS code for coloring the options worked fine until I added some JS to the question to reverse the options:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Voer uw JavaScript hier uit bij het laden van de pagina*/

});

Qualtrics.SurveyEngine.addOnReady(function() {
  // Get the NPS question element
  var npsQuestion = document.getElementById('QID10');

  // Get the label container elements
  var labelContainers = npsQuestion.querySelectorAll('td.LabelContainer');

  // Get the total number of label containers
  var totalContainers = labelContainers.length;

  // Loop through the label containers and reverse their order
  for (var i = 0; i < totalContainers / 2; i++) {
    var temp = labelContainersti].innerHTML;
    labelContainersti].innerHTML = labelContainersttotalContainers - 1 - i].innerHTML;
    labelContainersttotalContainers - 1 - i].innerHTML = temp;
  }
});


Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Voer uw JavaScript hier uit wanneer de pagina nog niet geladen is*/

});

Why this conflict? How do I solve it?

Good afternoon from a sunny Sweden! 
Can you add screenshots to what you’re seeing?

 

Thanks in advance

-Mattias

Hi @MattiasM, certainly:
No interaction:

When hovering:

When clicking:

When clicking on the next question:

When I click on the option, the color should stay the same as when hovering (in this case green)

Hello again and thanks for the screenshots. 

I can’t help you with the actual issue, but I believe your NPS scale is backwards. It should be 0-10 not 10-0 where 0 is “very unlikely” and 10 “very likely”. 

Best regards

-Mattias

Thank you anyway @MattiasM. I know about the order, but in this case I need it backwards. Tha's the point of the Javascript. The (dutch) labels don't match though, I changed them afterwards.

I replicated your issue and fixed it by changing the selector.

Change this line in your code:

var labelContainers = npsQuestion.querySelectorAll('td.LabelContainer');

to this:

var labelContainers = npsQuestion.querySelectorAll('.SingleAnswer');

 

In general, your issue is related to this old StackOverflow question. When you change the innerHTML, you create a new element that gets reset to the default style. So, you need to change the innerHTML using a selector that is more nested than the selector in your CSS.

 

Yes @nroot that's it! You made my day, thank you <3

Leave a Reply


Terms & Conditions