The survey we created looks good when it's tested on a computer, but the array questions look very confusing on the mobile devices.

The array questions contain 4 sub questions with 9 answer options. For 5 of these answer options an image is attached below. On a computer, this appears as a table, with all sub questions one below the other.

I am attaching some screen shots to show how it looks on a mobile device.
It seems that the questions cannot really be distinguished from the sub questions.

Is there a way to edit the survey only for the mobile version?

I was considering making the images smaller for phones, but I wouldn't want that to apply to the desktop version.

Any other suggestions of how to change the design for the mobile version would be very helpful.


A different question I have is regarding the number of questions that can be shown per page.
I have no possibility of dividing them in separate groups, so that I can use the function to show them group by group.
This is not possible because there are a total of 100 questions in a group, all of which use a script so that only 25 of those, randomly selected, are visible to participants.

Instead of the participants seeing all 25 questions on a page, I would like them to be able to see 10, then another 10, then 5 on separate pages.

How would it be best to proceed in order to achieve this?


Thank you very much in advance for any suggestion.

Array questions do not work well on small screens, which is why you should avoid them, when you have a lot of people responding on Mobile phones.

What the standard templates do is separating the subquestions of the array as if they were separate questions, this is the effect you are seeing.

There is no "page" concept in Limesurvey, thus you need to use the concept of the question group (in my opinion these should be rather logical, than layout groups) for displaying a certain amount of questions on one page.

You could always go for question by question display, then only one question would be shown per page (the best option for mobile in my opinion anyway).

However, regarding your "script": You can always to this with a work around.

For the 100 questions, create 4 question groups.

Group 1: 10 questions
Group 2: 10 questions
Group 3: 5 questions
Group 4: the rest (75 questions)

Give all questions the same "randomization group name" and then hide group 4.

What will happen? Limesurvey will randomly place the questions from 1-100 within the 100 positions that you have, spread over the 4 groups. As group 4 is hidden, respondents will always just see the first 25 positions, with 25 questions drawn out of the pool of 100.

To answer your first question:
This looks quite normal.
I see the question, the subquestion ("Valence") and then - one below the other - the answer options.
And after the last answer option there is the next subquestion ("Arousel").
So in fact you should try to redesign meaning the size of the pictures.

Furthermore you may check the screen size at the beginning of the survey and then route to the appropriate question layout for smartphones or desktops. (Meaning you have the question twice with different layouts).
Or you may include different images by micro-tayloring, like
{if(screensize<760,"<img src=' www.myServer/myPath/image_small.png'/ >","")}

Your second question:

This is not possible because there are a total of 100 questions in a group,

How many of these groups are there?
The "normal" way would be:
Create a group with the first ten questions, a group with the second ten, a group with the next 5 questions and a group with the rest. This last group is hidden by the relevance equation "0".
All questions get the same "randomization group name".
That's it.
Here a prototype that shows randomly 7 out of 12, 5 on the first page, 2 on the second.


But, to be honest, I did not quite understand your design.

A different question I have is regarding the number of questions that can be shown per page.
I have no possibility of dividing them in separate groups, so that I can use the function to show them group by group.
This is not possible because there are a total of 100 questions in a group, all of which use a script so that only 25 of those, randomly selected, are visible to participants.

So, if I misunderstood something, send a small sample as LSS.

Joffm

Regarding the images you can use CSS media queries to limit the image size on smaller screens or even show different images on smaller screens. When inserting images I almost always use two, depending on screen size - one with a "landscape" aspect ratio and one with a "portrait" aspect ratio.

{if(screensize<760,"<img src=' www.myServer/myPath/image_small.png'/ >","")}

No

Regarding the images you can use CSS media queries to limit the image size

Best solution (in my opinion) : usage of boostrap utility class

See getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

Yes, true,
I nearly always forget these bootstrap classes.

Joffm

Thank you so much for all your responses! It is very much appreciated!