Randomized Prize Wheel

Some time ago I had an idea for a course that involved a spinning wheel with 14 options, to create some randomness in the path of the learner’s journey. I quickly changed my mind about that design but I got a little obsessed with figuring out how to get a spinning wheel to randomly spin, while avoiding landing on the same number more than once.

You can see the result here.

Please don’t judge my rudimentary graphics, my focus was on figuring out the interaction. I built this originally about a year ago so had to refresh myself in explaining it, hopefully I’ve got it right!

•  The ‘Spin’ button triggers javascript that generates a random number, which is then assigned to the number variable ‘RandNum’. There is then a trigger to ‘jump to Base’ to refresh the base layer to determine what happens next.
• A series of triggers will send the user to the specific numbered layer, but only if it hasn’t been visited before. When you do visit a layer, a T/F variable for that number is switched to true, which takes it ‘out of play’ for future rolls.
• If the number randomly generated on the base layer has already been spun before and is therefore ‘out of play’, the player is automatically sent to a layer called ‘NumAdj’ to automatically spin again. This layer will run the same javascript as the base layer to generate an adjusted number, which is assigned to the number variable ‘NumAdj’. RandNum is then assigned the value of the ‘NumAdj’ and the learner is sent back to the base layer.
• On the base layer there is a series of variables that test whether the existing or adjusted RandNum result is ‘in play’. If it is, the player is sent to that layer number, the T/F variable for that layer is changed to true, and the player can click the spin button on the base layer to play again. If the RandNum is not ‘in play’, the player is sent back to NumAdj automatically to spin again.

The variable references and Layer Markers on the main screen demonstrate what is happening. You can see that the jump to the layer is immediate, because the spin animation happens on the layer. You might notice that the ‘RandNum’ and ‘NumAdj’ are always the same because the triggers occur very quickly. I did find on my older dying computer than you could see ‘NumAdj’ flicking about while it kept generating new numbers looking for a valid one. Particularly as most numbers were out of play it could take a while – a few seconds - to tick over to find an unused number…after all it’s random, which means you can roll the same numbers over and over again. I’m not seeing that delay at all now so I guess that was simply my overworked older computer.

The spin effect is simply on the numbered layers, a 2.75 second spin animation. It would be super cool to actually have numbers on the different pie wedges and have it land on the appropriate wedge. I tried that initially, so that the wheel picture on the layer would land at the correct position, but it looked wrong because it jumped suddenly when you got to the layer, so I stopped trying to solve that visual puzzle.

Note that I would anticipate the next step of this interaction would be that on each spin layer (after a short delay so the user sees the result) you would jump over to a slide that would reveal the ‘prize’ (chapter, activity, points, quiz question, whatever) related to that particular spin. When that is complete the learner would be sent back to the spinning wheel slide to spin again.
I hope you find this helpful and would be happy to hear any suggestions for refinement, and will try to answer any questions.