How can I reverse the order of a matrix table scale on an accordian mobile layout? | XM Community
Skip to main content
I have a matrix table that shows the scales going horizontally negative (left) to positive (right), and when these change to an accordion layout on a mobile, the scale go vertically negative (top) to positive (bottom).



Is there a way to reverse the order on the accordion layout so that they go positive (top) to negative (bottom), without needing to make the separate questions for mobile users. This is best practice for vertical scales, so I'd like to know if there is a way to do this please?



Thanks

Lisa
You can create a copy of the question with the scales reversed to only show on mobile devices and hide the other version on non-mobile devises.



Then to combine the 2 questions, create an embedded data element after the block that is equal to the value(s) of both answers (since only 1 will ever be shown, only 1 will ever populate the embedded data).
@Lisa_Roberts,



Yes, there is a way to use one question and reverse the mobile scale. Use JavaScript to determine if the question is in mobile view, and if it is, reverse the order choice table cells.
Thank you Tom. Do you know what the Javascript code needs to be to action this change please?
> @Akdashboard said:

> You can create a copy of the question with the scales reversed to only show on mobile devices and hide the other version on non-mobile devises.

>

> Then to combine the 2 questions, create an embedded data element after the block that is equal to the value(s) of both answers (since only 1 will ever be shown, only 1 will ever populate the embedded data).



Thanks for the response - if I do this option, when I create the embedded data element, do I select 'Device Identifier' from the Survey Metadata as the embedded data element? I assume I will need to recode the values of each scale point on the mobile version so that 'excellent' is coded as the number 5 in both the desktop and mobile versions, just in case I want to use them to run key driver analysis?



Thanks

Lisa
> @TomG said:

> Yes, there is a way to use one question and reverse the mobile scale. Use JavaScript to determine if the question is in mobile view, and if it is, reverse the order choice table cells.



see https://gist.github.com/marketinview/11b25d460884f034d5286953698133cf



> @Lisa_Roberts said:

> Is there a way to reverse the order on the accordion layout so that they go positive (top) to negative (bottom), without needing to make the separate questions for mobile users. This is best practice for vertical scales, so I'd like to know if there is a way to do this please?

Can you provide a "best practice" citation please?
Hi Tom.

This has worked exactly as expected - so thanks for sharing the java script.

HOWEVER...I have some questions that have an N/A in the scale, and these are now appearing on the top of the vertical scales on the mobile - is there a way to anchor these to the bottom at all please?



I'm travelling at the moment, but will dig out the best practice citation as soon as I can when back in the office.



Thanks

Lisa

https://www.qualtrics.com/community/discussion/comment/15160#Comment_15160Hi Tom!
Is there an easy way to modify this for single answer multiple choice? I think it might only be applicable to matrix style questions.
Thanks!
Adam

Is there an easy way to modify this for single answer multiple choice? I think it might only be applicable to matrix style questions.

Yes, the previous link is only applicable to Matrix questions.
A different link for horizontal MC: https://gist.github.com/marketinview/85c2c5717354827fc9d6b7997b114710

Amazing Tom! Thanks so much! I am continually astounded by the adept JavaScript skills.

Hi
I have been trying to get this to work but it does not. The columns are the same afterwards? The first question is having its class changed to "last" and the last column is having its class "last" removed.
But it still renders 1 to 7 not 7 to 1?

https://community.qualtrics.com/XMcommunity/discussion/comment/48569#Comment_48569Columns? A mobile matrix (aka accordion) doesn't have columns. The script only works on the accordion layout and leaves the desktop layout as-is.

Is there anyway to reverse the "Very Bad" to "Very Good" columns in the Matrix table below
We need this for the Hebrew language?
ScreenShot.JPG

https://community.qualtrics.com/XMcommunity/discussion/comment/48572#Comment_48572Are you saying you want to flip the scale when the language is Hebrew, but otherwise leave it as is? If so, you can write JS to do that.

I have the code running and the mobile does not get detected?
if (jQuery("#"+this.questionId+".QuestionBody.mobile").length > 0) 
This always has a length of zero?

https://community.qualtrics.com/XMcommunity/discussion/comment/48575#Comment_48575Hi Tom, how can I write the JS to do that, I am new to Qualtrics but have 20 years JavaScript?
We would like this for all devices?

Pipe ${e://Field/Q_Language} into your JS to get the current language. Flip the order of the answer cells in each row. The table layout differs a bit between mobile and non-mobile, so you'll have to account for that. If the QuestionBody div has the class "mobile" if it is mobile.

Hi
This is my reversing code and there are no errors, but completley messes up the whole layout and duplicates the question?
Qualtrics.SurveyEngine.addOnReady(function() 
{
var tbody = jQuery('.ChoiceStructure');
alert('tbody ' + tbody);
tbody.html(jQuery('tr',tbody).get().reverse());

In Qualtrics $ is prototypejs, so you searched for an element with the id of 'table'.
If you want to use jQuery, use 

jQuery('table')
. However, in general, you should restrict searches to the current question, which would be 
jQuery("#"+this.questionId+" table")
.

Hi, will try that thanks TomG!
It has changed all the questions!

Hi Tom
All the above works, we now have 1 to 7 from left to right when in Hebrew, column headings change over which is great thank you.
But the values do not, so column 7 gives a value of 1 and column 1 gives a value of 7!
These values must be stored somewhere and also need reversing?
image.png

https://community.qualtrics.com/XMcommunity/discussion/comment/48667#Comment_48667That means your JS doesn't flip the answer cells in the rows.

Hi @TomG I’m trying to do the same in carousel format. i.e.reversing the order of options for mobile for a matrix table question which is in carousel format. I tried the given code but it didn’t seem to work.  https://gist.github.com/marketinview/11b25d460884f034d5286953698133cf

Do I need a different code for carousel?

Please note that I’m also using the custom CSS for carousel box. Not sure if that’s interfering with anything. 

 

Hi @TomG I’m trying to do the same in carousel format. i.e.reversing the order of options for mobile for a matrix table question which is in carousel format. I tried the given code but it didn’t seem to work.  https://gist.github.com/marketinview/11b25d460884f034d5286953698133cf

Do I need a different code for carousel?

Please note that I’m also using the custom CSS for carousel box. Not sure if that’s interfering with anything. 

 

Yes, you need different code for a carousel.

CSS only impacts the formatting, not the order. So it unrelated.

Hi @TomG I’m trying to do the same in carousel format. i.e.reversing the order of options for mobile for a matrix table question which is in carousel format. I tried the given code but it didn’t seem to work.  https://gist.github.com/marketinview/11b25d460884f034d5286953698133cf

Do I need a different code for carousel?

Please note that I’m also using the custom CSS for carousel box. Not sure if that’s interfering with anything. 

 

Yes, you need different code for a carousel.

CSS only impacts the formatting, not the order. So it unrelated.

Thank you @TomG May I please have the code for carousel? 

Thank you @TomG May I please have the code for carousel? 

I haven’t created it.

Leave a Reply


Terms & Conditions