Spin And Wheel

Osadź koło fortuny na swojej stronie

Wstaw działające koło fortuny na swoją stronę, bloga lub stronę klasy w niecałą minutę: wybierz koło, wpisz wpisy i wklej dwie linijki HTML. Widżet jest darmowy, nie wymaga konta i nie pokazuje Twoim odwiedzającym reklam ani ciasteczek śledzących.

Pobierz kod do osadzenia

Zostaw puste, aby użyć listy wybranego koła. Wpisy są zapisane w samym kodzie, a nie na serwerze.

Rozmiar

Dla Notion, opcji „By URL” w Google Sites i innych edytorów, które zamiast HTML proszą o link.

Podgląd na żywo

Jak osadzić koło fortuny na stronie w 3 krokach

  1. Wybierz koło i dodaj wpisy. W generatorze na tej stronie wybierz koło fortuny z imionami, koło tak czy nie, koło liczb, liter, Twister lub koło z jedzeniem i wpisz po jednym wpisie w linii — albo zostaw listę pustą, aby zachować wpisy wybranego koła.
  2. Wybierz rozmiar i skopiuj kod. Mały ma 400 px, Średni 520 px, a Duży 640 px wysokości, a szerokość to 100% do tego samego limitu. Kod to standardowy element HTML <iframe> i jedna linijka z linkiem.
  3. Wklej kod do bloku HTML i opublikuj. W WordPressie ten blok nazywa się Własny HTML, w Wix — Embed HTML, w Squarespace — Code, w Shopify — Custom Liquid, a w Webflow — Code Embed. Edytory, które przyjmują tylko link (Notion, „By URL” w Google Sites), dostają zamiast tego link do osadzenia.

Oto pełny kod koła fortuny z trzema imionami — Anna, Jakub i Zosia — w rozmiarze Średni:

<iframe src="https://spinandwheel.com/pl/?mode=embed&amp;entries=Anna,Jakub,Zosia" title="Koło fortuny" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/pl/">Koło fortuny od Spin and Wheel</a></p>

Wpisy znajdują się w adresie src (entries= albo skompresowane w= dla długich list), a mode=embed pokazuje samo koło. Druga linijka to zwykły link do strony koła.

Gdzie wkleić kod

Kod to standardowy element HTML <iframe> i jeden link, więc działa na każdej stronie, która przyjmuje HTML. Oto kroki dla najpopularniejszych edytorów.

WordPress

W edytorze blokowym dodaj blok Własny HTML (wpisz /html), wklej kod i kliknij Podgląd. WordPress na własnym hostingu domyślnie pozwala na iframe’y; na WordPress.com może to wymagać płatnego planu.

Wix

W Edytorze Wix kliknij Add Elements (+) → Embed Code → Embed HTML, wybierz Code, wklej kod i kliknij Update, a potem rozciągnij ramkę do około 520 px wysokości. Wix wyświetla własny HTML we własnej ramce, więc koło działa, ale link pod nim otwiera się wewnątrz tej ramki.

Squarespace

Edytuj stronę, kliknij Add Block → Code, zostaw blok w trybie HTML, wklej kod i zapisz stronę. Koło pojawi się na opublikowanej stronie; w edytorze blok Code może pokazywać zamiast niego symbol zastępczy.

Shopify

Przejdź do Online Store → Themes → Customize, wybierz Add section → Custom Liquid, wklej kod w pole kodu Liquid i zapisz. Darmowe motywy, takie jak Dawn, mają sekcję Custom Liquid.

Webflow

Przeciągnij element Code Embed z panelu Add na stronę, wklej kod, kliknij Save & Close i opublikuj witrynę. Własne osadzenia kodu mogą wymagać płatnego planu witryny Webflow.

Blogger

Otwórz post, w menu z ołówkiem przełącz edytor z widoku tworzenia na HTML view, wklej kod w miejscu, gdzie ma być koło, i opublikuj. Dla koła w pasku bocznym użyj Layout → Add a Gadget → HTML/JavaScript.

Google Sites

Wybierz Insert → Embed. W zakładce „Embed code” wklej cały kod albo w „By URL” wklej link do osadzenia. Google Sites wyświetla każde osadzenie we własnej ramce, więc koło działa, ale link pod nim otwiera się wewnątrz tej ramki.

Notion

Wpisz /embed, wklej link do osadzenia (nie kod HTML) i naciśnij Embed link. Przeciągnij róg bloku, aby miał około 520 px wysokości i całe koło było widoczne.

Canvas, Moodle i inne platformy LMS

Otwórz stronę w edytorze HTML (Canvas: przycisk </>; Moodle: przycisk HTML w edytorze Atto lub TinyMCE) i wklej kod. Jeśli koło znika po zapisaniu, administrator zablokował iframe’y z innych stron; poproś go o dopuszczenie spinandwheel.com.

Dowolna strona HTML

Wklej kod do sekcji <body> strony. Iframe ma 100% szerokości do swojego limitu rozmiaru i ładuje się z loading="lazy", więc nie spowalnia górnej części strony.

Jak działa osadzone koło

Widżet to prawdziwa strona Spin and Wheel w lekkim trybie osadzania (?mode=embed): widać tylko koło i mały link „Otwórz w Spin and Wheel”. Odwiedzający kręcą przyciskiem na środku, widzą zwycięzcę na karcie i mogą zakręcić jeszcze raz albo usunąć zwycięzcę z listy. Koło dopasowuje się do ramki, którą dostaje — szerokości i wysokości — od telefonów o szerokości 320 px po paski boczne na komputerze.

Twoje wpisy są przekazywane w adresie iframe’a: krótka lista jako entries=, dłuższa skompresowana (deflate-raw, base64url) jako w=. Nic nie jest wysyłane ani zapisywane na serwerze i nic nie trafia do pamięci przeglądarki Twoich odwiedzających, więc każdy zaczyna od Twojej listy. Motyw kolorów, czas kręcenia i ustawienia dźwięku z panelu Dostosuj są przekazywane w ten sam sposób (cfg=).

Każde zakręcenie korzysta z crypto.getRandomValues z Web Crypto API, tak samo jak na spinandwheel.com, więc każdy z N wpisów ma szansę 1/N. Osadzone koło nie pokazuje reklam, nie ustawia ciasteczek śledzących i nie instaluje service workera; liczy tylko, jak często jest wczytywane i kręcone — anonimowo i bez ciasteczek.

Linijka pod kołem to zwykły link do strony koła na spinandwheel.com. Jest opcjonalna — możesz ją zmienić lub usunąć — ale jej zachowanie pomaga innym nauczycielom i twórcom znaleźć to narzędzie. Ulepszenia koła trafiają do Twojego osadzenia automatycznie; aby zmienić wpisy, wygeneruj nowy kod i zastąp nim stary.

FAQ

Widżet koła — najczęstsze pytania

Czy mogę za darmo wstawić koło fortuny z imionami na swoją stronę?
Tak. Koło fortuny z imionami i każde inne koło Spin and Wheel możesz za darmo osadzić na stronie prywatnej, szkolnej i firmowej za pomocą dwóch linijek HTML. Nie potrzebujesz konta, klucza API i nie ma limitu użycia — skopiuj kod i wklej go.

Czy widżet pokazuje reklamy lub śledzi moich odwiedzających?
Nie. Osadzone koło nie pokazuje reklam, nie ustawia ciasteczek śledzących i nie zapisuje wpisów ani ustawień w przeglądarce Twoich odwiedzających. Liczy wczytania i zakręcenia anonimowo, bez ciasteczek, abyśmy wiedzieli, że osadzenia są używane.

Czy odwiedzający mogą zmienić wpisy w osadzonym kole?
Odwiedzający kręcą kołem z wybranymi przez Ciebie wpisami i mogą usunąć zwycięzcę przed kolejnym zakręceniem. Aby edytować całą listę, klikają „Otwórz w Spin and Wheel”, co otwiera pełne koło z Twoimi wpisami w nowej karcie.

Jak później zmienić wpisy?
Wygeneruj na tej stronie nowy kod z nowymi wpisami i zastąp nim stary kod na swojej stronie. Wpisy są częścią kodu, więc stare osadzenie zachowuje swoją listę, dopóki go nie zastąpisz.

Czy osadzone koło jest losowe i uczciwe?
Tak. Zwycięzca jest wybierany za pomocą crypto.getRandomValues (Web Crypto API), więc każdy z N wpisów ma przy każdym zakręceniu dokładnie szansę 1/N, tak samo jak na spinandwheel.com.

Jaki rozmiar wybrać?
Średni (520 px wysokości) pasuje do większości wpisów na blogu. Mały (400 px) wybierz do pasków bocznych i wąskich kolumn, a Duży (640 px) do stron na pełną szerokość lub do rzutnika. Szerokość to 100% do tego samego limitu, a koło zawsze mieści się w ramce.

Czy osadzone koło działa na telefonach?
Tak. Iframe ma 100% szerokości, koło skaluje się do dostępnej szerokości i wysokości, a poniżej 700 px zwycięzca pojawia się w panelu od dołu ekranu z dużymi przyciskami.

Czy mogę osadzić koło w OBS na transmisję na żywo?
W OBS Studio zamiast tego widżetu użyj specjalnych linków do streamu: przezroczystej nakładki z kołem i panelu sterowania (docka). Oba opisuje poradnik konfiguracji OBS.