feat(VocabLessonView): verbessere die Lückentextformatierung mit Fallback-Optionen

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);