Change the color of a multiple choice box based on the choice description? | XM Community
Solved

Change the color of a multiple choice box based on the choice description?

  • 20 November 2020
  • 2 replies
  • 59 views
K

Hello,
I have a multiple choice question with numerous appointment slots. The MC choices are programmed to show appointments in the five business days after the survey is accessed. Once a participant chooses an appointment slot, the choice will disappear for other users automatically (until I reset the quota for that slot).
This is what the question looks like so far:
Screen Shot 2020-11-18 at 8.24.26 PM.pngI'd like each MC box to be a certain color depending on which day of the week it shows. For example, all boxes starting with "Monday" would be red, all boxes starting with "Tuesday" would be orange, and so on. This should hold even when the number of appointments per weekday changes.
I've seen a few posts already on changing MC text color already (e.g., https://www.qualtrics.com/community/discussion/2877/net-promoter), but I'm not too familiar with Javascript and I'm having trouble using the Qualtrics functions. Thank you in advance for any feedback or suggestions!

icon

Best answer by kniss293 6 December 2020, 03:20

View original

2 replies

K

In case anyone is curious, I came up with a working solution:
Qualtrics.SurveyEngine.addOnReady(function()
{ 
var d={"Monday":"#fbefcc", "Tuesday":"#f4e1d2", "Wednesday":"#f9ccac", "Thursday":"#ffad87", "Friday":"#eea29a"};

  for(var i=0;i<=32;i++){
for( var day in d){
var TODAY=jQuery("#"+this.questionId+"label.SingleAnswer:eq("+i+")").text();
if(TODAY.includes(day)){
 jQuery("#"+this.questionId+"label.SingleAnswer:eq("+i+")").css("background",d[day]);
}
}
}
});

K

Here is the output of the above code (after changing the color scheme slightly):
Screen Shot 2020-12-05 at 6.18.55 PM.png

Leave a Reply


Terms & Conditions