6b195e88c0
Add functioning exercise components for support. Includes test exercises to make sure they work. ComposeDecompose: Takes a value and shows exercise with 2 inputs and hints automaticly. Can change the ammount of options it has. Connectlines: Exercise to connect between eachother. Has two modes, sum and picture, sum uses a 1+1 style of options, and picture uses the grid layout for more complexity. Picture in the middle is currently default blocks, this has to be conversed of how it should be displayed. PictureChoose.vue: This one shows grid with the first and second value, the correct answer must have a boolean value stating this is the correct one. Substractvisual.vue: This one is the most loose, as it only uses the grids as visuals and answer purposes. Not more than that. Wheremore.vue: Has two modes, less or more (if non it defaults to more), Takes a left value and a right value to create the execise. Examples of the structure are detailed in each component. And app.vue has demo exercises for testing and visual purposes.
BlockSystem
BlockSystem es una aplicación educativa interactiva construida con Vue 3, centrada en el componente Blocks.vue. Este componente permite a los usuarios colocar, arrastrar, agrupar y dividir bloques unitarios en una cuadrícula, fomentando la intuición matemática sobre agrupamiento y valor posicional (unidades y decenas).
La aplicación incluye una interfaz completa con modos de demostración y ejercicios prácticos de suma, diseñada para apoyar el aprendizaje de conceptos matemáticos básicos de manera visual e interactiva.
App.vue sirve como implementación de referencia, mostrando cómo integrar y configurar Blocks.vue en una aplicación real, incluyendo configuraciones avanzadas y ejercicios educativos. El proyecto ahora documenta con más precisión el uso del modo inline para mostrar grids compactos en la demo de ejercicios, y mantiene initialBlocks como una forma general de precargar grupos de bloques sin depender de un layout fijo. La demo de ejercicios también incluye una zona de dropzone visual junto al grid para validar la respuesta al soltar la solución final.
Para detalles de la API y configuración de Blocks.vue, consulta src/README.md.
Requisitos
Antes de ejecutar el proyecto, asegúrate de tener instalados:
- Node.js (versión recomendada: 18+)
- npm o yarn
Puedes descargar Node.js desde: https://nodejs.org/
Configuración
Navega al directorio raíz del proyecto y ejecuta el siguiente comando en la terminal:
npm install
Este comando instalará automáticamente Vue, Vite, TypeScript y las configuraciones necesarias de @vue/tsconfig para el proyecto.
Ejecutar la Aplicación
Para iniciar el servidor de desarrollo, ejecuta:
npm run dev
Esto lanzará la aplicación en modo desarrollo utilizando Vite.
Configuración Recomendada del IDE
VS Code + Vue (Official) (y desactiva Vetur).