Generador HTML de Matemáticas — GEDparaHispanos

Generador de cuestionarios interactivos de matemáticas en formato HTML autocontenido, con feedback inteligente para cada respuesta. Ideal para publicar en GEDparaHispanos o cualquier sitio web.

---

📋 Descripción

Esta aplicación genera cuestionarios interactivos de matemáticas para estudiantes hispanohablantes que preparan el examen GED. Cada pregunta incluye feedback específico para cada opción de respuesta — incluso para los distractores — explicando el error concreto que produce esa respuesta.

La app produce archivos HTML autocontenidos que se pueden alojar en GitHub Pages, Netlify, o cualquier servidor estático, sin necesidad de backend.

✨ Características principales

• 4 tipos de pregunta: Opción múltiple, respuesta múltiple, verdadero/falso, respuesta corta numérica
• 5 áreas matemáticas: Aritmética, Álgebra, Geometría, Estadística y Probabilidad, Funciones y Gráficas, Mixto
• 4 enfoques: Problemas de palabras, cálculo directo, conceptual, análisis de datos
• 4 niveles de dificultad: Básico (GED Nivel 1), Intermedio (GED Nivel 2), Avanzado (GED Nivel 3), Experto
• Feedback inteligente: Cada opción incluye una explicación del error específico o la razón de la respuesta correcta
• Pasos de solución: Opcionalmente muestra el procedimiento para resolver cada problema
• Soporte de PDFs: Carga hasta 5 PDFs como fuente de contenido para generar preguntas
• Renderizado LaTeX: Fórmulas matemáticas renderizadas con MathJax 3
• Vista previa en vivo: Prueba el cuestionario directamente en la app antes de descargarlo
• Diseño responsivo: Los cuestionarios generados se adaptan a móvil y escritorio
• HTML autocontenido: Un solo archivo .html con todo el CSS, JS y datos embebidos

🚀 Dos versiones disponibles

Esta aplicación existe en dos versiones que se conectan a proveedores de IA distintos:

Versión Descartes

La versión original utiliza la API de Proyecto Descartes (node.proyectodescartes.org) como intermediario para acceder a modelos de IA de Pollinatrions AI. No requiere configuración alguna: funciona directamente abriendo index.html.

Usuario → index.html → API Descartes → Modelo de IA → Respuesta

Versión Groq

La versión alternativa (groq.html) se conecta directamente a la API de Groq, un proveedor de inferencia LLM de muy baja latencia. Requiere que el usuario proporcione su propia API Key.

Usuario → groq.html → API de Groq (con API Key) → Respuesta

Modelos disponibles en la versión Groq:

Nota: La versión actual del archivo index.html está configurada para usar la API de Groq (BYOP).

---

📁 Estructura del proyecto

167_Generador_HTML_de_matematicas-Groq/
├── index.html        # App principal (configurada con Groq BYOP)
├── modelo.html       # App alternativa (Escritor de artículos con Groq BYOP)
├── script.js         # Lógica de generación de cuestionarios y llamada a la API
├── styles.css        # Estilos de la interfaz (tema oscuro)
└── README.md         # Este archivo

🛠️ Instalación y uso

Requisitos

• Un navegador web moderno (Chrome, Firefox, Edge, Safari)
• Conexión a Internet (para la API de IA, MathJax y PDF.js)

Pasos

1. Clona o descarga esta carpeta en tu equipo.

2. Abre index.html directamente en tu navegador (doble clic o file://).

3. Configura tu API Key de Groq:

   • Si usas la versión Groq, pega tu clave en el campo "🔑 Configuración de API Key (Groq)"*
   • Obtén una API Key gratuita en console.groq.com/keys.
   • La clave se guarda automáticamente en localStorage del navegador.

4. Configura los parámetros del cuestionario:

   • Tipo de pregunta, cantidad (1-10), área matemática, modelo de IA, enfoque, dificultad y título.

5. Describe el tema en el chat o carga PDFs como fuente de contenido.

6. Pulsa "Generar" y espera la respuesta de la IA.

7. Vista previa: Pulsa "👁️ Vista previa" para probar el cuestionario en el navegador.

8. Descargar: Pulsa "📥 Descargar HTML" para obtener el archivo .html autocontenido.

---

🧮 Formato de las preguntas generadas

La IA genera preguntas en un formato estructurado que la app parsea automáticamente:

Opción múltiple

1. ¿Cuál es el valor de x en la ecuación 2x + 5 = 15?
*a) 5 || FB: Correcto: al restar 5 a ambos lados queda 2x = 10, luego x = 5.
b) 10 || FB: Error: no dividiste entre 2; 10 es el valor de 2x, no de x.
c) 7.5 || FB: Error: calculaste 15/2 pero olvidaste restar 5 primero.
d) 2 || FB: Error: restaste 3 en lugar de 5.

Verdadero / Falso

1. El teorema de Pitágoras solo aplica a triángulos equiláteros. (FALSO) || FB_VERDADERO: El teorema aplica a triángulos rectángulos. || FB_FALSO: Correcto, es para triángulos rectángulos, no equiláteros.

Respuesta corta

blank 1. Resuelve: $3x = 21$
RESPUESTA: 7
FB_ACIERTO: ¡Correcto! Dividiste ambos lados entre 3.
FB_ERROR: Divide ambos lados de la ecuación entre 3: $x = 21 / 3 = 7$.

---

📐 Renderizado matemático

Los cuestionarios generados utilizan MathJax 3 para renderizar fórmulas LaTeX. Ejemplos:

• Fracciones: $\frac{a}{b}$
• Potencias: $x^2$
• Raíces: $\sqrt{y}$
• Ecuaciones: $2x^2 + 3x - 1 = 0$
• Display: $$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

---

🔒 Privacidad

• Versión Groq: La API Key se almacena únicamente en el localStorage del navegador del usuario. Nunca se envía a terceros ni se almacena en servidores propios.
• Versión Descartes: Los prompts se envían a los servidores de Proyecto Descartes.
• Los cuestionarios generados son archivos HTML estáticos: no requieren conexión alguna para funcionar una vez descargados.

---

📝 Créditos

• Generador de cuestionarios: José M. Fernández (Zhema)
• Plataforma: GEDparaHispanos
• IA: Modelos de lenguaje accesibles vía API de Groq / Proyecto Descartes
• Renderizado matemático: MathJax 3
• Procesamiento de PDFs: PDF.js

---

📄 Licencia

Este proyecto es de código abierto. Úsalo, modíficalo y compártelo libremente para fines educativos.