@cesar/render-math-problems (0.0.0-test.10)

Published 2026-06-22 23:21:24 +00:00 by cesar

Set up this registry in your project .npmrc file:

@cesar:registry=

To install the package using npm, run the following command:

npm install @cesar/render-math-problems@0.0.0-test.10

or add it to the package.json file:

"@cesar/render-math-problems": "0.0.0-test.10"

For more information on the npm registry, see the documentation.

render-math-problems

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.

Uso Como Paquete

npm install render-math-problems

Importa el componente y sus estilos:

<script setup>
import { MathProblem } from "render-math-problems";
import "render-math-problems/style.css";

const exercise = {
  exerciseType: "move-blocks",
  layout: "row-answer-right",
  grids: [
    { id: "a", mode: "active", value: 3, label: "3" },
    {
      id: "answer",
      mode: "target",
      label: "Respuesta",
      answerSlot: { from: "any", count: 3 },
    },
  ],
};
</script>

<template>
  <MathProblem
    :exercise="exercise"
    @complete="(result) => console.log(result)"
  />
</template>

También puedes importar el nombre interno del componente:

import { Blocks } from "render-math-problems";

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).

Development Dependencies

ID	Version
@tsconfig/node24	^24.0.4
@types/node	^24.11.0
@vitejs/plugin-vue	^6.0.5
@vue/tsconfig	^0.8.1
npm-run-all2	^8.0.4
typescript	~5.9.3
vite	^7.3.1
vite-plugin-vue-devtools	^8.0.6
vue	^3.5.29
vue-tsc	^3.2.5

Peer Dependencies

ID	Version
vue	^3.5.0

Details

npm

2026-06-22 23:21:24 +00:00

test

57 KiB

Assets (1)

render-math-problems-0.0.0-test.10.tgz 57 KiB

Versions (1) View all

0.0.0-test.10

2026-06-22