I want to display an image for a set amount of time (3 seconds), then hide it. After that, if the user hits the space bar, advance to the next question.
The space bar should not work until after the 3 seconds is up.
Thank you!
This is the code I have. It works well, but the space bar will work anytime to advance to the next question. I only want that to work after the 3 seconds has elapsed. Ideas?
Qualtrics.SurveyEngine.addOnReady(function()
{
this.hideNextButton();
var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },3000);
});
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;
document.onkeydown = function(event) {
console.log('keydown',event);
if (event.which == 32) {
event.preventDefault();
jQuery('#NextButton').click();
}
}
});
Hi mhv,
Try moving your spacebar function to only bind after 3 seconds. I've chunked it together with your image hiding code (you may need to move everything to onReady) but you could set it up separately if you wanted.
this.hideNextButton();
var qid = this.questionId;
var img = jQuery("#" + this.questionId + " img");
//wait 3 seconds, then hide image and prepare spacebar check
setTimeout(function() {
myFunction();
}, 3000);
function myFunction() {
//hide the image
img.hide();
//check if spacebar pressed, if yes then proceed to next question
document.onkeydown = function(event) {
console.log('keydown', event);
if (event.which == 32) {
event.preventDefault();
jQuery('#NextButton').click();
}
}
}
Good luck!
EDIT: you will probably want to modify this so that event.preventDefault() fires if the spacebar is pressed before 3 seconds as well, so that the page doesn't scroll down.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.