Delay the appearance of a button

[kburkin]

Hi Team,

I'm running an odd one out image task using the image-button-response plugin as a base. I present three images as the buttons for the plugin, and with help on this forum, I was able to add an "I don't know" or skip button at the bottom of the screen (Thanks, Becky!). Discussion thread with code linked below:
#1294

Does anyone know of a way I can put a delay on the appearance of the button? Ideally, I'd like to have the pictures appear onscreen (fully clickable) as they normally would when the trial starts. Then the participant can think them over and make their choice, but if they do not click a picture for e.g. a minute, the "I don't know" button appears and they can end the trial either by clicking on a picture or by clicking the "I don't know" button.

Thanks for any help you can offer,
-Kelly

[becky-gilbert]

Hi Kelly, I think what I would do is set the "I don't know" button's visibility to "hidden" to start with, like this:

// 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" style="visibility:hidden;">Skip</button></div>';

And then you can use the jsPsych.pluginAPI.setTimeout function to get the button element (using the ID of the div that it's inside of) and change its visibilty after a certain duration, like this:

jsPsych.pluginAPI.setTimeout(function(){
    // get the skip-button div, then get all of the button elements inside of it, then select the first (only) one
    document.getElementById('skip-button').getElementsByTagName('button')[0].style.visibility = "visible";
}, 1000);

And don't forget clear all timeouts at the end of the trial:

jsPsych.pluginAPI.clearAllTimeouts();

Does that work for you?

[kburkin]

Yes, that works like a charm! Thank you so much, I appreciate all your help!
-Kelly