Hide next button till click / Click validation?

Question

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');
});

w.patrick.gale · Accepted Answer

@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');        });

Jonathan · Answer

@"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 :)

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded