Números Primos y Compuestos

Proyecto de aprendizaje para estudiantes de Ingeniería de Sistemas.

Este proyecto implementa un quiz interactivo sobre números primos y compuestos usando HTML, CSS y JavaScript vanilla.

---

Objetivo del proyecto

Aprender y practicar:

• Separación de responsabilidades (HTML / CSS / JS)
• Manipulación del DOM
• Manejo de eventos
• Estado de una aplicación
• Estructuras de datos (arrays de objetos)
• Renderizado dinámico de elementos
• Buenas prácticas de organización de código
• Uso de Git

---

Estructura del proyecto

primos-compuestos/
├── index.html          → Estructura de la página
├── css/
│   └── styles.css      → Todos los estilos
├── js/
│   ├── questions.js    → Solo los datos de las preguntas
│   └── app.js          → Lógica de la aplicación
├── README.md           → Este archivo
└── .gitignore

¿Por qué esta estructura?

Archivo	Responsabilidad
index.html	Solo estructura (semántica)
styles.css	Solo presentación visual
questions.js	Solo datos (fácil de modificar)
app.js	Solo lógica y comportamiento

Esta separación se conoce como Separation of Concerns y es fundamental en el desarrollo de software.

---

Cómo ejecutar el proyecto

Opción 1: Live Server (recomendada)

1. Abre la carpeta en Visual Studio Code
2. Instala la extensión Live Server
3. Haz clic derecho en index.html → Open with Live Server

Opción 2: Abrir directamente

Simplemente abre el archivo index.html con tu navegador.

Nota: Algunas funciones (como módulos ES6) pueden requerir un servidor local.

---

Cómo agregar nuevas preguntas

Abre el archivo js/questions.js y agrega un nuevo objeto al array:

{
  id: 13,
  text: "Tu pregunta aquí",
  options: ["Opción A", "Opción B", "Opción C", "Opción D"],
  correctIndex: 0,          // Índice de la respuesta correcta (empieza en 0)
  explanation: "Explicación que se muestra después de responder"
}

No necesitas tocar el resto del código.

---

Conceptos que se practican

1. DOM Manipulation
   document.getElementById, createElement, appendChild, innerHTML, classList

2. Eventos
   addEventListener('click', ...)

3. Estado
   Objeto state que guarda la pregunta actual, puntaje, etc.

4. Arrays y objetos
   Las preguntas están modeladas como un array de objetos

5. Funciones
   Cada responsabilidad tiene su propia función (renderQuestion, handleOptionClick, etc.)

6. Flujo de la aplicación
   Pantallas: Inicio → Quiz → Resultados

---

Posibles mejoras (para practicar más)

• Guardar el mejor puntaje con localStorage
• Agregar un temporizador por pregunta
• Permitir diferentes tipos de pregunta (completar, verdadero/falso, etc.)
• Convertir a módulos ES6 (import / export)
• Agregar modo oscuro
• Hacer que las preguntas se muestren en orden aleatorio
• Agregar animaciones más elaboradas
• Crear una versión con descomposición paso a paso interactiva

---

Autor

Proyecto de aprendizaje – Ingeniería de Sistemas
Basado en el contenido de matemáticas: Números primos y compuestos.