-
+
{{ vocab.learning || '—' }}
→
{{ vocab.reference }}
+
@@ -957,6 +976,8 @@ const LESSON_STATE_VERSION = 1;
const VOCAB_REPEAT_INTERVALS = [1, 2, 4];
/** Mindest-Erfolgsquote im Vokabeltrainer (gesamt), damit die Kapitel-Prüfung freigeschaltet wird. */
const EXERCISE_UNLOCK_MIN_SUCCESS_PERCENT = 70;
+/** Max. Zeilen pro Seite in der einklappbaren Vokabel-Gesamtübersicht */
+const VOCAB_OVERVIEW_PAGE_SIZE = 40;
export default {
name: 'VocabLessonView',
@@ -1046,7 +1067,9 @@ export default {
lessonStateSaveTimer: null,
lessonStateSaveInFlight: false,
pendingLessonStatePayload: null,
- resettingLessonProgress: false
+ resettingLessonProgress: false,
+ /** Seitennummer (1-basiert) für die Vokabel-Gesamtübersicht */
+ vocabOverviewPage: 1
};
},
computed: {
@@ -1347,6 +1370,31 @@ export default {
return Array.from(vocabByReference.values());
},
+ vocabOverviewTotalPages() {
+ const n = this.lessonVocab.length;
+ if (n === 0) {
+ return 1;
+ }
+ return Math.ceil(n / VOCAB_OVERVIEW_PAGE_SIZE);
+ },
+ paginatedLessonVocab() {
+ const list = this.lessonVocab;
+ const totalPages = this.vocabOverviewTotalPages;
+ const page = Math.min(Math.max(1, this.vocabOverviewPage), totalPages);
+ const start = (page - 1) * VOCAB_OVERVIEW_PAGE_SIZE;
+ return list.slice(start, start + VOCAB_OVERVIEW_PAGE_SIZE);
+ },
+ vocabOverviewPagerMeta() {
+ const n = this.lessonVocab.length;
+ const totalPages = this.vocabOverviewTotalPages;
+ const page = Math.min(Math.max(1, this.vocabOverviewPage), totalPages);
+ if (n === 0) {
+ return { from: 0, to: 0, page: 1, pages: 1, total: 0 };
+ }
+ const from = (page - 1) * VOCAB_OVERVIEW_PAGE_SIZE + 1;
+ const to = Math.min(page * VOCAB_OVERVIEW_PAGE_SIZE, n);
+ return { from, to, page, pages: totalPages, total: n };
+ },
trainableLessonVocab() {
return this.lessonVocab.filter((entry) => entry.learning && entry.reference && entry.learning !== entry.reference);
},
@@ -1598,9 +1646,28 @@ export default {
this.isNavigatingToNext = false;
this.loadLesson();
}
+ },
+ lessonVocab: {
+ handler() {
+ const totalPages = this.vocabOverviewTotalPages;
+ if (this.vocabOverviewPage > totalPages) {
+ this.vocabOverviewPage = Math.max(1, totalPages);
+ }
+ },
+ deep: true
}
},
methods: {
+ vocabOverviewGoPrev() {
+ if (this.vocabOverviewPagerMeta.page > 1) {
+ this.vocabOverviewPage -= 1;
+ }
+ },
+ vocabOverviewGoNext() {
+ if (this.vocabOverviewPagerMeta.page < this.vocabOverviewPagerMeta.pages) {
+ this.vocabOverviewPage += 1;
+ }
+ },
exportPersistedExerciseAnswers() {
const exportedAnswers = {};
this.effectiveExercises.forEach((exercise) => {
@@ -2267,6 +2334,7 @@ export default {
this.exerciseRetryPending = false;
this.exerciseRetryPendingSinceAttempts = 0;
this.exerciseSequentialIndex = 0;
+ this.vocabOverviewPage = 1;
this.exercisePreparationCompleted = false;
this.lessonPrepStage = 0;
this.lessonPrepIndex = 0;
@@ -4548,6 +4616,43 @@ export default {
margin: 0 10px;
}
+.vocab-items-pager {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 12px 16px;
+ margin-top: 14px;
+ padding-top: 12px;
+ border-top: 1px solid #eadfcf;
+}
+
+.vocab-items-pager__btn {
+ padding: 6px 14px;
+ font-size: 0.9rem;
+ border: 1px solid #c9b896;
+ border-radius: 8px;
+ background: #faf8f3;
+ color: #333;
+ cursor: pointer;
+}
+
+.vocab-items-pager__btn:hover:not(:disabled) {
+ background: #f0ebe0;
+}
+
+.vocab-items-pager__btn:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+.vocab-items-pager__meta {
+ font-size: 0.88rem;
+ color: #555;
+ text-align: center;
+ min-width: min(100%, 14rem);
+}
+
.grammar-explanations {
margin: 20px 0;
padding: 15px;