Merge pull request #86 from CrackCode-dev/Ama

vidun-upek · web-flow · commit 120a227b5401 · 2026-04-16T15:49:03.000+05:30
feat(careermap): fix chapter unlock, button responsiveness &amp; completion flow with progress
diff --git a/crackcode/client/src/components/careermap/QuizCard/index.jsx b/crackcode/client/src/components/careermap/QuizCard/index.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import ContentCard from "../../ui/Card";
 import Button from "../../ui/Button";
 import AnswerOptions from "./AnswerOptions";
@@ -10,6 +10,37 @@ export default function QuizCard({ variant = "mcq", question, index, isLast = fa
   const [fillValue, setFillValue] = useState("");
   const [revealed, setRevealed] = useState(false);
 
+  const latestRef = useRef({});
+  latestRef.current = { revealed, selected, question, onNext, variant, fillValue };
+
+  // Handle Enter key for both MCQ and fill-in-the-blank questions
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key !== "Enter") return;
+      const { revealed, selected, question, onNext, variant, fillValue } = latestRef.current;
+
+      if (variant === "mcq" && revealed && question) {
+        const correct = selected === question.correct;
+        onNext?.({ correct });
+      }
+
+      if (variant === "fill" && !revealed && fillValue.trim()) {
+        document.querySelector("[data-check-btn]")?.click();
+      }
+
+      if (variant === "fill" && revealed) {
+        const answers = question.answer?.split(",").map(a => a.trim().toLowerCase()) || [];
+        const normalized = fillValue.trim().toLowerCase();
+        const correct = answers.some(ans =>
+          ans === normalized ||
+          (ans.split(/\s+/).length === 2 && ans.split(/\s+/).includes(normalized))
+        );
+        onNext?.({ correct });
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
   if (!question) return null;
 
@@ -99,6 +130,8 @@ export default function QuizCard({ variant = "mcq", question, index, isLast = fa
           revealed={revealed}
           isCorrect={fillIsCorrect}
           correctAnswer={question.answer}
+          onReveal={handleRevealFill}
+          onNext={handleNext}
         />
       )}
 
@@ -112,7 +145,7 @@ export default function QuizCard({ variant = "mcq", question, index, isLast = fa
 
         {/* Fill: Check answer */}
         {variant === "fill" && !revealed && (
-          <Button variant="primary" size="lg" fullWidth disabled={!canReveal} onClick={handleRevealFill}>
+          <Button data-check-btn variant="primary" size="lg" fullWidth disabled={!canReveal} onClick={handleRevealFill}>
             Check Answer
           </Button>
         )}
diff --git a/crackcode/client/src/pages/careermap/CareerChapterSelection.jsx b/crackcode/client/src/pages/careermap/CareerChapterSelection.jsx
@@ -27,6 +27,7 @@ const CareerChapterSelectionPage = () => {
     const [passedChapters, setPassedChapters] = useState({});
     const [chapterScores, setChapterScores] = useState({});
     const [questionCounts, setQuestionCounts] = useState({});
+    const [loaded, setLoaded] = useState(false);
 
     useEffect(() => {
         // Fetch progress from DB for this career
@@ -42,26 +43,24 @@ const CareerChapterSelectionPage = () => {
                         scoreMap[ch.chapterId] = ch.easyScore + ch.mediumScore + ch.hardScore;
                     });
                 } else {
-                    // No DB data — fall back to localStorage
                     baseChapters.forEach((ch) => {
-                        passedMap[ch.id] =
-                            localStorage.getItem(`${careerId}_${ch.id}_passed`) === "true" ||
-                            localStorage.getItem(`${careerId}_${ch.id}_completed`) === "true";
+                        passedMap[ch.id] = false;
                     });
                 }
 
                 setPassedChapters(passedMap);
                 setChapterScores(scoreMap);
+                setLoaded(true);
             })
             .catch(() => {
-                // DB fetch failed — fall back to localStorage for all chapters
+                // DB fetch failed — show all chapters as locked
                 const fallback = {};
                 baseChapters.forEach((ch) => {
-                    fallback[ch.id] =
-                        localStorage.getItem(`${careerId}_${ch.id}_passed`) === "true" ||
-                        localStorage.getItem(`${careerId}_${ch.id}_completed`) === "true";
+                    fallback[ch.id] = false
+
                 });
                 setPassedChapters(fallback);
+                setLoaded(true);
             });
 
         // Fetch live question counts per chapter from the API
@@ -76,7 +75,7 @@ const CareerChapterSelectionPage = () => {
 
     }, [careerId]);
 
-    // Lock/unlock chapters based on previous chapter completion in localStorage
+    // Lock/unlock chapters based on previous chapter completion from DB
     const chapters = baseChapters.map((chapter, index) => ({
         ...chapter,
         isUnlocked: index === 0 ? true : !!passedChapters[baseChapters[index - 1].id],
@@ -137,6 +136,19 @@ const CareerChapterSelectionPage = () => {
                         </div>
                     </div>
 
+                    {/* Show Career completion banner*/}
+                    {loaded && chapters.every((ch) => passedChapters[ch.id]) && (
+                        <div className="w-full bg-green-100 border border-green-500 rounded-2xl px-6 py-6 flex flex-col items-center gap-2 text-center mb-10">
+                            <div className="text-4xl">🎉</div>
+                            <p className="text-green-500 text-xl font-extrabold">Career Completed!</p>
+                            <p className="text-black text-sm">
+                                You've completed all 4 chapters in the{" "}
+                                <span className="text-green-500 font-semibold">{title}</span> career path.
+                                Stay focused and never give up!
+                            </p>
+                        </div>
+                    )}
+
                     {/* Roadmap List */}
                     <div className="flex flex-col">
                         {chapters.map((chapter, index) => {
diff --git a/crackcode/client/src/pages/careermap/CareerQuizPage.jsx b/crackcode/client/src/pages/careermap/CareerQuizPage.jsx
@@ -116,21 +116,19 @@ export default function CareerQuizPage() {
         }
 
         if (currentQ + 1 >= total) {
-            // Require more than 12 correct answers (i.e., at least 13) to pass and unlock next chapter
+            // Require more than 12 correct answers (at least 13) to pass and unlock next chapter
             const passed = (newEasy + newMedium + newHard) > 12;
 
             console.log("Quiz finished:", { careerId, chapterId, newEasy, newMedium, newHard, passed });
 
+            const finalPassed = passed ;
+
             if (!progressSentRef.current) {
                 progressSentRef.current = true;
-                updateProgress(careerId, chapterId, newEasy, newMedium, newHard, passed)
+                updateProgress(careerId, chapterId, newEasy, newMedium, newHard, finalPassed)
                     .then((res) => console.log("✅ Progress saved:", res))
                     .catch((err) => console.error("❌ Progress update failed:", err));
             }
-
-            if (passed) {
-                localStorage.setItem(`${careerId}_${chapterId}_passed`, "true");
-            }
             setFinished(true);
         } else {
             setCurrentQ((q) => q + 1);
diff --git a/crackcode/client/src/pages/careermap/Results.jsx b/crackcode/client/src/pages/careermap/Results.jsx
@@ -2,29 +2,43 @@ import Button from "../../components/ui/Button";
 import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { getChapterByCareerId } from "./CareerChapters";
+import { fetchProgress } from "../../services/api/careermapService";
 
 export default function ResultsPage({ score, total, title, subtitle, careerId, currentChapterId, onRestart }) {
   const navigate = useNavigate();
   const [nextChapter, setNextChapter] = useState(null);
+  const [allChaptersDone, setAllChaptersDone] = useState(false);
   const [loaded, setLoaded] = useState(false);
 
   // Check if current chapter is passed and if a next chapter exists
   useEffect(() => {
     const chapters = getChapterByCareerId(careerId);
     const currentIndex = chapters.findIndex((c) => c.id === currentChapterId);
     const nextIndex = currentIndex + 1;
-    const currentPassed = localStorage.getItem(`${careerId}_${currentChapterId}_passed`) === "true";
-
-    // Only unlock next chapter if current is passed and next exists
-    if (currentPassed && nextIndex < chapters.length) {
-      setNextChapter(chapters[nextIndex]);
-    } else {
-      setNextChapter(null);
-    }
-    setLoaded(true);
-  }, [careerId, currentChapterId]);
 
-  const isLastChapter = loaded && !nextChapter && score >= 8;
+    // Fetch progress from DB to determine chapter unlock and completion state
+    fetchProgress(careerId).then((progress) => {
+      const passedMap = {};
+      progress.chapters?.forEach((ch) => {
+        passedMap[ch.chapterId] = ch.passed;
+      });
+
+      const currentPassed = !!passedMap[currentChapterId];
+      // Only unlock next chapter if current is passed and next exists
+      if (currentPassed && nextIndex < chapters.length) {
+        setNextChapter(chapters[nextIndex]);
+      } else {
+        setNextChapter(null);
+      }
+
+      const allDone = chapters.every((ch) => !!passedMap[ch.id]);
+
+      // Update completion states
+      setAllChaptersDone(allDone);
+      setLoaded(true);
+    }).catch(() => setLoaded(true));
+
+  }, [careerId, currentChapterId]);
 
   // Navigate to next chapter
   const handleNextClick = () => {
@@ -40,7 +54,7 @@ export default function ResultsPage({ score, total, title, subtitle, careerId, c
   return (
     <div className="min-h-screen bg-(--bg) flex flex-col items-center px-6 py-8">
 
-      
+
 
       <div className="w-full max-w-5xl text-center mb-4">
         <h1 className="text-4xl font-extrabold text-(--text) tracking-tight leading-tight">
@@ -93,21 +107,20 @@ export default function ResultsPage({ score, total, title, subtitle, careerId, c
         </div>
 
         {/* Show unlock if next chapter is available */}
-        {nextChapter && score >= 8 && (
-          <div className="w-full bg-green-950/60 border border-green-500 rounded-2xl px-6 py-4 text-center">
-            <p className="text-green-400 font-semibold">Chapter unlocked!</p>
+        {loaded && nextChapter && (
+          <div className="w-full bg-green-100 border border-green-500 rounded-2xl px-6 py-4 text-center">
+            <p className="text-green-500 font-semibold">Chapter unlocked !</p>
           </div>
         )}
 
         {/* Show completion message if last chapter is passed */}
-        {isLastChapter && (
-          <div className="w-full bg-green-950/40 border border-green-500 rounded-2xl px-6 py-6 flex flex-col items-center gap-2 text-center">
+        {loaded && allChaptersDone && !nextChapter && (
+          <div className="w-full bg-green-100 border border-green-500 rounded-2xl px-6 py-6 flex flex-col items-center gap-2 text-center">
             <div className="text-4xl">🎉</div>
-            <p className="text-green-400 text-xl font-extrabold">Career Path Completed!</p>
-            <p className="text-(--muted) text-sm">
+            <p className="text-green-500 text-xl font-extrabold">All Chapters Completed!</p>
+            <p className="text-black text-sm">
               You've successfully completed all chapters in the{" "}
-              <span className="text-green-400 font-semibold">{title}</span> career path.
-              Stay focused and never give up!
+              <span className="text-green-500 font-semibold">{title}</span> career path.
             </p>
           </div>
         )}
@@ -117,8 +130,7 @@ export default function ResultsPage({ score, total, title, subtitle, careerId, c
             Try Again
           </Button>
 
-          {score < 8 ? (
-            // Low score — show Back to Chapters
+          {!loaded || (!nextChapter && !allChaptersDone) ? (
             <Button variant="outline" size="lg" fullWidth onClick={() => navigate(`/careermap/${careerId}`)}>
               Back to Chapters
             </Button>
diff --git a/crackcode/server/src/modules/Career Map/progress/progress.model.js b/crackcode/server/src/modules/Career Map/progress/progress.model.js
@@ -38,7 +38,8 @@ const progressSchema = new mongoose.Schema({
   mediumCompleted: { type: Boolean, default: false },
   hardCompleted: { type: Boolean, default: false },
 
-  totalQuestions: { type: Number, default: 60 }
+  totalQuestions: { type: Number, default: 60 },
+  careerRewarded: { type: Boolean, default: false } // True when user has received career completion reward
 
 }, { timestamps: true });
 
diff --git a/crackcode/server/src/modules/Career Map/progress/progress.service.js b/crackcode/server/src/modules/Career Map/progress/progress.service.js
@@ -1,6 +1,5 @@
 import Progress from "./progress.model.js";
 import User from "../../auth/User.model.js";
-import { checkAndUnlockMultipleBadges } from "../../badges/badge.service.js";
 
 // Helper = recompute overall totals from all chapters
 const recomputeTotals = (chapters) => {
@@ -24,9 +23,9 @@ export const updateChapterProgress = async (userId, career, chapterId, easyScore
   easyScore = Math.max(0, parseInt(easyScore) || 0);
   mediumScore = Math.max(0, parseInt(mediumScore) || 0);
   hardScore = Math.max(0, parseInt(hardScore) || 0);
-  
+
   const newTotal = easyScore + mediumScore + hardScore;
-  
+
   //  Sanity check: total score shouldn't exceed 100 (reasonable quiz limit)
   if (newTotal > 100) {
     throw new Error(`Invalid score: total (${newTotal}) exceeds maximum of 100. Possible cheating attempt.`);
@@ -101,73 +100,37 @@ export const updateChapterProgress = async (userId, career, chapterId, easyScore
     { returnDocument: "after" }
   );
 
-  // AWARD XP/TOKENS only if newly passed (prevents duplicate rewards)
-  let tokensAwarded = 0;
-  let xpAwarded = 0;
-
-  if (passed && !previouslyPassed) {
-    // First time passing: award for ALL correct answers
-    tokensAwarded = newTotal;
-    xpAwarded = newTotal * 3;
-    
+  // Award XP based on first-time or retry pass
+  if (passed) {
+    const xp = previouslyPassed ? 5 : 10;
     try {
       await User.findByIdAndUpdate(userId, {
-        $inc: {
-          tokens: tokensAwarded,
-          totalXP: xpAwarded,
-          casesSolved: tokensAwarded
-        }
+        $inc: { totalXP: xp }
       });
-
-      // Record this in progress so we don't re-award on retry
-      await Progress.updateOne(
-        { userId, career, "chapters.chapterId": chapterId },
-        { $set: { "chapters.$.rewardedQuestions": newTotal } }
-      );
-      console.log(`✅ First-time pass reward: ${tokensAwarded} tokens, ${xpAwarded} XP to user ${userId} for ${career}/${chapterId}`);
-
-      // Check and unlock relevant badges
-      const badgesToCheck = ['beginner', 'cases_5', 'cases_10', 'cases_25'];
-      const newlyUnlocked = await checkAndUnlockMultipleBadges(userId, badgesToCheck);
-      if (newlyUnlocked.length > 0) {
-        console.log(`✅ New badges unlocked: ${newlyUnlocked.join(', ')}`);
-      }
+      console.log(`✅ Chapter ${previouslyPassed ? 'retry' : 'first'} pass: +${xp} XP to user ${userId} for ${career}/${chapterId}`);
     } catch (err) {
-      console.error(`❌ Failed to award first-time pass rewards for user ${userId}:`, err.message);
+      console.error(`❌ Failed to award chapter XP:`, err.message);
     }
-  } else if (passed && previouslyPassed && newTotal > previousRewarded) {
-    // Already passed before: only award for NEW correct answers (improvement bonus)
-    tokensAwarded = newTotal - previousRewarded;
-    xpAwarded = tokensAwarded * 3;
-    
+  }
+
+  // Award 1 token when all 4 chapters passed for the first time
+  progress = await Progress.findOne({ userId, career });
+  const allChaptersPassed = progress.chapters.length === 4 &&
+    progress.chapters.every(ch => ch.passed);
+
+  if (allChaptersPassed && !progress.careerRewarded) {
     try {
       await User.findByIdAndUpdate(userId, {
-        $inc: {
-          tokens: tokensAwarded,
-          totalXP: xpAwarded,
-          casesSolved: tokensAwarded
-        }
+        $inc: { tokens: 1 }
       });
-
-      // Update rewardedQuestions to track the new high score
       await Progress.updateOne(
-        { userId, career, "chapters.chapterId": chapterId },
-        { $set: { "chapters.$.rewardedQuestions": newTotal } }
+        { userId, career },
+        { $set: { careerRewarded: true } }
       );
-      console.log(`✅ Improvement bonus: +${tokensAwarded} tokens, +${xpAwarded} XP to user ${userId} for ${career}/${chapterId}`);
-
-      //  Check and unlock relevant badges
-      const badgesToCheck = ['beginner', 'cases_5', 'cases_10', 'cases_25'];
-      const newlyUnlocked = await checkAndUnlockMultipleBadges(userId, badgesToCheck);
-      if (newlyUnlocked.length > 0) {
-        console.log(`✅ New badges unlocked: ${newlyUnlocked.join(', ')}`);
-      }
+      console.log(`✅ Career complete: +1 token to user ${userId} for ${career}`);
     } catch (err) {
-      console.error(`❌ Failed to award improvement bonus for user ${userId}:`, err.message);
+      console.error(`❌ Failed to award career token:`, err.message);
     }
-  } else if (!passed) {
-    // Did not pass - no XP/tokens awarded
-    console.log(`ℹ️ Quiz not passed (${newTotal} correct, need >12): no rewards for user ${userId}`);
   }
 
   // Refetch and return updated document
