Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: Insert picture to the left of the question

Insert picture to the left of the question 5 years 6 months ago #61795

  • asonimie
  • asonimie's Avatar
Is there a way to insert a picture to the left of the question instead of having to put a picture in the question text and the answers below it?

Sort of like having it in a table.

Ideally I'd like to be able to have a picture to the right or left and have 3 questions on a page, but even being able to have one question on the page with the image to the right or left would be helpful.
Attachments:
The administrator has disabled public write access.

Insert picture to the left of the question 5 years 6 months ago #61813

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6570
  • Thank you received: 1477
  • Karma: 579
You can place the image in a text-display (boilerplate) question and then use CSS to place the follwing questions alongside.

Here are some quick styles for the default template to give the result below. Replace the following:
11 - boilerplate question ID
22 - multiple options question ID
33 - multiple text question ID
44 - the question ID of the next question in the group (if any)
table.innerframe {
	width: 800px;
}
 
#question11,
#question22,
#question33 {
	float: left;
}
 
#question11 {
	width: 40%;
	margin-left: 5%;
}
 
#question22,
#question33 {
	width: 50%;
	background-color: #EEF6FF;
	padding-right: 10px;
}
 
#question22 .questiontext,
#question33 .questiontext {
	 padding: 1em;
}
 
#question33 {
	margin-top: -12px;
	padding-top: 14px; 
}
 
#question11 table,
#question22 table,
#question33 table {
	width: 100%;
}
 
#question11 td.answer {
	padding: 0;
}
 
#question44 {
	clear: both;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Insert picture to the left of the question 4 years 6 months ago #79998

  • gfgardner
  • gfgardner's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 9
  • Karma: 0
This looks like just what I need. But I am struggling a bit. Can you please clarify ..

Do I actually have to edit the template.css file to include the text you provided? exactly where do i put this (and actually if you dont mind can you tell me how to do this because my version of the template editor will not allow me to insert a line except at the end). Do I then have to keep this template just for this one survey?

then do I have to put in the template.css file the long code for the question 17328X272X190 etc for each of the questions I am interested in?

Like I said, it is just what I need and you have done a great job in providing the answer but I just need a little more and have done an FAQ search. Thanks
The administrator has disabled public write access.

Insert picture to the left of the question 4 years 6 months ago #79999

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6570
  • Thank you received: 1477
  • Karma: 579
...my version of the template editor will not allow me to insert a line except at the end...
You will need to copy one of the shipped templates before you can edit it.
Do I actually have to edit the template.css file to include the text you provided?
The code I supplied would go at the end of template.css.
Do I then have to keep this template just for this one survey?
You can use the template for other surveys. The added code will not affect them because it uses question-specific identifiers for the style rules (questions are identified with their IDs).
then do I have to put in the template.css file the long code for the question 17328X272X190 etc...
You do not use the full SGQA for the styles. In the case of your example, the identifier would be #question190.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: gfgardner

Insert picture to the left of the question 4 years 6 months ago #80023

  • gfgardner
  • gfgardner's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 9
  • Karma: 0

Many thanks for trying. I may have to give up, however, as I did all of that and still got the screenshot as attached. I also attach the css file which I think I copied accurately.

should I perhaps try a simpler way?

I did at least work out how to use the template editor - the problem was not that I had tried to edit an original it was that the fancy highlighting option was switched on and on my machine (ie9) made all sorts of flashing and moving around things happen until I switched it off.
Attachments:
Last Edit: 4 years 6 months ago by gfgardner. Reason: still trying to get the css file on
The administrator has disabled public write access.

Insert picture to the left of the question 4 years 6 months ago #80024

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6570
  • Thank you received: 1477
  • Karma: 579
Can you activate a sample survey for us to see?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Insert picture to the left of the question 4 years 6 months ago #80034

  • gfgardner
  • gfgardner's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 9
  • Karma: 0
actually (and miraculously) since doing the screenshot which you can see above produced a vertical set, I went and had a cup of coffee, and when I came back it was fine!

many thanks again.

Also for the benefit of complete newbies (and to get it in the forum search results because strangely it does not appear easily), the term boilerplate is used by everyone on this forum - How do I create a boilerplate survey, the answer is that it is actually called a text display question. Hope that helps
The administrator has disabled public write access.

Insert picture to the left of the question 4 years 6 months ago #80038

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6570
  • Thank you received: 1477
  • Karma: 579
the term boilerplate is used by everyone on this forum
Yeah, sorry, that's a legacy from earlier versions.

Yes, boilerplate = text display
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Insert picture to the left of the question 4 years 6 months ago #80081

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6029
  • Thank you received: 373
  • Karma: 260
gfgardner wrote:
actually (and miraculously) since doing the screenshot which you can see above produced a vertical set, I went and had a cup of coffee, and when I came back it was fine!
When editing the template.css file, you always have to clear the browser cache when calling the page again so that the new code is loaded and no cached, outdated file.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"
The administrator has disabled public write access.

Insert picture to the left of the question 1 year 1 month ago #128066

  • biba
  • biba's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
Hi there,

I would really need your help for a similiar problem that have already been described above.

I need a template that display a picture on the left side and on the right side a "matrix" question-type with (with 7 items that have to be rated on a 7-point likert scale). Furthermore i would need a second questions-type (single-choice, list-box) directly under the matrix question.
My solution right now looks like this (see attached pdf). And it looks really terrible!!


It is important that I can change the pictures in the left box because there are a lot of pictures that i need to get rated by the participants.

You need to know that I have no clue about programing or javascript, also I am not very experienced in limesurvey. But at least I know how to copy and change a template. So maybe you can offer me a java-code that I just need to insert.
Is that anyhow possible?

Thank you very very much in advance!!
B.
The administrator has disabled public write access.

Insert picture to the left of the question 1 year 1 month ago #128067

  • biba
  • biba's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
Example
Attachments:
The administrator has disabled public write access.

Insert picture to the left of the question 1 year 1 month ago #128071

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5429
  • Thank you received: 809
  • Karma: 240
I am just wondering why the image can not be above the matrix question? Inserting an image into the question text is simple and from your example I can't see any advantage of the image being positioned to the left of matrix question.

Sure, it is doable, but as you state that you have "no clue about programing or javascript, also I am not very experienced in limesurvey." I would suggest making things as easy/simple as possible.
Have a look at the manual! It is a really valuable source for information. Here some helpful links:
Manual (EN) | Question Types | [url=https://manual.limesurvey.org/Workarounds[/url]

If you found this answer helpful and it saved you some time please consider a [url=https://donate.limesurvey.org[/url] to the...
Last Edit: 1 year 1 month ago by holch.
The administrator has disabled public write access.

Insert picture to the left of the question 1 year 1 month ago #128074

  • biba
  • biba's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
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 administrator has disabled public write access.

Insert picture to the left of the question 1 year 1 month ago #128080

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6570
  • Thank you received: 1477
  • Karma: 579
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:
/**** 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:
<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:
<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: 1 year 1 month ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: biba

Insert picture to the left of the question 1 year 1 month ago #128143

  • biba
  • biba's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
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 administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.345 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form