Same question needs different view for desktop and mobile | XM Community
Solved

Same question needs different view for desktop and mobile

  • 3 April 2018
  • 4 replies
  • 314 views
Radam
Rank
Userlevel 5
Badge +30
  • Radam
  • Level 4 ●●●●
  • 163 replies
We have a rank order question that contains a paragraph sized chunk of text plus a image. The Qualtrics out of the box text posistion stacks the image either on top or bottom of the text (depending on what you select) but the left/right posistion will take place the first line of text and properly but each subsequent line is stacked under/over the image which looks very odd. Placing the image on the top of the text is the best option of mobile viewing as it eliminates the need for horizontal scrolling but for the desktop view we'd like to put the text/image in a 2 column table so it properly aligns and maximized horizontal screen space.

That being said I currently have this as 2 separate questions using display logic to check if the user is mobile or not. With the plan to manually combine data at survey completion. Is there a better way???

Thank you!
icon

Best answer by MohammedAli_Rajapkar 3 April 2018, 17:50

View original

4 replies

TomG
Rank
Userlevel 7
Badge +27
You could split the text and image from the rank order question by putting the text/image in descriptive text questions for mobile and desktop using your display logic. Then everyone sees the rank order question.

You can enhance a bit with JavaScript by hiding the rank order question text and the separator before it to make the text/image and ranking question look like one question.
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Hi Radam,

Creating 2 questions for different device sounds good. However, you can avoid "manually combining the data" by just creating a "Matrix "text-box" Questions".

The Matrix question should have same number of rows/statements which you are using in the ranking question. Then in SurveyFlow create an embedded data for each of the row and assign value to each of the embedded data.

Then, for Matrix question use the "Default choice option" and assign the specific embedded value to specific row/statement.

The tricky point over here is you have to hide the entire "Matrix question" by using JavaScript so that this "Matrix question" holds the "Default choice option" data. (Workaround: you can place this Matrix question on any other "descriptive text" page and hide the Matrix question)

Then for your analysis, you have to focus only on single Matrix question.
Please note, you can also use the "embedded data" which holds the ranking value for your analysis.

Hope you got it!
Regards, Mohammed Ali
Radam
Rank
Userlevel 5
Badge +30
To help illustrate what I'm trying to do...

Desired view (needed to use html/tables):
!

View using out of the box question type (using this for mobile):
!
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
You can try putting the "text & image" in the table element
So, it should look like "<table> <tr><td>descriptive text </td> <td> image </td></tr></table>

OR

you can try it in <div> with <span> tag
<div> <span>descriptive text</span><span> image </span></div>

please note, in either case you've to play with some CSS code to reduce the height / width of each row.
Regards, Mohammed Ali

Leave a Reply


Terms & Conditions