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

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


Userlevel 2

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

Userlevel 6
Badge +27

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.


Userlevel 7
Badge +27

@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.

Userlevel 2

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

Userlevel 7
Badge +27

AlexPanic - The pictures didn't show up.

Userlevel 2

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

Userlevel 2

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

Userlevel 2

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

Userlevel 6
Badge +27

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

Userlevel 7
Badge +27

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

Userlevel 2

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!

Userlevel 2

https://www.qualtrics.com/community/discussion/comment/26000#Comment_26000I see. I'd love that, but I don't know JS :(

A.

Userlevel 6
Badge +27

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

Userlevel 7
Badge +27

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

Userlevel 2

Hi Tom,

It's a 50 item scale.

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

best,
A.

Userlevel 2

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.

Userlevel 1
Badge +1

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? 

 

Userlevel 7
Badge +27

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. 

Leave a Reply