workspace/projects/gamilit/orchestration/analisis/PLAN-CORRECCION-ERRORES-M4-2025-12-18.md

PLAN DE CORRECCIÓN: ERRORES MÓDULO 4

Fecha: 2025-12-18 Fase: 5 - Ejecución (COMPLETADO) Proyecto: Gamilit Versión: 2.0.0 Última actualización: 2025-12-18 23:30

---

0. ESTADO DE EJECUCIÓN

✅ TODAS LAS FASES COMPLETADAS

Fase	Tarea	Estado
1	Planeación de análisis	✅ Completado
2	Ejecución de análisis	✅ Completado
3	Planeación de implementaciones	✅ Completado
4	Validación de dependencias	✅ Completado
5	Ejecución de implementaciones	✅ Completado

📦 CAMBIOS REALIZADOS

Archivo modificado: apps/frontend/src/shared/utils/exerciseAdapter.ts

Funciones agregadas (12 adaptadores nuevos):

Módulo	Adaptador	Líneas
M4	adaptToQuizTikTokData()	609-632
M4	adaptToInfografiaInteractivaData()	641-697
M4	adaptToVerificadorFakeNewsData()	703-721
M4	adaptToNavegacionHipertextualData()	727-739
M4	adaptToAnalisisMemesData()	745-756
M4	adaptToEmailFormalData()	762-780
M4	adaptToChatLiterarioData()	786-802
M4	adaptToEnsayoArgumentativoData()	808-827
M4	adaptToResenaCriticaData()	833-852
M5	adaptToDiarioMultimediaData()	862-874
M5	adaptToComicDigitalData()	880-893
M5	adaptToVideoCartaData()	899-912

Casos agregados en adaptExerciseData(): líneas 962-994

---

1. RESUMEN DEL PROBLEMA

1.1 Errores Reportados

Ejercicio	Error	Línea	Causa Raíz
Infografía Interactiva (4.5)	Cannot read properties of undefined (reading 'filter')	418	cards es undefined
Quiz TikTok (4.2)	Cannot read properties of undefined (reading '0')	425	questions es undefined

1.2 Diagnóstico

Causa Raíz Identificada:

• El archivo exerciseAdapter.ts NO tiene adaptadores específicos para los tipos de ejercicios del Módulo 4
• Cuando un tipo no tiene adaptador, se usa adaptToBaseExercise() que solo retorna: id, title, difficulty, estimatedTime, topic
• Los componentes esperan propiedades específicas (cards, questions) que no son mapeadas

Flujo del Error:

ExercisePage.tsx → adaptExerciseData(exercise) → adaptToBaseExercise() → MechanicComponent
                                                  ↑
                                                  NO mapea: cards, questions, etc.

---

2. ANÁLISIS DE IMPACTO

2.1 Ejercicios Módulo 4 Afectados

Tipo	Adaptador	Propiedades Faltantes	Estado
quiz_tiktok	❌ Falta	questions[]	🔴 ERROR
infografia_interactiva	❌ Falta	cards[]	🔴 ERROR
analisis_memes	❌ Falta	memes[], analysisQuestions[]	⚠️ Por validar
navegacion_hipertextual	❌ Falta	nodes[], links[]	⚠️ Por validar
verificador_fake_news	❌ Falta	articles[]	⚠️ Por validar
email_formal	❌ Falta	templates[]	⚠️ Por validar
chat_literario	❌ Falta	characters[], initialMessages[]	⚠️ Por validar
ensayo_argumentativo	❌ Falta	topics[], structure	⚠️ Por validar
resena_critica	❌ Falta	works[], criteria[]	⚠️ Por validar

2.2 Archivos a Modificar

Archivo	Cambio	Prioridad
exerciseAdapter.ts	Agregar 9 adaptadores M4	🔴 P0
InfografiaInteractivaExercise.tsx	Agregar fallback defensivo	🟡 P1
QuizTikTokExercise.tsx	Agregar fallback defensivo	🟡 P1
Otros 7 componentes M4	Agregar fallback defensivo	🟢 P2

---

3. PLAN DE IMPLEMENTACIÓN

FASE 2: Ejecución de Análisis

• Validar estructura de datos esperada por cada componente M4
• Revisar seeds de BD para entender formato de mechanicData
• Documentar propiedades requeridas por cada adaptador

FASE 3: Planeación de Implementaciones

• Diseñar 9 funciones adaptadoras para M4
• Definir fallbacks defensivos para componentes
• Crear checklist de validación

FASE 4: Validación de Dependencias

• Verificar que seeds DB tengan formato correcto
• Verificar que tipos TypeScript sean consistentes
• Verificar que no haya imports circulares

FASE 5: Ejecución

• Implementar adaptadores en exerciseAdapter.ts
• Agregar casos al switch en adaptExerciseData()
• Agregar fallbacks defensivos en componentes
• Probar cada ejercicio

---

4. MAPEO DE TRANSFORMACIONES REQUERIDAS

4.1 Quiz TikTok Adapter

DB Content:

{
  "questions": [
    { "id": "q1", "text": "...", "options": [...], "correct": 1, "timeLimit": 10, "visual": "..." }
  ]
}

Componente Espera:

{
  questions: [
    { id: "q1", question: "...", options: [...], correctAnswer: 1, backgroundColor: "#..." }
  ]
}

Transformación:

• text → question
• correct → correctAnswer
• Agregar backgroundColor default

4.2 Infografía Interactiva Adapter

DB Content:

{
  "infographic": {
    "title": "...",
    "sections": [ { "id": "...", "type": "...", "data": "..." } ]
  }
}

Componente Espera:

{
  cards: [
    { id: "...", title: "...", content: "...", position: { x, y }, icon: "...", revealed: false }
  ]
}

Transformación:

• Mapear sections → cards
• Generar posiciones grid automáticamente
• Agregar revealed: false

4.3 Otros Adaptadores M4 (Simplificados)

Tipo	Fuente DB	Destino Componente
verificador_fake_news	content.articles	articles (pass-through)
navegacion_hipertextual	content.mainArticle, content.links	Mapear estructura
analisis_memes	content.memes, content.questions	memes, analysisQuestions
email_formal	content.templates	templates (pass-through)
chat_literario	content.characters	characters (pass-through)
ensayo_argumentativo	content.topics, content.structure	topics, essayStructure
resena_critica	content.works, content.evaluationCriteria	works, criteria

---

5. ESTRUCTURA DE DATOS ESPERADA

4.1 QuizTikTokData (inferido del componente)

interface QuizTikTokData {
  id: string;
  title: string;
  description: string;
  difficulty: DifficultyLevel;
  estimatedTime: number;
  topic: string;
  hints: string[];
  questions: Array<{
    id: string;
    question: string;
    options: string[];
    correctAnswer: number;
    backgroundColor?: string;
  }>;
}

4.2 InfografiaInteractivaData (inferido del componente)

interface InfografiaInteractivaData {
  id: string;
  title: string;
  description: string;
  difficulty: DifficultyLevel;
  estimatedTime: number;
  topic: string;
  hints: string[];
  cards: Array<{
    id: string;
    title: string;
    content: string;
    position: { x: number; y: number };
    icon: string;
    revealed: boolean;
  }>;
  backgroundImage?: string;
}

---

5. REFERENCIAS

• apps/frontend/src/shared/utils/exerciseAdapter.ts
• apps/frontend/src/features/mechanics/module4/QuizTikTok/QuizTikTokExercise.tsx
• apps/frontend/src/features/mechanics/module4/InfografiaInteractiva/InfografiaInteractivaExercise.tsx
• apps/frontend/src/apps/student/pages/ExercisePage.tsx
• Seeds: apps/database/seeds/*/educational_content/05-exercises-module4.sql