fix (UI) [QCMPLUS-38] -update Header

Signed-off-by: Teclit <[email protected]>
Teclit · Aug 22, 2024 · d1dd49a · d1dd49a
1 parent 5de6dd7
commit d1dd49a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 25 deletions.
diff --git a/qcmplusweb/src/components/Exam/Exam.css b/qcmplusweb/src/components/Exam/Exam.css
@@ -11,7 +11,7 @@
 
 
 .exam-results-list {
-    max-height: 600px;
+    max-height: 500px;
     overflow-y: auto;
     padding: 10px;
     background-color: var(--bg-default-light-color);

diff --git a/qcmplusweb/src/components/Exam/Exam.jsx b/qcmplusweb/src/components/Exam/Exam.jsx
@@ -9,7 +9,7 @@ import './Exam.css';
 import {submitExamSession} from '../../services/ExamService';
 
 //TODO: Replace with MAX_QUESTIONS to 20 AND QUESTION_TIME_LIMIT to 60
-const MAX_QUESTIONS = 5;
+const MAX_QUESTIONS = 20;
 const QUESTION_TIME_LIMIT = 60;
 
 const Exam = ({quizId}) => {
@@ -64,11 +64,10 @@ const Exam = ({quizId}) => {
     }, [questions, startTime]);
 
     const handleSubmit = useCallback(async () => {
+        if (!getUser || !getUser.userId) {
+            throw new Error('User is not authenticated');
+        }
         try {
-            if (!getUser || !getUser.userId) {
-                throw new Error('User is not authenticated');
-            }
-
             const endTime = new Date();
             const timeSpent = Math.floor((endTime - startTime) / 1000); // Time spent in seconds
 
@@ -83,7 +82,7 @@ const Exam = ({quizId}) => {
             const examSessionObject = convertToExamSessionObject(sessionData);
             console.log("examSessionObject:", examSessionObject);
 
-             await submitExamSession(examSessionObject);
+            await submitExamSession(examSessionObject);
             setScore(calculateScore());
             setExamCompleted(true);
             setShowResults(true);
@@ -92,10 +91,10 @@ const Exam = ({quizId}) => {
                 console.error('Unauthorized access - 401');
                 // Optionally handle token refresh or re-authentication here
             } else {
-                console.error('Error submitting exam session:', err);
+                console.error('Error submitting exam session:', err.message || err);
             }
         }
-    }, [getUser, quizId, userAnswers, calculateScore, startTime]);
+    }, [getUser, quizId, calculateScore, startTime]);
 
 
 

diff --git a/qcmplusweb/src/components/Exam/ExamQuestion.jsx b/qcmplusweb/src/components/Exam/ExamQuestion.jsx
@@ -12,7 +12,7 @@ const ExamQuestion = ({
                           handleSubmit,
                           currentQuestionIndex,
                           questionsLength,
-                          timer  // Receive the timer as a prop
+                          timer
                       }) => (
     <div className="exam-card p-4">
         <h2 className={"text-center"}>QUiz {quiz.title}</h2>

diff --git a/qcmplusweb/src/components/Exam/ExamResults.jsx b/qcmplusweb/src/components/Exam/ExamResults.jsx
@@ -3,8 +3,7 @@ import {Alert, Container, ListGroup} from 'react-bootstrap';
 
 const ExamResults = ({quiz, questions, answers, userAnswers, score}) => (
     <Container className="exam-results-container m-0 p-0">
-        <h2>Quiz {quiz.title}</h2>
-        <h3 className="text-center p-2">Exam Results: {score} / {questions.length}</h3>
+        <h3 className="text-center p-2">{quiz.title} Quiz Results: {score} / {questions.length} Correct Answers</h3>
             <hr></hr>
         <div className="exam-results-list mb-3 p-3">
             {questions.map((question, index) => (

diff --git a/qcmplusweb/src/components/Exam/useExamTimer.jsx b/qcmplusweb/src/components/Exam/useExamTimer.jsx
@@ -1,22 +1,22 @@
 import {useEffect, useState} from 'react';
 
-const useExamTimer = (initialTime, onTimeUp) => {
-    const [timer, setTimer] = useState(initialTime);
+const useExamTimer = (initialTime, onTimeExpire) => {
+    const [timeLeft, setTimeLeft] = useState(initialTime);
 
     useEffect(() => {
-        if (timer > 0) {
-            const timerId = setTimeout(() => setTimer(timer - 1), 1000);
-            return () => clearTimeout(timerId);
-        } else {
-            onTimeUp();
+        if (timeLeft <= 0) {
+            onTimeExpire();
+            return;
         }
-    }, [timer, onTimeUp]);
 
-    const resetTimer = () => {
-        setTimer(initialTime);
-    };
+        const intervalId = setInterval(() => {
+            setTimeLeft((prevTime) => prevTime - 1);
+        }, 1000);
 
-    return [timer, resetTimer];
+        return () => clearInterval(intervalId);
+    }, [timeLeft, onTimeExpire]);
+
+    return [timeLeft, setTimeLeft];
 };
 
-export default useExamTimer;
+export default useExamTimer;