Roue de la Fortune
Saisissez vos options, faites tourner la roue
Chaque ligne du champ devient une part. Appuyez sur tourner, la roue tourne puis ralentit, et la part sous le pointeur gagne.
Rien n’est envoyé. Vos entrées vivent dans l’onglet du navigateur et disparaissent quand vous le fermez.
Le gagnant est choisi avant que la roue ne bouge
Cela compte plus qu’il n’y paraît.
La façon évidente de construire une roue est de lui donner une poussée aléatoire, de laisser la friction la ralentir, et de lire ce qui se trouve sous le pointeur à l’arrêt. Cette approche fait dépendre le résultat de l’arrondi de l’angle final et du nombre d’images d’animation que votre appareil a réussi à dessiner — un téléphone lent et un ordinateur de bureau rapide ne seraient pas également équitables.
Cette roue fait l’inverse. Elle tire d’abord un gagnant depuis
crypto.getRandomValues(), puis calcule la rotation exacte qui place cette
part sous le pointeur et anime jusqu’à celle-ci. La rotation n’est qu’une
mise en scène ; le tirage est déjà décidé et prouvablement uniforme.
Chaque part a donc exactement la même chance, quel que soit le nombre de parts, la longueur de leurs étiquettes, ou l’appareil que vous utilisez.
Retirer le gagnant, ou continuer à tourner la roue complète
Avec retirer le gagnant activé, chaque tour retire l’entrée gagnante de la roue. Tournez plusieurs fois et vous obtenez un ordre : premier, deuxième, troisième. Utile pour tirer plusieurs prix, ou pour décider d’un ordre de présentation devant une salle.
Désactivé, la roue reste complète et la même option peut gagner deux fois — ce qui est ce que vous voulez pour « où mange-t-on ce soir ».
Pondérer la roue en répétant une entrée
La roue donne à chaque part la même chance, donc la façon de favoriser une option est de lui donner plus de parts. La lister deux fois double sa part.
| Entrées | Parts | Chance pour Pizza |
|---|---|---|
| Pizza, Sushi, Tacos | 3 | 33% |
| Pizza, Pizza, Sushi, Tacos | 4 | 50% |
| Pizza ×3, Sushi, Tacos | 5 | 60% |
Les étiquettes dupliquées apparaissent plusieurs fois sur la roue, ce qui est honnête — quiconque regarde peut compter les parts et voir la pondération plutôt que devoir vous croire sur parole. Cette visibilité est tout l’intérêt d’une roue ; une pondération cachée irait à l’encontre de cela.
Pour des pondérations fines qui ne s’intègrent pas proprement en parts, le
générateur de nombres aléatoires accepte à la place des paires explicites
nombre:poids.
Combien de parts restent lisibles
Les parts rétrécissent quand les entrées augmentent, et les étiquettes sont tracées le long du rayon, il y a donc un plafond pratique bien inférieur à tout plafond technique.
- Jusqu’à 12 — confortable, les étiquettes se lisent d’un coup d’œil
- De 12 à 20 — lisible, mais les noms longs commencent à se resserrer
- De 20 à 30 — utilisable uniquement pour des étiquettes courtes
- Au-delà de 30 — la roue fonctionne encore et le tirage reste équitable, mais personne ne peut la lire pendant qu’elle tourne
Les étiquettes de plus de 18 caractères sont raccourcies avec des points de suspension pour rester dans leur part. Si votre liste est assez longue pour que la roue devienne illisible, le sélecteur de noms fait le même travail sans la mise en scène.
Accessibilité et mouvement
La roue respecte prefers-reduced-motion. Si votre système demande une
réduction du mouvement, l’animation de rotation est ignorée et le gagnant
apparaît immédiatement. Le résultat est identique dans les deux cas, car le
tirage n’a jamais dépendu de l’animation.
Le gagnant est aussi annoncé dans une région dynamique, afin que les lecteurs d’écran l’énoncent sans que l’utilisateur ait à le chercher.
Où une roue de sélection est utilisée
- Décider — repas, film, quelle corvée
- Diffusions en direct et salles de classe — la rotation est le spectacle ; les gens la regardent
- Concours — un tirage visible paraît plus équitable à un public qu’un simple nombre qui apparaît
- Brise-glace — qui répond à la prochaine question