Gira la ruleta
Escribe tus opciones, gira la ruleta
Cada línea del cuadro se convierte en un sector. Pulsa girar, la ruleta gira y va frenando, y el sector bajo el puntero gana.
No se sube nada. Tus entradas viven en la pestaña del navegador y desaparecen al cerrarla.
El ganador se elige antes de que la ruleta se mueva
Esto importa más de lo que parece.
La forma obvia de construir una ruleta es darle un empujón aleatorio, dejar que la fricción la frene y leer lo que sea que quede bajo el puntero. Ese planteamiento hace que el resultado dependa del redondeo del ángulo final y de cuántos fotogramas de animación consiguió dibujar tu dispositivo — un móvil lento y un ordenador de sobremesa rápido no serían igual de justos.
Esta ruleta hace lo contrario. Primero saca un ganador de
crypto.getRandomValues(), luego calcula la rotación exacta que hace caer
ese sector bajo el puntero y anima hasta ahí. El giro es la puesta en escena;
el sorteo ya está decidido y es demostrablemente uniforme.
Por eso cada sector tiene exactamente la misma probabilidad, sin importar cuántos sectores haya, cuánto midan sus etiquetas o en qué dispositivo estés.
Quitar al ganador, o seguir girando la ruleta completa
Con quitar al ganador activado, cada giro retira de la ruleta la entrada ganadora. Gira repetidamente y obtienes un orden: primero, segundo, tercero. Bueno para sortear varios premios, o para decidir el orden de presentación delante de una sala.
Con la opción desactivada, la ruleta permanece completa y la misma opción puede ganar dos veces — que es lo que quieres para “dónde comemos esta noche”.
Ponderar la ruleta repitiendo una entrada
La ruleta da a cada sector la misma probabilidad, así que la forma de favorecer una opción es darle más sectores. Ponerla dos veces duplica su parte.
| Entradas | Sectores | Probabilidad para Pizza |
|---|---|---|
| Pizza, Sushi, Tacos | 3 | 33% |
| Pizza, Pizza, Sushi, Tacos | 4 | 50% |
| Pizza ×3, Sushi, Tacos | 5 | 60% |
Las etiquetas duplicadas aparecen en la ruleta más de una vez, lo cual es honesto — cualquiera que la vea puede contar los sectores y ver la ponderación en lugar de fiarse de tu palabra. Esa visibilidad es la razón de ser de una ruleta; un peso oculto la desvirtuaría.
Para pesos precisos que no encajan bien en sectores, el generador de números
aleatorios acepta en su lugar pares explícitos número:peso.
Cuántos sectores se mantienen legibles
Los sectores se encogen a medida que crecen las entradas, y las etiquetas se dibujan a lo largo del radio, así que hay un límite práctico bastante por debajo de cualquier límite técnico.
- Hasta 12 — cómodo, las etiquetas se leen de un vistazo
- De 12 a 20 — legible, pero los nombres largos empiezan a apretarse
- De 20 a 30 — solo utilizable con etiquetas cortas
- Más de 30 — la ruleta sigue funcionando y el sorteo sigue siendo justo, pero nadie puede leerla mientras gira
Las etiquetas de más de 18 caracteres se recortan con puntos suspensivos para que quepan dentro de su sector. Si tu lista es tan larga que la ruleta resulta ilegible, el selector de nombres hace el mismo trabajo sin la puesta en escena.
Accesibilidad y movimiento
La ruleta respeta prefers-reduced-motion. Si tu sistema pide movimiento
reducido, se omite la animación del giro y el ganador aparece de inmediato.
El resultado es idéntico en ambos casos, porque el sorteo nunca dependió de
la animación.
El ganador también se anuncia en una región activa, así que los lectores de pantalla lo leen en voz alta sin que el usuario tenga que buscarlo.
Dónde se usa una ruleta selectora
- Decidir — la comida, la película, qué tarea toca
- Retransmisiones en directo y aulas — el giro es lo importante; la gente lo observa
- Sorteos — un sorteo visible se siente más justo para una audiencia que un número que aparece
- Rompehielos — quién responde la siguiente pregunta