Button disappears on click

[stecion]

Hi!

I am trying to create a reaction time task using the html-button-response plugin. I have a series of image buttons, that appear on screen at the same time and I am trying to make it so that each button disappears from the screen when clicked and when all buttons are clicked and disappear then the trial ends. So far I only managed to make all of them disappear at the same time. Any ideas on how I can make this work?

I'm adding here the code where I have the buttons:
var trial = { type: "html-button-response", stimulus: "", choices: ['black-crop.png','blue-crop.png','green-crop.png','purple-crop.png','red-crop.png','white-crop.png','yellow-crop.png'], button_html: '<button class="jspsych-btn"><img src="%choice%"></button>', prompt: "" }

Here is the part that makes all buttons disappear, but I want only the clicked button to disappear and the other ones to remain:
var btns = document.querySelectorAll('.jspsych-html-button-response-button button'); for(var i=0; i<btns.length; i++){ btns[i].setAttribute('disabled', 'disabled'); }

I would appreciate any help or ideas!
Thank you!!!

[becky-gilbert]

Hi @afine1927, my approach to this would be to do two things each time a button is clicked (i.e. inside the click event handler):

1. disable/hide the button that was just clicked
2. check if all buttons are the page are disabled/hidden, and if so, then end the trial.

The second bit of code you provided shows how to grab all of the button elements and loop over them. So to do the second step above, then inside the loop you'd just be checking if any of the buttons are disabled/hidden - something like this:

// this goes inside your the click function for your buttons
// first disable/hide the button that was just clicked, then:
var all_clicked = true; 
var btns = document.querySelectorAll('.jspsych-html-button-response-button button'); 
for(var i=0; i<btns.length; i++){ 
  if (btns[i].getAttribute('disabled') == false) {   // I'm not sure what this returns when the button isn't disabled... might need to change "false" to something else
    all_clicked = false; // if any one button is still active, then we don't want to end the trial yet
  } 
}
if (all_clicked) { // if all buttons are disabled/clicked, then end the trial 
  end_trial();
}

And if you want to hide the buttons rather than disable them, you would set their 'visibility' attribute to 'hidden'.
I hope this helps. Feel free to post more of your code here if you need further guidance.

[stecion]

Hi @becky-gilbert!

Thank you for the quick response!

Unfortunately, it seems like even with the code you provided, all buttons are disabled when one is pressed. Not sure what I am doing wrong here.

The code is in the after_response(choice) function of the html-button-response plugin. I don't know if it should be somewhere else.

[becky-gilbert]

Do you mind sharing your code please?

[stecion]

Sure! Here is what I have in my js script:

jsPsych.plugins["html-button-response"] = (function() {

  var plugin = {};

  plugin.info = {
    name: 'html-button-response',
    description: '',
    parameters: {
      stimulus: {
        type: jsPsych.plugins.parameterType.HTML_STRING,
        pretty_name: 'Stimulus',
        default: undefined,
        description: 'The HTML string to be displayed'
      },
      choices: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Choices',
        default: undefined,
        array: true,
        description: 'The labels for the buttons.'
      },
      button_html: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Button HTML',
        default: '<button class="jspsych-btn">%choice%</button>',
        array: true,
        description: 'The html of the button. Can create own style.'
      },
      prompt: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Prompt',
        default: null,
        description: 'Any content here will be displayed under the button.'
      },
      stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to hide the stimulus.'
      },
      trial_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Trial duration',
        default: null,
        description: 'How long to show the trial.'
      },
      response_ends_trial: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Response ends trial',
        default: true,
        description: 'If true, then trial will end when user responds.'
      },
    }
  }

  plugin.trial = function(display_element, trial) {

    // display stimulus
    var html = '<div id="jspsych-html-button-response-stimulus">'+trial.stimulus+'</div>';

    //display buttons
    var buttons = [];
    if (Array.isArray(trial.button_html)) {
      if (trial.button_html.length == trial.choices.length) {
        buttons = trial.button_html;
      } else {
        console.error('Error in html-button-response plugin. The length of the button_html array does not equal the length of the choices array');
      }
    } else {
      for (var i = 0; i < trial.choices.length; i++) {
        buttons.push(trial.button_html);
      }
    }
    html += '<div id="jspsych-html-button-response-btngroup">';
    for (var i = 0; i < trial.choices.length; i++) {
      var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
      html += '<div class="jspsych-html-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-html-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
    }
    html += '</div>';

    //show prompt if there is one
    if (trial.prompt !== null) {
      html += trial.prompt;
    }
    display_element.innerHTML = html;

    // start time
    var start_time = performance.now();

    // add event listeners to buttons
    for (var i = 0; i < trial.choices.length; i++) {
      display_element.querySelector('#jspsych-html-button-response-button-' + i).addEventListener('click', function(e){
        var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
        after_response(choice);
      });
    }

    // store response
    var response = {
      rt: [],
      button: []
    };

    // function to handle responses by the subject
    function after_response(choice) {

      // measure rt
      var end_time = performance.now();
      var rt = end_time - start_time;
      //response.button.push(info.button);
      //response.rt.push(info.rt);

      response.button = parseInt(choice);
      response.rt = rt;

      // after a valid response, the stimulus will have the CSS class 'responded'
      // which can be used to provide visual feedback that a response was recorded
      display_element.querySelector('#jspsych-html-button-response-stimulus').className += ' responded';

      var all_clicked = true; 
      var btns = document.querySelectorAll('.jspsych-html-button-response-button button'); 
      for(var i=0; i<btns.length; i++){ 
        if (btns[i].getAttribute('disabled') == false) {
            all_clicked = false;
            console.log("all disabled");
        } 
      }
        if (all_clicked) { // if all buttons are disabled/clicked, then end the trial 
            end_trial();
            console.log("trial ended");
        }
     };       

    // function to end trial when it is time
    function end_trial() {

      // kill any remaining setTimeout handlers
      jsPsych.pluginAPI.clearAllTimeouts();

      // gather the data to store for the trial
      var trial_data = {
        "rt": JSON.stringify(response.rt),
        "stimulus": trial.stimulus,
        "button_pressed": JSON.stringify(response.button)
      };
      var trial_data = {
      }; 

      // clear the display
      display_element.innerHTML = '';

      // move on to the next trial
      jsPsych.finishTrial(trial_data);
    };

    // hide image if timing is set
    if (trial.stimulus_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        display_element.querySelector('#jspsych-html-button-response-stimulus').style.visibility = 'hidden';
      }, trial.stimulus_duration);
    }

    // end trial if time limit is set
    if (trial.trial_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        end_trial();
      }, trial.trial_duration);
    }
  };
  return plugin;
})();

This is what I have in my html script:

<!DOCTYPE html>
<html>

<head>  
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <script src="../plugins/jspsych-html-button-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css">
  <style>
  .stimulus { font-size: 32px; }
  </style>
</head>

<script>

 var trial = {
     timeline:[
    {type: "html-button-response",
    stimulus:jsPsych.timelineVariable('button_html'),
    choices: ['black-crop.png','blue-crop.png','green-crop.png','purple-crop.png','red-crop.png','white-crop.png','yellow-crop.png'],
    button_html: '<button class="jspsych-btn"><img src="%choice%"></button>',
    prompt: "",}
        ],
    timeline_variables: [
        {button_html: ['<button class="jspsych-btn" style = "position:absolute; left:284.5px; top: 270px">%choice%</button>'],
        stim: ''},     
    ],
  }

  jsPsych.init({
    timeline: [trial],
    preload_images: ['black-crop.png','blue-crop.png','green-crop.png','purple-crop.png','red-crop.png','white-crop.png','yellow-crop.png']
  });
</script>

</html>

[becky-gilbert]

Hi @stecion, sorry for the slow reply. I thought I'd post a working version, in case it's still helpful. One reason that your code wasn't working is that the buttons weren't disabled after being clicked. Another reason is that the if statement that checks whether each button is disabled wasn't working (sorry - my fault!). I got this to work with the following changes:

First, in the click event listener, add a line that disables the button that was just clicked. Note that the click event listener is actually attached to the div that surrounds the button element, so we need to first select the button, and then disable it.

// add event listeners to buttons
for (var i = 0; i < trial.choices.length; i++) {
  display_element.querySelector('#jspsych-html-button-response-button-' + i).addEventListener('click', function(e){
    e.currentTarget.getElementsByTagName('button')[0].disabled = true; // disable the button that was just clicked
    var choice = e.currentTarget.getAttribute('data-choice'); 
    after_response(choice);
  });
}

Then, in the after_response function, check whether all buttons are disabled, and if so then end the trial. The getAttribute function wasn't working in the way that I thought it would. So instead we can check the disabled property for each button element, which will return true if disabled and false if not.

var all_clicked = true; 
var btns = document.querySelectorAll('.jspsych-html-button-response-button button'); 
for(var i=0; i<btns.length; i++){ 
  if (!btns[i].disabled) {
    all_clicked = false;
    console.log("not all disabled");
  } 
}
if (all_clicked) { // if all buttons are disabled/clicked, then end the trial 
    end_trial();
    console.log("trial ended");
}

I hope this helps!