How to change the colour of the groups in Pick, Group and Rank questions? | XM Community
Skip to main content

Hi all,
I'm working on an idea to help people with complex communication needs participate in research. We're mirroring a talking mat approach using a Pick, Group and Rank question type.
I really want to use either Javascript or CSS to change the display of the groups (hopefully the border and heading) so that group 1 "Agree" is green, group 2 "Don't know" is yellow and group 3 "Disagree".
Does anyone know the Javascript or CSS references for the group containers themselves? My current Javascript code is below along with a screenshot of the result:
Qualtrics.SurveyEngine.addOnReady(function () {
  var $this = jQuery(this.questionContainer);

  jQuery(".QuestionBody .groupsContainerTd .Group:eq(0) ul.ui-sortable", $this).css("color", "#008000");  //first group - green
  jQuery(".QuestionBody .groupsContainerTd .Group:eq(1) ul.ui-sortable", $this).css("color", "#ffff00");  //second group - red
  jQuery(".QuestionBody .groupsContainerTd .Group:eq(2) ul.ui-sortable", $this).css("color", "#ff0000");  //third group - red
});

image.png

So just to be clear, you're wanting to change the border color around the "Agree" box to be green, correct? I replicated your JS in my own mock question and changing the text color makes it very difficult to read, especially the yellow.
Give me a touch more detail about what you're trying to achieve and I'll see what I can do 🙂

Leave a Reply


Terms & Conditions