Skip to content

README.md

Latest commit

 

History

History
121 lines (85 loc) · 3.42 KB

README.md

File metadata and controls

121 lines (85 loc) · 3.42 KB
Raw

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.