Changing Button Colors on Survey 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 = colors[index];

        // 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 = [];

        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 >> 8) & 255;

        var b = bigint & 255;

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

    }

    function rgbToHex(r, g, b) {

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

    }

    function lightenDarkenColor(col, amt) {

        var usePound = false;

        if (col[0] === "#") {

            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 >> 8) & 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 << 8) | (r << 16)).toString(16);

    }   

    function darkenColor(col, amt) {

        return lightenDarkenColor(col, -amt);

    }

});