feat: implement milestone-based progress system and activate new lessons

Progress System:
- Replace percentage-based progress with milestone markers (1, 5, 10, 20, 30, 50, 75, 100)
- Add visual milestone indicators with reached/current/next states
- Add celebration animation when milestones are reached
- Update progress bar to show progress toward next milestone
- Add progressTextMilestone i18n key for all 6 languages

New Lessons Activated:
- HTML Dialog (native modal dialogs)
- HTML Progress & Meter (indicator elements)
- HTML Fieldset (form grouping)
- HTML Datalist (autocomplete inputs)

This adds 10 new lessons across all 6 languages, bringing total from ~66 to ~76.
This commit is contained in:
2026-01-16 13:56:29 +01:00
parent b051974957
commit d2fbe0e085
7 changed files with 209 additions and 13 deletions

View File

@@ -472,10 +472,11 @@ export class LessonEngine {
}
/**
* Get overall progress statistics
* @returns {Object} Progress statistics
* Get overall progress statistics with milestone data
* @returns {Object} Progress statistics including milestone progress
*/
getProgressStats() {
const MILESTONES = [1, 5, 10, 20, 30, 50, 75, 100];
let totalLessons = 0;
let totalCompleted = 0;
@@ -490,10 +491,25 @@ export class LessonEngine {
}
});
// Calculate milestone progress
const milestonesReached = MILESTONES.filter((m) => totalCompleted >= m);
const currentMilestone = milestonesReached[milestonesReached.length - 1] || 0;
const nextMilestone = MILESTONES.find((m) => m > totalCompleted) || 100;
const progressToNext =
nextMilestone > currentMilestone
? Math.round(((totalCompleted - currentMilestone) / (nextMilestone - currentMilestone)) * 100)
: 100;
return {
totalLessons,
totalCompleted,
percentComplete: totalLessons > 0 ? Math.round((totalCompleted / totalLessons) * 100) : 0
percentComplete: totalLessons > 0 ? Math.round((totalCompleted / totalLessons) * 100) : 0,
// Milestone data
milestones: MILESTONES,
milestonesReached,
currentMilestone,
nextMilestone,
progressToNext
};
}