Welcome, Guest
Username: Password: Remember me

TOPIC: Display image based on token and/or previous question

Display image based on token and/or previous question 3 years 4 months ago #58372

  • vadindot
  • vadindot's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 51
  • Thank you received: 1
  • Karma: 0
I would like to display the logo of a company on a question page, the logo would be based on what company they are a client of, which would be determined by the token.

I would also like to be able to do this based on a previous question.

I have two identical surveys, one is being conducted by email invite (token based) and the other is being conduct onsite, hence my need for both.
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58374

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
Shouldn't be too difficult with a little JavaScript.

1) Do you want to display the image in a question text or do you have a DOM element in your template for it (like a banner area)?

2) Is the previous question on a previous page or is everything on the same page?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58375

  • vadindot
  • vadindot's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 51
  • Thank you received: 1
  • Karma: 0
1) I was planning on displaying the image in the question text.

2) Previous question is on a previous page.

Thanks, knew I could count on you
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58376

  • vadindot
  • vadindot's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 51
  • Thank you received: 1
  • Karma: 0
FYI -

Token filed "Attribute_1" will be a number 1-19
The question (Q1) is the same numbering scheme.

The images are 01.jpg thru 19.jpg
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58377

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
Heres what I would do:

1) Upload the images to the survey resources folder (usually upload/surveys/surveyID/)

2) Add a <span> element to the text of the boilerplate question containing the replacement field for your image number source. Give the span a class of "imageSpan". So for the token survey it would look something like:
<span class="imageSpan">{TOKEN:ATTRIBUTE_1}</span>
and for the open survey it would be (inserting the correct IDs, of course):
<span class="imageSpan">{INSERTANS:SSSSSXGGXQQ}</span>

3) Add the following script to the surce of the boilerplate. Replace "QQ" with the boilerplate ID and "11111" with your survey ID.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){ 
 
		var qID = QQ;
		var imagepath = 'upload/surveys/111111/';
 
		// Get the image number from the image span and prepend with an extra 0 if necessary
		var imageNum = $('#question'+qID+' .imageSpan').text();
		if(String(imageNum).length < 2) {
			imageNum = String('0' + imageNum);
		}
 
		// Insert the appropriate image into the image span
		$('#question'+qID+' .imageSpan').text('').html('<img border="0" src="'+imagepath+imageNum+'.jpg" />');	
 
	});
 
</script>

This script insert a basic image tag without any attributes except src and border.

You may want to add some behaviour if an image number is not found or is invalid.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 3 years 4 months ago by tpartner.
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58394

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6227
  • Thank you received: 793
  • Karma: 238
Hello,

Sometimes i use directly
<img src="upload/surveys/111111/{TOKEN:ATTRIBUTE_1}.png" />

Bit there are some 404 problem if the image file doesn't exist :)
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58404

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
It seems I've over-thought it.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Display image based on token and/or previous question 3 years 4 months ago #58461

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
Shnoulle wrote:
Hello,

Sometimes i use directly
<img src="upload/surveys/111111/{TOKEN:ATTRIBUTE_1}.png" />

Bit there are some 404 problem if the image file doesn't exist :)
Nice solution!

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

Re: Display image based on token and/or previous question 3 years 4 months ago #58472

  • vadindot
  • vadindot's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 51
  • Thank you received: 1
  • Karma: 0
That works great! Thanks!
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.138 seconds
Donation Image