highlight an answer with different colour depending on the answer, inside a matrix | XM Community
Solved

highlight an answer with different colour depending on the answer, inside a matrix


Badge +1

Hello everyone,

i’m trying to make my question look like this, depending on the answer clicked by th respondant.

 

Is there a java code available for this ?

icon

Best answer by RickB 16 May 2024, 12:55

View original

3 replies

Userlevel 2
Badge +6

Hi @Lucas.viaud 

i cant figur out how to chance the color off the ball, but i found this. 

 

 

Will this works for you? 

you can do that by having this java code:
 

Qualtrics.SurveyEngine.addOnload(function() {

    // Function to highlight cells based on selected radio buttons

    function highlightCells() {

        // Reset background color of all cells

        var allCells = document.querySelectorAll('.QuestionBody td');

        allCells.forEach(function(cell) {

            cell.style.backgroundColor = ''; // Reset background color

        });

        // Highlight selected cells

        var radioButtons = document.querySelectorAll('.QuestionBody input[type="radio"]:checked');

        radioButtons.forEach(function(radioButton) {

            var cell = radioButton.parentNode;

            if (cell.tagName === 'TD') {

                var scalePoint = parseInt(radioButton.value);

                switch(scalePoint) {

                    case 1:

                        cell.style.backgroundColor = '#ffcccc'; // Red

                        break;

                    case 2:

                        cell.style.backgroundColor = '#ffebcc'; // Orange

                        break;

                    case 3:

                        cell.style.backgroundColor = '#ffffcc'; // Yellow

                        break;

                    case 4:

                        cell.style.backgroundColor = '#e5ffcc'; // Greenish

                        break;

                    case 5:

                        cell.style.backgroundColor = '#ccffcc'; // Green

                        break;

                }

            }

        });

    }

    // Execute the function to highlight cells on load

    highlightCells();

    // Listen for changes in the survey (e.g., when a radio button is clicked) and update the highlighting

    this.questionclick = function(event, element) {

        highlightCells();

    };

});

 

and this css code

.highlight-selected {

    background-color: #ffcccc; /* Change to your preferred highlight color */

}

 

Badge +1

Hey @RickB 

Actually this is even better, this works perfectly, thank you, and thanks for the explanations in code !

I didn’t quite get what this last CSS code is for though, but everything is good now.

Thank you again.

Userlevel 2
Badge +6

@Lucas.viaud 

i try it first with CSS, but that didnt work. So then with this script but i think i forgot the CSS was with a other try. You can delete the CSS code. But test it then again if it still works.

Leave a Reply