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

Change the color of radio button (before selection) but only for the last response.


Forum|alt.badge.img+2

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

Best answer by ahmedA

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("[class^=q-]");
    all_buttons[all_buttons.length - 1].id = "last_button";
    last_button = ch.getElementsBySelector("#last_button")[0];

    // 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.

View original

3 replies

Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • 2023 replies
  • Answer
  • January 3, 2021

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("[class^=q-]");
    all_buttons[all_buttons.length - 1].id = "last_button";
    last_button = ch.getElementsBySelector("#last_button")[0];

    // 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.


Forum|alt.badge.img+2
  • Author
  • 10 replies
  • January 4, 2021

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


Forum|alt.badge.img+1
  • 2 replies
  • October 5, 2022

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?