After landing on a segment, remove ability to land on it again (by spin level)

[chris-hammersley]

Hi Doug!

Thank you so much for building this and releasing it into the wild! I've gone through most of the tutorials and have adapted the winwheel into a faux-chat roulette video selector using images in the spin wheel. Landing on an image pops the alert which then shows 2 hidden divs that play a simulated video chat.

What I'm trying to do now is make sure a viewer doesn't land on the same combination twice - I want them to cycle through all the video stories. I have 7 "people" and 3 spin levels, so 21 combinations of 42 total videos.

Do you have some suggestions for 'turning off' an image segment after it's been used so that the wheel doesn't land on it again? I want to do this by spin level.

Here's a look at my current wheel. As an example, if a viewer chooses the Truth or Dare spin level and the selector lands on Ryan, when they spin again, I don't want Ryan to be available to land on again. If on the next spin they land on Alan, I want Ryan + Alan to no longer be available for the following spins, until all 7 people are finished and they viewer moves on the the next spin level (or they can shift back and forth but I want to maintain the exclusions while they are in current session).

Maybe I need to drop a cookie to keep track? I'm just not sure how to go about this in an efficient way, so any help or insight is greatly appreciated!

Thank you,
Chris

[zarocknz]

Hi Chris,

Thanks for getting in touch and including a screenshot as well as some details about your project, it really helps to understand what you are trying to create - looks interesting by the way!

My first thought would be to do something with SessionStorage or LocalStorage which is an easy way to store information in the user's browser and read it back. I found this tutorial that seems like a good intro https://alligator.io/js/introduction-localstorage-sessionstorage/

Using this you could store a couple of things: the spin level, and also an array of the segment information for each of the levels. In the tutorial above see the section called "Storing Json Objects" to see how you can store an array of information like the segments.

I imagine the logic of the code could work something like this...

1. User loads the page
2. Check if local storage exists
3. IF yes then get the spin level from local storage
4. Get the segment information for that level
5. Create the Winwheel using the normal config but passing the segments information retrieved from local storage (remember to JSON.parse it to turn it back in to a json object first)
6. User spins the wheel (you might want to pre-determine the result, more on this later)
7. Use the getIndicatedSegmentNumber to know what segment the user landed on
8. Update the segments information in the local storage to swap to the grayed image and also perhaps set a flag or something to indicate the segment has already been landed on.
9. Check if all segments have been visited for this level, and if so increment the spin level and update the local storage

If at step 2 the local storage does not exist then add the spin level and segment information in its initial state to the local storage.

Now there is still the issue of preventing the user from landing on a segment already visited, I would probably work out before the spinning what segment the user will stop on by checking which segments had not already been visited and randomly (or not so randomly) picking one.

You may have already seen this when looking at the Winwheel.js documentation but http://dougtesting.net/winwheel/docs/tut14_setting_the_prize shows how to specify what segment the user will land on - in particular note the let stopAt = theWheel.getRandomForSegment(segmentNumber); in one of the examples.

Hope this helps.

Cheers,
DouG.

[chris-hammersley]

Thanks, DouG! Really appreciate the insights. I'll dive in over the next few weeks and see what I come up with. Will show you an update when it gets further along!