Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Insert picture to the left of the question

More
8 years 4 months ago #128074 by biba
Thanks a lot for the quick response. The solution you suggest (insert the image above), i have already tried. The main problem is, that the rater can not see the image/face & the questions at the same time. My test-subjects claimed, that they can just see part of the face and have to scroll up and down, what is pretty anoying. Since in the study i need to rate a lot of faces I want to make it as "user friendly" as possible.
So I want to avoid that the reater have to scroll up and down while rating the face. That is why I am asking for a better solution and I think putting the picture/face to the right besind the questions would be prefect.
Can you provide such a solution or any other solution to solve my problem?

Thank you so much!!!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 4 months ago - 8 years 4 months ago #128080 by tpartner
Replied by tpartner on topic Insert picture to the left of the question
Well, I would start with a copy of a good <div> based template that doesn't waste as much space as the default template - something like citronade. Then you can use JavaScript to add classes to the questions so you can float them left or right.

1) Set up your survey to use JavaScript .

2) Copy the citronade template and add something like this to the end of template.css:
Code:
/**** Custom Styles ****/
 
.question-wrapper {
  clear: both;
}
 
.custom-float-left {
  float: left;
  width: 33%;
  clear: left;
}
 
.custom-float-right {
  float: right;
  width: 66%;
  clear: right;
}
 
.custom-float-left.boilerplate .answers-wrapper,
.custom-float-left.boilerplate div.question-help {
  display: none;
}
 
.custom-float-left.boilerplate .question-text img {
  max-width: 100%;
  height: auto;
}

3) Place your image in a text-display type question and add this to the question source:
Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
    $('#question{QID}').addClass('custom-float-left');
  });
</script>

4) Add this to the question source of the following array and list-dropdown questions:
Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
    $('#question{QID}').addClass('custom-float-right');
  });
</script>

You end up with something like this where the text-display is floated left and the next two questions are floated right, alongside it.



Here's a working template and sample survey:

File Attachment:

File Name: test_6.zip
File Size:89 KB


File Attachment:

File Name: limesurvey...67-2.lss
File Size:21 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 4 months ago by tpartner.
The following user(s) said Thank You: biba
The topic has been locked.
More
8 years 4 months ago #128143 by biba
Thank you so much!!!
Unfortunately I am not allowed to use JavaScript. I asume there is no other solution.
Anyway I really thank you!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 4 months ago #128159 by tpartner
Replied by tpartner on topic Insert picture to the left of the question

I asume there is no other solution.

Yes, you can use the question IDs in the CSS but it's considerably more painful with a lot of questions.

So, if your IDs are:
- Text-display question - 11111
- Array question - 22222
- Dropdown question - 33333

Something like this:

Code:
/**** Custom Styles ****/
 
.question-wrapper {
  clear: both;
}
 
#question11111 {
  float: left;
  width: 33%;
  clear: left;
}
 
#question22222,
#question33333 {
  float: right;
  width: 66%;
  clear: right;
}
 
#question11111 .answers-wrapper,
#question11111 div.question-help {
  display: none;
}
 
#question11111 .question-text img {
  max-width: 100%;
  height: auto;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: biba
The topic has been locked.
More
8 years 4 months ago #128232 by biba
It worked out really well! Thank you so much!!!
The topic has been locked.
More
7 years 6 months ago #141716 by Tiger
Replied by Tiger on topic Insert picture to the left of the question
Dear Tony and other experts,

I'm using the online LimeService to set up my survey. Is it possible to apply the CSS code to edit the layout there? I tried but didn't not succeed. Could you give me some suggestions? The part of the source code is as following. Thanks.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago - 7 years 6 months ago #141741 by tpartner
Replied by tpartner on topic Insert picture to the left of the question
I'm reasonably sure you have access to the template editor at LimeService but please contact their support directly.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 6 months ago by tpartner.
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
7 years 6 months ago #141848 by Mazi

Tiger wrote: I'm using the online LimeService to set up my survey. Is it possible to apply the CSS code to edit the layout there?

Which exact detail do you want to adjust? Please be more precise.

It also helps to provide a link to a short demo survey. Make sure it is activated so everyone can access it.

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
More
6 years 11 months ago #150781 by nutspray
Replied by nutspray on topic Insert picture to the left of the question
Hi,

In my situation, it's very simple, because I'm using the the same question type throughout the entire survey along with the same set of responses. The question type is radio list and the question is a picture. How would I place the radio list answers to the right of the image, globally. Thank you.
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
6 years 11 months ago #150783 by Mazi
Hi,

"It also helps to provide a link to a short Demo survey. Make sure it is activated so everyone can access it."

...because the adjustments depend on the template used.

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
More
6 years 11 months ago #150788 by nutspray
Replied by nutspray on topic Insert picture to the left of the question
P.S.

Used a copy of default template.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 11 months ago #150880 by tpartner
Replied by tpartner on topic Insert picture to the left of the question
@nutspray, please don't cross-post. You have already asked this in another forum.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose