I want to add a gradation to NPS.

@Haruki What do you mean gradiation to NPS?
Like this??

Yes, I could only do the classic layout.
So I would like to be able to do this with other layout types as well.

Hi @Haruki,

you can create a gradation between flat, modern and another unique layout by customizing the CSS.

Hope following codes will help:

/* Flat Layout */
body {
   background-color: #fff; /* Flat background color */
   font-family: Arial, sans-serif; /* Modern font */
}

/* Modern Layout */
.question-container.modern {
   border: 2px solid #3498db; /* Modern border style */
   border-radius: 5px; /* Rounded corners */
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Drop shadow */
}

/* Classic Layout */
.question-container.classic {
   border: 1px solid #000; /* Classic border style */
   background-color: #f0f0f0; /* Classic background color */
   font-family: Times New Roman, serif; /* Classic font */
}

/* Elegant Layout */
.question-container.elegant {
   border: 2px solid #a9a9a9; /* Elegant border style */
   background-color: #f5f5f5; /* Elegant background color */
   font-family: 'Palatino Linotype', serif; /* Elegant font */
}

@Haruki Yeah different layout might have some different in attributes/style name. I think I have a survey with style in JS that stick with the question somewhere. It’s not in perfect fade like yours, more like detractor/passive/promoter color coded. I’ll get back to you once I find it

@Abhishek_U Is there an Elegant Layout???

@Abhishek_U 
Thanks for the suggestion
However, I added the CSS you taught me, but there was no change.

 

@dxconnamnguyen 
thank you
Please by all means.

@dxconnamnguyen  @Abhishek_U 
Edit Question on the survey editing screen Is it possible to add a gradation using JavaScript?

Yes, you can. Use add javascript on the bottom of the left bar

@dxconnamnguyen 
If you know the code to set the gradient in JavaScript, please let me know.

@Haruki I found the code. Change the QID or some color according to your
Here the JS for Flat, Classic & Modern layout

Qualtrics.SurveyEngine.addOnload(function() {
    for (var i = 0; i <= 11; i++) {
        if ((i >= 0 && i <= 7)) {
            jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FF8E8E");
			jQuery("td:eq(" + i + ")").find('label span').css("color", "#ff0000");
        } else if ((i >= 8 && i <= 9)) {
          	jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FFFAAE");
            jQuery("td:eq(" + i + ")").find('label span').css("color", "#ffe500");
        } else if ((i >= 10 && i <= 11)) {
            jQuery("td:eq(" + i + ")").find('label').css("background-color", "#AEFFB3");
            jQuery("td:eq(" + i + ")").find('label span').css("color", "#00ff00");
        }
    }
});

Here’s the CSS for Simple layout

#choice-display-QID1-0.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-1.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-2.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-3.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-4.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-5.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-6.choice-label {
    background: #FF8E8E !important;
}
#choice-display-QID1-7.choice-label {
    background: #ffe500 !important;
}
#choice-display-QID1-8.choice-label {
    background: #ffe500 !important;
}
#choice-display-QID1-9.choice-label {
    background: #00ff00 !important;
}
#choice-display-QID1-10.choice-label {
    background: #00ff00 !important;
}

This cover all 4 layout and can be used at the same time. I remember being unable to squeeze the simple layout in JS without disrupting other lay out so I have to bring it to CSS. If you want gradient use a color picker to change each choice invidually or just play with this to find your best.
Hope it helps

I am not a fan of colouring the NPS question typically as your substantially influencing selection respondent makes which takes away from intention behind the groupings NPS uses.  However I must say I like the gradient your using @Haruki and because it is symmetrical/even it is less leading to respondents to just choose 9 or 10 for example (where often only those ones are green). 

I’ll need to remember this next time it’s a requirement to colour the scale, and then also the code to replicate (thanks for that @dxconnamnguyen). 

@dxconnamnguyen 
Thank you very much.
I was able to do everything except the modern style.
Modern is a radio button, so I may need to enter another code.

@ScottG 
Thank you, that's right.
If you want respondents to give equal answers, it's better not to add color.
This was to increase the visibility of respondents, but we will use them accordingly.

This is my modern look, the number have it’s color. If you want to change the button also then go for class: SingleAnswer, q-checked, q-focus

@dxconnamnguyen 
Sorry.
Could you please tell me the code in detail?

Could you share the code please. Thanks!