Колесо фортуни
Впишіть варіанти, крутіть колесо
Кожен рядок у полі стає сектором. Натисніть крутити — колесо обертається, сповільнюється, і сектор під стрілкою перемагає.
Нічого не завантажується на сервер. Ваші записи живуть у вкладці браузера й зникають, щойно ви її закриєте.
Переможця обрано ще до того, як колесо рушить
Це важить більше, ніж здається на перший погляд.
Очевидний спосіб зробити колесо — дати йому випадковий поштовх, дозволити тертю сповільнити обертання й прочитати, що опинилося під стрілкою. Такий підхід робить результат залежним від округлення кінцевого кута та від того, скільки кадрів анімації встиг намалювати ваш пристрій — повільний телефон і швидкий комп’ютер не були б однаково чесними.
Це колесо робить навпаки. Воно спершу витягує переможця з
crypto.getRandomValues(), потім обчислює точний кут повороту, що поставить
цей сектор під стрілку, і анімує до нього. Обертання — це презентація;
результат уже вирішено, і він доведено рівномірний.
Тож кожен сектор має рівно однаковий шанс, незалежно від кількості секторів, довжини їхніх підписів чи пристрою, яким ви користуєтеся.
Прибрати переможця, або крутити далі повне колесо
Коли ввімкнено прибирати переможця, кожне обертання знімає переможний запис із колеса. Крутіть кілька разів — і отримаєте порядок: перший, другий, третій. Добре для розіграшу кількох призів або для визначення порядку виступів перед аудиторією.
Коли опцію вимкнено, колесо лишається повним, і той самий варіант може перемогти двічі — саме те, що потрібно для “де ми сьогодні повечеряємо”.
Зважування колеса повторенням запису
Колесо дає кожному сектору однаковий шанс, тож спосіб надати варіанту перевагу — це дати йому більше секторів. Внести його двічі — подвоїти його частку.
| Записи | Секторів | Шанс для піци |
|---|---|---|
| Піца, Суші, Тако | 3 | 33% |
| Піца, Піца, Суші, Тако | 4 | 50% |
| Піца ×3, Суші, Тако | 5 | 60% |
Дубльовані підписи з’являються на колесі кілька разів, і це чесно — будь-хто зі спостерігачів може порахувати сектори й побачити зважування самостійно, а не повірити вам на слово. Ця видимість і є сенсом колеса; прихована вага знищила б його.
Для тонкого налаштування ваг, що не вкладаються акуратно в сектори,
генератор випадкових чисел приймає явні пари число:вага.
Скільки секторів лишаються читабельними
Сектори зменшуються з ростом кількості записів, а підписи розташовані вздовж радіуса, тож є практична стеля, набагато нижча за будь-яку технічну.
- До 12 — комфортно, підписи читаються з першого погляду
- 12–20 — читабельно, але довгі назви починають тіснитися
- 20–30 — придатно лише для коротких підписів
- Понад 30 — колесо все ще працює, і розіграш усе ще чесний, але поки воно крутиться, ніхто нічого не прочитає
Підписи довші за 18 символів обрізаються багатокрапкою, щоб лишатися в межах сектора. Якщо ваш список настільки довгий, що колесо стає нечитабельним, вибір імені робить те саме без театральності.
Доступність і рух
Колесо враховує prefers-reduced-motion. Якщо ваша система просить
зменшений рух, анімація обертання пропускається, і переможець з’являється
одразу. Результат однаковий в обох випадках, бо розіграш ніколи не залежав
від анімації.
Переможця також оголошено в живій зоні (live region), тож програми читання з екрана озвучують його без потреби шукати вручну.
Де застосовують колесо вибору
- Прийняття рішень — обід, фільм, чия черга по хатніх справах
- Прямі трансляції та класи — обертання і є суттю; за ним стежать
- Розіграші — видимий розіграш здається аудиторії чеснішим, ніж поява числа
- Криголами — хто відповідає на наступне питання