Add "Skip" button to image-button-response

[kburkin]

I'm setting up an experiment where participants will select an odd one out from among three images. I've used the image-button-response plugin to create my trials, changing the buttons to display as images, and leaving "stimulus" blank. (Subset of my code below.)

Because this experiment will be run with children, I'm looking to add a "Skip" or "I don't know" button to the trials. I was thinking I could modify the "image-button-reponse" plugin to include clickable navigation options like the ones in the "instructions" plugin (specifically the Next button), but I'm not very familiar with editing plugins so I'm a little lost.

Can anyone offer any assistance or alternatives?

        var test = {
            type: "image-button-response",
            stimulus: jsPsych.timelineVariable('stimulus'),
            choices: jsPsych.timelineVariable('choices'),
            button_html: jsPsych.timelineVariable('button_html'),
            prompt: "<p>Click the image that doesn't match.</p>",
            data: jsPsych.timelineVariable('data'),
            /* Run check_choice_correct function to check whether response matched 
            expected response and print accuracy in trial data. */
            on_finish: check_choice_correct
        }

	var test_procedure = {
            timeline: [test],
            timeline_variables: test_stimuli,
            randomize_order: true,
	}		
        timeline.push(test_procedure);

var test_stimuli = [
    {
        stimulus: '',
        choices: [
            /* Width of each image is set to 30% of the screen size. */
            '<img src=img/bodypart/low/couch_11s.jpg style="width:30vw;"></img>',
            '<img src=img/bodypart/high/boy_03s.jpg style="width:30vw;"></img>',
            '<img src=img/bodypart/high/pajamas_01b.jpg style="width:30vw;"></img>'
        ],
        button_html: '%choice%',
        data: {
            test_part: 'test',
            condition: 'C1',
            cond_part: 'Pt1',
            deciding_category: 'bodypart-related',
            confounding_category: 'sitting',
            odd_one_out: 'couch',
            expected_choice: '0',
        },
    },

[becky-gilbert]

Sure, you can do it like this:

1. Rename your plugin file (to avoid overwriting or getting it confused with the original one). In your modified version, change the plugin name to the new name in these places at the top of the file:
   -jsPsych.plugins["image-button-response"]
   -jsPsych.pluginAPI.registerPreload('image-button-response'
   -plugin.info = { name: 'image-button-response'
2. In the plugin file, after the response buttons have been added to html string, and before the page is updated with display_element.innerHTML = html, add the HTML for your skip button. In the code below, I used the HTML for the button choices as a template for making this new button, and just replaced things like the <div> ID, data-choice value, and text that goes inside the <button> HTML (instead of %choice%). I also changed display: inline-block to display: block. You could add/change the CSS here if you don't like the way the skip button looks.

// add the skip button HTML
html += '<div class="jspsych-image-button-response-button" style="display: block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="skip-button" data-choice="skip"><button class="jspsych-btn">Skip</button></div>';

3. After the 'click' event listener is added to all of the response buttons (in these lines), you also need to add the same 'click' event listener to the skip button:

// add click event listener to skip button
display_element.querySelector('#skip-button').addEventListener('click', function(e){
  var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
  after_response(choice);
});

Now when the skip button is clicked, the trial data should show that button_pressed is whatever value you use for data-choice in your skip button <div>, e.g.:

"button_pressed": "skip"

Also don't forget to checkout the documentation and Josh's video tutorial about creating new plugins. I hope this helps!

[kburkin]

Thank you! This is very helpful, I should be able to handle this! I'll let you know if I have any problems, and I'll be sure to have a look at the links you included!