webs-sdk 0.19.64 → 0.19.66

package/docs/FOR_YOU_QUIZ_ARCHITECTURE.md

@@ -0,0 +1,753 @@
+# For You Quiz — Arquitectura Completa
+
+## Tabla de Contenidos
+
+1. [Entrada de la página](#1-entrada-de-la-página)
+2. [ForYouQuizView — Wrapper de la vista](#2-foryouquizview--wrapper-de-la-vista)
+3. [Helpers del hub: tema y config](#3-helpers-del-hub-tema-y-config)
+4. [QuizSection — El motor principal](#4-quizsection--el-motor-principal)
+5. [APIs involucradas](#5-apis-involucradas)
+6. [Parseo de datos del backend](#6-parseo-de-datos-del-backend)
+7. [QuizCard — Tarjeta del listado](#7-quizcard--tarjeta-del-listado)
+8. [QuizModal — El juego en sí](#8-quizmodal--el-juego-en-sí)
+9. [Cálculo de puntuación](#9-cálculo-de-puntuación)
+10. [Estructura de datos del backend](#10-estructura-de-datos-del-backend)
+11. [Diagrama de flujo completo](#11-diagrama-de-flujo-completo)
+12. [Tipos TypeScript internos](#12-tipos-typescript-internos)
+
+---
+
+## 1. Entrada de la página
+
+**Archivo:** `src/components/layout/SPALayout/helpers/renderCurrentView.tsx`
+
+La aplicación usa una SPA interna (no pages de Next.js). Hay dos mapas que conectan la URL con el componente:
+
+```ts
+// Mapa URL → clave de vista
+urlToViewMap: {
+  "/for-you-quiz": "for-you-quiz"
+}
+
+// Registro de vistas: clave → componente
+viewRegistry: {
+  "for-you-quiz": () => <ForYouQuizView />
+}
+```
+
+Cuando el `SPALayout` detecta que la ruta activa es `/for-you-quiz`, renderiza `<ForYouQuizView />` sin parámetros adicionales.
+
+---
+
+## 2. ForYouQuizView — Wrapper de la vista
+
+**Archivo:** `src/components/pages/ForYouQuizView.tsx`
+
+Es el componente de entrada para la vista. Su responsabilidad es:
+
+1. **Proteger el acceso** con `useContentAccess().checkAndRedirect()` (en `useEffect`).
+2. **Resolver el tema visual** via `useForYouTheme()`.
+3. **Resolver la config de contenidos** via `useForYouItemConfig('Quiz')`.
+4. **Extraer tags e IDs** de la config para pasarlos al componente motor.
+5. **Montar `<QuizSection>`** con toda la configuración unificada.
+
+### Props
+
+```ts
+interface ForYouQuizViewProps {
+  config?: any; // Config opcional, puede venir de featured sections
+}
+```
+
+Si se pasa `config` por props se usa esa, sino se usa la obtenida por `useForYouItemConfig('Quiz')`. Esto permite reusar el componente desde otras secciones (ej: hub de For You).
+
+### Extracción de tags e IDs (con `useMemo`)
+
+```ts
+// Une todos los tags de todos los items de contenido de la config
+const allTags = [...new Set(
+  itemConfig?.contents?.flatMap((c) => c.tags ?? []) ?? ['quizzes']
+)] as string[];
+
+// Une todos los IDs específicos de todos los items de contenido
+const allIds = [...new Set(
+  itemConfig?.contents?.flatMap((c) => (c.includeIds ?? []) as number[]) ?? []
+)] as number[];
+```
+
+> Si `itemConfig` es `undefined`, `allTags` tiene como fallback `['quizzes']` y `allIds` queda vacío.
+
+### Config que se pasa a QuizSection
+
+```ts
+{
+  apiUrl: '/api/get_contents_by_tags',
+  questionsApiUrl: '/api/content-preset',
+  website_id,           // del websiteStore (product_config.website_id)
+  tags: allTags,
+  includeIds: allIds,
+  locale,               // idioma activo de next-intl
+  initialCount: 12,     // quizzes visibles al inicio
+  loadMoreCount: 8,     // quizzes adicionales por click en "Load more"
+}
+```
+
+---
+
+## 3. Helpers del hub: tema y config
+
+**Archivo:** `src/components/pages/ForYouHubView.tsx`
+
+Estos helpers son exportados y usados por todos los componentes de la sección For You.
+
+### `useForYouTheme()`
+
+Lee **variables CSS en tiempo de ejecución** del tema activo del portal. Devuelve un objeto con todos los colores:
+
+| Propiedad | Variable CSS | Fallback |
+|---|---|---|
+| `primaryColor` | `--button-primary-bg` | `#FF2273` |
+| `primaryHoverColor` | `--button-primary-hover-bg` | `#E81F69` |
+| `textColor` | `--color-text-secondary` | `#0F1F35` |
+| `backgroundColor` | `--neutral-100` | `#F5F5F5` |
+| `cardBackground` | `--color-surface-base` | `#FFFFFF` |
+| `buttonColor` | `--button-primary-bg` | `#FF2273` |
+| `buttonTextColor` | `--neutral-0` | `#FFFFFF` |
+| `neutralMid` | `--neutral-500` | `#8C8C8C` |
+| `cardBorderColor` | `--color-border-primary` | `rgba(15,31,53,0.1)` |
+| `titleAccentColor` | `--color-brand-accent-500` | `#FF2273` |
+| `titleDarkColor` | `--color-brand-secondary-500` | `#210F5C` |
+
+En SSR (window === undefined) devuelve los fallbacks directamente.
+
+### `useForYouItemConfig(itemKey: string)`
+
+Busca en `product_config.sections` la sección con `key: 'foryou'` (o `'for-you'`) y dentro de sus `items` el que tenga `key === itemKey`.
+
+```ts
+// Ejemplo de lo que lee del backend:
+product_config.sections = [
+  {
+    key: 'foryou',
+    items: [
+      {
+        key: 'Quiz',
+        contents: [
+          { tags: ['quizzes', 'sports-quiz'], includeIds: [832, 900] }
+        ]
+      }
+    ]
+  }
+]
+```
+
+---
+
+## 4. QuizSection — El motor principal
+
+**Archivo:** `src/components/quiz/QuizSection.tsx`
+
+Componente que gestiona todo el ciclo de vida del quiz: carga de lista, navegación, modal de juego y resultados.
+
+### Estado interno
+
+```ts
+const [quizItems, setQuizItems] = useState<QuizItem[]>([]);
+const [loading, setLoading] = useState(true);
+const [visibleCount, setVisibleCount] = useState(initialCount);
+const [activeQuiz, setActiveQuiz] = useState<QuizItem | null>(null);
+const [activeQuestions, setActiveQuestions] = useState<QuizQuestion[]>([]);
+const [activeResults, setActiveResults] = useState<QuizResult[]>([]);
+const [loadingQuestions, setLoadingQuestions] = useState(false);
+```
+
+### Carga del listado (`fetchList`)
+
+Disparado al montar y cuando cambian `apiUrl`, `locale`, `tags` o `includeIds`.
+
+Hace hasta 2 peticiones en paralelo con `Promise.all`:
+
+```
+Si tags.length > 0:
+  POST /api/get_contents_by_tags
+  { language, tags, website_id }
+
+Si includeIds.length > 0:
+  POST /api/get_contents_by_tags
+  { language, includeIds, preset: 'getGlobalContentsByIDs', website_id }
+```
+
+Los resultados de ambas se normalizan, se deduplican por `id` y se convierten en `QuizItem[]`.
+
+### Carga de preguntas (`handleCardClick`)
+
+Disparado cuando el usuario hace click en una card.
+
+```
+POST /api/content-preset
+{
+  preset: "getQuiz",
+  params: {
+    quiz_id: quiz.contentsId,
+    language: locale,
+    website_id
+  }
+}
+```
+
+Luego llama a `extractQuestions(rawItem, locale)` y `extractResults(rawItem, locale)`.
+
+### Paginación del listado
+
+```ts
+const visible = quizItems.slice(0, visibleCount);
+const hasMore = visibleCount < quizItems.length;
+
+// Al hacer click en "Load more":
+setVisibleCount((c) => c + loadMoreCount);
+```
+
+---
+
+## 5. APIs involucradas
+
+### `POST /api/get_contents_by_tags`
+
+**Archivo:** `src/app/api/get_contents_by_tags/route.ts`
+
+Punto de entrada para obtener la **lista de quizzes disponibles**.
+
+| Param en body | Descripción |
+|---|---|
+| `language` | Idioma activo (ej: `'es'`) |
+| `tags` | Array de strings (ej: `['quizzes']`) |
+| `website_id` | ID del portal |
+| `preset` | Override del preset SDK (por defecto `'getGlobalContentsByTags'`) |
+| `includeIds` | Array de IDs numéricos → se mapean a `id_list` como enteros |
+
+Internamente llama a:
+```ts
+WebsSDK.ContentManager.getContentByPreset(preset, params)
+```
+
+### `POST /api/content-preset`
+
+**Archivo:** `src/app/api/content-preset/route.ts`
+
+Punto de entrada para obtener las **preguntas de un quiz específico**.
+
+| Param en body | Descripción |
+|---|---|
+| `preset` | Nombre del preset SDK (ej: `'getQuiz'`) |
+| `params.quiz_id` | ID del quiz (el `contentsId` del QuizItem) |
+| `params.language` | Idioma activo |
+| `params.website_id` | ID del portal |
+
+Internamente llama a:
+```ts
+WebsSDK.ContentManager.getContentByPreset('getQuiz', params)
+```
+
+La respuesta del endpoint tiene este formato:
+```json
+{
+  "success": true,
+  "preset": "getQuiz",
+  "data": { ... },
+  "params": { ... }
+}
+```
+
+---
+
+## 6. Parseo de datos del backend
+
+### `normalizeResponse(json)`
+
+Maneja múltiples formatos de envelope del backend para devolver siempre `RawContent[]`:
+
+```
+json[]                            → devuelve directo
+json.data.data.data.quiz_configuration → single object con quiz
+json.data.data.data[]             → array
+json.data.data[]                  → array
+json.data.contents[]              → array
+json.data[]                       → array
+json.data (single object)         → array de 1
+json.quiz_configuration           → single object
+```
+
+### `toQuizItem(item)` — transforma RawContent a QuizItem
+
+Extrae:
+- `id` ← `item.id`
+- `title` ← `item.title || item.name`
+- `description` ← `item.description`
+- `thumbnail` ← `item.thumbnail || item.image || item.files[0].url || item.images.img1`
+- `contentsId` ← `String(item.contents)` — **el ID del quiz con preguntas**
+- `personality` ← `meta.personality === true` (booleano o string `'true'`)
+
+> Si `title` o `contentsId` están vacíos, devuelve `null` (el item se descarta).
+
+### `extractQuestions(item, locale)` — extrae preguntas del quiz
+
+Busca `quiz_configuration` en `item.metadata` o directamente en `item`.
+
+**Resolución del locale** (tolerante a variaciones):
+```
+'ES' → locale.toUpperCase()
+'es' → locale (literal)
+'FR' → locale.substring(0,2).toUpperCase()  // de 'fr-FR'
+```
+
+Para cada `pregunta` en `langs[LOCALE].preguntas`:
+- `question` ← `pregunta.titulo`
+- `options[]` ← `pregunta.respuestas.map(r => ({ text: r.titulo, points: r.puntos ?? 0 }))`
+- `maxPoints` ← `Math.max(...options.map(o => o.points))`
+- `id` ← `${item.id}_q${index}`
+
+Si no hay `quiz_configuration`, usa el **formato legacy** (`toQuestion()`):
+- `meta.respuestas[]` con `{ titulo, puntos }` → puntos-based
+- `meta.options[]` o `meta.option_a/b/c/d` → legacy correcto/incorrecto
+- `meta.correct_option || meta.correct || meta.answer` → índice correcto
+
+### `extractResults(item, locale)` — extrae mensajes de resultado
+
+Busca en `langs[LOCALE].resultados[]`:
+- `title` / `description` ← `resultado.titulo`
+- `minPoints` ← `resultado.puntos_ini`
+- `maxPoints` ← `resultado.puntos_fin`
+
+---
+
+## 7. QuizCard — Tarjeta del listado
+
+Componente interno de `QuizSection`. Muestra:
+
+- **Thumbnail** (ratio 16:9) — si no hay imagen muestra un círculo numerado con `primaryColor`
+- **Título** (máx. 2 líneas con `WebkitLineClamp`)
+- **Descripción** (máx. 2 líneas, si existe)
+- **Botón CTA** — texto del texto `startQuiz`
+
+Estilos en hover:
+- Border cambia a `primaryColor`
+- `translateY(-2px)` (levitación)
+- Sombra aumenta: `0 8px 24px rgba(0,0,0,0.12)`
+
+Al hacer click delega a `handleCardClick(quiz)` que está en `QuizSection`.
+
+---
+
+## 8. QuizModal — El juego en sí
+
+Componente interno de `QuizSection`. Se monta en un **portal fixed** (overlay con `z-index: 9999`).
+
+### Estado del modal
+
+```ts
+const [currentIndex, setCurrentIndex] = useState(startIndex);
+const [answers, setAnswers] = useState<Map<number, number>>(new Map());
+// Map<questionIndex, selectedOptionIndex>
+const [finished, setFinished] = useState(false);
+```
+
+### Comportamiento durante el juego
+
+**Barra de progreso:**
+```
+width = ((currentIndex + 1) / total) * 100%
+Label = formatLabel(questionLabel, { current: currentIndex+1, total })
+```
+
+**Selección de opción:**
+- Guarda `Map.set(currentIndex, optionIndex)`.
+- El usuario puede cambiar la respuesta antes de avanzar.
+- Puede volver a preguntas anteriores (el botón Anterior re-activa la respuesta previa).
+
+**Coloreado de opciones:**
+
+| Modo | Estado | Comportamiento |
+|---|---|---|
+| Puntos (sin `correctIndex`) | Opción seleccionada | Se pinta con `primaryColor` |
+| Puntos (sin `correctIndex`) | Sin responder | Color neutro de card |
+| Legacy (`correctIndex` definido) | Después de responder | Correcta = verde, Incorrecta = rojo |
+
+**Feedback (solo legacy):**
+```
+Correcto → texts.correctAnswer (verde #2E7D32)
+Incorrecto → texts.wrongAnswer (rojo #C62828) + explanation opcional
+```
+
+**Navegación:**
+- Botón **Anterior**: solo visible si `currentIndex > 0`
+- Botón **Siguiente/Enviar**:
+  - Deshabilitado (`cursor: not-allowed`, opacidad 50%) si no hay respuesta
+  - Texto = `nextButton` si no es la última pregunta
+  - Texto = `submitButton` en la última pregunta
+  - Al hacer click en la última pregunta → `setFinished(true)`
+
+**Cierre del modal:**
+- Click fuera del modal (overlay)
+- Tecla `Escape`
+- Botón ✕
+- Scroll del body bloqueado (`document.body.style.overflow = 'hidden'`) mientras está abierto
+
+---
+
+## 9. Cálculo de puntuación
+
+Cuando `finished === true` el modal entra en **pantalla de resultado**.
+
+### Algoritmo de puntuación
+
+```ts
+let score = 0;
+
+answers.forEach((optionIdx, questionIdx) => {
+  const question = questions[questionIdx];
+
+  if (question.correctIndex === undefined) {
+    // Quiz por puntos: suma los puntos de la opción elegida
+    score += question.options[optionIdx].points;
+  } else {
+    // Quiz legacy: suma 1 por cada respuesta correcta
+    if (optionIdx === question.correctIndex) score += 1;
+  }
+});
+```
+
+### Cálculo del total máximo (para quizzes por puntos)
+
+```ts
+const dynamicMax = questions.reduce((sum, q) => sum + (q.maxPoints ?? 0), 0);
+
+// Prioridad:
+// 1. dynamicMax si > 0  (suma de maxPoints por pregunta)
+// 2. results[last].maxPoints  (tope del último resultado)
+// 3. score actual (fallback)
+```
+
+### Matching del resultado
+
+```ts
+const matchedResult = results.find(
+  r => score >= r.minPoints && score <= r.maxPoints
+);
+resultMessage = matchedResult?.description;
+```
+
+### Pantalla de resultado según tipo
+
+**Quiz por puntos, modo normal** (`personality !== true`):
+```
+🏆 (icono)
+"{score}/{totalMax} puntos"  ← formato de scoreLabel
+"Eres un crack!"             ← resultMessage (si encontró matching)
+```
+
+**Quiz por puntos, modo `personality: true`**:
+```
+🏆 (icono)
+"Eres un experto del fútbol" ← resultMessage en grande (24px, negrita)
+(SIN mostrar el marcador numérico)
+```
+
+**Quiz legacy (correcto/incorrecto)**:
+```
+🏆 (icono)
+"3/5"   ← score/total de preguntas
+(sin resultMessage)
+```
+
+### Acciones en la pantalla de resultado
+
+- **Retry** → `setCurrentIndex(startIndex)`, `setAnswers(new Map())`, `setFinished(false)`
+- **Close** → `onClose()` → limpia `activeQuiz`, `activeQuestions`, `activeResults` en `QuizSection`
+
+---
+
+## 10. Estructura de datos del backend
+
+### Item del listado de quizzes
+
+Respuesta de `getGlobalContentsByTags`:
+
+```json
+{
+  "id": 100,
+  "title": "¿Cuánto sabes de Fútbol?",
+  "description": "Pon a prueba tus conocimientos",
+  "thumbnail": "https://cdn.example.com/quiz-thumb.jpg",
+  "contents": "832",
+  "metadata": "{\"personality\": false}"
+}
+```
+
+> `contents` es el campo clave — contiene el ID del quiz con preguntas.
+
+### Item completo del quiz (respuesta de `getQuiz`)
+
+```json
+{
+  "id": 832,
+  "title": "Quiz de Fútbol",
+  "quiz_configuration": {
+    "langs": {
+      "ES": {
+        "preguntas": [
+          {
+            "titulo": "¿Quién ganó el Mundial 2022?",
+            "respuestas": [
+              { "titulo": "Francia",    "puntos": 0  },
+              { "titulo": "Argentina",  "puntos": 10 },
+              { "titulo": "Brasil",     "puntos": 0  }
+            ]
+          },
+          {
+            "titulo": "¿Cuántos balones de oro tiene Messi?",
+            "respuestas": [
+              { "titulo": "6",  "puntos": 0  },
+              { "titulo": "7",  "puntos": 5  },
+              { "titulo": "8",  "puntos": 10 }
+            ]
+          }
+        ],
+        "resultados": [
+          { "titulo": "¡Eres un crack total!",  "puntos_ini": 15, "puntos_fin": 20 },
+          { "titulo": "Buen nivel futbolero",   "puntos_ini": 8,  "puntos_fin": 14 },
+          { "titulo": "Sigue practicando",      "puntos_ini": 0,  "puntos_fin": 7  }
+        ]
+      },
+      "EN": {
+        "preguntas": [ ... ],
+        "resultados": [ ... ]
+      }
+    }
+  }
+}
+```
+
+### Item quiz formato legacy (correcto/incorrecto)
+
+```json
+{
+  "id": 200,
+  "title": "¿Sabes de Tenis?",
+  "metadata": {
+    "question": "¿Cuántos Grand Slams tiene Nadal?",
+    "options": ["20", "21", "22", "23"],
+    "correct_option": 2,
+    "explanation": "Nadal ganó 22 Grand Slams antes de retirarse."
+  }
+}
+```
+
+Alternativa con `option_a..d`:
+```json
+{
+  "metadata": {
+    "question": "¿Cuál es la capital del tenis?",
+    "option_a": "Wimbledon",
+    "option_b": "Roland Garros",
+    "option_c": "Flushing Meadows",
+    "option_d": "Melbourne Park",
+    "correct": 0
+  }
+}
+```
+
+---
+
+## 11. Diagrama de flujo completo
+
+```
+URL: /for-you-quiz
+         │
+         ▼
+SPALayout → renderCurrentView → <ForYouQuizView />
+         │
+         ▼
+useForYouItemConfig('Quiz')
+  └─ product_config.sections[key='foryou'].items[key='Quiz']
+  └─ → { contents: [{ tags: ['quizzes'], includeIds: [832] }] }
+         │
+         ▼
+allTags = ['quizzes']
+allIds  = [832]
+         │
+         ▼
+<QuizSection config theme texts>
+         │
+         ▼ (mount / locale/tags change)
+fetchList()
+  ├─ POST /api/get_contents_by_tags  {tags: ['quizzes'], language, website_id}
+  │    └─ SDK: getGlobalContentsByTags
+  └─ POST /api/get_contents_by_tags  {includeIds: [832], preset: 'getGlobalContentsByIDs'}
+       └─ SDK: getGlobalContentsByIDs
+         │
+         ▼
+normalizeResponse() → toQuizItem[] → quizItems (deduplicados)
+         │
+         ▼
+Grid de <QuizCard> (12 iniciales, +8 por Load More)
+         │
+         ▼ (click en card)
+handleCardClick(quiz)
+  └─ POST /api/content-preset  {preset: 'getQuiz', params: {quiz_id: '832', language, website_id}}
+       └─ SDK: getContentByPreset('getQuiz', ...)
+         │
+         ▼
+normalizeResponse() → rawItems
+extractQuestions(rawItems[0], locale) → QuizQuestion[]
+extractResults(rawItems[0], locale)   → QuizResult[]
+         │
+         ▼
+<QuizModal questions results personality>
+         │
+         ├─ Pregunta actual → opciones clickables
+         ├─ Barra de progreso
+         ├─ Botón Anterior (si currentIndex > 0)
+         └─ Botón Siguiente/Enviar (deshabilitado sin respuesta)
+         │
+         ▼ (última pregunta respondida → Submit)
+finished = true
+         │
+         ▼
+score = Σ options[selectedIdx].points   (puntos-based)
+     ó  Σ (optionIdx === correctIndex)  (legacy)
+         │
+         ▼
+matchedResult = results.find(r => score >= r.min && score <= r.max)
+         │
+         ▼
+Pantalla de resultado:
+  - personality=false → "score/totalMax" + resultMessage
+  - personality=true  → solo resultMessage en grande
+  - legacy            → "score/totalPreguntas"
+         │
+         ├─ [Retry] → resetear estado del modal
+         └─ [Close] → cerrar modal, limpiar estado
+```
+
+---
+
+## 12. Tipos TypeScript internos
+
+**Archivo:** `src/components/quiz/QuizSection.tsx`
+
+```ts
+// Config del componente (entrada)
+interface QuizConfig {
+  apiUrl: string;
+  questionsApiUrl?: string;
+  tags?: string[];
+  includeIds?: number[];
+  locale?: string;
+  initialCount?: number;
+  loadMoreCount?: number;
+  website_id?: string;
+}
+
+// Tema visual (entrada)
+interface QuizTheme {
+  primaryColor: string;
+  primaryHoverColor: string;
+  textColor: string;
+  backgroundColor: string;
+  cardBackground: string;
+  buttonColor?: string;
+  buttonTextColor?: string;
+  neutralMid?: string;
+  cardBorderColor?: string;
+  titleAccentColor?: string;
+  titleDarkColor?: string;
+}
+
+// Textos i18n (entrada)
+interface QuizTexts {
+  title: string;
+  subtitle?: string;
+  loading: string;
+  noItems: string;
+  loadMore: string;
+  startQuiz: string;
+  questionLabel: string;   // usa {current} y {total}
+  nextButton: string;
+  submitButton: string;
+  correctAnswer: string;
+  wrongAnswer: string;
+  retryButton: string;
+  closeButton: string;
+  scoreLabel: string;      // usa {score} y {total}
+  previousButton?: string;
+  loadingQuestions?: string;
+}
+
+// Item del listado (interno)
+interface QuizItem {
+  id: string | number;
+  title: string;
+  description?: string;
+  thumbnail?: string;
+  contentsId: string;      // valor de item.contents
+  personality?: boolean;   // oculta puntuación, muestra solo resultado
+}
+
+// Pregunta individual (interna)
+interface QuizQuestion {
+  id: string | number;
+  question: string;
+  thumbnail?: string;
+  options: Array<{ text: string; points: number }>;
+  correctIndex?: number;   // undefined = quiz por puntos; número = legacy
+  explanation?: string;    // solo legacy
+  maxPoints?: number;      // máximo de puntos alcanzable en esta pregunta
+}
+
+// Resultado final del quiz (interno)
+interface QuizResult {
+  title: string;
+  description: string;
+  minPoints: number;
+  maxPoints: number;
+}
+```
+
+### `formatLabel(template, vars)` — helper de interpolación
+
+Reemplaza `{key}` en un string por su valor correspondiente:
+```ts
+formatLabel("Pregunta {current} de {total}", { current: 2, total: 5 })
+// → "Pregunta 2 de 5"
+```
+
+Usado en `questionLabel` y `scoreLabel`.
+
+---
+
+## Claves de traducción i18n usadas
+
+Namespace: `for_you.quiz_component.*`
+
+| Clave | Uso |
+|---|---|
+| `title` | Título del listado |
+| `subtitle` | Subtítulo del listado |
+| `loading` | Texto mientras carga el listado |
+| `no_items` | Texto cuando no hay quizzes |
+| `load_more` | Botón para cargar más |
+| `start_quiz` | Texto del CTA en cada card |
+| `question_label` | Label de progreso: `"Question {current} of {total}"` |
+| `next_button` | Botón siguiente pregunta |
+| `previous_button` | Botón pregunta anterior |
+| `submit_button` | Botón en la última pregunta |
+| `correct_answer` | Feedback correcto (legacy) |
+| `wrong_answer` | Feedback incorrecto (legacy) |
+| `retry_button` | Botón reintentar en resultado |
+| `close_button` | Botón cerrar en resultado |
+| `score_label` | Resultado: `"You got {score}/{total} correct"` |
+| `loading_questions` | Texto mientras carga el modal |
+
+---
+
+*Documento generado el 29/06/2026*