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

Signed-off-by: Teclit <[email protected]>

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);

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}) => {
@@ -21,6 +21,7 @@ const Exam = ({quizId}) => {
     const [showResults, setShowResults] = useState(false);
     const [score, setScore] = useState(0);
     const [startTime, setStartTime] = useState(null);
+    const [authError, setAuthError] = useState(null); // New state for authentication error
 
     const calculateScore = useCallback(() => {
         let calculatedScore = 0;
@@ -42,33 +43,31 @@ const Exam = ({quizId}) => {
 
         const examSession = {
             user: {
-                id: session.userId // Changed from userId to id
+                id: session.userId,
             },
             quiz: {
                 quizId: session.quizId
             },
             score: session.score,
             timeSpent: timeSpentFormatted,
-            dateExam: session.dateExam.toISOString(), // Use full ISO format for dateExam
+            dateExam: session.dateExam.toISOString(),
         };
 
         console.log("examSession:", examSession);
         return examSession;
     };
 
-
     useEffect(() => {
         if (questions.length > 0 && !startTime) {
             setStartTime(new Date());
         }
     }, [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,21 +82,20 @@ const Exam = ({quizId}) => {
             const examSessionObject = convertToExamSessionObject(sessionData);
             console.log("examSessionObject:", examSessionObject);
 
-             await submitExamSession(examSessionObject);
+            await submitExamSession(examSessionObject);
             setScore(calculateScore());
             setExamCompleted(true);
             setShowResults(true);
         } catch (err) {
             if (err.response?.status === 401) {
                 console.error('Unauthorized access - 401');
-                // Optionally handle token refresh or re-authentication here
+                setAuthError('Unauthorized access. Please log in again.');
             } else {
-                console.error('Error submitting exam session:', err);
+                console.error('Error submitting exam session:', err.message || err);
+                setAuthError('Error submitting exam session. Please try again later.');
             }
         }
-    }, [getUser, quizId, userAnswers, calculateScore, startTime]);
-
-
+    }, [getUser, quizId, calculateScore, startTime]);
 
     const handleNextQuestion = useCallback(() => {
         if (currentQuestionIndex < questions.length - 1) {
@@ -146,10 +144,10 @@ const Exam = ({quizId}) => {
         );
     }
 
-    if (error) {
+    if (error || authError) {
         return (
             <Container className="exam-container">
-                <Alert variant="danger">{error}</Alert>
+                <Alert variant="danger">{error || authError}</Alert>
             </Container>
         );
     }

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>

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) => (

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;