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