fix teachermode

client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx

@@ -13,7 +13,6 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
     console.log("questions", index);
 
     const answer = answers[Number(index)]?.answer;
-
     const question = questions[Number(index)].question as MultipleChoiceQuestion;
 
     const [actualAnswer, setActualAnswer] = useState<AnswerType>(() => {
@@ -62,7 +61,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
 
     return (
         <QuizContext.Consumer>
-            {({ showAnswer }) => (
+            {({ showAnswer, isTeacherMode }) => (
                 <div className="question-container">
                     <div className="question content">
                         <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
@@ -76,7 +75,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
                                     <Button
                                         variant="text"
                                         className="button-wrapper"
-                                        disabled={disableButton}
+                                        disabled={disableButton || isTeacherMode}
                                         onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
                                     >
                                         {showAnswer ? (
@@ -115,7 +114,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
                             />
                         </div>
                     )}
-                    {!showAnswer && submitAnswer && (
+                    {!showAnswer && submitAnswer && !isTeacherMode &&(
                         <Button
                             variant="contained"
                             onClick={() =>

client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx

@@ -43,7 +43,7 @@ const NumericalQuestionDisplay: React.FC = () => {
 
     return (
         <QuizContext.Consumer>
-            {({ showAnswer }) => (
+            {({ showAnswer, isTeacherMode }) => (
                 <div className="question-wrapper">
                     <div>
                         <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
@@ -71,6 +71,7 @@ const NumericalQuestionDisplay: React.FC = () => {
                                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                         setActualAnswer([e.target.valueAsNumber]);
                                     }}
+                                    disabled={showAnswer || isTeacherMode}
                                     inputProps={{ 'data-testid': 'number-input' }}
                                 />
                             </div>
@@ -79,7 +80,7 @@ const NumericalQuestionDisplay: React.FC = () => {
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
                                 </div>
                             )}
-                            {submitAnswer && (
+                            {submitAnswer && !isTeacherMode &&(
                                 <Button
                                     variant="contained"
                                     onClick={() =>

client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx

@@ -25,7 +25,7 @@ const ShortAnswerQuestionDisplay: React.FC = () => {
 
     return (
         <QuizContext.Consumer>
-            {({ showAnswer }) => (
+            {({ showAnswer, isTeacherMode }) => (
                 <div className="question-wrapper">
                     <div className="question content">
                         <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
@@ -60,11 +60,11 @@ const ShortAnswerQuestionDisplay: React.FC = () => {
                                     onChange={(e) => {
                                         setActualAnswer([e.target.value]);
                                     }}
-                                    disabled={showAnswer}
+                                    disabled={showAnswer || isTeacherMode}
                                     aria-label="short-answer-input"
                                 />
                             </div>
-                            {submitAnswer && (
+                            {submitAnswer && !isTeacherMode && (
                                 <Button
                                     variant="contained"
                                     onClick={() =>

client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx

@@ -46,7 +46,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
 
     return (
         <QuizContext.Consumer>
-            {({ showAnswer }) => (
+            {({ showAnswer, isTeacherMode }) => (
                 <div className="question-container">
                     <div className="question content">
                         <div
@@ -60,7 +60,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
                             className="button-wrapper"
                             onClick={() => !showAnswer && handleOnClickAnswer(true)}
                             fullWidth
-                            disabled={disableButton}
+                            disabled={disableButton || isTeacherMode}
                         >
                             {showAnswer ? (
                                 <div> {question.isTrue ? '✅' : '❌'}</div>
@@ -86,7 +86,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
                             className="button-wrapper"
                             onClick={() => !showAnswer && handleOnClickAnswer(false)}
                             fullWidth
-                            disabled={disableButton}
+                            disabled={disableButton || isTeacherMode}
                         >
                             {showAnswer ? (
                                 <div> {!question.isTrue ? '✅' : '❌'}</div>
@@ -120,7 +120,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
                             />
                         </div>
                     )}
-                    {!showAnswer && submitAnswer && (
+                    {!showAnswer && submitAnswer && !isTeacherMode && (
                         <Button
                             variant="contained"
                             onClick={() =>

client/src/pages/Student/JoinRoom/QuizContext.tsx

@@ -16,6 +16,8 @@ export const QuizContext = React.createContext<{
     updateIndex: (questionId: number | null) => void; // Add a function to update the index
     submitAnswer: (answer: AnswerType, idQuestion?: number) => void; // Updated submitAnswer signature
     isQuestionSent: boolean;
+    isTeacherMode: boolean; // Flag to indicate if the user is in teacher mode
+    setisTeacherMode: Dispatch<SetStateAction<boolean>>; // Setter for isTeacherMode
     setIsQuestionSent: Dispatch<SetStateAction<boolean>>;
     roomName: string;
     setRoomName: Dispatch<SetStateAction<string>>; 
@@ -36,6 +38,8 @@ export const QuizContext = React.createContext<{
     index: null, // Default value for index
     updateIndex: () => {}, // Default no-op function
     submitAnswer: () => {}, // Default no-op function
+    isTeacherMode: false,
+    setisTeacherMode: () => {}, // Default no-op function
     isQuestionSent: false,
     setIsQuestionSent: () => {},
     username: '', // Default value for username

client/src/pages/Student/JoinRoom/QuizProvider.tsx

@@ -25,6 +25,9 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
     
     const [isQuestionSent, setIsQuestionSent] = useState(false);
 
+    const [isTeacherMode, setisTeacherMode] = useState(false);
+
+
     const [username, setUsername] = useState<string>(ApiService.getUsername());
 
     const [roomName, setRoomName] = useState<string>(''); // Add roomName state
@@ -78,6 +81,8 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
                 submitAnswer, // Expose submitAnswer in the context
                 isQuestionSent,
                 setIsQuestionSent,
+                isTeacherMode,
+                setisTeacherMode,
                 username,
                 setUsername,
                 roomName,

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -28,6 +28,7 @@ const ManageRoom: React.FC = () => {
             setQuestions,
             index,
             updateIndex,
+            setisTeacherMode,
         } = useQuizContext();
 
 
@@ -54,7 +55,6 @@ const ManageRoom: React.FC = () => {
                 console.log(`!quizStarted: returning.... `);
                 return;
             }
-    
             if (quizMode === 'teacher') {
                 webSocketService.nextQuestion({
                     roomName: formattedRoomName,
@@ -253,7 +253,7 @@ const ManageRoom: React.FC = () => {
     }, [socket, index, questions]);
 
     const nextQuestion = () => {
-        if (!questions || !index || !quiz?.content) return;
+        if (!questions ||  index == null || !quiz?.content) return;
 
         const nextQuestionIndex = index +1;
 
@@ -301,6 +301,7 @@ const ManageRoom: React.FC = () => {
         }
 
         updateIndex(0);
+        setisTeacherMode(true);
         webSocketService.nextQuestion({roomName: formattedRoomName, questions: questions, questionIndex: 0, isLaunch: true});
     };
 
@@ -312,6 +313,7 @@ const ManageRoom: React.FC = () => {
             console.log('Error launching quiz (launchStudentMode). No questions found.');
             return;
         }
+        setisTeacherMode(false);
         setQuestions(questions);
         webSocketService.launchStudentModeQuiz(formattedRoomName, questions);
     };
@@ -408,7 +410,7 @@ const ManageRoom: React.FC = () => {
                 {questions.length > 0 ? (
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <div className="title center-h-align mb-2">{quiz?.title}</div>
-                        {index && (
+                        {index !== null && (
                             <strong className="number of questions">
                                 Question {index +1}/
                                 {questions?.length}
@@ -428,7 +430,7 @@ const ManageRoom: React.FC = () => {
 
                         <div className="mb-2 flex-column-wrapper">
                             <div className="preview-and-result-container">
-                                {index && (
+                                {index !== null && (
                                     <QuestionDisplay/>
                                 )}