Merge pull request #198 from ets-cfuhrman-pfe/JubaAzul/issue197

Juba azul/issue197

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

@@ -77,21 +77,5 @@ 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} 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";
+    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}";
     return (
         <div className="gift-cheat-sheet">
             <h2 className="subtitle">Informations pratiques sur l&apos;éditeur</h2>

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

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

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -1,13 +1,12 @@
 // 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 {
@@ -25,10 +24,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]);
 
@@ -55,12 +54,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}
@@ -69,7 +68,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
@@ -77,14 +76,14 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                             disabled={Number(questionInfos.question.id) <= 1}
                             >
                             Question précédente
-                        </Button>
+                        </Button> */}
                     </div>
                     <div className="w-12">
-                        <Button
+                        <Button style={{ display: isAnswerSubmitted ? 'block' : 'none' }}
                             variant="outlined"
                             onClick={nextQuestion}
                             fullWidth
-                            endIcon={<ChevronRight />}
+                            //endIcon={<ChevronRight />}
                             disabled={Number(questionInfos.question.id) >= questions.length}
                             >
                             Question suivante
@@ -93,7 +92,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                 </div>
             </div>
         </div>
-                            </div>
+    </div>
     );
 };
 

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

@@ -22,6 +22,7 @@
 
 .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,7 +267,6 @@ 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]);
     };
@@ -461,12 +460,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>
 
                         )}
@@ -493,12 +492,23 @@ 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">
+                                <Button onClick={nextQuestion} 
+                                variant="contained" 
+                                disabled={Number(currentQuestion?.question.id) >=quizQuestions.length}
+                                >
                                     Prochaine question
                                 </Button>
                             </div>
-                        )}
+                        </div> )}
 
                     </div>