Welcome, Guest
Username: Password: Remember me

TOPIC: Modify Image Attribute based on List Selection

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102455

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4134
  • Thank you received: 766
  • Karma: 347
Okay, if you want the image handled on subsequent pages, it would probably be easiest to set a cookie.

Try this in template.js. It will detect the drop-down answer and set a cookie that is accessed in all pages to set the image path.

$(document).ready(function(){
 
	// If the dropdown is on this page...
	if($('#answer856216X180X1269').length > 0) {
 
		// Initial cookie setting
		var imageSetting = $('#answer856216X180X1269').val();
		eraseCookie('ls_image_setting');
		createCookie('ls_image_setting', imageSetting, '');
 
		// Listener on the select
		var originalPath = $('#variablelogo').attr('src');
		$('#answer856216X180X1269').change(function(event){
			if($(this).val() == '1') {
				$('#variablelogo').attr('src', 'http://www.fullpath.com/surveyassets/images/image1.png');
			}
			else {
				$('#variablelogo').attr('src', originalPath);
			}
			var imageSetting = $(this).val();
			eraseCookie('ls_image_setting');
			createCookie('ls_image_setting', imageSetting, '');
		});
	}
 
	//Check the cookie and set the image accordingly
	var imageSetting = readCookie('ls_image_setting');
	if(imageSetting == '1') {
		$('#variablelogo').attr('src', 'http://www.fullpath.com/surveyassets/images/image1.png');
	}
});
 
// NO EDITING REQUIRED BELOW HERE
// Some cookie managemnent tools 
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name) {
	createCookie(name,"",-1);
}
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: 8 months 2 weeks ago by tpartner.
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102457

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 203
  • Thank you received: 5
  • Karma: 5
Hi Tpartner,
I thank you tremendously for the code. I'm afraid though that I cannot get the image to show in Group 2; it still reverts.

Would you believe that I've literally been working on this all day? It has been maddening. Perhaps the cookie has not being set?

I got the image to show in Group2 by storing a value "1", "2", etc in the window.name property.

In the onchnage event, I included the line:
window.name = "1";

Then the function:
window.onload = function() {
var myImage = document.getElementById("variablelogo");
myImage.src = "fullpath/originallogo.png";

if(window.name == '1') {
myImage.src = "fullpath/logo1.png";
}

};

However, I couldn't get the image to show up in the original place when I pressed the previous button.

I like the cookie implementation - window.name feels hacky.
Thoughts?
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102459

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4134
  • Thank you received: 766
  • Karma: 347
Hi David,

Here is a sample survey and template. Install the template before the survey. After importing the survey, modify all instances of "752182X9X27" in template.js to match the new IDs.

File Attachment:

File Name: test_image_cookie.zip
File Size: 86 KB

File Attachment:

File Name: limesurvey_survey_752182.lss
File Size: 14 KB
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: 8 months 2 weeks ago by tpartner.
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102460

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 203
  • Thank you received: 5
  • Karma: 5
TPartner,
You've done more than enough. When I download and install your template and survey - it works as intended. But, not with my template. The changeevent works, but subsequent groups do not reflect the image.

I'm using a citronade clone - it has some issues with javascript outlined in this post.

Would it possibly be due to the fact that your survey has answer codes "A1", "A2", etc. and mine has "1", "2", etc? I changed template.js to reflect this in two places...but perhaps their length is relevant? I'm dreading having to undo all of my work and apply it to a new template for this.

Thank you Tpartner. More than gracious assistance.
David
Last Edit: 8 months 2 weeks ago by dweisser. Reason: more info
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102480

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4134
  • Thank you received: 766
  • Karma: 347
Hi David,

No, the response code length should have no affect.

Can you attach an export of your template?
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.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102481

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 203
  • Thank you received: 5
  • Karma: 5
Here you are.
Attachments:
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102484

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4134
  • Thank you received: 766
  • Karma: 347
I don't get it. Here is a working test using your template - partnersurveys.com/limesurvey20/index.ph...82/newtest/Y/lang/en
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.

Modify Image Attribute based on List Selection 8 months 2 weeks ago #102485

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 203
  • Thank you received: 5
  • Karma: 5
Wow. Must be something local? Who knows? As I said before, i have a javascript problem with this template - but apparently that is only local as well.

I'll continue to struggle with it. I can't thank you enough.
David

Update:
T - for some reason, when I moved the cookie js to the top of template.js, it worked.
Hmm...does that mean that perhaps I have some invalid code in there?

Update2:
The only drawback to this method is that it takes a moment for the browser to read the cookie - so you see the "original" image during this time. I'm sure there is a "hack" to prevent this or mitigate this. In the meantime, i set my "original" image to a blank spacer.

You absolutely rock. Do you accept tips? Or bribes. (I'm actually serious ;) )
David
Last Edit: 8 months 2 weeks ago by dweisser.
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 1 week ago #102810

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 203
  • Thank you received: 5
  • Karma: 5
Hey T -

Why doesn't this work for a radio list? I switched "change" for the list drop down with "click" for the radio button. And I changed it back...and tried some other things as well.

$(document).ready(function(){

// Initial setting
if($('#answer171641X186X1342').val() == '1') {
$('#variableimage').attr('src', 'www.springboltconsulting.com/surveyasset...ages/demo_image1.png');
}

// Listener on the select
$('#answer171641X186X1342').click(function(event){
if($(this).val() == '1') {
$('#variableimage').attr('src', 'www.springboltconsulting.com/surveyasset...ages/demo_image2.png');
}
});
$('#answer171641X186X1342').click(function(event){
if($(this).val() == '2') {
$('#variableimage').attr('src', 'www.springboltconsulting.com/surveyasset...ages/demo_image3.png');
}
});
$('#answer171641X186X1342').click(function(event){
if($(this).val() == '3') {
$('#variableimage').attr('src', 'www.springboltconsulting.com/surveyasset...ages/demo_image4.png');
}
});

});

How did you learn this stuff?
The administrator has disabled public write access.

Modify Image Attribute based on List Selection 8 months 1 week ago #102832

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4134
  • Thank you received: 766
  • Karma: 347
I'm not sure I get your image settings - in the "Initial setting" if radio 1 is checked, you want it to be demo_image1, but in the listener if radio 1 is checked, you want it to be demo_image2.

Having said that, something like this should work for radios:
$(document).ready(function(){
 
	// Initial setting
	if($('.question1342 input.radio:checked').attr('value') == '1') {
		$('#variableimage').attr('src', 'http://www.springboltconsulting.com/surveyassets/images/demo_image1.png');
	}
 
	// Listener on the radios
	$('.question1342 input.radio').click(function(event){
		var clickedvalue = $(this).attr('value');
		if(clickedvalue == '1') {
			$('#variableimage').attr('src', 'http://www.springboltconsulting.com/surveyassets/images/demo_image2.png');
		}
		if(clickedvalue == '2') {
			$('#variableimage').attr('src', 'http://www.springboltconsulting.com/surveyassets/images/demo_image3.png');
		}
		if(clickedvalue == '3') {
			$('#variableimage').attr('src', 'http://www.springboltconsulting.com/surveyassets/images/demo_image4.png');
		}
	});
});
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: 8 months 1 week ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.143 seconds
Donation Image