Change the color of radio button (before selection) but only for the last response. | XM Community
Skip to main content

I want to change the color of just one of the radio buttons on a multiple choice question, but only for the last response (i.e., don't know response). For example for the following question, I'd like to make the circle under "don't know" a red circle instead of black, and if "don't know" is selected I'd like the fill color to become red. Ideally, I'd like it to work in either a horizontal or vertical position, but horizontal is higher priority. Is there a JavaScript I could use for this?

image.png

This is a little more tricky than the matrix one, as there Qualtrics would assign the class last to the last statement. But the following code should work. It should work for all combinations of single/multiple choice with horizontal/vertical display.
Qualtrics.SurveyEngine.addOnReady(function () {
    ch = this.getChoiceContainer();
    all_buttons = ch.querySelectorAll("yclass^=q-]");
    all_buttonsall_buttons.length - 1].id = "last_button";
    last_button = ch.getElementsBySelector("#last_button")t0];

    // Set border to red
    last_button.style.borderColor = "red";

    // Check for a click in the question
    this.questionclick = function () {
        // If selected, set backgroundColor to red, else clear
        if (last_button.className.includes("checked")) {
            last_button.style.backgroundColor = "red";
        } else {
            last_button.style.backgroundColor = "";
        }
    };
});
Standard caveat: Performance will depend on the theme used. And if you use it multiple times on a page, you'll need to change the variable names and ids.

This is perfect. Thank you! Example of horizontal application.
image.pngExample of Vertical application.
image.png

hi, I have the exactly same problem. I tried the code, it worked very well in a horizontal application. However, it doesn't work in vertical applications. I am using the basic theme, so not sure if Qualtrics update anything, which might cause the obstacle in the vertical case. Do you have any idea?

Leave a Reply


Terms & Conditions