Ten przewodnik dokumentuje wszystkie 14 akcji widocznych dla użytkownika w losowaniu Spin and Wheel — narzędziu działającym w przeglądarce, które przypisuje każdemu wpisowi równy łuk na kole HTML5 Canvas, dając prawdopodobieństwo wyboru 1/N. Strona zawiera trzyetapowy szybki start oraz szczegółowy opis każdego przycisku, przełącznika i skrótu klawiaturowego głównego koła.
Otwórz kołoWpisz lub wklej swoją listę w polu Wpisy — jeden element na linię. Imiona, opcje, zadania, nagrody — cokolwiek chcesz wylosować. Brak górnego limitu poza pojemnością localStorage przeglądarki (typowo 5 MB na origin).
Kliknij przycisk Zakręć pod kołem lub bezpośrednio na canvas koła. Obrót trwa 3,5 sekundy z krzywą zwalniania easeOutQuart i zatrzymuje się na losowym wpisie z prawdopodobieństwem 1/N — każdy wpis ma identyczną szansę, niezależnie od pozycji na kole.
Zwycięzca pojawia się w oknie modalnym. Możesz zakręcić ponownie, usunąć zwycięzcę z listy lub zamknąć okno — zwycięzcy są automatycznie zapisywani w zakładce Zwycięzcy.
Pole Wpisy zawiera listę, z której koło wybiera — jeden element na linię, z licznikiem na żywo pokazującym liczbę niepustych wierszy. Każdy wpis zajmuje łuk 360°/N koła, więc prawdopodobieństwo wyboru wynosi dokładnie 1/N, niezależnie od długości tekstu czy pozycji. Brak górnego limitu poza pojemnością localStorage przeglądarki (typowo 5 MB na origin).
Wskazówka: wklej kolumnę z arkusza, aby dodać wiele wpisów naraz.
Losowo zmienia kolejność wszystkich wpisów. Przydatne, gdy chcesz mieć innych sąsiadów na kole między losowaniami lub przełamać kolejność posortowanej listy.
Tasowanie nie zmienia prawdopodobieństwa — każdy wpis nadal ma 1/N.
Sortuje wpisy alfabetycznie (A–Z). Pomocne przy porządkowaniu długiej wklejonej listy lub grupowaniu podobnych wpisów przed udostępnieniem koła.
Podobnie jak tasowanie, sortowanie zmienia tylko widok, nie sprawiedliwość.
Usuwa wszystkie wpisy jednym kliknięciem. Koło staje się puste i możesz zacząć nową listę.
Wyczyszczonych list nie da się odzyskać — najpierw udostępnij URL, jeśli chcesz zachować kopię.
Uruchamia animację obrotu, ustaloną na 3500 ms z krzywą zwalniania easeOutQuart, co zapewnia spójne odczucie i sprawiedliwość wyniku. Dwa wyzwalacze: przycisk Zakręć pod kołem oraz bezpośrednie kliknięcie na canvas. Pole Wpisy jest wyłączone podczas obrotu, aby lista nie zmieniła się w jego trakcie i nie unieważniła obliczeń prawdopodobieństwa.
Czas animacji jest celowo stały, aby żaden wpis nie był uprzywilejowany długością obrotu.
Każdy zwycięzca jest automatycznie dopisywany do zakładki Zwycięzcy. Przełącz zakładkę, aby zobaczyć pełną historię z licznikiem dotychczasowych zwycięzców.
Użyj przycisku Wyczyść w zakładce Zwycięzcy, aby zresetować historię bez ruszania wpisów.
W oknie zwycięzcy przycisk Usuń wyrzuca wpis-zwycięzcę z koła — idealne do losowań, w których każde imię ma wygrać tylko raz. Przycisk Użyj jako wpisów (zakładka Zwycięzcy) przenosi wszystkich zwycięzców z powrotem do listy losowania.
Połącz oba dla rund eliminacyjnych: zakręć, usuń, powtórz.
Po pokazaniu zwycięzcy okno może automatycznie uruchomić kolejne losowanie. Zaznacz pole i ustaw odliczanie w sekundach. Licznik resetuje się przy każdym nowym zwycięzcy.
Domyślne odliczanie: 30 sekund — dostosuj do tempa wydarzenia.
Po włączeniu imię zwycięzcy jest odczytywane na głos przez Web Speech API przeglądarki (interfejs SpeechSynthesis, specyfikacja W3C Community Group). Głos i język są dobierane automatycznie do aktywnego języka interfejsu, spośród siedmiu obsługiwanych locale. Stan przełącznika w oknie zwycięzcy jest zapisany w localStorage jako voiceOver_
Jakość i język głosu zależą od głosów zainstalowanych w twoim systemie.
Podczas obrotu słychać tykanie jak w prawdziwym kole fortuny. Włącz lub wyłącz ikoną głośnika w nagłówku — ustawienie utrzymuje się między sesjami.
Wycisz w klasie lub biurze, gdy otoczenie tego wymaga.
Kliknięcie ikony pełnego ekranu w nagłówku wywołuje Fullscreen API przeglądarki (Element.requestFullscreen()), rozszerzając canvas koła na cały viewport. Wspierane przez wszystkie evergreen przeglądarki (Chrome, Edge, Firefox, Safari 16.4+) — idealne na prezentacje, projektory i udostępnianie ekranu w połączeniach wideo.
Naciśnij Esc, aby w każdej chwili wyjść z trybu pełnoekranowego.
Wpisy są automatycznie zapisywane w localStorage przeglądarki (Web Storage API, rekomendacja W3C), z kluczem na język: mainInput_en, mainInput_fr itd. Zapis przeżywa zamknięcie karty, restart przeglądarki i komputera — aż użytkownik wyczyści dane witryny. Pojemność na origin to typowo 5 MB, co wystarcza na dziesiątki tysięcy wpisów.
Zapis według języka: przełączenie na angielski daje osobną listę angielską.
URL jest aktualizowany po każdym naciśnięciu klawisza przez History API (history.replaceState), kodując listę wpisów jako bezpieczny parametr zapytania. Udostępnienie adresu przekazuje stan koła bez żadnego wywołania serwera — odbiorca otwiera link i widzi identyczną konfigurację na własnym urządzeniu. Rozmiar listy ograniczają jedynie typowe limity długości URL przeglądarek (~2000 znaków w starszych klientach, ~32 000 w nowoczesnym Chromium).
Bez kont i serwerów — lista mieszka w samym adresie URL.
Kliknij przycisk Udostępnij kod QR u góry formularza wpisów, aby otworzyć okno ze skanowalnym kodem QR. Kod zawiera aktualny adres strony razem z dodanymi wpisami, więc każdy, kto zeskanuje go aparatem telefonu, otworzy dokładnie to samo koło z tą samą listą. Okno pokazuje też pełny link i przycisk Kopiuj link, jeśli wolisz wkleić adres do czatu, maila lub prezentacji.
Idealne na lekcje i wydarzenia — uczniowie albo goście skanują kod z ekranu i jednym dotknięciem otwierają koło na swoim urządzeniu.
Koło jest dostępne w 7 językach: angielskim, francuskim, hiszpańskim, japońskim, portugalskim, niemieckim i polskim. Wybierz język w stopce — cały interfejs, łącznie z lektorem, zmieni się natychmiast.
Każdy język zachowuje własną zapisaną listę, nie nadpisując innych.
Koło możesz pokazać na żywo w transmisji w OBS Studio w dwóch częściach: koło, które leży na wierzchu sceny, oraz mały panel sterowania zadokowany w OBS, w którym edytujesz nazwy i kręcisz. Nie trzeba instalować dodatkowych programów ani zakładać konta — obie części działają w OBS na tym samym komputerze.
Dodaj koło do sceny za pomocą linku wyświetlacza. Pojawia się na przezroczystym tle, więc nad kamerą lub rozgrywką widać tylko koło, bez ramki. Najlepiej sprawdza się kwadratowy rozmiar, na przykład 800 × 800.
Przesuwaj je i skaluj dowolnie na scenie; obszar wokół koła pozostaje przezroczysty nad innymi źródłami.
Dodaj link doku jako panel w OBS, aby edytować nazwy, kręcić i sprawdzać zwycięzców bez wychodzenia z OBS i przełączania się na kartę przeglądarki.
Jeśli panel zniknie, włącz go ponownie z menu Docks u góry OBS.
Panel sterowania i koło na ekranie są połączone w OBS, więc obrót pojawia się w transmisji natychmiast. Nic nie jest wysyłane na serwer — obie części muszą po prostu działać w tym samym OBS na jednym komputerze.
Naciśnij Zakręć kołem w panelu, a koło na ekranie obraca się od razu; każdy zwycięzca trafia na listę Zwycięzcy w panelu.
Przy dodawaniu koła zaznacz opcję Steruj dźwiękiem przez OBS, aby widzowie słyszeli tykanie. Z panelu możesz też włączyć głosowe ogłaszanie każdego zwycięzcy oraz automatyczne rozpoczęcie kolejnego losowania.
Koło możesz wyciszyć w mikserze audio OBS w dowolnej chwili.
