Manipulating / appending to answer text in Matrix question, not showing on mobile phone (portrait) | XM Community
Question

Manipulating / appending to answer text in Matrix question, not showing on mobile phone (portrait)

  • 1 December 2020
  • 3 replies
  • 27 views
R
Rank
Userlevel 5
Badge +11

Hi All/ Mohammedali_Rajapakar_Ugam (forgive me for linking to you directly but this is a follow on from the thread https://www.qualtrics.com/community/discussion/1612/repeat-labels-of-matrix-question-at-bottom which helped me get this far in my problem. Would be grateful if you could help.)
I would like to ask what the class / IDs are for a matrix that is used on a mobile phone and consequently the matrix is rotated from horizontal to vertical (landscape to portrait). My JS code to add in a Smilely face next to either end scale points vanishes as soon as you use it on a phone in portrait mode. As soon as you rotate it so that the width of the screen is wider (landscape), they reappear.

This is my code:
//===Happy Faces: Matrix Horizontal  1 - 5 scale===
//Please this code in the addOnload section
//This code will display a happy or sad face for the different end point scale choices of the question
//its assumed that 1 is worst (sad) case and 5 is best (happy) case
// please use your own images
var sad_face_scr = 'https://xxx.qualtrics.com/CP/Graphic.php?IM=IM_xxx';
var happy_face_scr = 'https://xxx.qualtrics.com/CP/Graphic.php?IM=IM_xxx';


//The backslash here identifies that the code continues on a new line but be careful of spaces and apostrophes
//The backslash must not have anything afterwards, not even a space!
//There is a space here: append(' <  so that the image doesn't touch the end of the choice answer

jQuery("#" + this.questionId + " .Selection.c4").prepend(' style="width: 31px; height: 30px; vertical-align: middle;" />');

jQuery("#" + this.questionId + " .Selection.last").prepend('

style="width: 31px; height: 30px; vertical-align: middle;" />
');
//===End of code===
What I need to find out is what the class / Id is for when the phone is in portrait mode. Can anyone help me with this or suggest some software on the phone (android 😎 that will help me inspect the page so that I can figure it out?
Using my code in a normal matrix question on a PC you'll see:
User:

but on a phone you see this:
User: Hope someone can help
Thanks
Rod Pestell

3 replies

PraDeepKotian_Ugam
Rank
Userlevel 6
Badge +21

Hi @Rod_Pestell,
You can inspect the Mobile preview in browser itself by using the survey preview and enabling the Mobile view on in preview mode. In browser you can inspect the mobile elements by directly right clicking and inspect elements.
Hope this helps!

R
Rank
Userlevel 5
Badge +11

Hi PraDeepKotian_Ugam ,
Thanks for the reply. Last night this wasn't showing correctly in the desktop preview with the mobile view on, it was showing a grey arrow on the right hand side. The mobile friendly box was ticked. However, today, it's now showing what I need. So yes I can now inspect - thanks for the guidance. :)

However there are sometimes when I still need to inspect on a mobile phone, eg when you use a date picker which overlays and can show up differently on different phones due to different devices and apps. I did discover that there is a way to show the source code in chrome on a device which is by writing source-code: before the http part of the address. However, this doesn't pick up the full source code which is a shame, it just picks up what looks like the header I think.

image.pngok, so out of this source code:
image.png


and referring to my above code can you suggest a best practise way to use the append syntax and place the image to the right of the 'very dissatisfied' choice?

I've normally referred to the ID but in this case I'm not sure what the id is. It's more classes and 'label for' . This is where my lack of coding knowledge shows! Is there any whitepaper done by anyone to help understand the html / Qualtrics naming convention?

Thanks

Rod Pestell


R
Rank
Userlevel 5
Badge +11

Hi All,

I've worked hard on this and tried and tested and tried again and I think I now have the mobile version working, here is my code 🙂. If anyone would like to feedback any changes or best practises that would be really helpful in case I've missed something that might causes issues elsewhere.

//===Happy Faces: Matrix Horizontal  1 - 5 scale===
//Place this code in the addOnload section
//This code will display a happy or sad face for the different end point scale choices of the question
//its assumed that -1-label is worst (sad) case and -5-label is best (happy) case
//use your own pics
var sad_face_scr = 'https://xxxx.qualtrics.com/CP/Graphic.php?IM=IM_xxx';
var happy_face_scr = 'https://xxx.qualtrics.com/CP/Graphic.php?IM=IM_xxx';


//The backslash \\ identifies that the code continues on a new line but be careful of spaces and apostrophes
//The backslash must not have anything afterwards, not even a space!
//For the vertical versions, there is a space here: append(' <  so that the image doesn't touch the end of the choice answer

//normal - horizontal
jQuery("#" + this.questionId + " .Selection.c4").prepend('

  style="width: 31px; height: 30px; vertical-align: middle;" />
');
//mobile friendly - vertical - handles mutliple rows
jQuery("#" + this.questionId + " .c4 .single-answer.mobile").append('   style="width: 31px; height: 30px; vertical-align: middle;" />');
//normal - horizontal
jQuery("#" + this.questionId + " .Selection.last").prepend('
  style="width: 31px; height: 30px; vertical-align: middle;" />
');
//mobile friendly - vertical - handles multiple rows
jQuery("#" + this.questionId + " .last .single-answer.mobile").append('   style="width: 31px; height: 30px; vertical-align: middle;" />');
//===End of code===


Leave a Reply


Terms & Conditions