Gira tus Derechos

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 web en español titulado “Gira tus Derechos”. Es una experiencia 2D de ruleta y preguntas sobre derechos humanos, no un juego de acción ni 3D. Usa una pantalla responsive con fondo degradado suave de menta, azul pálido y crema, tipografía sans-serif redondeada, tarjetas blancas translúcidas con bordes redondeados grandes y sombras sutiles.

En la cabecera coloca a la izquierda un distintivo blanco con el emoji ⚖️, el texto pequeño “APRENDER JUGANDO” y el título grande “Gira tus Derechos”. A la derecha muestra una cápsula blanca con borde claro que diga “Aciertos: 0”; el número debe aumentar durante la partida.

El área principal de escritorio tiene dos columnas. A la izquierda, una tarjeta grande centrada contiene una ruleta circular de ocho sectores iguales, con borde y separadores blancos. Los sectores y textos son: naranja “🤝 Igualdad”, celeste “📚 Educación”, morado “🕊️ Libertad”, verde “🌈 No discriminación”, azul “🗳️ Participación”, rojo “🩺 Salud”, amarillo “☮️ Paz” y verde claro “⭐ Dignidad”. Dibuja los emojis y nombres dentro de cada sector. Sobre la parte superior de la ruleta debe haber un puntero triangular rojo fijo apuntando hacia abajo, y en el centro un círculo blanco con borde dorado grueso que muestre 🌍. La ruleta debe tener una ligera sombra.

Debajo de la ruleta muestra “Gira la ruleta y descubre un derecho humano” y un botón azul grande tipo píldora con texto blanco en negrita “GIRAR LA RULETA”. Al pulsarlo, deshabilita el botón y anima la ruleta girando aproximadamente 3.8 segundos, con desaceleración suave, alrededor de 5–8 vueltas aleatorias; reproduce pequeños sonidos de tic durante el giro si el navegador permite audio. Al terminar, determina el sector bajo el puntero, habilita nuevamente el botón y abre automáticamente una pregunta para el tema seleccionado. No permitas iniciar otro giro mientras uno está activo.

En la columna derecha de escritorio muestra una tarjeta informativa con el rótulo “8 TEMAS PARA CONVERSAR”, el encabezado “Los derechos nos pertenecen a todas las personas.”, y el texto “Cada color representa un tema. Cuando la ruleta se detenga, responde una pregunta y conoce una idea clave.”. Debajo presenta una cuadrícula de dos columnas con los ocho temas y sus emojis en pequeñas cajas claras. Añade una caja amarilla con: “💡 Idea clave: los derechos humanos se basan en la dignidad, la igualdad y el respeto.” y al final “Puedes jugar en clase, en familia o con tus amistades.” En pantallas estrechas oculta esta tarjeta informativa y centra la tarjeta de la ruleta.

Al seleccionar un resultado, abre una capa modal centrada sobre un fondo azul marino semitransparente. El modal es crema/blanco, redondeado y con animación de aparición. Arriba muestra el emoji y nombre del tema en mayúsculas pequeñas, además de un botón circular “×” para cerrar. Incluye una franja visual con el emoji y el texto “Imagen seleccionada: [tema]”. Después muestra la pregunta y tres botones de respuesta de ancho completo, claros y redondeados. Las preguntas y respuestas exactas son:
- Igualdad: “¿Qué significa que todas las personas tienen derecho a la igualdad?” Respuestas: “Que nadie debe ser discriminado por ser diferente” (correcta), “Que todas las personas deben pensar igual”, “Que solo algunas personas tienen los mismos derechos”. Idea: “La igualdad exige el mismo respeto y oportunidades para todas las personas.”
- Educación: “¿Cuál es una razón importante para proteger el derecho a la educación?” Respuestas: “Ayuda a desarrollar capacidades y participar en la sociedad” (correcta), “Solo sirve para conseguir buenas notas”, “Es un privilegio reservado para adultos”. Idea: “La educación abre oportunidades y fortalece la autonomía.”
- Libertad: “¿Qué implica la libertad de expresión?” Respuestas: “Poder expresar ideas respetando los derechos de otras personas” (correcta), “Poder insultar o amenazar sin consecuencias”, “Decir únicamente lo que piensa la mayoría”. Idea: “La libertad de expresión incluye responsabilidad y respeto.”
- No discriminación: “Si alguien es excluido por su origen, ¿qué principio se está vulnerando?” Respuestas: “El principio de no discriminación” (correcta), “El derecho a descansar”, “El derecho a tener una mascota”. Idea: “Nadie debe recibir un trato injusto por su origen, identidad o condición.”
- Participación: “¿Por qué es importante que niñas, niños y adolescentes sean escuchados?” Respuestas: “Porque sus opiniones importan en las decisiones que les afectan” (correcta), “Porque siempre deben decidir por las personas adultas”, “Porque así no necesitan aprender”. Idea: “Participar significa poder opinar y ser tomado en cuenta.”
- Salud: “¿Qué busca garantizar el derecho a la salud?” Respuestas: “Acceso a cuidados y condiciones para vivir con bienestar” (correcta), “Que nadie se enferme nunca”, “Que solo haya atención para quien pueda pagarla”. Idea: “La salud incluye atención, prevención y condiciones de vida dignas.”
- Paz: “¿Cuál es una forma de construir paz?” Respuestas: “Resolver los conflictos mediante el diálogo y el respeto” (correcta), “Ignorar siempre los problemas”, “Responder a la violencia con más violencia”. Idea: “La paz se construye con diálogo, justicia y cooperación.”
- Dignidad: “¿Qué significa vivir con dignidad?” Respuestas: “Ser tratado con respeto y contar con condiciones básicas para vivir” (correcta), “Tener más cosas que las demás personas”, “Nunca necesitar ayuda”. Idea: “La dignidad pertenece a todas las personas, sin excepción.”

Cuando se pulse una respuesta, marca siempre la respuesta correcta en verde. Si fue correcta, también incrementa “Aciertos” y muestra “✅ ¡Muy bien! ” seguido de la idea clave. Si fue incorrecta, marca la elegida en rojo y muestra “💬 ” seguido de la idea clave. Impide responder de nuevo tras la primera selección. Entonces revela un botón oscuro de ancho completo “SIGUIENTE GIRO”, que cierra el modal y comienza otro giro después de una breve pausa. El botón × y hacer clic fuera del modal deben cerrar la pregunta sin sumar puntos. Mantén el diseño táctil y accesible, con botones grandes y adaptación móvil.