CommunityRedacción y edicióngithub.com

leonaluo88/painless-learning-web

Convierte materiales de aprendizaje (carpetas de cursos, libros de texto, transcripciones o exámenes de muestra) en una única página web por curso o tema, con rutas de estudio, práctica y evaluación integradas. También funciona sin materiales previos planificando la ruta de aprendizaje desde cero.

¿Qué es painless-learning-web?

Este skill transforma cualquier material de aprendizaje (apuntes de clase, transcripciones de conferencias, libros de texto, exámenes de muestra) en una página web interactiva completa para un curso o tema. Está diseñado para Claude Code, Codex, WorkBuddy y otros agentes de IA, adaptándose a sus capacidades (lectura de archivos, búsqueda en línea, ejecución de Python, etc.). El skill se encarga de extraer y estructurar los puntos de conocimiento, construir un mapa topológico de dependencias, generar explicaciones paso a paso (con ejemplos, autoevaluaciones y referencias a exámenes), crear un banco de preguntas (incluyendo simulacros y exámenes reales) y mantener un progreso persistente del estudiante mediante localStorage. Soporta seis modos de uso: autoaprendizaje, aprendizaje ligero, planificación desde cero, seguimiento de un curso, y dos modalidades de preparación para exámenes (intensiva y profunda). La página web resultante es autónoma (un solo archivo HTML), no requiere conexión a internet para funcionar una vez generada, y permite actualizaciones incrementales semanales sin perder el progreso del usuario. Incluye funciones avanzadas como temporizadores, modo oscuro, compatibilidad con dispositivos móviles, fórmulas matemáticas con MathJax, y un sistema de fichas de estudio para exámenes que permiten llevar apuntes.

Compatible con✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/leonaluo88/painless-learning/tree/HEAD/workbuddy/painless-learning-web

Installed? Explore more Redacción y edición skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Página de Aprendizaje Sin Dolor

Convierte materiales de aprendizaje en una página web por curso, de modo que el usuario pueda aprender secuencialmente, asegurarse de que aprende correctamente y verificar su dominio con preguntas. Un curso es un proyecto a largo plazo: se pueden agregar nuevos materiales cada semana; al preparar un examen, se abren las secciones relevantes en la misma página. Cuando el usuario no tiene materiales, primero se planifica la ruta de aprendizaje, se buscan recursos autorizados y luego se crea la página web.


0. Configuración del Entorno (Adaptación para Diferentes Agentes IA)

Este skill fue escrito originalmente para Claude. A continuación se explica cómo implementarlo en Codex, WorkBuddy y otros agentes. Las reglas del texto principal se aplican tal cual; cuando las capacidades del entorno difieran, se maneja según lo siguiente.

  • Lectura de archivos: Usa las herramientas de archivo o scripts disponibles para leer la carpeta proporcionada por el usuario (PDF, PPT, DOCX, imágenes). Si no se puede hacer OCR, informa al usuario qué páginas no se pudieron leer.
  • Conexión a internet: Cuando haya herramientas de búsqueda, úsalas para planificar desde cero y verificar hechos; si no las hay, indícalo y pídele al usuario que proporcione los materiales.
  • Preguntas: Cuando necesites preguntar al usuario, hazlo todo de una vez; si hay una herramienta de preguntas con opciones, úsala.
  • Ubicación de la página web: Por defecto, escribe en la carpeta _pagina_aprendizaje/ dentro de la carpeta del curso (si no hay carpeta de curso, crea <NombreCurso>_pagina_aprendizaje/ en el directorio de trabajo actual): index.html es la página web completa (archivo único, datos incrustados, se abre directamente en el navegador); data/course.json es la fuente de datos principal; img/ contiene las capturas de pantalla de las fuentes. Si se puede publicar en un hosting, se puede publicar otra copia, pero la carpeta local siempre es la fuente principal.
  • La página web no puede invocar IA: Donde el texto principal diga "usa la capacidad de Claude en la página web para organizar / usar sample, db, assets", cámbialo a que exista en localStorage y proporcione un botón "Copiar todo (para usar con IA)", para que el usuario pueda enviarte el contenido para que lo organices.
  • Validación: Cuando se pueda ejecutar Python, ejecuta python3 scripts/validate_course.py <ruta>/data/course.json y corrige hasta que no haya errores; cuando se pueda usar un navegador o navegador sin cabeza, abre index.html para verificar el renderizado y la interacción; para las comprobaciones que no se puedan hacer, infórmale al usuario.

1. Primero, Definir las Especificaciones

Primero, determina la categoría a partir de las palabras y los materiales del usuario. Si no se puede determinar, haz una sola pregunta (máximo 3 preguntas). Cuando el usuario no esté presente, elige la categoría más razonable e indica en la entrega cuál elegiste y por qué.

TipoSituación TípicaObjetivoÉnfasis
AutoaprendizajeSolo libro de texto, transcripción de curso en línea, artículo; no es para examenComprender y aprender correctamenteExplicar correctamente; verificar con preguntas de comprensión; no hacer análisis de examen, no cronometrar
Introducción LigeraSolo se desconoce un concepto o tema pequeño, se quiere una introducción rápida; tiempo total estimado de estudio < 3 horasEstablecer rápidamente una comprensión correctaNo hacer ruta, no esperar confirmación; después de definir la ruta tú mismo, generar directamente la página web (ver "4.3")
Autoaprendizaje: Planificación desde CeroSolo se sabe qué área se quiere aprender, no hay materialesAprender de lo simple a lo complejoPrimero investigar, planificar la ruta, encontrar cursos y libros autorizados; después de que el usuario confirme la ruta, crear la página web; la explicación debe ser gradual (ver "4.2")
Seguimiento de CursoDurante el semestre, se proporcionan apuntes y transcripciones de clases semanal o quincenalmenteSeguir el curso, entender el contenido semanalActualizaciones incrementales; avanzar por semanas; alinearse estrictamente con el alcance del curso
Preparación para Examen: IntensivaCerca del examen, poco tiempoObtener puntos altos en poco tiempoCalibrar el examen; solo estudiar lo central e importante; usar directamente preguntas reales para evaluar
Preparación para Examen: ProfundaSe quiere una calificación alta, hay tiempoDominar realmenteCalibrar el examen; explicar a fondo todos los puntos de conocimiento dentro del alcance; primero hacer preguntas simuladas, dejar las preguntas reales para el final

Información que se necesita conocer (si se puede inferir de los materiales, no preguntar):

  • Propósito del estudio: comprensión, seguimiento del curso o preparación para examen
  • Materiales disponibles
  • Base actual
  • Fecha límite o fecha del examen
  • Tiempo de estudio diario posible
  • Formato del examen: idioma de respuesta, si se permiten apuntes, restricciones de calculadora

Un mismo curso puede comenzar como "Seguimiento de Curso" y luego convertirse en "Preparación para Examen" al final del semestre. En este caso, no se crea una nueva página web, sino que se abre la sección de preparación para el examen en la página web original (ver sección 3).


2. Archivo de Datos del Curso

Cada curso mantiene un course.json, la página web se genera a partir de él. Al actualizar, modifica este archivo y luego regenera la página web.

Se guarda en dos lugares para asegurar que se pueda continuar en la próxima conversación:

  1. data/course.json en la carpeta de la página web
  2. _pagina_aprendizaje/course.json en la carpeta del curso del usuario (si se puede escribir)

Antes de actualizar, lee este archivo. Si no se encuentra en ninguno de los dos lugares, restáuralo desde la página web publicada e informa al usuario.

{
  "course": {"code":"…", "name":"…", "profile":"self|self-plan|course|exam-sprint|exam-deep",
             "exam": {"date":"…", "format":"…", "answer_lang":"en|zh", "allowed":"…"}},
  "sources": [{"id":"W03L1", "file":"…", "url":"…", "type":"lecture|transcript|textbook|tutorial|lab|assignment|sample_exam|past_exam|exam_info|web", "week":3, "added":"…"}],
  "modules": [{"id":"M-sql-basic", "name":"…", "order":5}],
  "points": [{
    "id":"sql-left-join",        // ID estable, no se modifica después de la creación
    "no":57,                      // Número de visualización, se reordena en cada generación
    "title":"Resumen en una frase",
    "module":"M-sql-basic",
    "week":5,
    "tier":3,                     // 3 Central / 2 Importante / 1 Secundario / 0 No evaluado (para autoaprendizaje se puede omitir la clasificación)
    "depth":"apply",              // recall Reconocer / explain Explicar / apply Aplicar / transfer Transferir
    "pre":[{"id":"sql-inner-join","kind":"hard"}, {"id":"null","kind":"soft","why":"IS NULL"}],
    "src":[{"source":"W05L1","page":24}, {"source":"W05L1-transcript","time":"32:10"}],
    "exam_refs":["Examen muestra 2 P2A"],
    "mastery":"Qué pregunta responder correctamente para considerar que se domina (una frase, debe ser verificable con preguntas)",
    "status":"active|merged|deprecated",
    "changed":"Fecha: qué se cambió",
    "note":"No evaluado / Complemento / El profesor dijo…"
  }],
  "storyline": [{"from":"M-tree", "to":"M-rf", "why":"Una frase: qué problema dejó el módulo anterior, cómo lo resuelve el siguiente"}],
  "lessons": [{"id":"L-w05", "track":"learn|review", "title":"…", "points":[…], "steps":[…],
               "storyline":[{"role":"Problema|Idea|Método|Resultado|Nuevo problema", "text":"Una o dos frases", "formula":"Opcional, escribir la forma más simple", "steps":[3,4]}]}],
  "questions": [ … ver sección 8 … ],
  "changelog": [{"date":"…", "summary":"…", "added":[…], "changed":[…], "conflicts":[…]}],
  "course_notes": [{"date":"…", "note":"Preferencias o correcciones que solo aplican a este curso (por ejemplo, notación, un módulo que debe profundizarse más), a cumplir en todas las actualizaciones futuras de este curso"}]
}

Reglas:

  • ID estable: El progreso, las casillas de verificación y las preguntas incorrectas se almacenan por ID, por lo que el progreso del usuario no se pierde después de una actualización.
  • No elimines puntos de conocimiento. Los que ya no sean necesarios, márcalos como deprecated; los que se fusionen, márcalos como merged y señala el nuevo ID.
  • pre solo escribe los prerrequisitos directos. hard significa que se debe aprender primero; soft significa que solo se usa un concepto, y se debe especificar cuál.

3. Estructura de la Página Web: Una Página por Curso

Todo el curso es una página web (_pagina_aprendizaje/index.html, ver "0. Configuración del Entorno"). Usa pestañas en la parte superior para cambiar entre secciones y URL hash para la navegación (por ejemplo, #mapa, #leccion/L-w05/3, #q/q-id), facilitando los saltos entre secciones.

Secciones y qué mostrar en cada tipo

SecciónContenidoAutoaprendizaje (incluye planificación desde cero)Seguimiento de CursoPreparación para Examen
MapaDiagrama topológico de módulos, todos los puntos de conocimiento (casillas de verificación, prerrequisitos, fuentes), progreso, panel "Actualización actual"✓ (para planificación desde cero es la ruta de aprendizaje, con recursos recomendados)✓✓, añade "Perspectiva de examen"
ClaseExplicación paso a paso, cada paso con autoevaluación✓ (por capítulo o etapa)✓ (por semana)✓, añade "Línea de repaso"
PrácticaPreguntas autogeneradas por punto de conocimiento (en preparación para examen, las preguntas simuladas también van aquí, diferenciadas con etiquetas); el filtro "No dominado" es el cuaderno de errores✓✓✓
Información del examenHechos del examen, prioridad de materiales, tabla pregunta por pregunta, peso de módulos, lista de no evaluado, comentarios del profesor——✓
Preguntas simuladasSe integran en la página de práctica, filtradas con la etiqueta "Simulación", sin sección separada——Versión profunda
Exámenes realesExámenes de muestra y de años anteriores (manual de práctica de exámenes)——✓ (la versión profunda primero los guarda)
Almacén temporal de Cheat SheetGuarda temporalmente contenido que no se quiere memorizar durante el estudio, luego la IA lo organiza según el contexto y finalmente genera una hoja de notas (ver sección 6, artículo 5)——✓ (cuando el examen permita apuntes)

El diagrama topológico debe generarse

  • Cada página web debe tener un diagrama topológico de puntos de conocimiento en la sección del mapa. Independientemente de las especificaciones, lo ajustado del tiempo o si se omitió la confirmación, debe generarse. Los conocimientos prerrequisitos también deben dibujarse (por ejemplo, al aprender "Qué es una API", se deben dibujar los prerrequisitos: cliente, servidor, solicitud HTTP).
  • Solo hay dos casos en los que no se debe dibujar: el contenido a aprender es muy limitado (solo 1–3 puntos de conocimiento), o los puntos de conocimiento realmente no tienen relación de precedencia. En ese caso, escribe una frase en el lugar del mapa explicando por qué no hay diagrama topológico.
  • Cuando el tiempo sea ajustado, se pueden reducir los pasos de la clase y la cantidad de preguntas, pero no se puede eliminar el diagrama topológico.

Disposición de navegación (prioridad para clase y práctica)

  • La clase y la práctica son el cuerpo principal; el mapa, la información del examen y la ruta de aprendizaje son solo vistas generales y no deben ocupar la mayor parte del espacio superior.
  • La parte superior se comprime en una barra adhesiva de una línea: código del curso + pestañas de secciones principales + botones pequeños para cuenta regresiva / progreso / términos / código de progreso. Las secciones principales son solo: Clase (abierto por defecto), Práctica (subpáginas: Ejercicios, Exámenes reales), Vista general (subpáginas: Mapa, Información del examen, Ruta de aprendizaje), Cheat Sheet (cuando tenga función de almacenamiento temporal).
  • La segunda línea son las pestañas de las subpáginas de la sección principal actual y una línea de entrada para Cheat Sheet (se expande al enfocarse).
  • La sección de información del examen se conserva en todas las páginas de preparación para el examen; una vez escrito, el contenido no cambia; la ruta de aprendizaje cambia con el progreso y el usuario no necesariamente la consulta, por lo que se coloca en la vista general.

El costo de aprendizaje debe ser bajo

La persona que recibe la página web no debería necesitar aprender a usarla primero.

  • Cada vez que se abre una sección por primera vez, muestra una línea de explicación clara en la parte superior (se puede cerrar), que en una frase dice cómo usar esta página, por ejemplo: "No marques 'Dominado' en preguntas que no estés seguro; filtrar 'No dominado' es tu cuaderno de errores".
  • En todo el sitio, solo hay un tipo de tarjeta de pregunta: enunciado → opciones o campo de entrada → pista / ver respuesta → casilla de verificación "Dominado" en la esquina superior derecha. Las autoevaluaciones de clase, los ejercicios y los exámenes reales usan esta tarjeta; se aprende una vez y se usa en todas partes.
  • Los botones usan texto de acción ("Ver respuesta", "Siguiente paso"), no solo iconos; los filtros e interruptores en una página son mínimos; las funciones que no se usan con frecuencia no se implementan.
  • Para una misma acción, solo se proporciona una entrada y un estado; no permitas que estados similares como "Corregido", "Deshacer" y "Dominado" coexistan.

Todas las operaciones que persisten se pueden deshacer

La persona que recibe la página web nueva hará clic en todo para probar. Por lo tanto, todas las operaciones que se guardan deben poder restaurarse al estado anterior a la operación, sin dejar rastro.

  • Interruptores ("Dominado", casilla de verificación de punto de conocimiento, paso "Completado"): haz clic de nuevo para desmarcar; no deben ser solo para marcar, sin posibilidad de desmarcar.
  • Historial de respuestas: cada pregunta tiene un botón "Rehacer", que borra la respuesta y la retroalimentación de esta pregunta, devolviéndola a su estado inicial.
  • Operaciones que eliminan datos (borrar todo, eliminar, importar): después de la operación, aparece una barra de notificación en la parte inferior: "Borrado · Deshacer"; dentro de aproximadamente 8 segundos, haz clic en "Deshacer" para restaurar completamente. No uses confirm() del navegador.
    • El borrado del temporizador, la eliminación de elementos del Cheat Sheet, la importación del código de progreso, todos usan esta barra de notificación.
    • La eliminación del Cheat Sheet usa eliminación suave: se mueve a la sección "Eliminados recientemente" en la parte inferior de la página; incluso después del tiempo de la barra de notificación, se puede recuperar desde allí.
    • Antes de importar un código de progreso, se realiza una copia de seguridad automática del progreso actual.
  • Restablecimiento completo: en la ventana emergente del código de progreso, coloca "Borrar todos mis registros" para que sea fácil comenzar de nuevo después de probar. Antes de hacer clic, se realiza una copia de seguridad automática; después de borrar, la misma ventana emergente conserva el botón "Restaurar el registro anterior".
  • Implementación: antes de cada escritura que pueda perder datos, guarda una instantánea de la parte afectada del estado; deshacer es restaurar la instantánea. La copia de seguridad del restablecimiento completo se almacena en una clave de localStorage separada, que solo se sobrescribe en el siguiente restablecimiento.

Cómo colocar cuando coexisten el modo de aprendizaje y el modo de examen

  • Solo hay un mapa, que proporciona un cambio de "Vista de aprendizaje / Vista de examen":

    • Vista de aprendizaje: organizado por semanas o capítulos, muestra todos los puntos de conocimiento.
    • Vista de examen: organizado por peso del examen; los puntos de conocimiento fuera del alcance del examen se atenúan; muestra etiquetas de origen del examen y la ruta de aprendizaje.

    Ambas vistas comparten el mismo progreso de casillas de verificación.

  • La clase tiene dos líneas:

    • Línea de aprendizaje: las lecciones realizadas durante el semestre por semana, se conservan siempre.
    • Línea de repaso: nuevas lecciones agregadas durante la preparación para el examen, organizadas según la ruta de aprendizaje. La línea de repaso no repite el contenido ya aprendido: para los puntos de conocimiento ya aprendidos, solo se proporciona una tarjeta de revisión comprimida, con un enlace a la explicación original en la línea de aprendizaje, y se complementa con la perspectiva del examen (cómo se pregunta la pregunta, hasta qué profundidad responder, errores comunes). Solo los puntos que se necesitan para el examen y que no se explicaron bien en la línea de aprendizaje se desarrollarán en detalle.
  • Solo hay un banco de preguntas de práctica: las preguntas de autoevaluación habituales y las preguntas simuladas de preparación para el examen están todas ahí, filtradas por etiquetas. El cuaderno de errores es compartido entre ambos modos.

  • Las secciones de Información del examen y Exámenes reales solo aparecen durante la preparación para el examen. El manual de exámenes reales pertenece a la preparación para el examen, no se incluye en el modo de aprendizaje.

Funciones generales en la página web

  • Parte superior: nombre del curso, tipo, progreso total, y cuenta regresiva para el examen (durante la preparación).
  • Temporizador: colocado en la esquina superior derecha de cada tarjeta de paso (posición visible, no solo oculto en la barra lateral), muestra "Tiempo de este paso: mm:ss · Total del curso", se actualiza cada segundo; tiene botones "Pausa / Continuar" y "Borrar" (el borrado solo borra el paso actual, muestra una barra de notificación "Deshacer" después de borrar); el estado de pausa se mantiene entre pasos; al cambiar a otra pestaña, se pausa automáticamente; el tiempo se registra en el paso o pregunta actual.
  • Ventana emergente de la línea principal: se puede abrir en cualquier momento para ver la línea lógica de la lección actual, resaltando "Estás aquí" (ver sección 7 "Lógica de la lección").
  • Ventana emergente de tabla de términos (comparación chino-inglés, cada uno con una frase de explicación); para cursos de matemáticas y estadística, agrega también un traductor de símbolos.
  • Enlaces a materiales del curso: usa rutas relativas para apuntar a los PDF originales en la carpeta del curso, con #page=N (el visor de PDF del navegador saltará a la página correspondiente); las transcripciones marcan puntos de tiempo; los recursos en línea proporcionan enlaces originales.
  • Código de progreso: exporta un texto que se envía a la IA, la IA sabe dónde están las debilidades. Al importar, solo agrega casillas de verificación, no elimina; antes de importar, se realiza una copia de seguridad automática que se puede deshacer.
  • Todos los estados se almacenan en localStorage con la clave "código del curso + ID estable"; todas las lecturas y escrituras se envuelven con try/catch.
  • Una combinación de colores unificada, con modo oscuro, coherente en todo el curso.
  • Adaptable a dispositivos móviles: la barra lateral se apila en la parte superior, las tablas se pueden desplazar horizontalmente y se adapta a las áreas seguras.
  • Las fórmulas usan la salida SVG de MathJax (tex-svg); las reglas de notación y formato se detallan en la sección 7 "Formato y Notación".
  • Diagrama topológico: cuando hay muchos puntos de conocimiento, usa Graphviz para calcular el diseño previamente, dibujando un SVG interactivo y escalable en la página: al hacer clic en un punto de conocimiento, se resaltan todos sus prerrequisitos y consecuentes; "Ver por pregunta" puede resaltar todos los puntos de conocimiento necesarios para resolver una pregunta. Para diagramas de nivel de módulo, se puede usar Mermaid.
  • Capturas de pantalla de fuentes: solo exporta las páginas de los apuntes a las que se hace referencia (usando herramientas de línea de comandos como pdftoppm para exportar PNG directamente desde el PDF, sin revisar página por página, casi sin consumir tokens), colócalas en la carpeta img/ de la página web; al hacer clic en la fuente, se abre una ventana emergente para ver la imagen (los archivos PPT no se pueden abrir en una página específica del navegador, por lo que se usan capturas de pantalla).
  • Los datos de la página web se incrustan directamente en index.html, data/course.json se guarda por separado como la fuente principal.

4. Nueva Creación (Con Materiales)

1. Lectura de Materiales

  • Usa las herramientas de archivo disponibles para leer la carpeta o los archivos cargados por el usuario. Lee cada archivo por completo: las páginas escaneadas y manuscritas requieren OCR, y las imágenes deben revisarse una por una.
  • Las transcripciones de conferencias y los textos de cursos en línea son igualmente importantes: los ejemplos orales, los puntos enfatizados ("esto saldrá en el examen", "mucha gente se equivoca aquí"), las explicaciones que no están en los apuntes, todo debe extraerse y marcarse con puntos de tiempo.
  • Primero, proporciona al usuario una lista de archivos e indica los archivos que no se pudieron leer.

2. Alcance y Precisión

  • Seguimiento de curso y preparación para examen: el alcance se basa en los apuntes y las conferencias, no se agrega contenido extracurricular. El conocimiento de fondo necesario se marca como "Complemento". La notación debe coincidir con los apuntes.
  • Autoaprendizaje: el alcance se basa en el objetivo de aprendizaje del usuario, los materiales son solo un punto de partida. Cuando los materiales no sean claros o contengan errores, se pueden agregar explicaciones autorizadas, pero deben estar marcadas. Las transcripciones de cursos en línea a menudo tienen errores de reconocimiento y errores orales; deben corregirse según el contexto y verificarse con fuentes confiables para hechos y fórmulas clave. Si no se está seguro, se debe indicar.

3. Desglose en Puntos de Conocimiento

  • El tamaño del grano debe ser fino: cada elemento solo trata una cosa (una definición, propiedad, método, tipo de pregunta o trampa). Si un elemento contiene dos cosas que se pueden verificar por separado, continúa desglosando.
  • Para el aprendizaje, la profundidad sigue inicialmente la profundidad del material: si el material deriva, llega a explain; si el material tiene ejemplos, llega a apply. Para el autoaprendizaje, se determina según el objetivo del usuario.

4. Construcción del Diagrama Topológico

  • Forma un grafo dirigido acíclico. Si aparece un ciclo, significa que el desglose fue incorrecto y se debe rehacer.
  • Para el seguimiento del curso: organiza por semana, dentro de la semana, por dependencias. Para el autoaprendizaje: completamente por dependencias.
  • El diagrama de módulos usa un diagrama de flujo de Mermaid: las líneas sólidas indican que se debe aprender primero; las líneas discontinuas indican que solo se usa un concepto (especifica cuál); usa colores para distinguir la importancia; los nodos muestran el rango de numeración. Debajo del diagrama, un párrafo resume cuántas líneas principales tiene todo el diagrama.

5. Confirmar el Diagrama Topológico Primero, Luego Generar

  • El núcleo de la confirmación con el usuario es el diagrama topológico de puntos de conocimiento, no la ruta de módulos. Método: primero desglosa todos los puntos de conocimiento uno por uno y desordénalos; partiendo de los puntos de conocimiento necesarios para las preguntas del examen (o el objetivo de aprendizaje), encuentra sus prerrequisitos, los prerrequisitos de estos, etc., formando así el diagrama topológico. Las relaciones de prerrequisito deben conectarse entre módulos (por ejemplo, una pregunta del Módulo 8 usa herramientas del Módulo 7, conceptos de un curso previo), para que la explicación de la página web sea más fluida que los materiales escolares.
  • La numeración de los puntos de conocimiento se ordena según el orden de "prerrequisito inmediato": cada prerrequisito se coloca justo antes de la primera vez que se usa, sin acumular el contenido previo al principio.
  • Se puede publicar una primera versión de la página web que solo contenga el mapa, la información del examen y la ruta de aprendizaje, para que el usuario pueda confirmar directamente en el diagrama interactivo; después de la confirmación, se pueden generar la clase y el banco de preguntas por lotes.
  • El conocimiento previo también se organiza como un curso separado según su fuente (por ejemplo, "Matrices y Rango (Aceleración de Prerrequisitos)"), y en el paso 0 de cada curso se enumera "Asegúrate de dominar esto (de otros cursos)" con enlaces.
  • Solo pide al usuario que confirme el diagrama topológico cuando pueda juzgar: solo cuando el usuario tenga apuntes, el alcance del examen o ya tenga una base relevante, envíale la confirmación. Cuando el usuario sea un principiante, no le pidas confirmación, porque no puede juzgar si es correcto o no; la IA verifica por sí misma con los apuntes o fuentes autorizadas y coloca directamente el diagrama en la página web.
  • Cuando se omite la confirmación (ya sea porque el usuario es principiante o porque no hay tiempo), el diagrama topológico se genera de todos modos y se coloca en la sección del mapa.

4.2. Sin Materiales: Primero Planificar la Ruta

1. Preguntar el Objetivo

  • Hasta qué nivel se quiere aprender, para qué se va a usar (leer artículos, hacer proyectos, entrevistas, interés).
  • Si se tiene la base relevante.
  • Cuánto tiempo semanal se tiene.

Si se puede inferir de la conversación, no preguntes.

2. Investigación

  • Cuando se tenga conexión a internet, busca recursos reconocidos en este campo: cursos abiertos universitarios (página de inicio del curso, apuntes, videos), libros de texto clásicos, documentación oficial, revisiones. Prioriza fuentes originales y autorizadas, anotando los enlaces y los capítulos o sesiones específicos.
  • Compara los esquemas de 2–3 fuentes autorizadas para resumir las principales áreas de este campo, cuáles son básicas, cuáles avanzadas, y las relaciones de precedencia entre ellas.

3. Proponer una Ruta de Aprendizaje, Primero Obtener Confirmación del Usuario

  • Panorama del campo: las principales áreas de este campo; para el objetivo del usuario, qué áreas son obligatorias y cuáles se pueden omitir.

  • Verificación de prerrequisitos: qué bases se necesitan. Cuando el usuario no esté seguro de si las tiene, proporciona 3–5 preguntas de diagnóstico pequeñas y ajusta el punto de partida según los resultados.

  • Recurso principal: recomienda un curso o un libro como recurso principal, el resto como complemento, explicando la razón (autoridad, dificultad adecuada, disponibilidad gratuita).

  • Ruta por fases: cada fase debe especificar:

    • Objetivo de aprendizaje (verificable)
    • Conceptos centrales
    • Recursos recomendados (específicos a capítulos o sesiones, con enlaces)
    • Tiempo estimado
    • Método de verificación de la fase

    Entre fases, se debe explicar "qué resolvió la fase anterior, qué nuevo problema resolverá esta fase".

  • Lo que se pide al usuario que confirme es el objetivo, el tiempo y el recurso principal. El diagrama topológico de puntos de conocimiento no necesita confirmación del usuario: la IA lo verifica con fuentes autorizadas y lo coloca directamente en la página web.

4. Después de que el Usuario Confirme la Ruta, Crear la Página Web

  • La ruta de aprendizaje es el mapa. Los materiales investigados se registran como fuentes (tipo web o textbook), y cada punto de conocimiento se marca con su fuente.
  • Las explicaciones son escritas por la IA basándose en estas fuentes; los hechos y fórmulas clave deben verificarse, proporcionando enlaces originales para que el usuario pueda profundizar.
  • Cuando el usuario obtenga posteriormente libros de texto, transcripciones de cursos o apuntes, se tratan como nuevos materiales para una actualización incremental (sección 5): se agregan fuentes, se agrega profundidad, pero no se rehace desde cero.

5. Método de Explicación Gradual

  • Cada paso comienza con una pregunta, un fenómeno o una necesidad. Primero, haz que el usuario piense, puede elegir una suposición, y luego revela la respuesta y la razón.
  • Un paso a la vez, usa lo ya aprendido para introducir cosas nuevas.
  • Para las partes difíciles, primero da el ejemplo más simple y luego generaliza.
  • Al final de cada fase, haz una revisión: ¿qué puedes hacer ahora? ¿Qué problemas no pueden resolverse con el conocimiento actual? La siguiente fase vendrá a resolverlos.

4.3. Introducción Ligera (Duración Total Menos de 3 Horas)

1. Cómo Determinar

Si se cumplen las dos condiciones siguientes, se trata como introducción ligera:

  • El usuario pregunta sobre un concepto o tema pequeño, por ejemplo, "¿Qué es X?", "Introducción a X", "Quiero conocer X".
  • Se estima que el tiempo total de aprendizaje es inferior a 3 horas, aproximadamente no más de 15 puntos de conocimiento, 1–3 lecciones.

Si supera este volumen, se cambia a "Autoaprendizaje" o "Planificación desde Cero".

2. Flujo de Trabajo

  • No preguntes, a menos que el tema en sí no esté claro.
  • No envíes una ruta para confirmar: define tú mismo los puntos de conocimiento y el orden, y genera directamente la página web.
  • Cuando no sepas la base del usuario, comienza con un "principiante inteligente". No pidas que se aprendan los prerrequisitos primero; en el paso 0, proporciona una "chuleta de prerrequisitos": cada prerrequisito se explica con una frase.
  • Cuando se pueda conectar a internet, usa la búsqueda para verificar los hechos y fórmulas clave, y proporciona enlaces en las fuentes.

3. Página Web Simplificada

  • Solo conserva tres secciones:
    • Clase: 1–3 lecciones, cada una con 5–10 pasos.
    • Práctica: 1–2 preguntas por punto de conocimiento.
    • Mapa simplificado: pequeño diagrama topológico de puntos de conocimiento, que debe dibujar los prerrequisitos (por ejemplo, al aprender API, el cliente, el servidor, HTTP), más una línea principal.
  • No incluye información del examen, preguntas simuladas, exámenes reales, temporizador, cola de repaso ni código de progreso.
  • Aún se conserva:
    • Primero la intuición, luego la definición, un ejemplo que recorre todo el proceso.
    • El cuadro de "traducción al lenguaje humano" (para cursos de ciencias).
    • La línea lógica al final de cada lección.
    • El estándar de dominio y la autoevaluación para cada punto de conocimiento, con explicaciones específicas cuando se responde incorrectamente.
  • La última página escribe "Qué se puede aprender después". Si el usuario quiere profundizar, se puede actualizar a "Autoaprendizaje" o "Planificación desde Cero", expandiendo la misma página web. Por lo tanto, course.json también debe guardarse normalmente en este momento.

5. Actualización Incremental (Semanal o Quincenal)

  1. Lee course.json y los nuevos materiales.
  2. Desglosa los puntos de conocimiento de los nuevos materiales, compáralos uno por uno con los puntos de conocimiento existentes y clasifícalos en una de las siguientes situaciones:
SituaciónManejo
Contenido completamente nuevo, todos los prerrequisitos existenAgregar
Extensión o profundización de un punto de conocimiento existenteCrear un nuevo punto de conocimiento, con el antiguo como prerrequisito hard; no lo metas dentro del antiguo
Es lo mismo que un punto de conocimiento existenteNo crear nuevo. Agregar fuentes al antiguo; si la profundidad ha aumentado, actualizar depth
El profesor corrigió contenido anteriorModificar el punto de conocimiento antiguo, escribir en changed, agregar una marca "Corregido" en la página web
Prerrequisito posterior (el nuevo contenido es en realidad la base de algún punto de conocimiento antiguo)Agregar este prerrequisito, agregar el borde de prerrequisito al punto de conocimiento antiguo. Las lecciones ya publicadas no se reorganizan; en la nueva lección, agrega una tarjeta de "Revisión" que enlace al punto de conocimiento antiguo y explique cómo se puede entender ahora de manera diferente
Contradicción entre materiales nuevos y antiguos (notación o redacción diferente)Registrar ambas versiones, marcar como "Pendiente de confirmar", preguntar al usuario cuál usar al entregar
Aparece un ciclo después de agregar bordesDividir el punto de conocimiento demasiado grueso, marcar el ID antiguo como merged, apuntando al nuevo punto de conocimiento dividido
Nuevo temaCrear un nuevo módulo. Si el nuevo contenido se puede colocar en un módulo existente, expande el módulo existente; no cambies el nombre del módulo sin motivo
  1. Validación: todos los IDs a los que apunta pre existen y están activos; no hay ciclos en el grafo; ningún punto de conocimiento es anterior a su prerrequisito hard (excepto los prerrequisitos posteriores, pero deben tener una tarjeta de revisión).
  2. Los puntos de conocimiento antiguos cuyo contenido haya cambiado se marcan como "Actualizado, se recomienda revisar", conservando la casilla de verificación original del usuario.
  3. Escribe en changelog y muestra en el panel "Actualización actual" del mapa: cuántos se agregaron, cuántos se corrigieron, cuántos prerrequisitos posteriores se agregaron y cuáles están pendientes de confirmar.
  4. Regenera la página web y sobrescribe la misma carpeta de la página web (si está publicada, publica en la misma dirección); la ruta o el enlace del usuario no cambian.

6. Preparación para el Examen

1. Anclar el Examen y Deducir los Puntos de Conocimiento Inversamente

  1. Asigna prioridad a los materiales: Objetivo son los exámenes de muestra o exámenes de años anteriores con respuestas oficiales, Referencia son otros exámenes de años anteriores y tareas, y Línea principal siguen siendo los apuntes; los tutoriales y laboratorios son complementos.
  2. Desglose de preguntas: desglosa cada pregunta hasta las subpreguntas, luego hasta las habilidades que evalúa, enumerando "los puntos de conocimiento necesarios para responder correctamente esta subpregunta".
  3. Alcance inverso: partiendo de estos puntos de conocimiento, retrocede a lo largo de los prerrequisitos hard hasta obtener todos los puntos de conocimiento necesarios para el examen. Los puntos de conocimiento fuera de este alcance se degradan a secundarios o no evaluados.
  4. Calibración de profundidad: determina la profundidad según la redacción de la pregunta. Cuando un mismo punto de conocimiento aparece en varias preguntas, se toma la más profunda:
    • Juicio, selección → recall
    • Explicación, comparación, preguntar por qué → explain
    • Cálculo, escritura de código, dibujo, realización de pasos → apply
    • Nuevo escenario, síntesis, diseño → transfer
  5. Verificación de brechas:
    • Contenido necesario para el examen pero no cubierto en los apuntes → escribir una explicación de sentido común, marcar "No cubierto en apuntes".
    • Contenido cubierto en los apuntes pero explícitamente excluido en las instrucciones del examen → marcar como no evaluado.
    • Contenido evaluado en años anteriores pero no cubierto en los apuntes de este año → enumerar por separado.
  6. Escribe los resultados en la sección de información del examen: tabla pregunta por pregunta (pregunta → puntos de conocimiento → puntuación), tabla de peso de módulos, lista de no evaluado, comentarios del profesor (con fecha), patrones de preguntas de años anteriores, plantillas de respuesta generales.
  7. Ruta de aprendizaje: divide según el tiempo disponible del usuario. La clase siempre se organiza por módulos del curso (un módulo por lección, y los prerrequisitos también se dividen en lecciones según su fuente), para que se pueda reutilizar más adelante; la ruta de aprendizaje solo hace referencia a los pasos dentro de las lecciones ("qué pasos de qué lecciones estudiar hoy"), no divide las lecciones por día. Cada segmento enumera los números a estudiar, explica por qué se colocan aquí y qué preguntas usar para evaluar al final. La versión intensiva incluye además una versión de "mínimo indispensable" y enumera los números que "se pueden omitir primero"; la versión profunda se organiza por día, incluyendo contenido nuevo y repaso programado.

2. Versión Intensiva y Versión Profunda

Versión IntensivaVersión Profunda
AlcanceCentral e importanteTodos los puntos de conocimiento dentro del alcance
ExplicaciónHasta que sea suficiente para responder preguntasExplicar a fondo según la profundidad calibrada; para el nivel transfer, enseñar variantes
PrácticaUsar directamente preguntas reales para evaluarPrimero hacer preguntas simuladas, luego de estar hábil, hacer las preguntas reales
Exámenes realesUsarlos mientras se aprendeGuardarlos: solo cuando se alcance el estándar en todos los tipos de preguntas simuladas, desbloquear las preguntas reales correspondientes; al final, hacer una simulación cronometrada de todo el examen

Cuando falte tiempo, elimina en este orden: primero elimina las explicaciones de puntos de conocimiento secundarios, luego la cantidad de preguntas, y finalmente los pasos de la clase. El diagrama topológico y la información del examen no se eliminan.

3. Preguntas Simuladas (Obligatorio en la Versión Profunda)

  • Escribe 3–6 preguntas simuladas para cada tipo de pregunta del examen: evalúan las mismas habilidades, cambian el escenario, cambian los datos, con una dificultad no inferior a la de las preguntas reales. Cada una marca el tipo de pregunta real correspondiente (por ejemplo, "Tipo P2D del Examen muestra 2") y las habilidades evaluadas.
  • Orden de las preguntas: primero preguntas de una sola habilidad, luego preguntas de habilidades combinadas, y finalmente preguntas con el mismo nivel de complejidad que las preguntas reales.
  • Después de explicar cada módulo, inmediatamente vienen las preguntas simuladas de ese módulo.
  • Las preguntas simuladas se colocan en la página de práctica, con la etiqueta "Simulación", sin sección separada.

4. Manual de Exámenes Reales

  • Los módulos se ordenan según el peso del examen; el módulo 0 es la información del examen y las estrategias de respuesta; cada módulo comienza con un cuadro "Obligatorio memorizar".
  • Cada pregunta incluye: etiqueta de nivel (respuesta oficial / respuesta derivada, la respuesta derivada indica que no es oficial), fuente y puntuación, pregunta original, traducción al chino (cuando el examen sea en inglés), idea, respuesta plegada por defecto, casilla de verificación "Dominado". Cada subpregunta usa la tarjeta de pregunta unificada del sitio.
  • Cuando el examen sea en inglés, la respuesta primero da un párrafo de inglés que se puede copiar directamente y luego explica en chino por qué se responde de esa manera.
  • Un temporizador de examen completo (con tiempo preestablecido del examen, se puede pausar y borrar) y un interruptor "Expandir / Contraer todas las respuestas". No se implementan funciones poco comunes como temporizador por pregunta, resaltado de texto o clasificación de causas de pérdida de puntos.

5. Almacén Temporal de Cheat Sheet (Agregar cuando el examen permita apuntes)

  • En la parte superior de la página, hay un campo de entrada de una línea: pegar texto y presionar Enter para guardar; LaTeX se renderiza automáticamente; se pueden pegar imágenes directamente (almacenadas como data URL). Pegar en cualquier lugar de la página de Cheat Sheet también guarda.
  • Cada elemento registra el contexto en el momento del pegado (qué lección, qué paso, qué punto de conocimiento). Los elementos se almacenan en localStorage.
  • Hay un botón "Copiar todo (para usar con IA)": el usuario envía el contenido junto con el contexto a la IA, la IA organiza el contenido fragmentado en elementos legibles (título + texto, explicación en chino, mantiene los términos en inglés, fórmulas en LaTeX) y los vuelve a escribir en los datos de la página web; el original se conserva y se puede cambiar para verlo.
  • Las tarjetas se seleccionan haciendo clic (selección múltiple), menú contextual "Eliminar seleccionados", con confirmación en la página (no se puede usar confirm()); en dispositivos móviles, usa botones de la barra de herramientas. La eliminación es suave: se puede deshacer con la barra de notificación o restaurar desde "Eliminados recientemente".
  • Propósito: al hacer la hoja de notas, el contenido del almacén temporal se coloca en una pequeña sección del cheat sheet como "la parte menos sólida", y el resto lo genera la IA automáticamente según el curso.

7. Formato de la Explicación

Común a todos los tipos

  • Cada lección comienza con el paso 0: ¿qué problema resuelve esta lección? Al final, deberías ser capaz de... (lista numerada verificable).
  • Primero da la intuición, luego escribe la definición, luego da ejemplos. Un ejemplo recorre toda la lección, los pasos posteriores lo usan repetidamente.
  • Las oraciones deben ser cortas, en lenguaje humano, sin relleno. Explicación en chino, conservando las palabras originales en inglés; cuando el examen sea en inglés, cada paso marca las palabras clave en inglés.
  • La clase solo muestra un paso a la vez; en la parte inferior hay botones de paso anterior / siguiente. En la parte superior de la tarjeta se indica: Paso N · Minutos estimados · ID del punto de conocimiento · Término en inglés.
  • La barra lateral izquierda se divide en tres niveles, que deben distinguirse claramente sin estar abarrotados:
    • Unidad (Prerrequisitos, Módulo X...): barras de título plegables, con color de fondo y progreso, solo se despliega la unidad actual por defecto; solo registra los despliegues / pliegues realizados por el usuario (no confundas el toggle de inicialización de <details> con una acción del usuario).
    • Lección: una línea por lección, un punto de color del módulo a la izquierda, una etiqueta pequeña de progreso a la derecha; la lección actual tiene un borde resaltado; las lecciones no generadas se atenúan.
    • Paso: solo se despliega en la lección actual, unido por una línea de tiempo vertical; cada paso tiene un pequeño círculo numerado (se convierte en ✓ cuando está completado), con un tamaño de fuente más pequeño; el tiempo se muestra a la derecha; el botón "Línea principal de esta lección" se coloca encima de la lista de pasos.
  • Dentro de la tarjeta, usa estos bloques de contenido según sea necesario:
    • Cuadro de fórmula o definición central
    • Cuadro de "traducción al lenguaje humano"
    • Cuadro de ejemplo
    • Cuadro de punto de examen: marca la fuente, se expande línea por línea al hacer clic en "Siguiente paso"
    • Cuadro de puntos de atasco comunes
    • Cuadro de formato de respuesta
    • Solo para información (letra pequeña)
    • Tarjeta de revisión (para actualizaciones incrementales)
    • Autoevaluación
  • Incluso en la preparación para el examen, la disciplina debe explicarse de manera completa: los exámenes de muestra solo representan tipos de preguntas y preguntas típicas, no significan que lo que está fuera del alcance no se evaluará. El objetivo es aprender, y el examen es solo una verificación.
    • El "por qué aprender esto ahora" de cada paso debe escribir la motivación disciplinaria (qué problema dejó el paso anterior, cómo lo resuelve este paso), no "porque saldrá en el examen"; la fuente de la pregunta se enumera por separado al final de cada paso.
    • Los puntos de conocimiento fuera del alcance también se colocan en la clase y se explican claramente, solo que se marcan como secundarios.

Formato Fijo para la Explicación de Cada Paso

Cada paso se escribe en el siguiente orden. Si no hay, se omite, pero no se cambia el orden:

  1. Por qué se aprende ahora: una frase, escribe la motivación disciplinaria (qué problema dejó el paso anterior, cómo lo resuelve este paso).
  2. Intuición: 1–3 frases, o usa números específicos del ejemplo transversal para plantear la pregunta.
  3. Cuadro de definición / fórmula central: la fórmula va en una línea separada, centrada.
  4. Traducción al lenguaje humano: justo debajo de la fórmula, primero explica los símbolos uno por uno (qué son, si son números / vectores / matrices, aleatorios o fijos), luego una frase "cuando una magnitud aumenta, ¿cómo cambia el resultado?".
  5. Cuadro de ejemplo: usa los números del ejemplo transversal para calcular paso a paso, una línea por paso.
  6. Cuadro de puntos de atasco comunes (solo si los hay).
  7. Pregunta de autoevaluación: 1–2 preguntas, que justo evalúen el estándar de dominio de este paso.
  8. Fuente de la pregunta: última línea en letra pequeña, enumera las subpreguntas de exámenes reales que evalúan este paso.

Formato Fijo para Fórmulas y Composición (Referencia: Clase de Repaso MAST90138)

  • En línea o en bloque: los símbolos cortos se escriben en línea ($\hat\beta_1$); las definiciones, fórmulas centrales y conclusiones que hay que memorizar van en una línea separada, centradas.
  • Cadena de derivación: usa aligned, alinea con el signo igual, escribe una breve justificación a la derecha de cada línea con \quad\text{(justificación)}; las desigualdades o fórmulas muy largas también se dividen en líneas con aligned, sin romper la tarjeta.
  • Cálculo numérico en tres partes fijas: primero escribe la fórmula → luego sustituye los números → luego escribe el resultado; el resultado se redondea a 3–4 cifras significativas; todos los valores numéricos se verifican con código.
  • En las fórmulas, solo usa \text{} para palabras cortas, no escribas oraciones largas en chino.
  • Usa LaTeX real para la notación, coherente con los apuntes: vectores y matrices en negrita (\mathbf{X}, \boldsymbol\beta); los símbolos caligráficos cuando correspondan (información de Fisher \mathcal I, modelo \mathcal M, normal \mathcal N); los operadores y nombres de distribuciones en redonda (\operatorname{Var}, \mathrm{SS}_{\text{res}}, \mathrm{Bin}). No uses Unicode para componer fórmulas (XᵀX, β̂, F(2,4), etc.); esto también se aplica a títulos de puntos de conocimiento, estándares de dominio, opciones, pistas y traducciones de exámenes reales. Solo las etiquetas de nodos en diagramas topológicos SVG usan texto plano.
  • Define un conjunto de macros en la configuración de MathJax (por ejemplo, \X, \bb, \SSres, \FI), compartidas en todo el sitio, para garantizar la coherencia de la notación; cuando se use \boldsymbol, carga el paquete boldsymbol. En Python, las cadenas que contengan LaTeX deben ser siempre cadenas sin procesar (r"…").
  • No se pueden escribir directamente < y > en las fórmulas: cuando los datos se insertan en la página a través de innerHTML, <p en $\rk(\X)<p$ será interpretado por el navegador como el inicio de una etiqueta HTML, y todo el texto posterior se eliminará, dejando fragmentos de código como $\rk(\X). Al generar la página web, maneja esto de manera uniforme: recorre todas las cadenas de datos...

[El contenido continúa pero se trunca para esta traducción]


8. Banco de Preguntas y Opciones

(Contenido de la sección 8 omitido por brevedad en la entrada original, se mantendría la traducción completa si estuviera presente)


9. Notas del Curso y Registro de Cambios

(Sección 9 del markdown original, traducida y formateada de manera similar)


10. Publicación y Distribución

(Sección 10 del markdown original)

Skills relacionados