Estos días compartí en redes un juego online tipo feria: una carrera de camellos para 4 jugadores, donde se avanza acertando preguntas del Sistema Métrico Internacional (metros, gramos, litros y conversiones). Y la pregunta que más me habéis hecho no ha sido “¿cuántos metros son…?” 😄, sino:
“¿Puedes compartir el prompt?”
Así que aquí lo tenéis, tal cual, para que podáis generar vuestro propio juego y adaptarlo a vuestra clase, a vuestros peques o a cualquier actividad tipo gymkana.
Qué juego vas a conseguir con este prompt
- 4 jugadores (cada uno con su camello y su color).
- Meta en 10 avances: el primero que llega, gana.
- En cada ronda aparece una pregunta del sistema métrico.
- Hay 30 segundos para responder en voz alta.
- Al terminar, se muestra la respuesta correcta.
- Y lo más importante: no decide la IA quién acierta. Lo decide el presentador (tú) y haces clic en el camello que corresponda para que avance.
Esto lo hace perfecto para aula, biblioteca, talleres, familia… porque mantiene el juego rápido, limpio y sin discusiones con el robot.
Cómo usar este prompt (paso a paso)
- Abre la herramienta donde estés generando el juego (IA Studio/Canva o el entorno que estés usando).
- Pega el prompt completo (lo tienes más abajo).
- Pide que te lo devuelva como un único archivo HTML.
- Prueba el HTML en tu navegador (doble clic y listo).
- Si lo quieres publicar online, puedes subirlo donde suelas alojar recursos, integrarlo en tu web o crear un enlace público en cualquiera de esos dos generadores de juego que te propuse (IA Studio o Canva).
Consejo práctico: si quieres que el juego quede “modo proyector”, ponlo a pantalla completa y listo.
Prompt completo (copiar y pegar)
Nota: este prompt está pensado para que el resultado sea un HTML autocontenido con CSS y JavaScript dentro, sin librerías externas, listo para abrir y jugar
Actúa como un desarrollador front-end senior y crea un juego completo en un único archivo HTML (con CSS y JavaScript embebidos) que funcione al abrirlo en el navegador, sin dependencias externas.
Juego: “Carrera de Camellos (Feria)”
- 4 camellos / 4 jugadores (Carril 1 a 4).
- Meta a 10 avances (posición 0 a 10). El primero en llegar a 10 gana.
- Para avanzar hay que acertar una pregunta del Sistema Métrico Internacional (gramos, litros, metros, conversiones y equivalencias).
- En cada ronda:
1) Se muestra una pregunta en pantalla.
2) Arranca un contador visible de 30 segundos para que los participantes respondan en voz alta (no hace falta reconocimiento de voz).
3) Al terminar el contador (o con un botón “Mostrar respuesta”), se muestra la respuesta correcta y una breve explicación.
4) Se habilita que el presentador haga clic en el camello del jugador que acertó para que avance +1. Los demás no avanzan.
5) Botón “Siguiente pregunta” para iniciar otra ronda.
Interfaz (UI)
- Fondo tipo feria/carreras (estilo simple, sin imágenes externas).
- 4 carriles horizontales con su etiqueta.
- Cada camello puede ser un emoji 🐪 o un icono dibujado con CSS, pero debe moverse claramente por casillas (0..10).
- Mostrar una línea de meta y un marcador de progreso “Avances: X/10” para cada jugador.
- Panel central con:
- Pregunta actual
- Tiempo restante (30 → 0)
- Botones: “Iniciar ronda”, “Mostrar respuesta”, “Siguiente pregunta”, “Reiniciar juego”
- Cuando alguien llega a 10:
- Mostrar un modal/overlay “¡Gana Jugador X!” con opción “Reiniciar”.
Lógica del quiz
- Genera un banco de mínimo 60 preguntas variadas en español, mezclando:
- Conversión de unidades: km↔m↔cm↔mm; kg↔g↔mg; L↔mL↔cL.
- Problemas cortos: “¿Cuántos mililitros son 2,5 L?”
- Verdadero/Falso: “1 kg = 1000 g”
- Elección múltiple (A/B/C) en algunas preguntas.
- Evita repetir preguntas hasta agotar el banco; luego se puede reiniciar el banco.
- Cada pregunta debe tener:
- question (texto)
- answer (respuesta correcta)
- explanation (breve explicación)
Interacción clave (muy importante)
- NO intentes decidir quién acertó: el presentador lo decide y hace clic en el camello correcto.
- Después de mostrar la respuesta, deben aparecer botones grandes tipo:
- “Avanza Jugador 1”
- “Avanza Jugador 2”
- “Avanza Jugador 3”
- “Avanza Jugador 4”
(o permitir click directo sobre el camello/carril). - Al avanzar uno, se bloquea esa ronda para que no avancen dos por error.
Pantalla inicial (Setup) antes de jugar
- Al cargar, NO se ve la carrera todavía. Se ve una pantalla de configuración:
- 4 campos de texto para nombres (Jugador 1 a 4)
- Valores por defecto: “Jugador 1”, “Jugador 2”, “Jugador 3”, “Jugador 4” si quedan vacíos.
- Botón grande: “Empezar carrera”
- Al pulsar “Empezar carrera”:
- Se guarda la configuración
- Se oculta el setup y se muestra el juego
- Los nombres aparecen en carriles y en el modal del ganador.
Camellos distintos y con color diferente
- Cada jugador tiene un camello visualmente distinto (emoji 🐪 vale, pero con placa/medalla distinta).
- Asigna un color por jugador:
- Jugador 1: rojo
- Jugador 2: azul
- Jugador 3: verde
- Jugador 4: morado
- El color se aplica a:
- Etiqueta/nombre del carril
- Marcador de progreso
- Placa/fondo detrás del camello (si es emoji).
Reiniciar
- El botón “Reiniciar juego” debe preguntar:
- Opción A: “Reiniciar carrera (mantener nombres)”
- Opción B: “Volver a configuración (cambiar nombres)”
- Implementa esto con un modal simple o confirmación doble.
Requisitos técnicos
- Código limpio, comentado, fácil de editar.
- Todo en español (España): textos de UI, preguntas, mensajes.
- Responsive básico.
- Sin librerías externas.
- Al final, entrega solo el contenido del archivo HTML, listo para copiar/pegar y ejecutar.
Ideas rápidas para personalizarlo (sin tocar código casi)
- Cambiar el tema: “Sistema Solar”, “Animales”, “Multiplicaciones”, “Lengua”, “Historia”… lo que quieras.
- Cambiar la meta: 10 avances, 15, 20…
- Meter “comodines” (por ejemplo: doble avance una vez por partida).
- Modo equipos: 2 equipos, 6 equipos, etc.
Demo del juego (por si alguien quiere verlo antes)
https://duaconcanvasheets.my.canva.site/sistemametricoalehoppp
