Random incorrect responses

[jgerard417]

I am having an issue with the incorrect response being recorded in the html-button-response plugin. It's using button_pressed rather than response since I haven't had a chance to update the study for jsPsych 7, but I'd like to figure out first whether this is a compatibility issue or an issue with my code.

Specifically, the response will occasionally get recorded as the response for the next trial, but the issue is sporadic and only happens 10-20% of the time.

Relevant code is below, and I'm using a slightly modified plugin based on the discussion here:

var counter = 3; // has been set to 3 after 3 pictures were shown previously; task is now to tap those 3 pictures backwards
var click = 0; // counts down from the number of pictures (in this case 3) to 0
var pictures = ['pic1','pic2','pic3']; // the 3 pictures that were shown previously;
var buttons = ['pic1', 'pic2', 'pic3', 'pic4', 'pic5', 'pic6', 'pic7', 'pic8', 'pic9'];

var test_trial = {
            type: 'html-button-response-delay',
            stimulus: function(){
	        var html = 'Now, tap the pictures backwards';
                if(click==0){ // if it's the first iteration:
                	click = counter; //reset click variable from 0 to the number of pictures
               		aud.src='media/tap_pictures.mp3'; //play instructions to tap pictures backwards
                	aud.play();
                }
	        return html;
            },
            choices: pics,
            button_html: function(){
                var html = '<button id = "training" onclick = "color(this)"><img id = "%choice%" src="media/grid_images/%choice%-old.png" >   </button>'; // button includes function to change image and play sound on click (from https://github.com/jspsych/jsPsych/discussions/1931#discussioncomment-939566)
                return html;
            },
            prompt: '',
            on_finish: function(data,html){
    		        jsPsych.pluginAPI.setTimeout(function() {
    			        data.picture = pictures[click-1]; // correct picture is last one in pictures array
    			        data.button_pressed = buttons[data.button_pressed]; // button pressed (for easier coding)
    			        click = click - 1; // set click variable to one less
    		        	data.condition = "test";
	    		        if(data.button_pressed==data.picture){ // check if button pressed was correct picture
    			        	data.correct = 1;
    			        }else{
    			        	data.correct = 0;
    			        }
    		        	if(click==0){  //if setting click variable to one less makes it 0:
	    	               		counter=0; //reset the counter to 0, and 
	    		               pictures = [];  //wipe the picture array to show new pictures
    			        }
    			}, 200); 
                }
    					    
        };
        
	function playAudio(el){  //function to play audio
		    aud=document.createElement('audio');
        	    aud.src=el;
            	    aud.muted=false;
	            aud.play();
	}
		
        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");  // change the button from black and white to color
            
	            aud.pause(); // pause the instructions (allows for a selection before the instructions finish)
		    playAudio('media/'+img_id+'.mp3'); // play picture name
          };