diff --git a/src/app.js b/src/app.js index 56275c9..cdfaace 100644 --- a/src/app.js +++ b/src/app.js @@ -18,6 +18,7 @@ const elements = { helpBtn: document.getElementById("help-btn"), // Left panel + modulePill: document.getElementById("module-pill"), lessonTitle: document.getElementById("lesson-title"), lessonDescription: document.getElementById("lesson-description"), taskInstruction: document.getElementById("task-instruction"), @@ -266,6 +267,11 @@ function loadCurrentLesson() { // Update UI based on mode updateEditorForMode(mode); + // Update module pill with category name + if (elements.modulePill && engineState.module) { + elements.modulePill.textContent = engineState.module.title; + } + // Reset any success indicators resetSuccessIndicators(); @@ -362,19 +368,39 @@ function updateNavigationButtons() { } function nextLesson() { + const prevModuleId = lessonEngine.getCurrentState().module?.id; const success = lessonEngine.nextLesson(); if (success) { + const newModuleId = lessonEngine.getCurrentState().module?.id; + if (newModuleId !== prevModuleId) { + updateModuleHighlight(newModuleId); + } loadCurrentLesson(); } } function prevLesson() { + const prevModuleId = lessonEngine.getCurrentState().module?.id; const success = lessonEngine.previousLesson(); if (success) { + const newModuleId = lessonEngine.getCurrentState().module?.id; + if (newModuleId !== prevModuleId) { + updateModuleHighlight(newModuleId); + } loadCurrentLesson(); } } +function updateModuleHighlight(moduleId) { + const moduleItems = elements.moduleList.querySelectorAll(".module-header"); + moduleItems.forEach((item) => { + item.classList.remove("active"); + if (item.dataset.moduleId === moduleId) { + item.classList.add("active"); + } + }); +} + // ================= CODE EXECUTION ================= function resetCode() { diff --git a/src/impl/LessonEngine.js b/src/impl/LessonEngine.js index ff31d5c..5750135 100644 --- a/src/impl/LessonEngine.js +++ b/src/impl/LessonEngine.js @@ -101,19 +101,49 @@ export class LessonEngine { } /** - * Move to the next lesson + * Move to the next lesson (crosses module boundaries) * @returns {boolean} Whether the operation was successful */ nextLesson() { - return this.setLessonByIndex(this.currentLessonIndex + 1); + // Try next lesson in current module + if (this.setLessonByIndex(this.currentLessonIndex + 1)) { + return true; + } + + // At end of module, try next module + const currentModuleIndex = this.modules.findIndex((m) => m.id === this.currentModule?.id); + if (currentModuleIndex >= 0 && currentModuleIndex < this.modules.length - 1) { + const nextModule = this.modules[currentModuleIndex + 1]; + this.setModule(nextModule); + this.setLessonByIndex(0); // Start at first lesson + return true; + } + + return false; } /** - * Move to the previous lesson + * Move to the previous lesson (crosses module boundaries) * @returns {boolean} Whether the operation was successful */ previousLesson() { - return this.setLessonByIndex(this.currentLessonIndex - 1); + // Try previous lesson in current module + if (this.setLessonByIndex(this.currentLessonIndex - 1)) { + return true; + } + + // At start of module, try previous module + const currentModuleIndex = this.modules.findIndex((m) => m.id === this.currentModule?.id); + if (currentModuleIndex > 0) { + const prevModule = this.modules[currentModuleIndex - 1]; + this.setModule(prevModule); + // Go to last lesson of previous module + const lastIndex = prevModule.lessons.length - 1; + this.setLessonByIndex(lastIndex); + return true; + } + + return false; } /** @@ -400,6 +430,12 @@ export class LessonEngine { * @returns {Object} The current lesson state */ getCurrentState() { + const currentModuleIndex = this.modules.findIndex((m) => m.id === this.currentModule?.id); + const isLastLesson = this.currentLessonIndex >= (this.currentModule ? this.currentModule.lessons.length - 1 : 0); + const isFirstLesson = this.currentLessonIndex === 0; + const isLastModule = currentModuleIndex >= this.modules.length - 1; + const isFirstModule = currentModuleIndex <= 0; + return { module: this.currentModule, lesson: this.currentLesson, @@ -407,8 +443,8 @@ export class LessonEngine { userCode: this.userCode, totalLessons: this.currentModule ? this.currentModule.lessons.length : 0, isCompleted: this.isCurrentLessonCompleted(), - canGoNext: this.currentLessonIndex < (this.currentModule ? this.currentModule.lessons.length - 1 : 0), - canGoPrev: this.currentLessonIndex > 0 + canGoNext: !isLastLesson || !isLastModule, + canGoPrev: !isFirstLesson || !isFirstModule }; } diff --git a/src/index.de.html b/src/index.de.html index c66b435..ae65182 100644 --- a/src/index.de.html +++ b/src/index.de.html @@ -31,6 +31,7 @@