- Posts: 6
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Fitting it all to one page
- doomen
- Topic Author
- Offline
- New Member
Less
More
4 years 4 months ago #192266
by doomen
Fitting it all to one page was created by doomen
Hi all,
For an image validation study I would like to show one image per page with four questions displayed underneath the image. I would like to put the image and questions in such a way that the image is always seen (even if scrolling is necessary).
I can think of two ways of achieving this:
1) Trying to fit everything on one screen so that no scrolling is needed. This would be ideal, but as I have different question types the questions aren’t very concisely displayed. The first three questions are arrays but with different answering scales (all 7-point Likert scales, but with different descriptions), and as far as I know this makes it necessary to make them into different questions, which takes a lot of space. The last question is an optional open question. So my questions are: is it possible to put the three questions into one question (with different scales)? OR/AND: is it possible to make the space between the questions and the overall layout more concise?
2) Trying to make the image ‘sticky’. So the image is put in a comparison type of question at the moment, and I used a little code to make the image sticky in a way that if I scroll down the image scrolls down also and thus always stays on the screen. I wouldn’t mind this solution, but at the moment this isn’t very well executed by me: for some reason the image doesn’t start on the top in the center but on the left in the middle (already overlaying the question part). I would like for it to be displayed on top in the center and to only scroll down when I scroll down the whole screen to reach the questions not directly visible (consequently overlaying the first questions probably already filled in). My question here is: is there a way to make my little code work better (I copied the code underneath this question).
Attached: an screenshot of how it now looks like. To take this screenshot I zoomed out the screen to 80% so everything fit, and in this way the image actually doesn't overlap the questions, but is still not displayed on the top center.
Thanks in advance,
D
Code:
<style type="text/css">.center {
display: 0;
margin-left: top;
margin-right: top;
width: 500px;
position: fixed;
bottom: 100px;
left: 100px;
z-index: 999;
}
</style>
<img alt="" class="center" src="/limesurvey315/upload/surveys/674355/images/Cross_Neg-1.png" />
For an image validation study I would like to show one image per page with four questions displayed underneath the image. I would like to put the image and questions in such a way that the image is always seen (even if scrolling is necessary).
I can think of two ways of achieving this:
1) Trying to fit everything on one screen so that no scrolling is needed. This would be ideal, but as I have different question types the questions aren’t very concisely displayed. The first three questions are arrays but with different answering scales (all 7-point Likert scales, but with different descriptions), and as far as I know this makes it necessary to make them into different questions, which takes a lot of space. The last question is an optional open question. So my questions are: is it possible to put the three questions into one question (with different scales)? OR/AND: is it possible to make the space between the questions and the overall layout more concise?
2) Trying to make the image ‘sticky’. So the image is put in a comparison type of question at the moment, and I used a little code to make the image sticky in a way that if I scroll down the image scrolls down also and thus always stays on the screen. I wouldn’t mind this solution, but at the moment this isn’t very well executed by me: for some reason the image doesn’t start on the top in the center but on the left in the middle (already overlaying the question part). I would like for it to be displayed on top in the center and to only scroll down when I scroll down the whole screen to reach the questions not directly visible (consequently overlaying the first questions probably already filled in). My question here is: is there a way to make my little code work better (I copied the code underneath this question).
Attached: an screenshot of how it now looks like. To take this screenshot I zoomed out the screen to 80% so everything fit, and in this way the image actually doesn't overlap the questions, but is still not displayed on the top center.
Thanks in advance,
D
Code:
<style type="text/css">.center {
display: 0;
margin-left: top;
margin-right: top;
width: 500px;
position: fixed;
bottom: 100px;
left: 100px;
z-index: 999;
}
</style>
<img alt="" class="center" src="/limesurvey315/upload/surveys/674355/images/Cross_Neg-1.png" />
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
4 years 4 months ago #192269
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Fitting it all to one page
I would be inclined to use CSS to "merge" the questions - remove unnecessary white-space, borders and text elements.
What theme are you using?
Can you attach a small sample survey containing a single group of questions?
What theme are you using?
Can you attach a small sample survey containing a single group of questions?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12908
- Thank you received: 3970
4 years 4 months ago - 4 years 4 months ago #192271
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Fitting it all to one page
And you may do it like this you may improve by css.
Theme: "fruity"
Theme: "skelvanilla"
and here the script (of course: not mine, but Tony's)
Joffm
Some explanation:
Simple array
Subquestions use the pipe symbol:
SQ001: sterk negatief|sterk positief
SQ002: wenig intens|erg intens
...
And combined with another of Tony's solutions
Theme: "fruity"
Theme: "skelvanilla"
and here the script (of course: not mine, but Tony's)
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); // Define the sub-heading text strings var subHeading1 = 'Beoordeel hoe de personen op de afbelding ...'; var subHeading2 = 'Beoordeel hoe intens de personen op de afbelding ...'; var subHeading3 = 'In welke mate wordt ...'; var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length; // Insert the new rows $('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>'); $('tr.answers-list:eq(1)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>'); $('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>'); // Fix up the row classes var rowClass = 1; $('table.subquestions-list tbody tr', thisQuestion).each(function(i) { if($(this).hasClass('sub-header-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); }); </script> <style type="text/css">.sub-header-row { margin-bottom: 20px; } .sub-header-row th { background-color: #efefef; color: #000000 !important; text-align: left; } </style>
Joffm
Some explanation:
Simple array
Subquestions use the pipe symbol:
SQ001: sterk negatief|sterk positief
SQ002: wenig intens|erg intens
...
And combined with another of Tony's solutions
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Move element(s) $('.question-title-container', thisQuestion).append($('.question-valid-container', thisQuestion)); }); </script> <style type="text/css">@media only screen and (min-width: 480px) { #question{QID} .question-title-container { width:30%; } #question{QID} .answer-container { width: 70%; } #question{QID} .question-valid-container { padding-left: 0; } } </style>
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 4 years 4 months ago by Joffm.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13624
- Thank you received: 2490
4 years 4 months ago #192295
by DenisChenu
Else : skelvanilla allow class `skel-no-question` i must check what happen with array ?
And maybe add a `skel-question-as-tableheader` to move the question text like you do in the screenshot ? I think it can be possible … (+ a `skel-question-no-tableheader` maybe).
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Fitting it all to one page
Thanks to use itJoffm wrote: …
Theme: "skelvanilla"
…
Else : skelvanilla allow class `skel-no-question` i must check what happen with array ?
And maybe add a `skel-question-as-tableheader` to move the question text like you do in the screenshot ? I think it can be possible … (+ a `skel-question-no-tableheader` maybe).
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- doomen
- Topic Author
- Offline
- New Member
Less
More
- Posts: 6
- Thank you received: 0
4 years 4 months ago #192306
by doomen
Replied by doomen on topic Fitting it all to one page
Hi all,
Thank you for the helpful comments. I’ve attached two small surveys containing a single group.
In the first small survey I attached, I applied the solution of Joffm (and Tony’s). This looks quite good already, certainly if you open the survey on a big monitor on which everything fits.
In the second small survey attached, I also tried the other solution of Joffm because I find this a very neat way of presenting the questions. Vertically everything fits perfectly. However, because my image is displayed larger (and reducing the size isn’t really an option for this study) the Likert scale does not fit well anymore (horizontally) and so the scale starts to overlap. Is there a way to broaden the template so there is more space for the question (+image) and rating scale (i.e. to reduce the white space around the question box)?
I’ve reduced the white space between the question and the image (<table border="0" cellpadding="0" cellspacing="0" width="100%"></table>), and I’m using the Vanilla theme.
Kind regards,
D
Thank you for the helpful comments. I’ve attached two small surveys containing a single group.
In the first small survey I attached, I applied the solution of Joffm (and Tony’s). This looks quite good already, certainly if you open the survey on a big monitor on which everything fits.
In the second small survey attached, I also tried the other solution of Joffm because I find this a very neat way of presenting the questions. Vertically everything fits perfectly. However, because my image is displayed larger (and reducing the size isn’t really an option for this study) the Likert scale does not fit well anymore (horizontally) and so the scale starts to overlap. Is there a way to broaden the template so there is more space for the question (+image) and rating scale (i.e. to reduce the white space around the question box)?
I’ve reduced the white space between the question and the image (<table border="0" cellpadding="0" cellspacing="0" width="100%"></table>), and I’m using the Vanilla theme.
Kind regards,
D
Attachments:
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12908
- Thank you received: 3970
4 years 4 months ago #192316
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Fitting it all to one page
Please, do not attach lsq nor lsg exports, only lss.
lsq and lsq are language sensitive.
So we have to create a new survey, hopefully with the correct base language to be able to import your question or group.
And we are not sure to have all other settings of your survey.
Joffm
lsq and lsq are language sensitive.
So we have to create a new survey, hopefully with the correct base language to be able to import your question or group.
And we are not sure to have all other settings of your survey.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- doomen
- Topic Author
- Offline
- New Member
Less
More
- Posts: 6
- Thank you received: 0
4 years 4 months ago #192317
by doomen
Replied by doomen on topic Fitting it all to one page
Thank you, I didn't know that. Attached you can find the .lss format.
Attachments:
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12908
- Thank you received: 3970
4 years 4 months ago - 4 years 4 months ago #192319
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Fitting it all to one page
Hi,
here is my survey.
Just to compare.
Joffm
here is my survey.
Just to compare.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 4 years 4 months ago by Joffm.
The topic has been locked.