Changing Button Colors on Survey Questions | XM Community
Skip to main content

I am currently working on developing a survey and unfortunately have no experience with CSS so I am having difficulty figuring out how to do this. 

I am wanting to change the coloring of the multiple choice buttons for a few of my questions that go from red - green. 

I have a CSAT questions with 5 choices, 1 - 5 and a NPS question 0-10. The options to choose the number are horizontal. 

The ask is to see what code is needed for each question and how you can put the code in to make sure its only for those two questions?

Hey @klein_71 

i dont have CSAT questions, so i can not figure out how that will work. 

but for the NPS:


you can use this code:

 

Qualtrics.SurveyEngine.addOnload(function() {

    // Select all the NPS buttons

    var npsButtons = document.querySelectorAll('.q-radio, .LabelWrapper');

    var colors = generateGradient('#FF5733', '#33FF57', npsButtons.length);

    npsButtons.forEach(function(button, index) {

        // Change the background color

        button.style.backgroundColor = colorstindex];

        // Change the text color

        button.style.color = 'white';

    }); 

    npsButtons.forEach(function(button) {       

        button.addEventListener('mouseover', function() {

            button.style.backgroundColor = lightenDarkenColor(button.style.backgroundColor, -20); // Darken color on hover

        });

        button.addEventListener('mouseout', function() {

            button.style.backgroundColor = button.dataset.originalColor || ''; // Restore original color on mouseout

        });

        button.addEventListener('click', function() {

            npsButtons.forEach(function(btn) {

                btn.style.backgroundColor = btn.dataset.originalColor || '';

            });

            button.style.backgroundColor = darkenColor(button.style.backgroundColor, 20); // Darken color on click

        });

        button.dataset.originalColor = button.style.backgroundColor;

    });

    function generateGradient(startColor, endColor, steps) {

        var start = hexToRgb(startColor);

        var end = hexToRgb(endColor);

        var colors = l];

        for (var i = 0; i < steps; i++) {

            var r = Math.round(start.r + (end.r - start.r) * i / (steps - 1));

            var g = Math.round(start.g + (end.g - start.g) * i / (steps - 1));

            var b = Math.round(start.b + (end.b - start.b) * i / (steps - 1));

            var color = rgbToHex(r, g, b);

            colors.push(color);

        }

        return colors;

    }

    function hexToRgb(hex) {

        var bigint = parseInt(hex.slice(1), 16);

        var r = (bigint >> 16) & 255;

        var g = (bigint >> 😎 & 255;

        var b = bigint & 255;

        return { r: r, g: g, b: b };

    }

    function rgbToHex(r, g, b) {

        return "#" + ((1 << 24) + (r << 16) + (g << 😎 + b).toString(16).slice(1);

    }

    function lightenDarkenColor(col, amt) {

        var usePound = false;

        if (col0] === "#") {

            col = col.slice(1);

            usePound = true;

        }

        var num = parseInt(col, 16);

        var r = (num >> 16) + amt;

        if (r > 255) r = 255;

        else if (r < 0) r = 0;

        var b = ((num >> 😎 & 0x00FF) + amt;

        if (b > 255) b = 255;

        else if (b < 0) b = 0;

        var g = (num & 0x0000FF) + amt;

        if (g > 255) g = 255;

        else if (g < 0) g = 0;

        return (usePound ? "#" : "") + (g | (b << 😎 | (r << 16)).toString(16);

    }   

    function darkenColor(col, amt) {

        return lightenDarkenColor(col, -amt);

    }

});

Leave a Reply


Terms & Conditions