- Posts: 115
- Thank you received: 4
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Modify Image Attribute based on List Selection
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
10 years 4 months ago #102400
by dweisser
Modify Image Attribute based on List Selection was created by dweisser
Hi all,
I'm trying to show an image based on an answer selections in a list-type question.
The item is 856216X180X1269 and the value codes for answers are 1,2,3 etc.
In my template question.pstpl, I have <img id="variableimage" src="path/currentimage />. This is the img in which I would like to alter the src based on the response.
In template.js, I have this:
$(document).ready(function() {
if ($('#java856216X180X1269').attr.value =='1' ) {
$('#variablelogo').attr('src', ' www.fullpath.com/surveyassets/images/image1.png ');
}
})
I hoped that if they select Answer Option 1, then Image 1 would appear. I think I would have to tie this to the change event of the question, but I'm afraid this is beyond me. This is what I have so far - and it doesn't work. It would be grand if someone could point me in the right direction.
Thank you in advance,
David
I'm trying to show an image based on an answer selections in a list-type question.
The item is 856216X180X1269 and the value codes for answers are 1,2,3 etc.
In my template question.pstpl, I have <img id="variableimage" src="path/currentimage />. This is the img in which I would like to alter the src based on the response.
In template.js, I have this:
$(document).ready(function() {
if ($('#java856216X180X1269').attr.value =='1' ) {
$('#variablelogo').attr('src', ' www.fullpath.com/surveyassets/images/image1.png ');
}
})
I hoped that if they select Answer Option 1, then Image 1 would appear. I think I would have to tie this to the change event of the question, but I'm afraid this is beyond me. This is what I have so far - and it doesn't work. It would be grand if someone could point me in the right direction.
Thank you in advance,
David
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
10 years 4 months ago #102406
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 Modify Image Attribute based on List Selection
Hi David,
Is it a radio or dropdown list?
Is it a radio or dropdown list?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago #102413
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
It is a drop-down list.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
10 years 4 months ago - 10 years 4 months ago #102420
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 Modify Image Attribute based on List Selection
Try this:
Code:
$(document).ready(function(){ // Initial settting if($('#answer856216X180X1269').val() == '1') { $('#variablelogo').attr('src', 'www.fullpath.com/surveyassets/images/image1.png'); } // Listener on the select $('#answer856216X180X1269').change(function(event){ if($(this).val() == '1') { $('#variablelogo').attr('src', 'www.fullpath.com/surveyassets/images/image1.png'); } }); });
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 10 years 4 months ago by tpartner.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago #102436
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
Works beautifully! Thanks again TPartner.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago #102438
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
Hey Tpartner - -
So, a couple of things.
First, the onchnange event works fine, except if you push next and then previous. The answers are still set...but the image has reverted to its initial setting. Any thoughts?
Second, the survey is group by group. The <img id="variablelogo /> only shows on the group page where the trigger question is located. I think I could include a hidden question in each group equal to the value of the trigger dropdown. Then, I could use the javascript to reference those questions, one for each group...
But, is there a more elegant solution? Again, as always, any direction is appreciated.
David
So, a couple of things.
First, the onchnange event works fine, except if you push next and then previous. The answers are still set...but the image has reverted to its initial setting. Any thoughts?
Second, the survey is group by group. The <img id="variablelogo /> only shows on the group page where the trigger question is located. I think I could include a hidden question in each group equal to the value of the trigger dropdown. Then, I could use the javascript to reference those questions, one for each group...
But, is there a more elegant solution? Again, as always, any direction is appreciated.
David
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
10 years 4 months ago #102445
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 Modify Image Attribute based on List Selection
1) The "Initial setting" section in the code should take care of that. Are you getting ant JavaScript errors?
2) Do you need to show the modified image in subsequent groups?
2) Do you need to show the modified image in subsequent groups?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago - 10 years 4 months ago #102446
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
No errors.
So, when you first go to the page: '#answer856216X180X1269').val() == '', right? So my initial image shows as planned. When I "change" the drop down, to val()=='1', i see image one successfully.
If I push next, but then push previous, the drop down shows the answer selection associated with val()=='1', (that is, I see the value I selected). But, the associated image is gone as is the initial image. No image is shown.
And yes, I'd like to show the image in subsequent group.
Don't know if its relevant, but the initial state of the drop-down includes an answer option "Please choose...", but once you make a selection and push next then push previous, that answer option is no longer available.
So, when you first go to the page: '#answer856216X180X1269').val() == '', right? So my initial image shows as planned. When I "change" the drop down, to val()=='1', i see image one successfully.
If I push next, but then push previous, the drop down shows the answer selection associated with val()=='1', (that is, I see the value I selected). But, the associated image is gone as is the initial image. No image is shown.
And yes, I'd like to show the image in subsequent group.
Don't know if its relevant, but the initial state of the drop-down includes an answer option "Please choose...", but once you make a selection and push next then push previous, that answer option is no longer available.
Last edit: 10 years 4 months ago by dweisser. Reason: More information
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago #102447
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
I think I understand why the image "reverts".
First, the onchnange event works fine, except if you push next and then previous. The answers are still set...but the image has reverted to its initial setting. Any thoughts?
Because when you push previous, you don;t activate the change event for the drop down. I think this can be solved by populating a hidden question with the value of the drop down and adjusting the javascript to key off of that. It means one hidden question per group - which isn't too bad.
What do you think?
First, the onchnange event works fine, except if you push next and then previous. The answers are still set...but the image has reverted to its initial setting. Any thoughts?
Because when you push previous, you don;t activate the change event for the drop down. I think this can be solved by populating a hidden question with the value of the drop down and adjusting the javascript to key off of that. It means one hidden question per group - which isn't too bad.
What do you think?
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago #102448
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
It turns out that the hidden question solution does not work. Now I am officially stuck.
Let me clear cache again...
Let me clear cache again...
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
10 years 4 months ago - 10 years 4 months ago #102455
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 Modify Image Attribute based on List Selection
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.
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.
Code:
$(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.
Last edit: 10 years 4 months ago by tpartner.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 115
- Thank you received: 4
10 years 4 months ago #102457
by dweisser
Replied by dweisser on topic Modify Image Attribute based on List Selection
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?
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 topic has been locked.