Misión SIBO

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Crea un juego educativo interactivo en español titulado “Misión SIBO”, con subtítulo “Aprende. Decide. Avanza.”. Debe ser una experiencia de cuestionario web responsive, no un juego de acción: el jugador resuelve cinco casos de ciencias de la salud sobre el SIBO, recibe una explicación tras cada respuesta y termina con una pantalla de resultados.

Dirección visual: interfaz limpia, moderna y amigable para estudiantes de secundaria, sobre un fondo degradado muy claro azul/blanco y crema. Usa tarjetas blancas semitransparentes con bordes finos azul pálido, esquinas redondeadas grandes y sombras suaves. Paleta principal: azul vivo para botones y acentos, turquesa para etiquetas y progreso, amarillo suave para la tarjeta educativa, coral para detalles de error/ilustración, texto azul marino oscuro y texto secundario gris azulado. Usa tipografía sans-serif de sistema, títulos grandes y pesados con espaciado ligeramente compacto. En la cabecera muestra a la izquierda un icono cuadrado azul-morado con una hélice/emoji de ADN, el título “Misión SIBO” y el subtítulo; durante el cuestionario muestra a la derecha “Caso N de 5”, “N pts” y una barra de progreso horizontal turquesa-azul.

Pantalla inicial: presenta dos columnas en escritorio y una columna en móvil. La tarjeta principal debe tener la etiqueta “RETO DE CIENCIAS DE LA SALUD” con punto turquesa, el gran titular “Descubre qué ocurre cuando las bacterias se mudan al lugar equivocado.”, coloreando “equivocado” en azul, y el texto: “Resuelve situaciones, separa los mitos de la información fiable y reúne pistas para explicar el SIBO con claridad.” Incluye una tarjeta de misión azul muy pálida con icono de diana y el mensaje “Tu misión: Completar 5 casos. Cada respuesta correcta suma 20 puntos y desbloquea una pista para el siguiente reto.” Debajo, incluye una tarjeta amarilla titulada “Vista rápida: el intestino delgado”, con el texto que explica que normalmente tiene relativamente pocas bacterias comparado con el colon y que en el SIBO hay un sobrecrecimiento bacteriano en esa zona. Añade una pequeña ilustración CSS de un tubo intestinal coral redondeado con varias bacterias ovaladas de colores dentro y la etiqueta “bacterias en exceso”. Al pie coloca los botones “Comenzar misión →” (azul, principal) y “¿Cómo se juega?” (transparente con borde; al activarlo muestra una breve instrucción: leer cada situación, elegir una respuesta y revisar la explicación; el objetivo es aprender a distinguir conceptos y mitos).

En la columna secundaria de inicio, muestra la etiqueta “ANTES DE EMPEZAR” y tres reglas numeradas: “Lee la situación y elige la opción más adecuada.”, “Recibirás una explicación breve después de responder.” y “El juego enseña conceptos generales; no sirve para diagnosticar.” Incluye una tarjeta de “Consejo de investigador” con icono de lupa y el consejo de desconfiar de frases absolutas como “siempre”, “nunca” o “una sola dieta cura todo”; el contexto importa. Añade una nota indicando que el contenido es para estudiantes de secundaria y que las personas con síntomas deben hablar con un profesional de la salud.

Flujo del cuestionario: al comenzar, oculta la pantalla inicial y muestra un diseño de dos columnas: una tarjeta grande de pregunta y una columna lateral con una tarjeta de “Situación de investigación” y una tarjeta de puntuación. La pregunta debe mostrar una etiqueta de caso, una insignia “+20 si aciertas”, título, enunciado y cuatro botones de respuesta con letras A-D. Antes de contestar, las opciones son blancas con borde azul pálido y al pasar el cursor cambian sutilmente. Solo se permite una respuesta. Al seleccionar, desactiva todas las opciones, marca la correcta en verde y, si corresponde, la elegida incorrecta en coral; muestra un bloque de feedback con borde y fondo verde si se acertó o coral si se falló. El feedback debe incluir “¡Respuesta correcta!” o “Casi, revisa la pista.” seguido de la explicación. Una respuesta correcta suma exactamente 20 puntos; una incorrecta no suma puntos. Después habilita el botón “Siguiente caso →”, que en el quinto caso debe decir “Ver resultado →”. La tarjeta lateral incluye un emoji contextual, el título “Situación de investigación”, una breve instrucción para buscar la pista que mejor encaje con la evidencia y una “Clave” específica del caso. La tarjeta de puntuación muestra los puntos acumulados y un emoji que cambia de 🧠 a 🌟 al acertar o 🔎 al fallar.

Usa exactamente estos cinco casos y respuestas correctas:
1. Etiqueta “Caso 1 · Ubicación”, icono 🧭, título “¿Dónde está el problema principal?”. Pregunta: “En clase, Alex dice: ‘SIBO significa que hay demasiadas bacterias en una parte del aparato digestivo donde normalmente debería haber menos’. ¿Qué parte describe mejor?” Opciones: “El intestino delgado” (correcta), “La boca”, “El colon exclusivamente”, “El hígado”. Explicación: “Correcto: SIBO significa sobrecrecimiento bacteriano del intestino delgado. El colon tiene muchas bacterias de forma normal; el reto es que haya un exceso de bacterias en el intestino delgado.” Pista: “Piensa en ‘bacterias + intestino delgado’.” Clave lateral: localizar el órgano.
2. Etiqueta “Caso 2 · Viaje digestivo”, icono 🧪, título “¿Qué puede ocurrir allí?”. Pregunta: “Si hay un exceso de bacterias en el intestino delgado, ¿cuál es una posibilidad razonable?” Opciones: “Que fermenten nutrientes antes de tiempo y produzcan gases” (correcta), “Que conviertan el intestino en un músculo”, “Que eliminen todos los nutrientes automáticamente”, “Que cambien la sangre por agua”. Explicación: “Bien. Las bacterias pueden fermentar parte de los nutrientes y producir gases. Los efectos dependen de la persona y de la causa; no todos los síntomas digestivos significan SIBO.” Pista: “La fermentación puede generar gas y cambios digestivos.” Clave lateral: imaginar qué hacen las bacterias.
3. Etiqueta “Caso 3 · Mito o información”, icono 🧠, título “Detecta la frase tramposa”. Pregunta: “¿Cuál de estas frases es un mito o una afirmación demasiado absoluta?” Opciones: “‘El SIBO siempre se cura con una dieta de internet.’” (correcta), “‘Los síntomas pueden parecerse a los de otros problemas digestivos.’”, “‘La evaluación debe tener en cuenta la historia de cada persona.’”, “‘Un profesional puede valorar pruebas y opciones de tratamiento.’”. Explicación: “Exacto: no existe una dieta universal que ‘siempre’ cure el SIBO. Las dietas restrictivas pueden ser difíciles y deben revisarse con cuidado. Una frase absoluta es una señal para investigar mejor.” Pista: “‘Siempre’ y ‘cura todo’ son señales de alerta.” Clave lateral: buscar la frase absoluta.
4. Etiqueta “Caso 4 · Pensamiento crítico”, icono 🔬, título “¿Qué dato ayuda más?”. Pregunta: “Una persona tiene hinchazón y dolor abdominal. ¿Qué conclusión es la más científica?” Opciones: “‘Seguro que es SIBO, no hace falta preguntar nada más.’”, “‘Los síntomas pueden tener varias causas; hace falta una evaluación clínica.’” (correcta), “‘Si un amigo tuvo SIBO, esta persona también lo tiene.’”, “‘Una publicación en redes sociales confirma el diagnóstico.’”. Explicación: “Muy bien. La hinchazón y el dolor pueden aparecer por distintas razones. El diagnóstico no se hace solo con una lista de síntomas ni por comparación con otra persona.” Pista: “Síntomas parecidos no equivalen automáticamente al mismo diagnóstico.” Clave lateral: separar síntoma de diagnóstico.
5. Etiqueta “Caso 5 · Mensaje final”, icono 📣, título “Explica el SIBO en una frase”. Pregunta: “¿Cuál sería la mejor explicación para una compañera?” Opciones: “‘Es una infección contagiosa que se pasa al compartir comida.’”, “‘Es una moda de internet sin explicación biológica.’”, “‘Es un sobrecrecimiento de bacterias en el intestino delgado; sus síntomas y tratamiento deben valorarse de forma individual.’” (correcta), “‘Es simplemente comer demasiado rápido’”. Explicación: “¡Misión cumplida! Esta frase reúne lo esencial: ubicación, concepto de sobrecrecimiento y la necesidad de una valoración individual. Además, el SIBO no se presenta aquí como algo contagioso.” Pista: “Explica con precisión, evita alarmar y no prometas curas universales.” Clave lateral: construir una explicación responsable.

Pantalla final: tras el quinto caso, muestra una tarjeta centrada con la etiqueta “MISIÓN COMPLETADA”, el título “¡Pistas reunidas!”, un anillo circular de resultado con segmento turquesa proporcional a la puntuación máxima de 100 y el número final dentro. Mensaje variable: con 100 puntos, “Has identificado las ideas esenciales y has separado los mitos de la información responsable.”; con 60-80, “Tienes una buena base. Revisa las explicaciones para afianzar las ideas clave.”; con menos de 60, “La misión sirve para aprender: vuelve a jugar y compara cada explicación con tu primera intuición.” Incluye el bloque “Ideas clave para recordar” con: “El SIBO es un sobrecrecimiento de bacterias en el intestino delgado.”, “Puede relacionarse con síntomas digestivos, pero esos síntomas no son exclusivos del SIBO.” y “La evaluación y el tratamiento deben individualizarse con profesionales.” Incluye el botón azul “Jugar de nuevo”, que reinicia casos y puntuación. Haz que el diseño se adapte a móvil: las columnas pasan a una sola, los botones ocupan el ancho disponible y el contenido puede desplazarse verticalmente.