Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Modify Image Attribute based on List Selection

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102400

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102406

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4115
  • Dank erhalten: 760
  • Karma: 346
Hi David,

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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102413

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
It is a drop-down list.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102420

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4115
  • Dank erhalten: 760
  • Karma: 346
Try this:

	$(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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Letzte Änderung: 8 Monate 1 Woche her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102436

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
Works beautifully! Thanks again TPartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102438

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102445

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4115
  • Dank erhalten: 760
  • Karma: 346
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?
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102446

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
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.
Letzte Änderung: 8 Monate 1 Woche her von dweisser. Begründung: More information
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102447

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
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?
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Modify Image Attribute based on List Selection 8 Monate 1 Woche her #102448

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Bronze Donor
  • Beiträge: 203
  • Dank erhalten: 5
  • Karma: 5
It turns out that the hidden question solution does not work. Now I am officially stuck.
Let me clear cache again...:-)
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.143 Sekunden
Donation Image