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.

  • January 3, 2021
  • 3 replies
  • 324 views
A
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.

    3 replies

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • 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.

      A
      Forum|alt.badge.img+2
      • Annie
      • Author
      • January 4, 2021

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

      L
      Forum|alt.badge.img+1
      • LingZ
      • 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?

      Terms & ConditionsAccessibility statement