Prompt para asociar número y cantidad
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 y su misión será asociar número con cantidad.
Quiero que la aplicación muestre varios conjuntos que incluirán entre 0 y 10 elementos iguales. Así como varios números y el niño tendrá que arrastrar el número hasta el conjunto que tiene esa misma cantidad de objetos.
Usa gran variedad de objetos que sean de calidad y atractivos para los niños.
Realiza estas tareas:
Muestra una pantalla inicial con el título de la aplicación.
Quiero que al pulsar sobre un número nos lo diga o al pulsar sobre un conjunto nos el número de elementos que contiene.
Quiero que cuando resuelva las actividades de la pantalla aparezca otra y repita el proceso hasta 5 veces, aunque habrá un botón para regresar al menú.
Después de resolver las actividades de la pantalla que se muestren mensajes motivadores acompañados de pequeñas animaciones.
Quiero que al finalizar las 5 pantallas me de estadísticas con los resultados. Estos resultados se deben ir guardando para poder ver los resultados globales.
La aplicación debe funcionar en tablets, ordenadores, móviles con Android e IOs.
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.
Optimiza el prompt para hacerlo mejor y hazme las preguntas que consideres necesarias antes de proceder.
Actúa como un equipo multidisciplinar formado por un desarrollador experto en HTML, CSS y JavaScript, un diseñador UX/UI especializado en aplicaciones educativas infantiles, un especialista en accesibilidad digital y un profesional de la educación en Educación Primaria.
Tu misión es crear una aplicación educativa profesional, atractiva, moderna, accesible y completamente funcional dirigida a alumnado de Educación Primaria.
La aplicación tendrá como objetivo principal desarrollar y reforzar la comprensión de la relación entre número y cantidad, trabajando con cantidades comprendidas entre 0 y 10.
El alumnado deberá observar diferentes conjuntos de objetos y asociarlos correctamente con su número correspondiente mediante una interacción intuitiva de arrastrar y soltar.
La aplicación debe cumplir obligatoriamente los siguientes requisitos:
Estar creada en un único archivo HTML autocontenido.
Incluir dentro del propio archivo todo el HTML, CSS y JavaScript necesario.
No depender de servidores, bases de datos ni APIs externas.
No requerir instalación.
Funcionar directamente al abrir el archivo en un navegador moderno.
Ser compatible con:
Ordenadores.
Tablets.
Teléfonos Android.
iPhone y otros dispositivos iOS.
Funcionar correctamente tanto en orientación:
Vertical.
Horizontal.
Ser totalmente responsive y adaptar automáticamente la distribución de los elementos al tamaño y orientación de la pantalla.
No utilizar funcionalidades que dependan exclusivamente de drag and drop nativo si esto puede provocar problemas en dispositivos táctiles.
Implementar una interacción personalizada compatible con:
Ratón.
Pantalla táctil.
Teclado, en la medida de lo posible.
Guardar las estadísticas globales mediante localStorage.
No entregues explicaciones teóricas ni fragmentos incompletos. Entrega directamente el código HTML completo y funcional, listo para guardar como archivo .html y ejecutar.
La aplicación tendrá un nombre atractivo para niños y niñas de Educación Primaria.
Propón un título llamativo relacionado con los números y las cantidades. El título debe aparecer acompañado de una estética visual atractiva, moderna y profesional.
La pantalla inicial incluirá:
Título de la aplicación.
Una ilustración o elemento visual relacionado con los números y las cantidades.
Una explicación breve y clara de la actividad.
Un botón grande y destacado: «Comenzar».
Un botón de «Configuración».
Un botón de «Estadísticas globales».
Un control visible para activar o desactivar los sonidos.
La instrucción principal debe explicar de forma sencilla algo similar a:
«Observa los conjuntos y arrastra cada número hasta el grupo que tenga esa misma cantidad de objetos.»
La interfaz deberá ser comprensible para alumnado de Educación Primaria sin necesidad de instrucciones complejas.
La aplicación debe permitir al usuario configurar la actividad antes de iniciar una partida.
Debe existir una sección de configuración clara, sencilla y visual.
El usuario podrá elegir el rango de números con el que desea trabajar.
Por ejemplo:
Del 0 al 3.
Del 0 al 5.
Del 0 al 10.
También podrá seleccionar libremente un rango personalizado dentro de los números del 0 al 10.
La interfaz de configuración debe impedir configuraciones incorrectas.
Por ejemplo, el valor mínimo nunca podrá ser superior al máximo.
También debe existir la posibilidad de seleccionar el número de rondas que tendrá la partida.
El usuario podrá elegir, por ejemplo:
3 rondas.
5 rondas.
10 rondas.
La opción predeterminada será 5 rondas.
Cada ronda incluirá:
4 conjuntos de objetos.
6 números disponibles.
De los 6 números mostrados:
4 corresponderán correctamente a los 4 conjuntos.
2 serán números distractores.
Los números distractores deben seleccionarse de forma inteligente para que estén dentro del rango configurado y no coincidan con las cantidades presentes.
No deben aparecer números repetidos dentro de una misma ronda.
Cada ronda debe generarse automáticamente de forma aleatoria.
Los cuatro conjuntos deberán contener cantidades diferentes.
La cantidad de elementos de cada conjunto deberá respetar siempre el rango seleccionado por el usuario.
Por ejemplo, si se selecciona trabajar del 0 al 5, los conjuntos podrían contener:
0 objetos.
2 objetos.
4 objetos.
5 objetos.
Los cuatro números correctos deberán aparecer mezclados aleatoriamente junto con dos números distractores.
Cada nueva ronda deberá ser diferente.
Siempre que sea posible, evitar repetir exactamente la misma combinación de cantidades y objetos dentro de una misma partida.
Utiliza una amplia variedad de objetos infantiles visualmente atractivos.
Los objetos deben tener un estilo de ilustración infantil de calidad, pero con una apariencia reconocible y relativamente realista.
Usa exclusivamente las 19 imágenes que encontrarás en la siguiente URL: https://disanedu.linexedu.eu/aplicaciones/inteligencia/numeros/ (pollito.png, perro.png, pez.png, plátano.png, taza.png, árbol.png, balón.png, coche.png, delfín.png, estrella.png, flor.png, fresa.png, globo.png, hoja.png, lápiz.png, león.png, manzana.png, moto.png, oso.png)
Cada conjunto deberá utilizar un mismo tipo de objeto.
Por ejemplo:
5 manzanas.
3 coches.
7 estrellas.
2 balones.
En una misma pantalla, los conjuntos deben utilizar objetos visualmente diferentes entre sí.
Los objetos de cada conjunto no deben aparecer siempre perfectamente alineados.
Combina:
Posiciones ligeramente variables.
Pequeñas diferencias de ubicación.
Una distribución natural y atractiva.
Sin embargo:
Los objetos nunca deben solaparse.
Debe mantenerse una separación clara.
El niño debe poder contar fácilmente los elementos.
La disposición nunca debe dificultar la identificación de la cantidad.
Los objetos deben tener un tamaño suficientemente grande, especialmente en dispositivos móviles.
El diseño debe evitar que el tamaño total ocupado por un conjunto permita adivinar fácilmente la cantidad sin contar.
Cuando aparezca el número 0, deberá existir un conjunto específico representado mediante una caja o contenedor visualmente atractivo pero completamente vacío.
La caja debe dejar claro que no contiene ningún objeto.
Puede incluir una representación visual suave relacionada con el concepto de vacío, pero no debe mostrar elementos que puedan confundirse con objetos contables.
Al pulsar sobre este conjunto, la locución deberá indicar claramente:
«No hay ningún objeto. Hay cero.»
El funcionamiento principal será el siguiente:
El niño observa los cuatro conjuntos de objetos.
También observa los seis números disponibles.
Puede pulsar sobre cualquier número para escuchar su nombre.
Puede pulsar sobre cualquier conjunto para escuchar cuántos elementos contiene.
El niño debe arrastrar cada número correcto hasta el conjunto que tenga esa cantidad.
Ejemplos de locución:
Al pulsar sobre el número 4: «Cuatro».
Al pulsar sobre un conjunto de 4 pelotas: «Hay cuatro pelotas».
Al pulsar sobre un conjunto de 1 flor: «Hay una flor».
La aplicación debe utilizar la API de síntesis de voz del navegador.
La voz debe configurarse preferentemente en español de España (es-ES).
Si existen varias voces disponibles, seleccionar preferentemente una voz española de calidad.
La síntesis de voz debe funcionar únicamente cuando el sonido esté activado.
La interacción de arrastre debe funcionar correctamente tanto con:
Ratón.
Pantalla táctil.
No depender exclusivamente de la implementación tradicional HTML5 Drag and Drop.
Utilizar eventos compatibles con dispositivos modernos, preferentemente mediante:
Pointer Events.
Eventos táctiles cuando sea necesario.
Cuando el niño arrastre un número:
El número debe seguir visualmente al dedo o al puntero.
Debe existir una retroalimentación visual clara.
Los conjuntos deben resaltar cuando el número pueda soltarse sobre ellos.
También debe existir una alternativa accesible para dispositivos o usuarios que tengan dificultades para arrastrar:
Pulsar un número para seleccionarlo.
Pulsar posteriormente un conjunto.
La aplicación interpretará esta acción como una asociación.
El número seleccionado debe quedar claramente resaltado.
La aplicación no debe indicar inmediatamente si cada asociación es correcta o incorrecta.
El niño podrá colocar los números sobre los conjuntos y revisar visualmente sus decisiones.
Debe existir un botón grande y claramente visible:
Cuando el niño pulse este botón, la aplicación comprobará las cuatro asociaciones.
Los números distractores que no hayan sido utilizados no deben contar como error.
Cada ronda tendrá un máximo de 3 intentos para resolver la actividad.
Cuando el niño pulse «Comprobar resultados»:
Las asociaciones correctas deben recibir una confirmación visual positiva.
Las asociaciones incorrectas deben recibir una indicación visual suave.
Los números correctamente asociados deben quedar fijados o bloqueados.
Las asociaciones incorrectas deben poder modificarse.
No utilizar mensajes negativos, castigadores o frustrantes.
Mostrar un mensaje motivador como:
«¡Buen trabajo! Algunas asociaciones están correctas. Vamos a intentarlo de nuevo.»
El funcionamiento será similar:
Mantener bloqueadas las respuestas correctas.
Permitir modificar únicamente las incorrectas.
Mostrar una retroalimentación motivadora.
Ejemplos:
«¡Estás muy cerca! Observa los grupos y vuelve a contar con calma.»
«¡Sigue así! Cada intento te ayuda a aprender.»
Si después del tercer intento todavía existen asociaciones incorrectas:
Mostrar claramente la solución correcta.
Colocar automáticamente los números correctos en sus conjuntos.
Explicar oralmente, si el sonido está activado, la cantidad de cada conjunto.
Por ejemplo:
«Este grupo tiene cinco manzanas, por eso corresponde al número cinco.»
Nunca utilizar mensajes de fracaso.
La filosofía de la aplicación debe centrarse en:
El aprendizaje.
El esfuerzo.
La mejora.
La repetición positiva.
Después de resolver cada ronda, mostrar un mensaje motivador.
Los mensajes deben variar aleatoriamente.
Ejemplos:
«¡Fantástico!»
«¡Muy bien hecho!»
«¡Estás aprendiendo muchísimo!»
«¡Genial! Sigue así.»
«¡Cada intento te hace mejorar!»
«¡Excelente trabajo!»
«¡Lo estás haciendo fenomenal!»
Acompañar los mensajes con animaciones breves, alegres y no excesivamente distractoras.
Por ejemplo:
Aparición de estrellas.
Confeti moderado.
Pequeños saltos.
Medallas.
Destellos.
Números que celebran.
Las animaciones deben durar poco tiempo y respetar la configuración de reducción de movimiento del dispositivo.
Después de unos segundos, mostrar un botón claro para:
No avanzar automáticamente si el usuario no lo solicita expresamente.
Durante la partida debe existir un botón visible para:
Antes de abandonar una partida en curso, solicitar confirmación mediante un mensaje claro:
«¿Quieres volver al menú? La ronda actual se perderá.»
Ofrecer:
«Continuar jugando».
«Volver al menú».
El botón debe ser accesible y no colocarse demasiado cerca de las acciones principales para evitar pulsaciones accidentales.
Cuando se complete el número de rondas seleccionado, mostrar una pantalla final atractiva y motivadora.
El mensaje principal debe variar según el resultado, pero siempre debe ser positivo.
Ejemplos:
«¡Reto completado!»
«¡Has terminado todas las rondas!»
«¡Magnífico trabajo! Sigue practicando.»
Mostrar una animación final breve y agradable.
Incluir botones grandes para:
«Jugar de nuevo».
«Volver al menú».
«Ver estadísticas».
Al finalizar una partida, mostrar:
Número total de rondas.
Número total de asociaciones.
Número de aciertos.
Número de errores.
Número total de intentos utilizados.
Porcentaje de acierto.
Tiempo total empleado.
Racha máxima de respuestas correctas.
Número de actividades resueltas en el primer intento.
Número de actividades resueltas en el segundo intento.
Número de actividades que necesitaron mostrar la solución.
Información sobre la mejora durante la partida.
No utilizar una puntuación competitiva basada en puntos.
La aplicación debe centrarse en la mejora personal.
Presentar los datos mediante:
Tarjetas visuales.
Iconos.
Barras de progreso.
Indicadores claros.
Evitar tablas complejas.
Los resultados de cada partida deben guardarse automáticamente mediante localStorage.
La sección «Estadísticas globales» debe mostrar:
Número total de partidas realizadas.
Número total de rondas completadas.
Número total de asociaciones realizadas.
Total de aciertos.
Total de errores.
Porcentaje global de acierto.
Tiempo total acumulado.
Racha máxima histórica.
Número de actividades resueltas al primer intento.
Número de actividades resueltas al segundo intento.
Número de actividades que necesitaron mostrar la solución.
Evolución y mejora del rendimiento.
Mostrar también un historial de las últimas partidas.
Cada registro puede incluir:
Fecha.
Número de rondas.
Porcentaje de acierto.
Tiempo empleado.
Incluir un botón:
Antes de borrar la información, solicitar confirmación.
La interfaz debe estar inspirada en aplicaciones educativas infantiles actuales y de aspecto profesional.
El resultado debe parecer un recurso educativo desarrollado profesionalmente, no un simple ejercicio web.
Características del diseño:
Moderno.
Limpio.
Alegre.
Visualmente atractivo.
Intuitivo.
Ordenado.
Con suficiente espacio entre elementos.
Utilizar:
Tarjetas con bordes redondeados.
Sombras suaves.
Animaciones discretas.
Jerarquía visual clara.
Tipografía grande y legible.
Botones grandes.
Elementos táctiles amplios.
El diseño debe evitar:
Saturación visual.
Exceso de colores.
Animaciones continuas innecesarias.
Elementos demasiado pequeños.
Pantallas sobrecargadas.
Mantener un aspecto infantil sin que resulte excesivamente infantilizado.
La aplicación debe diseñarse siguiendo buenas prácticas de accesibilidad.
Incluir:
Alto contraste.
Texto grande y fácilmente legible.
Botones grandes.
Áreas táctiles amplias.
Estados de foco claramente visibles.
Navegación mediante teclado.
Etiquetas ARIA adecuadas.
Información comprensible para lectores de pantalla.
No depender únicamente del color para comunicar aciertos o errores.
Indicadores visuales acompañados de texto, iconos o cambios de forma.
Compatibilidad con ratón y pantalla táctil.
Alternativa al arrastre mediante selección y pulsación.
Respeto a prefers-reduced-motion.
Posibilidad de activar o desactivar los sonidos.
Posibilidad de utilizar la aplicación correctamente en orientación vertical y horizontal.
Mantener, siempre que sea posible, criterios equivalentes a WCAG 2.2 AA.
La aplicación debe incluir un botón global para:
Activar sonido.
Desactivar sonido.
El estado debe mantenerse durante toda la partida.
Cuando el sonido esté activado, se podrán utilizar:
Locuciones mediante síntesis de voz.
Pequeños sonidos de interacción.
Sonidos positivos y discretos al completar actividades.
Los sonidos no deben reproducirse automáticamente de forma invasiva.
La aplicación debe seguir funcionando completamente aunque el sonido esté desactivado.
La disposición de los cuatro conjuntos y los seis números debe adaptarse automáticamente.
En pantallas grandes:
Aprovechar el espacio disponible.
Mostrar los conjuntos de forma clara y equilibrada.
En tablets:
Mantener elementos grandes y fácilmente manipulables.
En teléfonos móviles:
Reorganizar los elementos verticalmente cuando sea necesario.
Evitar que los objetos sean demasiado pequeños.
Mantener siempre visible o fácilmente accesible el botón «Comprobar resultados».
No utilizar dimensiones rígidas que provoquen desplazamiento horizontal innecesario.
El código debe:
Estar correctamente estructurado.
Ser fácil de mantener.
Estar comentado en las partes importantes.
Separar claramente:
Datos.
Estado de la aplicación.
Generación de rondas.
Interacción.
Comprobación.
Estadísticas.
Persistencia mediante localStorage.
Síntesis de voz.
Accesibilidad.
Evitar duplicaciones innecesarias.
Crear funciones reutilizables.
Gestionar correctamente:
Eventos táctiles.
Eventos de ratón.
Eventos de teclado.
Redimensionamiento de pantalla.
Cambio de orientación.
Antes de entregar el código, revisa cuidadosamente que:
La aplicación funcione en un único archivo HTML.
No existan dependencias externas obligatorias.
Se puedan seleccionar los rangos numéricos.
Se pueda elegir el número de rondas.
Cada ronda tenga exactamente 4 conjuntos y 6 números.
Existan exactamente 4 números correctos y 2 distractores.
Los cuatro conjuntos tengan cantidades diferentes.
Los números distractores no coincidan con ninguna cantidad presente.
Se pueda trabajar con cantidades entre 0 y 10.
El número 0 se represente mediante una caja vacía atractiva.
Al pulsar un número se escuche su nombre.
Al pulsar un conjunto se indique oralmente su cantidad.
Se utilice preferentemente una voz en español de España (es-ES).
La interacción funcione con ratón y pantalla táctil.
Exista una alternativa al arrastre mediante pulsación.
Exista un botón «Comprobar resultados».
Cada ronda permita un máximo de 3 intentos.
Las respuestas correctas queden bloqueadas.
Las respuestas incorrectas puedan corregirse.
Tras el tercer intento se muestre automáticamente la solución correcta.
Se utilicen mensajes siempre positivos y centrados en el aprendizaje.
Se muestren animaciones breves y no excesivamente distractoras.
Se puedan realizar varias rondas.
El usuario pueda elegir el número de rondas.
Se muestren estadísticas completas al finalizar.
Las estadísticas globales se guarden mediante localStorage.
Exista un historial de partidas.
Se pueda borrar el historial previa confirmación.
La aplicación sea responsive.
Funcione en ordenadores, tablets, Android e iOS.
Funcione correctamente en orientación vertical y horizontal.
Los botones sean grandes y accesibles.
Exista alto contraste.
Se respeten las preferencias de reducción de movimiento.
El resultado tenga una apariencia de aplicación educativa profesional y moderna.
No entregar pseudocódigo.
No dejar funcionalidades como simples ejemplos o marcadores pendientes.
Entregar el archivo HTML completo, funcional y listo para usar.
Antes de generar la respuesta definitiva, revisa el código completo como si fueras a probarlo en un navegador.
Comprueba especialmente:
Que no haya errores de JavaScript.
Que todas las pantallas puedan abrirse y cerrarse correctamente.
Que el sistema de arrastre funcione también mediante Pointer Events.
Que la alternativa de selección mediante pulsación funcione.
Que el botón «Comprobar resultados» aplique correctamente el sistema de tres intentos.
Que las respuestas correctas permanezcan bloqueadas.
Que la solución aparezca correctamente en el tercer intento.
Que las estadísticas se calculen correctamente.
Que localStorage guarde y recupere correctamente el historial.
Que la síntesis de voz no produzca errores si no hay una voz es-ES disponible.
Que la aplicación pueda utilizarse con el sonido desactivado.
Que el diseño se adapte a móvil, tablet y ordenador.
Que no haya elementos importantes fuera de la pantalla.
Que todos los controles principales sean utilizables mediante pantalla táctil.
Entrega exclusivamente el código HTML completo dentro de un único bloque de código, sin explicaciones adicionales antes ni después.
Instrucciones para asociar número y cantidad
Siguiendo con el html y utilizando las imágenes ya subidas quiero una nueva aplicación en la que haya un menú inicial para seleccionar entre estas 4 opciones:
Comparar número-número
Comparar cantidad-cantidad
Comparar número-cantidad
Comparar cantidad-número
Las imágenes las tienes en esta URL: https://disanedu.linexedu.eu/aplicaciones/inteligencia/numeros/
Crea el html así:
Arrastraremos los símbolos matemáticos clásicos (<, >, =) hacia un recuadro central vacío.
Coloca las imágenes de forma aleatoria y natural, pero sin solaparse (como en el juego anterior).
Coloca siempre el mismo objeto en ambos lados (ej. manzanas a la izquierda y manzanas a la derecha).
Mantenemos el mismo menú de configuración que en el juego anterior.
Replicamos el sistema pedagógico que ya creamos. (3 intentos por ronda: 1º y 2º intento con feedback positivo y oportunidad de corregir, 3º intento mostrando la solución correcta animada y con explicación oral).
Optimiza el prompt para hacerlo mejor y hazme las preguntas que consideres necesarias antes de proceder.