From 7271a7c0c8ce31bec960822c24491a835a4da0cb Mon Sep 17 00:00:00 2001
From: Ryuseikai <kthkun@gmail.com>
Date: Sun, 16 Nov 2025 17:40:48 +0700
Subject: [PATCH 1/2] Fix modal handling on quiz completion and isActive logic

ProctorMonitor now closes the identity modal when the quiz is finished or inactive. Updated QuizContent to improve isActive logic, ensuring the proctoring monitor is only active when appropriate.
---
 .../src/components/Proctoring/ProctorMonitor.jsx   | 14 ++++++++++++++
 .../src/components/WatchCourse/QuizContent.jsx     |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/FrontEnd/src/components/Proctoring/ProctorMonitor.jsx b/FrontEnd/src/components/Proctoring/ProctorMonitor.jsx
index 79322ae..c66e3da 100644
--- a/FrontEnd/src/components/Proctoring/ProctorMonitor.jsx
+++ b/FrontEnd/src/components/Proctoring/ProctorMonitor.jsx
@@ -182,6 +182,10 @@ const ProctorMonitor = ({
           requestFullscreen();
           setupEventListeners();
         }
+      } else if (!isActive) {
+        // When inactive (quiz finished), close modal
+        console.log('🔴 ProctorMonitor deactivated - closing modal');
+        setShowIdentityModal(false);
       }
     };
     
@@ -194,6 +198,16 @@ const ProctorMonitor = ({
     };
   }, [isActive, modelLoaded]);
   
+  /**
+   * Close modal when not active
+   */
+  useEffect(() => {
+    if (!isActive && showIdentityModal) {
+      console.log('🔴 Closing identity modal because isActive=false');
+      setShowIdentityModal(false);
+    }
+  }, [isActive, showIdentityModal]);
+  
   /**
    * Debug: Log camera state changes
    */
diff --git a/FrontEnd/src/components/WatchCourse/QuizContent.jsx b/FrontEnd/src/components/WatchCourse/QuizContent.jsx
index c4dc3da..7bb3111 100644
--- a/FrontEnd/src/components/WatchCourse/QuizContent.jsx
+++ b/FrontEnd/src/components/WatchCourse/QuizContent.jsx
@@ -865,7 +865,7 @@ const QuizContent = ({
             });
         }
       }}
-      isActive={showVerificationModal || (hasStarted && !quizResult)}
+      isActive={!quizResult && (showVerificationModal || hasStarted)}
     >
       {!hasStarted ? (
         <div className="quiz-intro">

From 6429a8cc5f0309cfb8bf20bd1ae2d08e3305d7e3 Mon Sep 17 00:00:00 2001
From: Ryuseikai <kthkun@gmail.com>
Date: Sun, 16 Nov 2025 17:45:10 +0700
Subject: [PATCH 2/2] Show AI explanation button for all quiz results

Previously, the AI explanation button was only shown if the quiz was passed. This change makes the button always visible, allowing users to access AI explanations regardless of their quiz result.
---
 .../components/WatchCourse/QuizContent.jsx    | 48 +++++++------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/FrontEnd/src/components/WatchCourse/QuizContent.jsx b/FrontEnd/src/components/WatchCourse/QuizContent.jsx
index 7bb3111..234715d 100644
--- a/FrontEnd/src/components/WatchCourse/QuizContent.jsx
+++ b/FrontEnd/src/components/WatchCourse/QuizContent.jsx
@@ -1025,37 +1025,23 @@ const QuizContent = ({
                 <span className="btn-icon">🔄</span>
                 Retake Quiz
               </button>
-              {/* Only show AI explanation button if passed */}
-              {quizResult.passed && (
-                <button
-                  className="view-detail-btn"
-                  onClick={() => {
-                    setShowDetailModal(true);
-                    if (!aiExplanations) fetchAIExplanations();
-                  }}
-                  title={
-                    aiExplanations
-                      ? "View cached AI explanations"
-                      : "Fetch AI explanations"
-                  }
-                >
-                  AI Explanations
-                  {aiExplanations && <span className="cached-badge">📦</span>}
-                </button>
-              )}
-              {/* Show answers only button if failed */}
-              {!quizResult.passed && (
-                <button
-                  className="view-detail-btn"
-                  onClick={() => {
-                    setShowDetailModal(true);
-                  }}
-                  title="View correct answers"
-                >
-                  <span className="btn-icon">📝</span>
-                  View Answers
-                </button>
-              )}
+              {/* Always show AI explanation button */}
+              <button
+                className="view-detail-btn"
+                onClick={() => {
+                  setShowDetailModal(true);
+                  if (!aiExplanations) fetchAIExplanations();
+                }}
+                title={
+                  aiExplanations
+                    ? "View cached AI explanations"
+                    : "Fetch AI explanations"
+                }
+              >
+                <span className="btn-icon">🤖</span>
+                AI Explanations
+                {aiExplanations && <span className="cached-badge">📦</span>}
+              </button>
             </div>
           )}
         </div>