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

@@ -1,21 +1,44 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { parse, NumericalQuestion } from 'gift-pegjs';
 import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NumericalQuestion, parse, ParsedGIFTQuestion } from 'gift-pegjs';
+import { MemoryRouter } from 'react-router-dom';
 import NumericalQuestionDisplay from 'src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay';
 
-describe('NumericalQuestionDisplay Component', () => {
+const questions = parse(
+    `
+    ::Sample Question 1:: Question stem
+    {
+        #5..10
+    }`
+) as ParsedGIFTQuestion[];
+
+const question = questions[0] as NumericalQuestion;
+
+describe('NumericalQuestion parse', () => {
+    const q = questions[0];
+
+    it('The question is Numerical', () => {
+        expect(q.type).toBe('Numerical');
+    });
+});
+
+describe('NumericalQuestion Component', () => {
     const mockHandleOnSubmitAnswer = jest.fn();
-    const question = 
-        parse('::Sample Numerical Question:: What is 2+2? {#4}')[0] as NumericalQuestion;
 
     const sampleProps = {
+        question: question,
         handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
         showAnswer: false
     };
 
     beforeEach(() => {
-        render(<NumericalQuestionDisplay question={question} {...sampleProps} />);
+        render(
+            <MemoryRouter>
+                <NumericalQuestionDisplay
+                    {...sampleProps}
+                />
+            </MemoryRouter>);
     });
 
     it('renders correctly', () => {
@@ -32,13 +55,13 @@ describe('NumericalQuestionDisplay Component', () => {
         expect(inputElement.value).toBe('7');
     });
 
-    it('Submit button should be disabled if nothing is entered', () => {
+    it('Submit button should be disable if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         expect(submitButton).toBeDisabled();
     });
 
-    it('does not submit answer if nothing is entered', () => {
+    it('not submited answer if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         fireEvent.click(submitButton);
@@ -56,52 +79,4 @@ describe('NumericalQuestionDisplay Component', () => {
 
         expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(7);
     });
-
+});
-    it('renders correctly with the correct answer shown', () => {
-        render(<NumericalQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer={4} />);
-        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
-        expect(screen.getAllByText('4')).toHaveLength(2);
-    });
-
-    it('handles input change and checks if the answer is correct', () => {
-        const inputElement = screen.getByTestId('number-input') as HTMLInputElement;
-
-        fireEvent.change(inputElement, { target: { value: '4' } });
-
-        expect(inputElement.value).toBe('4');
-
-        const submitButton = screen.getByText('Répondre');
-        fireEvent.click(submitButton);
-
-        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(4);
-    });
-
-    it('submits the correct answer', () => {
-        const inputElement = screen.getByTestId('number-input') as HTMLInputElement;
-
-        fireEvent.change(inputElement, { target: { value: '4' } });
-
-        const submitButton = screen.getByText('Répondre');
-        fireEvent.click(submitButton);
-
-        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(4);
-    });
-
-    it('submits an incorrect answer', () => {
-        const inputElement = screen.getByTestId('number-input') as HTMLInputElement;
-
-        fireEvent.change(inputElement, { target: { value: '5' } });
-
-        const submitButton = screen.getByText('Répondre');
-        fireEvent.click(submitButton);
-
-        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(5);
-    });
-
-    it('displays feedback when the answer is shown', () => {
-        render(<NumericalQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer={5} />);
-        expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
-        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
-        expect(screen.getByText('5')).toBeInTheDocument();
-    });
-});

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

@@ -1,7 +1,7 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { parse, ShortAnswerQuestion } from 'gift-pegjs';
 import React from 'react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { parse, ShortAnswerQuestion } from 'gift-pegjs';
 import ShortAnswerQuestionDisplay from 'src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
 
 describe('ShortAnswerQuestion Component', () => {
@@ -20,26 +20,28 @@ describe('ShortAnswerQuestion Component', () => {
 
     it('renders correctly', () => {
         expect(screen.getByText(question.formattedStem.text)).toBeInTheDocument();
-        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
         expect(inputElement).toBeInTheDocument();
         expect(screen.getByText('Répondre')).toBeInTheDocument();
     });
 
     it('handles input change correctly', () => {
-        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
 
         fireEvent.change(inputElement, { target: { value: 'User Input' } });
 
         expect(inputElement.value).toBe('User Input');
     });
 
-    it('Submit button should be disabled if nothing is entered', () => {
+    it('Submit button should be disable if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         expect(submitButton).toBeDisabled();
     });
 
-    it('does not submit answer if nothing is entered', () => {
+    it('not submitted answer if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         fireEvent.click(submitButton);
@@ -47,51 +49,17 @@ describe('ShortAnswerQuestion Component', () => {
         expect(mockHandleSubmitAnswer).not.toHaveBeenCalled();
     });
 
-    it('renders correctly with the correct answer shown', () => {
+    it('submits answer correctly', () => {
-        render(<ShortAnswerQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer="Correct Answer" />);
+        const container = screen.getByLabelText('short-answer-input');
-        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
-        expect(screen.getByText('Correct Answer')).toBeInTheDocument();
-    });
-
-    it('handles input change and checks if the answer is correct', () => {
-        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
-
-        fireEvent.change(inputElement, { target: { value: 'Correct Answer' } });
-
-        expect(inputElement.value).toBe('Correct Answer');
 
+        // const inputElement = screen.getByRole('textbox', { name: 'short-answer-input'}) as HTMLInputElement;
         const submitButton = screen.getByText('Répondre');
+
+        fireEvent.change(inputElement, { target: { value: 'User Input' } });
+
         fireEvent.click(submitButton);
 
-        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('Correct Answer');
+        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('User Input');
     });
-
+});
-    it('submits the correct answer', () => {
-        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
-
-        fireEvent.change(inputElement, { target: { value: 'Correct Answer' } });
-
-        const submitButton = screen.getByText('Répondre');
-        fireEvent.click(submitButton);
-
-        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('Correct Answer');
-    });
-
-    it('submits an incorrect answer', () => {
-        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
-
-        fireEvent.change(inputElement, { target: { value: 'Incorrect Answer' } });
-
-        const submitButton = screen.getByText('Répondre');
-        fireEvent.click(submitButton);
-
-        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('Incorrect Answer');
-    });
-
-    it('displays feedback when the answer is shown', () => {
-        render(<ShortAnswerQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer="Incorrect Answer" />);
-        expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
-        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
-        expect(screen.getByText('Incorrect Answer')).toBeInTheDocument();
-    });
-});

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

@@ -66,18 +66,6 @@ describe('TeacherModeQuiz', () => {
         expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1);
     });
 
-
-    test('handles shows feedback for answered question', () => {
-            act(() => {
-                fireEvent.click(screen.getByText('Option B'));
-            });
-            act(() => {
-                fireEvent.click(screen.getByText('Répondre'));
-            });
-            expect(mockSubmitAnswer).toHaveBeenCalledWith('Option B', 1)
-            expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
-    });
-
     test('handles shows feedback for an already answered question', () => {
         // Answer the first question
         act(() => {
@@ -118,7 +106,7 @@ describe('TeacherModeQuiz', () => {
         });
 
         // Check if the feedback dialog is shown again
-        expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
+        expect(screen.getByText('Rétroaction')).toBeInTheDocument();
     });
     
     test('handles disconnect button click', () => {

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

@@ -99,7 +99,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
             {!showAnswer && handleOnSubmitAnswer && (
 
                 <Button
-                    className='submit-button'
                     variant="contained"
                     onClick={() =>
                         answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)

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

@@ -109,7 +109,6 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
                     )}
                     {handleOnSubmitAnswer && (
                         <Button
-                        className='submit-button'
                             variant="contained"
                             onClick={() =>
                                 answer !== undefined &&

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

@@ -31,7 +31,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
     }, [answer]);
 
     const checkAnswer = () => {
-        const isCorrect = question.choices.some((choice) => String(choice.text).toLowerCase() === String(answer).toLowerCase());
+        const isCorrect = question.choices.some((choice) => choice.text.toLowerCase() === (answer as String).toLowerCase());
         setisGoodAnswer(isCorrect);
     };
 
@@ -91,7 +91,6 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
                     </div>
                     {handleOnSubmitAnswer && (
                         <Button
-                        className='submit-button'   
                             variant="contained"
                             onClick={() =>
                                 answer !== undefined &&

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

@@ -105,7 +105,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
             )}
             {!showAnswer && handleOnSubmitAnswer && (
                 <Button
-                className='submit-button'
                     variant="contained"
                     onClick={() =>
                         answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)

client/src/components/QuestionsDisplay/questionStyle.css

@@ -200,10 +200,6 @@
     margin-bottom: 1rem;
     
 }
-.submit-button{
-width: 20%;
-
-}
 
 
 

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -60,7 +60,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     <div >
     <b>Question {questionInfos.question.id}/{questions.length}</b>
     </div>
-        <div className="overflow-auto" style={{ width: '50%', alignItems: 'center', justifyContent: 'center', margin: 'auto' }}>
+        <div className="overflow-auto">
             <div className="question-component-container">
                 <div className="mb-5">
                     {/* <QuestionNavigation