Decision Wheel

The wheel is drawn on a canvas with one equal segment per option. Pressing Spin picks a landing angle first, then animates for about four seconds towards it, and reads off whichever segment sits under the pointer when it stops. The animation is decoration; the outcome was decided before the wheel moved.

Decision Wheel — Spin a Wheel to Pick One Option From a ListBuildFigure

The spin does not decide anything

When you press Spin, the code draws one uniform value over a full turn and adds a fixed six whole rotations in front of it, purely so the wheel has something to do for four seconds. The easing curve then walks the wheel to that final angle and the segment under the pointer is read off. Because the segments are all the same width and the landing angle is uniform over the circle, each option comes out with probability exactly one over the number of options.

Nothing about the visible motion feeds back into the result. You cannot influence it by pressing at a particular moment, and stopping the tab mid-spin does not change what was already chosen. The draw itself comes from crypto.getRandomValues() where the browser has it; the Source line under the wheel says which generator was used.

Removal mode and running orders

Tick the removal box and each winner leaves the wheel after it is drawn. Spin repeatedly and you get a complete random ordering of your list, recorded underneath as you go. This is how to set a presentation order, a chore rotation, or a gift-exchange sequence in front of a room, since each result is visible as it happens instead of arriving as a finished list. When the last option comes out the button disables itself.

With removal off, every spin draws from the full wheel again, so the same option can win twice running. That is the mode for repeated independent choices, such as what to eat on separate days.

Weighting, and why it is not a field here

All segments on this wheel are equal, and repeated lines are removed before the wheel is built rather than being drawn twice, because two identical wedges are indistinguishable on screen and make the odds harder to read rather than easier. If you need one option to be twice as likely, the random picker takes weights written as name*2 and prints the resulting percentage for each item. The wheel is for the case where the whole point is that the options are equal and everyone can see that they are.

Twenty segments and why the cap is there

The limit is twenty options. Past that each wedge is under eighteen degrees, labels overlap, and the wheel stops doing the one thing it is better at than a list, which is making the odds visible at a glance. Long lists belong in the random picker, and splitting people into groups belongs in the team divider. Labels longer than nine characters are shortened on the wheel face itself, though the full text is what appears in the result and the history.

What a spin proves

To the people in the room watching the same screen, a spin is reasonably convincing: they saw the options go in and they saw where it stopped. To anyone who was not there it proves nothing, because a page can be spun as many times as the operator likes and only the agreeable result shared. Keep that distinction in mind when the wheel is deciding something with a cost attached. For those, a physical draw with witnesses, or a seed published before the draw, is the version that survives someone asking how they can be sure.

Questions people ask

Can I make one option more likely by entering it twice?

No. Repeated lines are removed before the wheel is drawn, and the result tells you how many were dropped. Use the random picker with a weight instead.

Does spinning faster or holding the button change anything?

No. The landing angle is drawn once when you press, before any animation runs. Duration and easing are fixed.

What happens when the wheel empties in removal mode?

The button disables and the canvas says every option has been drawn. The history stays on screen so you can copy the ordering before rebuilding the wheel.

Related