client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx

@@ -77,5 +77,21 @@ describe('StudentModeQuiz', () => {
 
     });
 
+    test('navigates to the previous question', async () => {
+
+        act(() => {
+            fireEvent.click(screen.getByText('Option A'));
+        });
+        act(() => {
+            fireEvent.click(screen.getByText('Répondre'));
+        });        
+        act(() => {
+            fireEvent.click(screen.getByText('Question précédente'));
+        });
+
+        expect(screen.getByText('Sample Question 1')).toBeInTheDocument();
+        expect(screen.getByText('Option B')).toBeInTheDocument();
+    });
+
 });
 

client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx

@@ -21,11 +21,11 @@ const GiftCheatSheet: React.FC = () => {
     };
     
 
-    const QuestionVraiFaux = "2+2 \\= 4 ? {T}\n// Utilisez les valeurs {T}, {F}, {TRUE} \net {FALSE}.";
-    const QuestionChoixMul = "Quelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Bonne réponse!\n}\n// La bonne réponse est Ottawa";
-    const QuestionChoixMulMany = "Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### La bonne réponse est Montréal, Ottawa et Vancouver \n}\n/ Utilisez tilde (signe de vague) pour toutes les réponses.\n// On doit indiquer le pourcentage de chaque réponse.";
-    const QuestionCourte ="Avec quoi ouvre-t-on une porte? { \n= clé \n= clef \n}\n/ Permet de fournir plusieurs bonnes réponses.\n// Note: La casse n'est pas prise en compte.";
-    const QuestionNum ="// Question de plage mathématique. \n Quel est un nombre de 1 à 5 ? {\n#3:2\n}\n \n// Plage mathématique spécifiée avec des points de fin d'intervalle. \n Quel est un nombre de 1 à 5 ? {\n#1..5\n} \n\n// Réponses numériques multiples avec crédit partiel et commentaires.\nQuand est né Ulysses S. Grant ? {\n# =1822:0 # Correct ! Crédit complet. \n=%50%1822:2 # Il est né en 1822. Demi-crédit pour être proche.\n}";
+    const QuestionVraiFaux = "2+2 \\= 4 ? {T\n}// Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}";
+    const QuestionChoixMul = "Quelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Bonne réponse!\n}// La bonne réponse est Ottawa";
+    const QuestionChoixMulMany = "Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### La bonne réponse est Montréal, Ottawa et Vancouver \n}\n// Utilisez le signe ~ pour toutes les réponses.\n// On doit indiquer le pourcentage de chaque réponse.";
+    const QuestionCourte ="Avec quoi ouvre-t-on une porte? { \n= clé \n= clef \n}\n// Permet de fournir plusieurs bonnes réponses.\n// Note: La casse n'est pas prise en compte.";
+    const QuestionNum ="Question {#=Nombre\n} //OU \nQuestion {#=Nombre:Tolérance\n} // OU \nQuestion {#=PetitNombre..GrandNombre\n}\n// La tolérance est un pourcentage.\n// La réponse doit être comprise entre PetitNombre et GrandNombre";
     return (
         <div className="gift-cheat-sheet">
             <h2 className="subtitle">Informations pratiques sur l&apos;éditeur</h2>

client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx

@@ -23,7 +23,6 @@ interface Props {
 }
 
 const MultipleChoiceQuestion: React.FC<Props> = (props) => {
-  
     const { questionStem: questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
     const [answer, setAnswer] = useState<string>();
 
@@ -74,9 +73,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
             {globalFeedback && showAnswer && (
                 <div className="global-feedback mb-2">{globalFeedback}</div>
             )}
-            
             {!showAnswer && handleOnSubmitAnswer && (
-                
                 <Button
                     variant="contained"
                     onClick={() =>
@@ -85,7 +82,6 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
                     disabled={answer === undefined}
                 >
                     Répondre
-                    
                 </Button>
             )}
         </div>

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -1,12 +1,13 @@
 // StudentModeQuiz.tsx
 import React, { useEffect, useState } from 'react';
 import QuestionComponent from '../Questions/Question';
+
 import '../../pages/Student/JoinRoom/joinRoom.css';
 import { QuestionType } from '../../Types/QuestionType';
 // import { QuestionService } from '../../services/QuestionService';
 import { Button } from '@mui/material';
-//import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
-//import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
 
 interface StudentModeQuizProps {
@@ -24,10 +25,10 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
     // const [imageUrl, setImageUrl] = useState('');
 
-    // const previousQuestion = () => {
-    //     setQuestion(questions[Number(questionInfos.question?.id) - 2]);
-    //     setIsAnswerSubmitted(false);
-    // };
+    const previousQuestion = () => {
+        setQuestion(questions[Number(questionInfos.question?.id) - 2]);
+        setIsAnswerSubmitted(false);
+    };
 
     useEffect(() => {}, [questionInfos]);
 
@@ -54,12 +55,12 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
         <div className="overflow-auto">
             <div className="question-component-container">
                 <div className="mb-5">
-                    {/* <QuestionNavigation
+                    <QuestionNavigation
                         currentQuestionId={Number(questionInfos.question.id)}
                         questionsLength={questions.length}
                         previousQuestion={previousQuestion}
                         nextQuestion={nextQuestion}
-                        /> */}
+                        />
                 </div>
                 <QuestionComponent
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
@@ -68,7 +69,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                     />
                 <div className="center-h-align mt-1/2">
                     <div className="w-12">
-                        {/* <Button
+                        <Button
                             variant="outlined"
                             onClick={previousQuestion}
                             fullWidth
@@ -76,14 +77,14 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                             disabled={Number(questionInfos.question.id) <= 1}
                             >
                             Question précédente
-                        </Button> */}
+                        </Button>
                     </div>
                     <div className="w-12">
-                        <Button style={{ display: isAnswerSubmitted ? 'block' : 'none' }}
+                        <Button
                             variant="outlined"
                             onClick={nextQuestion}
                             fullWidth
-                            //endIcon={<ChevronRight />}
+                            endIcon={<ChevronRight />}
                             disabled={Number(questionInfos.question.id) >= questions.length}
                             >
                             Question suivante
@@ -92,7 +93,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                 </div>
             </div>
         </div>
-    </div>
+                            </div>
     );
 };
 

client/src/pages/Teacher/EditorQuiz/editorQuiz.css

@@ -22,7 +22,6 @@
 
 .quizEditor .editSection {
     width: 100%;
-    height: 78vh;
     display: flex;
 }
 

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

@@ -17,7 +17,7 @@ import LoadingCircle from 'src/components/LoadingCircle/LoadingCircle';
 import { Refresh, Error } from '@mui/icons-material';
 import StudentWaitPage from 'src/components/StudentWaitPage/StudentWaitPage';
 import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
-//import QuestionNavigation from 'src/components/QuestionNavigation/QuestionNavigation';
+import QuestionNavigation from 'src/components/QuestionNavigation/QuestionNavigation';
 import Question from 'src/components/Questions/Question';
 import ApiService from '../../../services/ApiService';
 
@@ -267,6 +267,7 @@ const ManageRoom: React.FC = () => {
         const prevQuestionIndex = Number(currentQuestion?.question.id) - 2; // -2 because question.id starts at index 1
 
         if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
+
         setCurrentQuestion(quizQuestions[prevQuestionIndex]);
         webSocketService.nextQuestion(roomName, quizQuestions[prevQuestionIndex]);
     };
@@ -460,12 +461,12 @@ const ManageRoom: React.FC = () => {
                         {quizMode === 'teacher' && (
 
                             <div className="mb-1">
-                                {/* <QuestionNavigation
+                                <QuestionNavigation
                                     currentQuestionId={Number(currentQuestion?.question.id)}
                                     questionsLength={quizQuestions?.length}
                                     previousQuestion={previousQuestion}
                                     nextQuestion={nextQuestion}
-                                /> */}
+                                />
                             </div>
 
                         )}
@@ -492,23 +493,12 @@ const ManageRoom: React.FC = () => {
                         </div>
 
                         {quizMode === 'teacher' && (
-                        <div className="questionNavigationButtons" style={{ display: 'flex', justifyContent: 'center' }}>
-                            <div className="previousQuestionButton">
-                                <Button onClick={previousQuestion} 
-                                variant="contained" 
-                                disabled={Number(currentQuestion?.question.id) <= 1}>
-                                    Question précédente
-                                </Button>
-                            </div>
                             <div className="nextQuestionButton">
-                                <Button onClick={nextQuestion} 
-                                variant="contained" 
-                                disabled={Number(currentQuestion?.question.id) >=quizQuestions.length}
-                                >
+                                <Button onClick={nextQuestion} variant="contained">
                                     Prochaine question
                                 </Button>
                             </div>
-                        </div> )}
+                        )}
 
                     </div>