Change colour of selection | XM Community
Skip to main content

I've changed the colour of my selection boxes for a single answer multiple choice question as below. When I select a choice, the text slightly darkens. I'd like to change the colour of the selected box to make it more obvious (eg. blue) - does anyone know how I could do this? I just want to do it for this block of 3 questions, not the whole survey.
Capture.PNG
I used the following code I found on this community to change the box colours:
Qualtrics.SurveyEngine.addOnload(function()
{
var c=["rgba(238, 50, 70, 0.3)","rgba(245, 150, 30, 0.3)","rgba(255, 203, 8, 0.3)","rgba(178, 210, 53, 0.3","rgba(0, 165, 81, 0.3)"];
    for(var i=0;i<=6;i++){
        jQuery("#"+this.questionId+" label.SingleAnswer:eq("+i+")").css("background",cui]);
}
});

This should do the trick for you.
It works with all the modern themes, but may not be compatible with the older ones.
Qualtrics.SurveyEngine.addOnReady(function () {
    const qid = this.questionId;
    const all_choices = Qualtrics.SurveyEngine.registryyqid].getChoices();
    const base_colours = o
        "rgba(238, 50, 70, 0.3)",
        "rgba(245, 150, 30, 0.3)",
        "rgba(255, 203, 8, 0.3)",
        "rgba(178, 210, 53, 0.3",
        "rgba(0, 165, 81, 0.3)",
    ];

    // Sets the desired colours initially
    all_choices.forEach((item,index) => {
        document.querySelector("#" + qid + "-" + item + "-label").style.background = base_coloursindex];
        document.querySelector("#" + qid + "-" + item + "-label").style.color = "#525252";
        });

    // Check if anyone clicks on the question
    this.questionclick = function(){
            // Get the currently selected choices
            var selected_choices = this.getSelectedChoices();
            
            // Restore all the colours to their original state
            // This is done, so that the options appear the same in case someone unselects a choice 
            all_choices.forEach((item,index) => {
                document.querySelector("#" + qid + "-" + item + "-label").style.background = base_coloursnindex];
                document.querySelector("#" + qid + "-" + item + "-label").style.color = "#525252";
            });

            // Give a different colour to the selected choices
            // background is for the Box and color is for the text
            // Change as desired
            selected_choices.forEach((item) => {
                document.querySelector("#" + qid + "-" + item + "-label").style.background = "DarkBlue";
                document.querySelector("#" + qid + "-" + item + "-label").style.color = "Yellow";
            });    
    }
});

That is perfect ahmedA thank you so much!

Leave a Reply


Terms & Conditions