NPS different layout needed | XM Community
Solved

NPS different layout needed

BettoLamacchia
Userlevel 1
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!
!
icon

Best answer by jainshubham 16 May 2019, 13:51

View original

11 replies

Subu
Rank
Userlevel 4
Badge +5
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!
JenCX
Rank
Userlevel 7
Badge +11
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.
jainshubham
Rank
Userlevel 3
Badge +3
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;
}
BettoLamacchia
Userlevel 1
> @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
jainshubham
Rank
Userlevel 3
Badge +3
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.
jainshubham
Rank
Userlevel 3
Badge +3
@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:

!
BettoLamacchia
Userlevel 1
> @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!
M
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
BettoLamacchia
Userlevel 1
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 🙂
L

jainshubham How do you apply this Custom CSS code to specific questions? I changed the Question ID and it is not working. Thank you!

Florian_Rasp
Rank
Badge +7

https://community.qualtrics.com/XMcommunity/discussion/comment/17153#Comment_17153If you copied this line together with the rest of the code into the custom css, delete this:
****Custom CSS CODE***
Without, the zero- formatting is no longer ignored

Leave a Reply


Terms & Conditions