Tengo alumnos de Educación Primaria con trastornos del desarrollo del lenguaje.
Actúa como un experto desarrollador de prompts y genera uno para crear una aplicación en html dirigida a niños de Educación Primaria con trastornos del desarrollo del lenguaje.
Quiero que la aplicación elija al azar una de las siguientes 30 frases, muestre las palabras desordenadas y la misión del niño será arrastrar las palabras para colocar la frase correctamente.
Mamá hizo zumo de naranja.
Quiero mucho a mi tía.
Papá se fue a trabajar.
Elena es muy buena chica.
La leche es muy sana.
Me gusta el agua fresca.
Clara es amiga de Ana.
Mi abuelo vive en Madrid.
Pedro cuida de su hermano.
El soldadito perdió su gorro.
Tengo ojos en la cara.
El abuelo Paco fuma tabaco.
El pastel era de crema.
La bruja rompió su escoba.
Comí un flan de huevo.
La tarta es de chocolate.
La primavera la sangre altera.
Jaime me regaló un caballo.
El dragón no arrojó fuego.
Alberto se comió un melocotón.
El elefante juega al tenis.
Los delfines están muy contentos.
Diego compró una moto roja.
El sastre hizo un traje.
El agua es muy sana.
María participó en la carrera.
El gato marrón era peludo.
El tren llegó tarde.
Blancanieves se comió la manzana.
Miguel tiene una bicicleta nueva.
Quiero que cuando ordene una frase le muestre otra hasta un total de cinco veces y después regrese al menú principal. También quiero que si falla nos ofrezca hasta tres oportunidades para hacerlo bien, tras las cuales la aplicación mostrará la frase ordenada correctamente.
Quiero también que la aplicación permita introducir la frase que desee y después aparezca esta desordenada.
La aplicación debe funcionar en tablets, ordenadores, móviles con Android e IOs.
Después de ordenar cada frase que se muestren mensajes motivadores acompañados de pequeñas animaciones.
La aplicación debe incluir: botones grandes, alto contraste, posibilidad de activar/desactivar sonidos, funcionamiento tanto con ratón como con pantalla táctil, orientación horizontal y vertical...
Con una interfaz moderna inspirada en aplicaciones actuales.
La aplicación debe parecer un recurso educativo profesional.
Actúa como un desarrollador front-end experto en aplicaciones educativas inclusivas, especializado en Educación Primaria, trastornos del desarrollo del lenguaje (TDL), accesibilidad cognitiva, diseño UX/UI infantil y tecnología educativa.
Tu tarea es crear una aplicación web educativa profesional en un único archivo HTML autocontenido, destinada a alumnado de Educación Primaria con trastornos del desarrollo del lenguaje.
La aplicación debe trabajar la comprensión de la estructura de las oraciones, el orden sintáctico y la construcción de frases, mediante una actividad visual e interactiva de ordenar palabras desordenadas.
Crea una aplicación web en HTML + CSS + JavaScript, integrada completamente en un único archivo HTML.
La aplicación tendrá dos modos principales:
La aplicación dispondrá de un banco de 30 frases.
En cada partida:
Seleccionará aleatoriamente una frase del banco.
Mostrará sus palabras desordenadas aleatoriamente.
El alumno deberá colocar las palabras en el orden correcto.
Las palabras deberán poder desplazarse mediante:
Ratón.
Pantalla táctil.
Arrastrar y soltar.
Interacción alternativa sencilla para dispositivos en los que el arrastre resulte difícil.
El alumno podrá modificar el orden tantas veces como necesite mientras disponga de oportunidades.
Dispondrá de hasta 3 oportunidades para ordenar correctamente cada frase.
Si acierta:
Mostrar inmediatamente un mensaje positivo.
Reproducir una pequeña animación motivadora.
Mostrar una nueva frase.
Si falla:
Informar de forma amable de que el orden no es correcto.
Indicar las oportunidades restantes.
Permitir volver a intentarlo.
Si después de 3 intentos no consigue ordenar correctamente la frase:
Mostrar la frase correctamente ordenada.
Destacarla visualmente.
Mostrar un mensaje motivador que no resulte penalizador.
Después permitir continuar con la siguiente frase.
La actividad tendrá un máximo de 5 frases por partida.
Al completar las 5 frases, mostrar una pantalla final con:
Número de frases acertadas.
Número de frases que necesitaron ayuda.
Mensaje motivador.
Botón "Volver al menú principal".
Botón "Jugar de nuevo".
No repetir una misma frase dentro de una misma partida siempre que sea posible.
Utiliza exactamente las siguientes frases:
Mamá hizo zumo de naranja.
Quiero mucho a mi tía.
Papá se fue a trabajar.
Elena es muy buena chica.
La leche es muy sana.
Me gusta el agua fresca.
Clara es amiga de Ana.
Mi abuelo vive en Madrid.
Pedro cuida de su hermano.
El soldadito perdió su gorro.
Tengo ojos en la cara.
El abuelo Paco fuma tabaco.
El pastel era de crema.
La bruja rompió su escoba.
Comí un flan de huevo.
La tarta es de chocolate.
La primavera la sangre altera.
Jaime me regaló un caballo.
El dragón no arrojó fuego.
Alberto se comió un melocotón.
El elefante juega al tenis.
Los delfines están muy contentos.
Diego compró una moto roja.
El sastre hizo un traje.
El agua es muy sana.
María participó en la carrera.
El gato marrón era peludo.
El tren llegó tarde.
Blancanieves se comió la manzana.
Miguel tiene una bicicleta nueva.
Conserva correctamente mayúsculas, tildes y signos de puntuación.
El menú principal debe incluir una opción denominada:
"Crear mi propia frase"
Al seleccionarla:
Mostrar un campo de texto grande y fácilmente identificable.
Permitir que el alumno o docente escriba una frase.
Incluir un botón "Preparar frase".
Comprobar que se ha introducido una frase válida.
Dividir automáticamente la frase en palabras.
Desordenar las palabras.
Mostrar la actividad de ordenación exactamente igual que en el modo anterior.
Mantener la puntuación y el sistema de hasta 3 oportunidades.
Una vez completada la frase personalizada, permitir:
Crear otra frase.
Volver al menú principal.
El sistema debe gestionar correctamente frases con signos de puntuación, evitando que la puntuación se convierta en un elemento independiente cuando esto pueda dificultar innecesariamente la actividad.
La pantalla de juego debe ser muy clara y evitar estímulos innecesarios.
Debe presentar:
Número de frase actual: 1 de 5, por ejemplo.
Indicador visual del progreso.
Número de oportunidades restantes.
Botón de sonido.
Botón para volver al menú.
Mostrar un mensaje como:
"Ordena las palabras para formar la frase."
Debajo aparecerán las palabras desordenadas en forma de tarjetas grandes.
Ejemplo:
naranja | Mamá | hizo | zumo | de
El alumno deberá arrastrarlas hasta una zona claramente identificada:
"Coloca aquí las palabras"
La frase se irá construyendo visualmente:
Mamá → hizo → zumo → de → naranja.
Incorpora una interacción drag & drop robusta y táctil, evitando que las palabras sean demasiado pequeñas.
La aplicación debe estar específicamente diseñada teniendo en cuenta las necesidades de alumnado con trastornos del desarrollo del lenguaje.
Aplicar principios de accesibilidad cognitiva y diseño universal para el aprendizaje (DUA).
Instrucciones muy breves y claras.
Una única tarea principal en cada pantalla.
Lenguaje sencillo.
Tipografía grande y muy legible.
Excelente contraste.
Botones grandes.
Elementos visuales claramente diferenciados.
Evitar exceso de información simultánea.
Evitar animaciones que distraigan durante la actividad.
Utilizar iconos acompañados de texto.
Mantener una estructura visual consistente.
No depender exclusivamente del color para comunicar información.
Ofrecer feedback inmediato.
Utilizar mensajes positivos y comprensibles.
Evitar mensajes como "Incorrecto", "Has fallado" o "Mal".
Preferir expresiones como:
"Casi lo tienes."
"Prueba otra vez."
"Vamos a intentarlo de nuevo."
"¡Muy bien!"
"¡Lo has conseguido!"
Después de cada frase completada correctamente, mostrar una pequeña animación motivadora.
Ejemplos:
Estrellas que aparecen brevemente.
Confeti discreto.
Una mascota educativa que realiza una pequeña animación.
Destellos alrededor de la frase.
Una insignia de éxito.
Las animaciones deben ser:
Cortas.
Suaves.
No invasivas.
No bloquear la interacción.
No dificultar la lectura.
Mostrar mensajes motivadores variados para evitar que aparezca siempre el mismo.
Ejemplos:
"¡Muy bien!"
"¡Excelente trabajo!"
"¡Lo has conseguido!"
"¡Genial!"
"¡Qué bien has ordenado la frase!"
"¡Sigue así!"
"¡Cada vez lo haces mejor!"
No utilizar siempre el mismo mensaje.
Incluir un botón claramente visible para:
🔊 Sonido activado / 🔇 Sonido desactivado
El sonido debe poder activarse o desactivarse en cualquier momento.
Cuando esté activado:
Emitir un sonido agradable al acertar.
Utilizar un sonido diferente y suave cuando sea necesario volver a intentarlo.
Opcionalmente, reproducir instrucciones mediante síntesis de voz.
No utilizar sonidos estridentes.
La aplicación debe funcionar perfectamente aunque el sonido esté desactivado.
La aplicación debe funcionar correctamente en:
Ordenadores Windows.
macOS.
Chromebooks.
Tablets.
Smartphones Android.
iPhone.
iPad.
Debe ser completamente responsive y adaptarse automáticamente al tamaño de la pantalla.
Debe funcionar tanto en:
Orientación vertical.
Orientación horizontal.
La interfaz debe reorganizarse automáticamente para aprovechar correctamente el espacio disponible.
Implementa, como mínimo:
HTML semántico.
ARIA cuando sea necesario.
Navegación mediante teclado.
focus visible.
Orden lógico de navegación.
Etiquetas accesibles.
Botones suficientemente grandes.
Contraste mínimo WCAG 2.2 AA, procurando niveles superiores cuando sea posible.
Compatibilidad con lectores de pantalla.
Uso correcto de aria-live para comunicar cambios importantes.
No utilizar únicamente el color para indicar aciertos o errores.
Respetar la preferencia prefers-reduced-motion.
Evitar elementos que puedan provocar problemas de accesibilidad.
El sistema de arrastrar palabras debe contar con una alternativa accesible al drag & drop, por ejemplo mediante selección de una palabra y posterior selección de la posición de destino, para que el ejercicio no dependa exclusivamente de la precisión motora.
La aplicación debe tener apariencia de recurso educativo profesional actual, no de una página web básica.
Inspirarse visualmente en aplicaciones educativas modernas.
Utilizar:
Tarjetas.
Bordes redondeados.
Sombras suaves.
Espaciado generoso.
Jerarquía visual clara.
Botones grandes.
Iconografía sencilla.
Animaciones sutiles.
Diseño limpio.
La estética debe resultar apropiada para alumnado de Educación Primaria, evitando tanto un aspecto excesivamente infantil como un diseño demasiado adulto.
Utilizar una paleta de colores con alto contraste y buena legibilidad.
Crear una pantalla inicial atractiva con el título:
"¡Ordenamos las frases!"
Subtítulo:
"Construye cada frase colocando las palabras en el orden correcto."
Incluir dos botones principales:
Comienza una partida con las frases propuestas.
Permite introducir una frase personalizada.
También incluir:
Botón de sonido.
Información breve sobre cómo jugar.
Diseño visual limpio.
Todo debe estar contenido en un único archivo .html.
No utilizar:
Frameworks externos.
Librerías externas.
CDN.
APIs externas.
Fuentes externas.
Imágenes externas.
Dependencias que requieran conexión a Internet.
La aplicación debe funcionar offline una vez abierto el archivo HTML.
Utiliza únicamente:
HTML.
CSS.
JavaScript nativo.
El código debe estar organizado y comentado para facilitar su posterior modificación por un docente.
Implementar correctamente:
Selección aleatoria.
Barajado de palabras.
Comparación de la respuesta del alumno con la solución.
Control de intentos.
Máximo de 3 oportunidades por frase.
Avance automático a la siguiente frase después de completar una actividad.
Máximo de 5 frases por partida.
Reinicio correcto de los intentos al comenzar una nueva frase.
Reinicio correcto de la partida.
Modo de frases personalizadas independiente del banco de 30 frases.
La comparación debe ser robusta y tolerar pequeñas diferencias irrelevantes, pero no debe aceptar como correcta una frase cuyo orden sintáctico sea incorrecto.
Al terminar las 5 frases, mostrar una pantalla de resultados atractiva.
Incluir:
"¡Partida terminada!"
Mostrar:
Frases completadas correctamente en el primer intento.
Frases completadas después de varios intentos.
Frases en las que fue necesario mostrar la solución.
Número total de frases realizadas.
Mensaje motivador personalizado según el resultado.
Ejemplo:
"¡Muy buen trabajo! Has conseguido ordenar 4 de 5 frases sin ayuda."
Incluir:
"Jugar de nuevo"
"Volver al menú"
La aplicación final debe:
Ser completamente funcional, no un prototipo.
Incluir las 30 frases indicadas.
Seleccionar las frases aleatoriamente.
Desordenar correctamente las palabras.
Permitir arrastrarlas con ratón y táctil.
Incorporar una alternativa accesible al arrastre.
Permitir hasta 3 intentos.
Mostrar la solución después del tercer intento.
Realizar partidas de exactamente 5 frases.
Permitir introducir frases personalizadas.
Mostrar feedback motivador después de cada frase.
Incorporar pequeñas animaciones.
Permitir activar/desactivar sonidos.
Ser responsive.
Funcionar en horizontal y vertical.
Ser accesible y usable por alumnado con TDL.
Tener una interfaz moderna y profesional.
Funcionar completamente offline.
No contener código incompleto, funciones simuladas ni textos como "aquí añadir más frases".
No depender de recursos externos.
Antes de proporcionar el código, realiza una revisión completa y comprueba internamente que:
Las 30 frases están incluidas.
Todas las frases pueden desordenarse correctamente.
La puntuación permanece correctamente asociada a la última palabra.
Las tildes y caracteres españoles funcionan correctamente.
Las frases personalizadas funcionan.
Los intentos se reinician correctamente en cada frase.
La partida termina después de 5 frases.
El menú principal funciona.
El botón de volver funciona.
El botón de sonido funciona.
Las animaciones funcionan.
El sistema táctil funciona.
El sistema de teclado funciona.
La interfaz se adapta a móvil, tablet y ordenador.
La orientación vertical y horizontal funciona.
No existen errores de JavaScript.
No existen botones sin funcionalidad.
No existen dependencias externas.
El archivo puede ejecutarse directamente abriéndolo en un navegador sin servidor.
Entrega finalmente el código HTML completo, autocontenido y listo para guardar como ordenamos-frases.html y ejecutar directamente en el navegador.