Колесо фортуны
Впишите варианты, крутите колесо
Каждая строка в поле становится сектором. Нажмите «крутить» — колесо завертится и замедлится, и сектор под указателем побеждает.
Ничего не загружается на сервер. Ваши варианты живут во вкладке браузера и исчезают при её закрытии.
Победитель выбирается до того, как колесо начинает вращаться
Это важнее, чем кажется на первый взгляд.
Очевидный способ сделать колесо — придать ему случайный толчок, дать трению замедлить вращение и прочитать, что окажется под указателем. Такой подход делает результат зависимым от округления финального угла и от того, сколько кадров анимации успело отрисовать ваше устройство — медленный телефон и быстрый десктоп были бы неодинаково честны.
Это колесо делает наоборот. Оно сначала выбирает победителя через
crypto.getRandomValues(), затем вычисляет точный угол поворота, который
подведёт этот сектор под указатель, и анимирует движение к нему. Вращение —
это оформление; результат уже определён и доказуемо равномерен.
Поэтому у каждого сектора ровно одинаковый шанс, независимо от того, сколько секторов, насколько длинные у них подписи и на каком устройстве вы находитесь.
Убирать победителя или крутить полное колесо снова
При включённой опции убирать победителя каждое вращение снимает выигравший вариант с колеса. Крутите несколько раз подряд — и получаете порядок: первое место, второе, третье. Хорошо подходит для розыгрыша нескольких призов или для определения порядка выступлений перед аудиторией.
Если опция выключена, колесо остаётся целым, и один и тот же вариант может победить дважды — именно это нужно для вопроса «где сегодня поужинаем».
Взвешивание колеса через повтор варианта
Колесо даёт каждому сектору одинаковый шанс, поэтому способ выделить вариант — дать ему больше секторов. Указать вариант дважды — значит удвоить его долю.
| Варианты | Секторов | Шанс для «Пицца» |
|---|---|---|
| Пицца, Суши, Тако | 3 | 33% |
| Пицца, Пицца, Суши, Тако | 4 | 50% |
| Пицца ×3, Суши, Тако | 5 | 60% |
Повторяющиеся подписи появляются на колесе больше одного раза, и это честно — любой наблюдатель может сосчитать секторы и увидеть взвешивание сам, а не верить вам на слово. Именно в этой наглядности смысл колеса; скрытый вес свёл бы её на нет.
Для более тонких весов, которые неудобно выражать секторами, генератор
случайных чисел принимает явные пары число:вес.
Сколько секторов остаются читаемыми
По мере роста числа вариантов секторы сужаются, а подписи идут вдоль радиуса, так что практический предел заметно ниже любого технического.
- До 12 — комфортно, подписи читаются с одного взгляда
- От 12 до 20 — читаемо, но длинные названия начинают тесниться
- От 20 до 30 — пригодно только для коротких подписей
- Больше 30 — колесо всё ещё работает и розыгрыш всё ещё честен, но прочитать подписи во время вращения уже никто не сможет
Подписи длиннее 18 символов обрезаются многоточием, чтобы уместиться в свой сектор. Если ваш список настолько длинный, что колесо становится нечитаемым, ту же задачу без театральности решает выбор имени.
Доступность и анимация
Колесо учитывает prefers-reduced-motion. Если в системе включён запрос на
уменьшение движения, анимация вращения пропускается и победитель появляется
сразу. Результат одинаков в обоих случаях, потому что розыгрыш никогда не
зависел от анимации.
Победитель также объявляется в живой ARIA-области, так что программы чтения с экрана озвучивают его без необходимости искать результат вручную.
Где применяется колесо выбора
- Принятие решений — обед, фильм, чья очередь по хозяйству
- Прямые эфиры и уроки — вращение само по себе интересно смотреть
- Розыгрыши — наглядный розыгрыш кажется зрителям честнее, чем просто появившееся число
- Разминка внимания — кто отвечает на следующий вопрос