Make Likert scale Questions responsive in desing on a mobile device | XM Community
Skip to main content
Solved

Make Likert scale Questions responsive in desing on a mobile device


Forum|alt.badge.img+3
We are trying to use the same survey questionnaire on mobile as well as desktop. The likert scale question appears horizontal on the desktop version but vertical on mobile. I need help to make it appear horizontal on mobile too. Attached is a screenshot for reference.!

Best answer by TomG

@Lubna,

You can use an NPS question and change the scale using this script:
https://gist.github.com/marketinview/c941fc59b7ddaef8ba3b
View original

11 replies

PeeyushBansal
Level 6 ●●●●●●
Forum|alt.badge.img+38
  • Level 6 ●●●●●●
  • 1130 replies
  • March 25, 2019
You can try unchecking the "Mobile friendly" in question properties.

When this box is checked, the Matrix Table will display in the Accordion Format on mobile devices if the table is too large to fit on the screen. If the table is small, the question will display in Normal Format.

https://www.qualtrics.com/support/survey-platform/survey-module/mobile-survey-optimization/

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5860 replies
  • Answer
  • March 25, 2019
@Lubna,

You can use an NPS question and change the scale using this script:
https://gist.github.com/marketinview/c941fc59b7ddaef8ba3b

Forum|alt.badge.img+3
  • Author
  • 16 replies
  • March 26, 2019
Hi Tom,

Perfect. That solved hald my problem.

Could you please let me know how to change the anchor text from "Not at all Likely" to "Strongly Disagree" or on the same lines at both ends.

Thank you so much.

  • 0 replies
  • March 26, 2019
> @Lubna said:
> Hi Tom,
>
> Perfect. That solved hald my problem.
>
> Could you please let me know how to change the anchor text from "Not at all Likely" to "Strongly Disagree" or on the same lines at both ends.
>
> Thank you so much.

Thanks @TomG, that was very helpfull.

Hi @Lubna ,

Paste the below code in the js(onReady) of NPS question

jQuery("#"+this.questionId).find('th.First').text("Strongly Disagree");
jQuery("#"+this.questionId).find("th.Last").text("Strongly Agree");

Forum|alt.badge.img+3
  • Author
  • 16 replies
  • March 26, 2019
Hi Shahsi,

I did paste the code, it did'nt work for me. My knowledge in JS and CSS is nil. Could you please tell me if the placement is right. screenshot given below:

!

  • 0 replies
  • March 26, 2019
> @Lubna said:
> Hi Shahsi,
>
> I did paste the code, it did'nt work for me. My knowledge in JS and CSS is nil. Could you please tell me if the placement is right. screenshot given below:

Delete everything in JS and just paste the attached code as it is

Forum|alt.badge.img+3
  • Author
  • 16 replies
  • March 26, 2019
Thank you Sashi.

I appreciate all the help.

Lubna

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5860 replies
  • March 26, 2019
> @Lubna said:
> Hi Tom,
>
> Perfect. That solved hald my problem.
>
> Could you please let me know how to change the anchor text from "Not at all Likely" to "Strongly Disagree" or on the same lines at both ends.
>
> Thank you so much.

Just click on the labels and edit them:
!

Forum|alt.badge.img+3
  • Author
  • 16 replies
  • March 26, 2019
@TomG

Thanks, that was simple.

Forum|alt.badge.img+3
  • 6 replies
  • October 30, 2022

Hi TomG,
Thanks for sharing this solution. It is really helpful!
Do you have any ideas on how to add a "N/A" choice?
Thanks,
Hadar


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5860 replies
  • October 30, 2022

hadard,
There isn't a good way to add N/A to an NPS question.
You might in interested the scaledMatrix function. It makes a Likert matrix look like an NPS question but has a lot more flexibility, including the ability to add an N/A answer.