Колесо фортуны — случайный выбор победителя онлайн

Как это работает

1. 1
   Впишите варианты По одному в строке: имена, дела по дому, кафе на обед, суммы призов, «да/нет». Колесо перерисовывается на ходу, а счётчик показывает, сколько получилось секторов.
2. 2
   Задайте цвета (не обязательно) Вставьте в поле цветов несколько hex-кодов вида #0f766e, #b45309 — под фирменный стиль или оформление класса. Оставьте поле пустым, если устраивает палитра из шести цветов по умолчанию.
3. 3
   Крутите Нажмите кнопку или прямо по колесу. Оно вращается около четырёх секунд, замедляется, и победитель останавливается под указателем сверху — под конфетти.
4. 4
   Продолжайте или поделитесь Включите «убирать выпавший вариант», чтобы провести раунды на вылет без повторов, посмотрите историю выпадений или скопируйте ссылку и отправьте то же самое колесо другому человеку.

Часто задаваемые вопросы

Колесо правда случайное или анимация просто подыгрывает?

Победитель определяется первым — через crypto.getRandomValues, криптографический генератор браузера, тот же источник, из которого берут ключи шифрования. И только потом считается угол, на котором колесо должно остановиться. Если делать наоборот и выводить результат из случайной скорости вращения, часть секторов тихо получит преимущество. Вместо обычного остатка от деления используется rejection sampling, поэтому перекоса в сторону первых вариантов тоже нет.

Сколько вариантов можно добавить на колесо?

До 500, но настоящее ограничение — читаемость: после примерно 40 секторов подписи становятся слишком тонкими, шрифт уменьшается, а длинные названия обрезаются многоточием. Для длинных списков удобнее «Случайный выбор имени»: та же честность, только без геометрии.

Может ли один вариант выпасть два раза подряд?

Да, и именно так выглядит честное колесо. При шести вариантах шанс повтора подряд — один к шести, вполне обычное событие, хотя и кажется подтасовкой. Если нужно, чтобы каждый вариант выпал ровно один раз, включите «убирать выпавший вариант с колеса» — победитель будет исчезать после каждого вращения.

Как сделать, чтобы один вариант выпадал чаще?

Повторите строку. Каждая строка — это один равный сектор, поэтому вариант, вписанный трижды, получает три сектора и втрое больший шанс. Удобно для розыгрышей, где участники зарабатывают дополнительные билеты, или для колеса домашних дел, где какое-то дело должно попадаться чаще остальных.

Что лежит в ссылке на колесо?

Сам список вариантов, упакованный в параметр ?w= как текст в base64url. Никакой базы данных и никакого идентификатора колеса нет: при открытии ссылки варианты раскодируются прямо из адресной строки в поле ввода. Обратная сторона — колесо из 200 длинных строк даёт очень длинную ссылку, и некоторые мессенджеры её перенесут или обрежут.

Запомнит ли колесо мои варианты после закрытия вкладки?

Нет. Ничего не пишется в хранилище браузера и никуда не отправляется — закрыли вкладку, и колеса больше нет. Если то же колесо понадобится завтра, скопируйте ссылку и добавьте её в закладки: этот адрес и есть всё сохранённое состояние.

Можно задать свои цвета секторов?

Да: вставьте hex-коды в поле цветов через запятую или пробел, работают и короткая запись #abc, и полная #aabbcc. Если секторов больше, чем цветов, палитра пойдёт по кругу. Цвет подписи сам переключается между чёрным и белым по относительной яркости из WCAG, так что на бледно-жёлтом секторе текст будет тёмным, а не нечитаемо белым.

Почему указатель иногда останавливается у края сектора?

К финальному углу добавляется небольшой случайный сдвиг, иначе стрелка каждый раз замирала бы ровно по центру и это выглядело бы механически. Сдвиг не выходит за 35% ширины сектора от середины, поэтому результат всегда однозначный. А победитель считывается с реального угла остановки колеса, а не берётся из числа, выпавшего в начале.

Работает на телефоне и без интернета?

И то и другое. Колесо — это canvas, который подстраивается под размер экрана, и по нему достаточно тапнуть. Всё считается в браузере, после загрузки страницы запросов в сеть нет: можно включить режим полёта и продолжать крутить.

Из блога

Похожие инструменты