NPS different layout needed

BettoLamacchiaBettoLamacchia MilanCommunity Member Qubie ✭

NPS different layout needed

Hi everybody,

we need to implement a NPS scale with the following layout.

We are willing to use different question types if this can help us to keep this structure.

Is there any custom code we can use?

Thanks in advance!

Tagged:

Best Answers

  • jainshubhamjainshubham Mumbai Guru ✭✭
    Accepted Answer

    Hi @BettoLamacchia

    I can't agree enough with @Subu and @jpardicusick comments.

    Still, if you want to go ahead with the coloring, you can add the below code under Look and Feel>Style>Custom CSS

    Before pasting the code, you would need to replace the question ID with your required Question ID. For me it was QID4. You can find yours by inspecting any of your answer choices.

    Below is the screenshot of the output:

    ****Custom CSS CODE****

    label#QID4-0-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-1-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-2-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-3-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-4-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-5-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-6-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-7-label.SingleAnswer{
    color : #f9d71c !Important;
    }
    label#QID4-8-label.SingleAnswer{
    color : #f9d71c!Important;
    }
    label#QID4-9-label.SingleAnswer{
    color :green !Important;
    }
    label#QID4-10-label.SingleAnswer{
    color :green !Important;
    }
    label#QID4-0-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-1-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-2-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-3-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-4-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-5-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-6-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-7-label.SingleAnswer.q-checked {
    background-color : #f9d71c !Important;
    color:white !Important;
    }
    label#QID4-8-label.SingleAnswer.q-checked {
    background-color : #f9d71c !Important;
    color:white !Important;
    }
    label#QID4-9-label.SingleAnswer.q-checked {
    background-color :green !Important;
    color:white !Important;
    }
    label#QID4-10-label.SingleAnswer.q-checked {
    background-color :green !Important;
    color:white !Important;
    }

  • jainshubhamjainshubham Mumbai Guru ✭✭
    edited May 16 Accepted Answer

    @BettoLamacchia Alternatively, you can also check your question ID by going into "Support Mode" ( Hold down Ctrl+Shift > Click Tools > Click Support Mode at the bottom of Tools Menu.)

    You will see the ID here then:

Answers

  • SubuSubu IndiaCommunity Member Guru ✭✭

    Hi @BettoLamacchia
    Just to share, I am working on NPS for some time and for NPS it is best practice to keep the question as standard NPS question only. Better not to color or any design, as those things can influence respondent. Thanks!

  • JenCXJenCX Broomfield, COCommunity Member, Product Ideas Superuser ✭✭✭✭

    To echo @Subu 's comments, adding the colors and shapes will impact your ability to effectively compare to benchmarking, unless you do your own benchmarking and included the colors and shapes in those.

  • BettoLamacchiaBettoLamacchia MilanCommunity Member Qubie ✭

    @jainshubham said:
    Hi @BettoLamacchia

    I can't agree enough with @Subu and @jpardicusick comments.

    Still, if you want to go ahead with the coloring, you can add the below code under Look and Feel>Style>Custom CSS

    Before pasting the code, you would need to replace the question ID with your required Question ID. For me it was QID4. You can find yours by inspecting any of your answer choices.

    Below is the screenshot of the output:

    ****Custom CSS CODE****

    label#QID4-0-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-1-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-2-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-3-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-4-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-5-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-6-label.SingleAnswer{
    color :red !Important;
    }
    label#QID4-7-label.SingleAnswer{
    color : #f9d71c !Important;
    }
    label#QID4-8-label.SingleAnswer{
    color : #f9d71c!Important;
    }
    label#QID4-9-label.SingleAnswer{
    color :green !Important;
    }
    label#QID4-10-label.SingleAnswer{
    color :green !Important;
    }
    label#QID4-0-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-1-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-2-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-3-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-4-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-5-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-6-label.SingleAnswer.q-checked {
    background-color :red !Important;
    color:white !Important;
    }
    label#QID4-7-label.SingleAnswer.q-checked {
    background-color : #f9d71c !Important;
    color:white !Important;
    }
    label#QID4-8-label.SingleAnswer.q-checked {
    background-color : #f9d71c !Important;
    color:white !Important;
    }
    label#QID4-9-label.SingleAnswer.q-checked {
    background-color :green !Important;
    color:white !Important;
    }
    label#QID4-10-label.SingleAnswer.q-checked {
    background-color :green !Important;
    color:white !Important;
    }

    Thanks so much! I copied down that code to my custom CSS, putting Q11 instead of QID4, but it does not work. It would be a huge solution if we could find a way to implement your code.. Thanks again

  • jainshubhamjainshubham Mumbai Community Member Guru ✭✭

    Hi @BettoLamacchia, You may need to enter the ID of the question which possibly could be QID11, but it can differ if you have added deleted questions in between. You can check your questionID by inspecting that question. It should start with QID.

  • BettoLamacchiaBettoLamacchia MilanCommunity Member Qubie ✭

    @jainshubham said:
    Hi @BettoLamacchia, You may need to enter the ID of the question which possibly could be QID11, but it can differ if you have added deleted questions in between. You can check your questionID by inspecting that question. It should start with QID.

    How great! Thanks, it works perfectly!

  • Marta_OliveiraMarta_Oliveira LisbonCommunity Member Qubie ✭
    edited September 3

    Hello,

    I have the same code but the "zero" is still grey. The rest of the scale is ok but it is like the code does not work on the "zero".

    Anyone else?

    Thanks

  • BettoLamacchiaBettoLamacchia MilanCommunity Member Qubie ✭

    Hi Marta,

    As I had to embed that code for more than 30 surveys, I faced the same problem for a plenty of them. That is due to delete of some options in the question. So, for instance, i tried to substitute all those 'QID0' in the code into 'QID12', then I previewed the question. If it does not work, try 'QID13' or other numberr. If your survey have not been live yet, you can re-create the question, it will have the correct ID order for sure :)

Sign In to Comment