feat(BR-17): add quiz progress saving and restoring

src/pages/congratulationPage.js

@@ -1,6 +1,7 @@
 import { getUserName } from '../state/userState.js';
 import { congratulationView } from '../views/congratulationView.js';
 import { updatePage } from '../utils/updatePage.js';
+import { resetCardProgress } from '../utils/quizStorageProgress.js';
 
 export function congratulationPage(quiz, pageWrapper, modal) {
   pageWrapper.innerHTML = '';
@@ -11,6 +12,14 @@ export function congratulationPage(quiz, pageWrapper, modal) {
   const { container, button } = congratulationView(quiz, name);
 
   button.addEventListener('click', () => {
+    quiz.currentQuestion = 0;
+    quiz.points = 0;
+    quiz.question.forEach((q) => {
+      q.userAnswer = null;
+      q.skipped = false;
+    });
+    resetCardProgress(quiz.id);
+
     updatePage(modal, pageWrapper);
   });
 

src/pages/questionPage.js

@@ -5,11 +5,13 @@ import { animatePageTransition } from '../controllers/animationPageTransition.js
 import { disableButtons } from '../utils/disableButtons.js';
 import { handleAnswer } from '../utils/handleAnswer.js';
 import { skipQuestion } from '../utils/skipQuestion.js';
+import { saveProgress, loadProgress } from '../utils/quizStorageProgress.js';
 
 export const initQuestionPage = (quiz, pageWrapper, modal) => {
   if (typeof quiz.points !== 'number') {
     quiz.points = 0;
   }
+  loadProgress(quiz);
 
   pageWrapper.innerHTML = '';
   const initQuestionPageEl = document.createElement('div');
@@ -27,6 +29,7 @@ export const initQuestionPage = (quiz, pageWrapper, modal) => {
           skipButton,
           stop
         );
+        saveProgress(quiz);
       },
     }
   );
@@ -44,6 +47,33 @@ export const initQuestionPage = (quiz, pageWrapper, modal) => {
   const correctBtn = questionButtons[current.correctIndex];
   let answered = false;
 
+  if (current.skipped) {
+    skipQuestion(
+      current,
+      correctBtn,
+      questionButtons,
+      nextButton,
+      skipButton,
+      stop
+    );
+    answered = true;
+  } else if (current.userAnswer !== null && current.userAnswer !== undefined) {
+    questionButtons.forEach((b) => (b.disabled = true));
+    skipButton.classList.add('hide');
+
+    const chosen = questionButtons[current.userAnswer];
+    chosen.classList.add(
+      current.userAnswer === current.correctIndex ? 'success' : 'wrong'
+    );
+    if (current.userAnswer !== current.correctIndex) {
+      correctBtn.classList.add('success');
+    }
+
+    nextButton.classList.remove('hide');
+    stop();
+    answered = true;
+  }
+
   questionButtons.forEach((button, index) => {
     button.addEventListener('click', () => {
       if (answered) {
@@ -58,6 +88,7 @@ export const initQuestionPage = (quiz, pageWrapper, modal) => {
 
       nextButton.classList.remove('hide');
       stop();
+      saveProgress(quiz);
     });
   });
 
@@ -83,6 +114,7 @@ export const initQuestionPage = (quiz, pageWrapper, modal) => {
       stop
     )
   );
+  saveProgress(quiz);
 
   pageWrapper.appendChild(questionHeaderElement);
   initQuestionPageEl.appendChild(questionDiv);

src/utils/quizStorageProgress.js

@@ -0,0 +1,39 @@
+const K = (id) => `quiz-progress:${id}`;
+
+export function saveProgress(quiz) {
+  const data = {
+    currentQuestion: quiz.currentQuestion || 0,
+    points: quiz.points || 0,
+    streak: quiz.streak || 0,
+    answers: quiz.questions.map((q) => ({
+      id: q.id,
+      userAnswer: q.userAnswer ?? null,
+      skipped: !!q.skipped,
+    })),
+  };
+  localStorage.setItem(K(quiz.id), JSON.stringify(data));
+}
+
+export function loadProgress(quiz) {
+  const raw = localStorage.getItem(K(quiz.id));
+  if (!raw) return quiz;
+  const d = JSON.parse(raw);
+
+  if (d.currentQuestion != null) quiz.currentQuestion = d.currentQuestion;
+  if (d.points != null) quiz.points = d.points;
+  if (d.streak != null) quiz.streak = d.streak;
+
+  (d.answers || []).forEach((a) => {
+    const q = quiz.questions.find((x) => x.id === a.id);
+    if (q) {
+      q.userAnswer = a.userAnswer ?? null;
+      q.skipped = !!a.skipped;
+    }
+  });
+
+  return quiz;
+}
+
+export function resetCardProgress(quizId) {
+  localStorage.removeItem(K(quizId));
+}