change button picture onclick

[jgerard417]

Hello,

I have an arrary of 9 pictures, and I would like to have the picture that the user clicks on change to a different picture.

With the following code, there is no error, but also no change in the picture. From an alert() call in the color() function I can also see that it is not accessing the correct %choice% picture, although the src element does appear to be changed.

Is this possible in the experiment code, or does it require a change to the plugin itself?

var grid_buttons = {
	type: 'html-button-response',
	stimulus: '',
	choices: ['dog','boat','car','chair','bird','plant','book','hand','cup'],
	button_html: function(){
		
		var html = '<button onclick = "color()"><img id = "change" src="pictures/%choice%-old.png"> </button>';
		
		return html;
		
	},
	prompt: 'Please click on a picture'
}
        
function color(){
	document.getElementById('change').src = document.getElementById('change').src.replace("old","new");
};

[becky-gilbert]

Hmm, your code is working fine for me! I created 4 images to test this: 'dog-old.gif', 'dog-new.gif', 'boat-old.gif', and 'boat-new.gif'. I also set response_ends_trial to false and trial_duration to 5 seconds, so that the trial doesn't end as soon as a button is clicked. Finally, I took the button_html string out of a function (it does work the same way inside of a function, it just doesn't need to be inside of one).

So the code below is working for me. If I click on one of the buttons before the 5 second trial duration is up, then I see the button image change.

var grid_buttons = {
    type: 'html-button-response',
    stimulus: '',
    choices: ['dog','boat'],
    button_html: '<button onclick = "color()"><img id="change" src="%choice%-old.gif"></button>',
    prompt: 'Please click on a picture',
    response_ends_trial: false,
    trial_duration: 5000
  }
        
  function color(){
    document.getElementById('change').src = document.getElementById('change').src.replace("old","new");
  };
  
  jsPsych.init({
    timeline: [grid_buttons],
    on_finish: function(){jsPsych.data.displayData();}
  });

[jgerard417]

Thanks so much!

Changing response_ends_trial to false and the trial duration to 5000 does make it so that the picture changes, but it's always the first one that changes, not the one that I clicked on. Have you got it to be the one that you clicked on?

Ideally I was hoping to have it be timed based on when the response was made. Is it possible then to delay the end of the trial a bit after the response is made?

[becky-gilbert]

Ah, sorry you're right, it was only changing the first image. That's because all of your images have the same ID ("change"), so when the color function looks for the element with the ID "change" it always gets the first one on the page.

To fix this, you can use the %choice% string to set the image IDs, so that they're all different. Then, when your color function is called via the "onclick" attribute, you'll want to pass the element that was clicked into the function, which you can do using the this keyword. This will allow you to find out which image is inside of the button was clicked. Then, you can use the image's ID to find it on the page and replace its source file. Altogether it looks like this:

  var grid_buttons = {
    type: 'html-button-response',
    stimulus: '',
    choices: ['dog','boat'],
    button_html: '<button onclick = "color(this)"><img id="%choice%" src="%choice%-old.gif"></button>',
    prompt: 'Please click on a picture',
    response_ends_trial: false,
    trial_duration: 5000
  }
        
  function color(el){  // el is the button element that was clicked
    // get the ID of the image inside the clicked button
    var img_id = el.querySelector('img').id;  
    // use the image's ID to find it on the page, and then change its source
    var img_el = document.getElementById(img_id); 
    img_el.src = img_el.src.replace("old","new");
  };

Does that solution work for you?

[jgerard417]

That does it, yes!

Would it be possible to delay the end of the trial by a constant amount of time so that the picture change appears, (say 500ms) instead of having a constant time for the trial?

[becky-gilbert]

Yep, see #1909

[jgerard417]

Perfect, thank you!
The timout was a bit quick with just editing the plugin, and changing the length in the plugin didn't seem to make a difference, but adding the timeout function to an on_finish element in the html-button-response (as well as editing the plugin) allowed me to edit the trial length:

on_finish: function(){
               jsPsych.pluginAPI.setTimeout(function() {
   		//      end of trial stuff here
   		}, 1000); //extra 1000ms
               }