Can you have different styles for questions on mobiles and desktops? | XM Community
Skip to main content
Question

Can you have different styles for questions on mobiles and desktops?

  • May 28, 2020
  • 17 replies
  • 690 views

AlexPanic
Level 1 ●

Hi,

I am keen on using a Likert scale with text on top for phones as it looks better. However, I'd rather use a Bipolar scale on desktops. How do I do that?

Appreciate your help!

Best,
Alex

17 replies

ana_velez
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • QPN Level 5 ●●●●●
  • June 1, 2020

Hi!
you will have to use branch logic to use the different questions depending on the device type.
image.pngand show different blocs with the custom questions for each type.



TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 1, 2020

@AlexPanic,
For mobile, are you referring to the accordion layout? Bipolar indicates different endpoints for each row, which is completely different than a Likert. Do you mean a Likert scale with just the endpoints labeled? If so, you can add Labels to a Likert and they will only show in desktop (non-accordion) mode.


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

Hi everyone,
These are the questions.

I want to keep the desktop style on desktops and switch to Likert scales on mobiles as bipolar scales look awful.

what I want on desktop:
Screenshot 2020-05-27 at 17.28.35.pngInstead of:
Screenshot 2020-05-27 at 17.28.25.pngLikert scales on mobiles look like the second pic above.

Thanks,
Alex


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 1, 2020

AlexPanic - The pictures didn't show up.


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

Hi,

Thanks for pointing it out Tom!
I try to reattach them here. So far I am using Bipolar scales on desktop and mobiles but I had to put the labels on top, as otherwise it looks horrible on mobiles. If I want to have labels on top only on mobiles - how do I do that?

This is what I want on desktops:
Screenshot 2020-06-01 at 12.01.25.pngInstead of this:
Screenshot 2020-06-01 at 12.00.50.pngI had to go for the second option only to have it decent on mobiles. I was thus wondering whether I can have Likert scales (on mobiles only) as they look better or a bipolar scale with top labels (again, only on mobiles).

Thank you!
Alex


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

I will try to use the branch login, thanks :)


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

https://www.qualtrics.com/community/discussion/comment/25982#Comment_25982I have tried that and added a block. However, I am not sure how to edit the questions in that block. Where can I find that option?
Thanks


ana_velez
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • QPN Level 5 ●●●●●
  • June 1, 2020

Hi!!

what i recommend is creating first the blocks you are going to use in the survey and then moving those blocks to the branches in the survey flow


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 1, 2020

The issue with branching is the data...you'll data for the same question in two different places making data and analysis more difficult.
You could use JavaScript to move the labels above on mobile.
Here is the approach we use for that type of question (Likert Matrix w/ JS):
image.png


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

Hi,

Thanks everyone I have sorted it myself.

I had to duplicate each questions and decide whether they will be displayed only on mobiles or not.
A bit tricky, but worked.

Thank you so much!


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

ana_velez
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • QPN Level 5 ●●●●●
  • June 1, 2020

What you can do then is to create inside each branch an embedded data field that will we equal to the answer of the question. Add the same name to the field. so you can populate the responses


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 1, 2020

It's not quite as clean as the matrix pictured above, but if you only have one statement (i.e., row), you can use an NPS question and hide some of the choices to get a 1-5 scale.
The JS to do that is available at the link below. Just change the scaleStart and scaleEnd as needed:
https://gist.github.com/marketinview/c941fc59b7ddaef8ba3b


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

Hi Tom,

It's a 50 item scale.

Thanks anyway for your help. I will keep it as it is, I guess.

best,
A.


AlexPanic
Level 1 ●
  • Author
  • Level 1 ●
  • June 1, 2020

https://www.qualtrics.com/community/discussion/comment/25999#Comment_25999Thanks Ana,

Seems that it will duplicate all data and complicate the analysis.
I might thus just keep it as it is. But thanks :)

A.


Forum|alt.badge.img+1
  • August 27, 2023

It's not quite as clean as the matrix pictured above, but if you only have one statement (i.e., row), you can use an NPS question and hide some of the choices to get a 1-5 scale.
The JS to do that is available at the link below. Just change the scaleStart and scaleEnd as needed:
https://gist.github.com/marketinview/c941fc59b7ddaef8ba3b

 

Thanks, Tom. Would it be possible to set different background colour to each of the options in the NPS to make more prominent? 

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • August 27, 2023

It's not quite as clean as the matrix pictured above, but if you only have one statement (i.e., row), you can use an NPS question and hide some of the choices to get a 1-5 scale.
The JS to do that is available at the link below. Just change the scaleStart and scaleEnd as needed:
https://gist.github.com/marketinview/c941fc59b7ddaef8ba3b

 

Thanks, Tom. Would it be possible to set different background colour to each of the options in the NPS to make more prominent? 

 

Yes, it is possible. I believe there are a number of Community posts on that subject.