From fa6164f93faadb04e7b95127925c2d5509e6a996 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 21 May 2026 13:53:22 +0200
Subject: [PATCH] =?UTF-8?q?feat(VocabLessonView):=20verbessere=20die=20L?=
 =?UTF-8?q?=C3=BCckentextformatierung=20mit=20Fallback-Optionen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/social/VocabLessonView.vue | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 825ee24..8254864 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -3212,10 +3212,38 @@ export default {
     },
     formatGapFill(exercise) {
       const qData = this.getQuestionData(exercise);
-      if (!qData || !qData.text) return '';
-      
-      // Ersetze {gap} mit Platzhaltern
-      return qData.text.replace(/\{gap\}/g, '<span class="gap">_____</span>');
+      const aData = this.getAnswerData(exercise);
+
+      // Bevorzugt: expliziter Lückentext
+      if (qData && qData.text) {
+        return qData.text.replace(/\{gap\}/g, '<span class="gap">_____</span>');
+      }
+
+      // Fallbacks: Frage-Text, Erklärung oder Titel anzeigen
+      let base = (qData && qData.question) ? String(qData.question) : '';
+      if (!base && exercise && exercise.explanation) base = String(exercise.explanation);
+      if (!base && exercise && exercise.title) base = String(exercise.title || '');
+
+      // Wenn noch nichts, aber answerData enthält Antworten, zeige Platzhalter für die Lücken
+      if (!base && aData) {
+        const answers = aData.answers || aData.correct || [];
+        const arr = Array.isArray(answers) ? answers : [answers];
+        if (arr.length > 0) {
+          // Zeige die erwarteten Wörter kurz im Kontext-Placeholder
+          return arr.map(() => '<span class="gap">_____</span>').join(' ');
+        }
+      }
+
+      // Wenn base vorhanden ist, versuche vorhandene {gap}-Marker zu ersetzen, sonst anhängen
+      if (base) {
+        if (base.includes('{gap}')) {
+          return base.replace(/\{gap\}/g, '<span class="gap">_____</span>');
+        }
+        // Keine Marker: füge eine Lücke am Ende an
+        return `${base} <span class="gap">_____</span>`;
+      }
+
+      return '';
     },
     getGapCount(exercise) {
       const qData = this.getQuestionData(exercise);