Solved
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!
!
Best answer by jainshubham
@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:
!
+5Hi @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!
+11To 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.
+3Hi @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;
}
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;
}> @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
>
>
> 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+3Hi @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.
+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:
!
> @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!
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
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 :)
jainshubham How do you apply this Custom CSS code to specific questions? I changed the Question ID and it is not working. Thank you!
+11https://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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.