Track flashcard progress from exercises (#142)

* Add flashcard progress storage helper

* Load flashcard progress on exercises page

* Record exercise answers in flashcard progress

* Test exercise flashcard progress storage

Author: ChristopheCode

exercises.html

@@ -113,6 +113,7 @@ <h3 class="help-title">How to use</h3>
   <script src="./app-config.js"></script>
   <script src="./data/irregular-verbs.js"></script>
   <script src="./verb-utils.js"></script>
+  <script src="./flashcard-progress.js"></script>
   <script src="./exercises.js"></script>
 
 </body>

exercises.js

@@ -48,20 +48,23 @@ function renderExercise() {
     button.type = "button";
     button.className = "exercise-choice";
     button.textContent = option;
-    button.addEventListener("click", () => onPick(option, button, answer));
+    button.addEventListener("click", () => onPick(option, button, answer, verb));
     choicesEl.appendChild(button);
   });
 }
 
-function onPick(value, button, answer) {
+function onPick(value, button, answer, verb) {
   if (locked) return;
   locked = true;
 
   choicesEl.querySelectorAll("button").forEach(choice => {
     choice.disabled = true;
   });
 
-  if (value === answer) {
+  const isCorrect = value === answer;
+  window.FlashcardProgress?.recordAnswer(verb, isCorrect);
+
+  if (isCorrect) {
     button.classList.add("correct");
     feedbackEl.textContent = "Correct!";
     feedbackEl.classList.add("ok");

flashcard-progress.js

@@ -0,0 +1,104 @@
+/*
+ * Flashcard progress helper.
+ * Stores local learning progress for irregular verbs without sending data anywhere.
+ */
+(function () {
+  const STORAGE_KEY = "casualEnglishFlashcardProgress";
+  const REVIEW_DELAYS_DAYS = [0, 1, 3, 7, 14, 30];
+
+  const readProgress = () => {
+    try {
+      const raw = typeof safeGet === "function"
+        ? safeGet(localStorage, STORAGE_KEY)
+        : localStorage[STORAGE_KEY];
+      const parsed = JSON.parse(raw || "{}");
+
+      return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+    } catch {
+      return {};
+    }
+  };
+
+  const writeProgress = progress => {
+    try {
+      const value = JSON.stringify(progress);
+
+      if (typeof safeSet === "function") {
+        safeSet(localStorage, STORAGE_KEY, value);
+      } else {
+        localStorage[STORAGE_KEY] = value;
+      }
+    } catch {}
+  };
+
+  const keyForVerb = verb => [verb.base, verb.past, verb.pp]
+    .map(value => String(value || "").trim().toLowerCase())
+    .join("|");
+
+  const addDays = (date, days) => {
+    const nextDate = new Date(date);
+    nextDate.setDate(nextDate.getDate() + days);
+    return nextDate;
+  };
+
+  const emptyProgress = () => ({
+    views: 0,
+    correct: 0,
+    wrong: 0,
+    level: 0,
+    lastSeen: null,
+    nextReview: null,
+  });
+
+  const recordAnswer = (verb, isCorrect) => {
+    if (!verb || typeof verb !== "object") return null;
+
+    const progress = readProgress();
+    const key = keyForVerb(verb);
+    const current = { ...emptyProgress(), ...progress[key] };
+    const now = new Date();
+
+    current.views += 1;
+    current.correct += isCorrect ? 1 : 0;
+    current.wrong += isCorrect ? 0 : 1;
+    current.level = isCorrect
+      ? Math.min(current.level + 1, REVIEW_DELAYS_DAYS.length - 1)
+      : 0;
+    current.lastSeen = now.toISOString();
+    current.nextReview = addDays(now, REVIEW_DELAYS_DAYS[current.level]).toISOString();
+
+    progress[key] = current;
+    writeProgress(progress);
+
+    return current;
+  };
+
+  const recordView = verb => {
+    if (!verb || typeof verb !== "object") return null;
+
+    const progress = readProgress();
+    const key = keyForVerb(verb);
+    const current = { ...emptyProgress(), ...progress[key] };
+
+    current.views += 1;
+    current.lastSeen = new Date().toISOString();
+
+    progress[key] = current;
+    writeProgress(progress);
+
+    return current;
+  };
+
+  const getProgress = verb => {
+    if (!verb || typeof verb !== "object") return emptyProgress();
+
+    return { ...emptyProgress(), ...readProgress()[keyForVerb(verb)] };
+  };
+
+  window.FlashcardProgress = {
+    storageKey: STORAGE_KEY,
+    getProgress,
+    recordAnswer,
+    recordView,
+  };
+}());

tests/smoke.spec.js

@@ -69,7 +69,7 @@ test('Learn loads verbs and Next stays usable', async ({ page }) => {
   expect(errors).toEqual([]);
 });
 
-test('Exercises can answer and move to next question', async ({ page }) => {
+test('Exercises can answer, save progress, and move to next question', async ({ page }) => {
   const errors = trackPageErrors(page);
 
   await page.goto(pageUrl('exercises.html'));
@@ -80,6 +80,14 @@ test('Exercises can answer and move to next question', async ({ page }) => {
   await page.locator('.exercise-choice').first().click();
   await expect(page.locator('#feedback')).not.toHaveText('');
 
+  const progressRaw = await page.evaluate(() => window.localStorage.casualEnglishFlashcardProgress || null);
+  expect(progressRaw).not.toBeNull();
+
+  const progress = JSON.parse(progressRaw);
+  const firstEntry = Object.values(progress)[0];
+  expect(firstEntry.views).toBe(1);
+  expect(firstEntry.correct + firstEntry.wrong).toBe(1);
+
   await page.locator('#nextExercise').click();
   await expect(page.locator('.exercise-choice')).toHaveCount(3);
   expect(errors).toEqual([]);