I am currently assisting with a study in which participants play a series of betting games. They click a button (done using HTML code) to spin a wheel and then they see a gif of a spinning wheel that either stops on white or black as the outcome. This process takes place a number of times (7). The issue is that after the first time this happens, the remaining gifs don't working properly or tend to just be like static images and I was wondering if you could help me figure out why this is happening.



The process is as follows:

Participants see a question in which they are prompted to click a button to spin a wheel

HTML Code: <div id="container"><label for="dice_button">Click button to spin wheel </label><button id="spin_button">Click Here</button></div>



<div id="wheel_container"> </div>



The question also contains a javascript code that randomizes the outcome and then it autoadvances after a 0.1 second delay to the next question.

Next there are two questions for each of the two types of gifs. Using display logic, if the outcome is 0 then the question with the gif that lands on white is shown and if the outcome is 1 then the question with the gif that lands on black is shown. I don't think that there is an issue with the code mainly because the gifs have been uploaded to separate questions and so I'm not sure why this is happening. Please let me know if you have any ideas for how I can resolve this issue.