Gamifica tus tests con “La ruleta” y pon a prueba tus conocimientos

✨ Como cada domingo, llega la entrega especial del Newsletter #35 de IA para Educación. Hoy celebramos que ya somos 3500 suscriptores en Substack y 10.500 en LinkedIn 🚀

Si el otro día aprendíamos a generar roscos tipo pasapalabra para que repases un tema y compruebes tus conocimientos de forma divertida. Hoy vamos a generar una herramienta que hemos bautizado como la “ruleta ” Además te va a permitir subir y cargar la base de conocimiento en un archivo, lo. que nos va a dar mucho juego reutilizándola. Te dejo una pantalla de cómo nos va a quedar la aplicación.

Genera el código de la aplicación

Lo que queremos es una aplicación que podamos usar en cualquier IA o bien con un archivo html que abras en tu navegador. Lo importante aquí es que no vamos a generar una aplicación para cada paquete de tests, sino que me va a permitir cargarlos en cada ocasión. Le hemos puesto un asistente para que cargues tu fichero desde tu equipo, marcador y botón de hacer girar la ruleta (cuanto más tiempo mantengas pulsado, más fuerte el lanzamiento) Te dejo aquí el prompt que puedes usar con tu IA favorita:

Actúa como un desarrollador web experto y genera un juego interactivo llamado "La ruleta". Debe ser una aplicación web autocontenida (todo en un solo archivo HTML, usando CSS para los estilos y JavaScript puro para la lógica).
La aplicación debe cumplir con los siguientes requisitos:
**1. Interfaz y Diseño (Responsive):**
* En pantallas grandes, divide la interfaz en 3 columnas:
* **Izquierda:** Un panel muy compacto y centrado para subir un archivo `.txt`.
* **Centro:** La ruleta interactiva dibujada en un `<canvas>`, una barra visual de "Fuerza de giro" (gradiente de verde a rojo) y un botón interactivo.
* **Derecha:** Un panel de estadísticas destacando la Puntuación Total, y contadores de "Acertadas" y "Fallos".

**2. La Ruleta y sus Casillas:**
* Tendrá 16 casillas en total.
* 1 casilla "¡QUIEBRA!" (color negro, texto blanco) que reduce la puntuación a 0.
* 1 casilla "¡ x 2 !" (color dorado, texto negro) que multiplica la puntuación por 2.
* 14 casillas de "Pregunta" utilizando una paleta de 14 colores vibrantes y muy variados (rojo, verde, azul, naranja, morado, etc.). Asegura el contraste del texto (negro en casillas muy claras como el amarillo).
* Debe emitir un sonido mecánico de "tic" cada vez que la ruleta pasa por una casilla. Genera este sonido dinámicamente usando la Web Audio API (sin archivos externos).

**3. Mecánica de Giro (Carga de fuerza):**
* El giro se activa manteniendo pulsada la tecla **Flecha Arriba** o manteniendo pulsado el **botón en pantalla** (preparado también para pantallas táctiles).
* Mientras se mantiene presionado, la barra de "Fuerza de giro" se va llenando (con un máximo de 2 segundos de carga).
* Al soltar el botón/tecla, la ruleta debe girar. La velocidad inicial y el tiempo total de giro deben ser proporcionales a la fuerza acumulada.

**4. Lógica de Preguntas e Inventario:**
* Carga las preguntas del archivo `.txt` subido. Cada línea tiene el formato: `pregunta | respuesta`. Si no se sube nada, provee unas 5 preguntas de cultura general por defecto.
* Las preguntas no deben repetirse. Extráelas de la lista aleatoriamente.
* Si cae en una pregunta, muestra un modal con un campo de texto para responder.
* **Si acierta:** Suma 5 puntos, actualiza contadores, y **la casilla de la ruleta se vuelve gris permanentemente**.
* **Si falla:** Actualiza el contador de fallos y muestra la respuesta correcta en el modal.
* Si el jugador vuelve a caer en una casilla gris (ya acertada), muestra un aviso pidiéndole que gire de nuevo la ruleta.
* Si se acaban las preguntas, muestra un modo de Fin de Juego.

Ahora tienes que generar los bancos de preguntas. Puedes hacerlo usando la base de conocimiento con la que estás trabajando. Usa este prompt:

Ten en cuenta este material. Genera un total de [número de preguntas] Cada pregunta solo puede tener una solución válida de una sola palabra basada en el texto. Dame la respuesta en formato pregunta 1 | respuesta 1 en formato txt.

Una vez que tengas generado tu banco de preguntas, grábalo en un archivo txt que es el que luego vamos a subir a nuestra aplicación. Ahora vamos a probar la aplicación. Le subimos el archivo y empezamos a jugar. Puedes ir variando los tests sin tener que variar la aplicación cada vez.

Espero que te haya gustado y te sea útil. ¿Te animas a probarlo? Espero tus comentarios.