openccb/DEBUG_MEMORY_GAME.md

Debugging: Memory Game Block

Pasos para Diagnosticar el Problema

1. Abrir Consola del Navegador

1. Ve a la lección que quieres editar
2. Presiona F12 o clic derecho → "Inspeccionar"
3. Ve a la pestaña "Console"

2. Agregar Bloque Memory Match

1. Haz clic en el botón "🧩 Logic Game" (Memory Match)
2. Verifica en consola: ¿Aparece el log [MemoryBlock] Render with pairs: [...]?

3. Editar los Pares

1. Escribe texto en "Synapse Alpha" (left)
2. Escribe texto en "Synapse Beta" (right)
3. Verifica en consola: ¿Aparecen los logs [MemoryBlock] Updating pair at index...?

4. Guardar la Lección

1. Haz clic en "Save" o "Guardar"
2. Verifica en consola: ¿Hay algún error rojo?

5. Recargar la Página

1. Recarga la página (F5)
2. Verifica: ¿El bloque Memory Match aparece con los datos que guardaste?

---

Posibles Problemas y Soluciones

Problema 1: El bloque no aparece al crear

Síntoma: Haces clic en "🧩 Logic Game" pero no pasa nada

Solución:

// Verifica que el bloque se está agregando
console.log('Blocks after add:', blocks);

Problema 2: Los campos no se actualizan

Síntoma: Escribes en los inputs pero el texto no aparece

Causa probable: El estado no se está actualizando correctamente

Verifica en consola:

[MemoryBlock] Updating pair at index 0 : {left: "texto"}

Problema 3: Los datos no se guardan

Síntoma: Guardas la lección pero al recargar los pares están vacíos

Causa probable: El backend no está procesando correctamente los pares

Verifica:

1. En la pestaña Network (F12 → Network)
2. Busca la petición PUT a /lessons/{id}
3. Revisa el payload: ¿Los pares tienen los valores que escribiste?

Problema 4: Error al guardar

Síntoma: Aparece alerta "Failed to save activity"

Verifica en consola: ¿Hay un error rojo con más detalles?

---

Comandos de Debugging

En la consola del navegador:

// Verificar bloques actuales
console.log('Current blocks:', blocks);

// Verificar solo bloques memory-match
console.log('Memory blocks:', blocks.filter(b => b.type === 'memory-match'));

// Verificar estructura de un par
console.log('First pair:', blocks.filter(b => b.type === 'memory-match')[0]?.pairs?.[0]);

En la consola del servidor (Docker):

# Ver logs de Studio
docker logs openccb-studio-1 --tail 100

# Buscar errores específicos
docker logs openccb-studio-1 --tail 100 | grep -i "error\|memory\|block"

---

Estructura Esperada del Bloque

Un bloque Memory Match correctamente formado se ve así:

{
  "id": "uuid-generado",
  "type": "memory-match",
  "title": "Mi Juego de Memoria",
  "pairs": [
    {
      "id": "pair_1234567890_abc123",
      "left": "Término A",
      "right": "Definición A"
    },
    {
      "id": "pair_1234567891_def456",
      "left": "Término B",
      "right": "Definición B"
    }
  ]
}

---

Checklist de Verificación

• El botón "🧩 Logic Game" aparece en la lista de bloques
• Al hacer clic, se agrega un bloque a la lección
• El bloque muestra campos para título y pares
• Puedo escribir en los campos "Synapse Alpha" y "Synapse Beta"
• Al escribir, los valores se actualizan en el estado
• Puedo agregar más pares con el botón "+"
• Puedo eliminar pares con el botón de basura
• Al guardar, no aparece ningún error
• Al recargar, los pares mantienen sus valores

---

Reportar el Problema

Por favor proporciona:

1. ¿Qué paso del checklist falla?
2. Captura de pantalla de la consola (F12 → Console)
3. ¿Qué ves en la pestaña Network? (F12 → Network → petición PUT)
4. ¿Los logs [MemoryBlock] aparecen en consola?

---

Fecha: 2026-03-23 Versión: OpenCCB 0.2.0