Solved
Hide next button till click / Click validation?
Hey everyone,
I am having some trouble with some respondents on my survey just clicking through the survey. The idea behind my study is that people have to click on a dice to make it stop rolling and then they have to remember the number that appeared. As for now I have coded that a gif of a rolling dice is played until the participants click on it. When clicked, the gif disappears and a photo of a dice appears. In one block I have 6 questions for each possible dice outcome, of which 1 is randomly shown to the participants, + a timer. I would like to hide the next button until the gif is clicked. I have some code that seems to do the trick but is does not always work, which confuses me. Is it possible the code conflicts with the timer? Does anyone have a solution for this?
Even better would be some custom validation that only makes the next button clickable after the gif of the rolling dice has ben clicked, but javascript isn't my forte.
Thanks in advance!
A simplified example can be found here = https://nlpsych.eu.qualtrics.com/jfe/form/SV_3gd7pDzWZSNhL49
This is the code I have at the moment.
Qualtrics.SurveyEngine.addOnReady(function()
{
function hideEl(element) {
if($(element)) $(element).hide();
}
hideEl.defer('NextButton');
var gif = document.getElementById("gif");
var dice = document.getElementById("dice");
console.log("ready");
gif.addEventListener('click', function(){
console.log("click detected");
gif.style.display = "none";
console.log("rolling dice hidden");
dice.style.display = "block";
console.log("result shown");
function showEl(element) {
if($(element)) $(element).show();
}
showEl.defer('NextButton');
});
Best answer by w.patrick.gale
@Jonathan The easiest way to work with the NextButton is to do something like this:
// create a variable (objNB) to control the next button
var objNB = jQuery("input[id='NextButton']");
objNB.prop( "disabled", true ); // will simply disable the button
objNB.hide(); // use if you wish to hide the button
objNB.show(); // use if you wish to show the button again
// the following will unbind all click events (which you probably do not want to do in most cases but could be useful)
objNB.unbind('click').click(function(event) {
alert('unbound');
});
+13@Jonathan The easiest way to work with the NextButton is to do something like this:
// create a variable (objNB) to control the next button
var objNB = jQuery("input[id='NextButton']");
objNB.prop( "disabled", true ); // will simply disable the button
objNB.hide(); // use if you wish to hide the button
objNB.show(); // use if you wish to show the button again
// the following will unbind all click events (which you probably do not want to do in most cases but could be useful)
objNB.unbind('click').click(function(event) {
alert('unbound');
});
@"w.patrick.gale" Thank you very much for your reply. This simplifies my code quite a bit and works well when I view the block, however when I try to preview the whole survey the next button still shows up sometimes when I try, but not everytime. I would aprreciate your help very much if you happen to know how this is possible, but already thankful for your previous help :)
+13@Jonathan When checking your console.log is the hide or show functions being fired when you expect them to? What does your current code look like?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.