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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { act } from 'react';
@@ -17,30 +17,21 @@ const question = questions[0];
 
 describe('MultipleChoiceQuestionDisplay', () => {
     const mockHandleOnSubmitAnswer = jest.fn();
-
+    const sampleProps = {
-    const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
+        question: question,
-        const [showAnswerState, setShowAnswerState] = useState(showAnswer);
+        handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
-
+        showAnswer: false
-        const handleOnSubmitAnswer = (answer: string) => {
-            mockHandleOnSubmitAnswer(answer);
-            setShowAnswerState(true);
-        };
-
-        return (
-            <MemoryRouter>
-                <MultipleChoiceQuestionDisplay
-                    question={question}
-                    handleOnSubmitAnswer={handleOnSubmitAnswer}
-                    showAnswer={showAnswerState}
-                />
-            </MemoryRouter>
-        );
     };
 
     const choices = question.choices;
 
     beforeEach(() => {
-        render(<TestWrapper showAnswer={false} />);
+        render(
+            <MemoryRouter>
+                <MultipleChoiceQuestionDisplay
+                  {...sampleProps}
+                    />
+            </MemoryRouter>);
     });
 
     test('renders the question and choices', () => {
@@ -64,6 +55,7 @@ describe('MultipleChoiceQuestionDisplay', () => {
         act(() => {
             fireEvent.click(choiceButton);
         });
+
         const submitButton = screen.getByText('Répondre');
         act(() => {
             fireEvent.click(submitButton);
@@ -71,51 +63,4 @@ describe('MultipleChoiceQuestionDisplay', () => {
 
         expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith('Choice 1');
     });
-
+});
-    it('should show ✅ next to the correct answer and ❌ next to the wrong answers when showAnswer is true', async () => {
-        const choiceButton = screen.getByText('Choice 1').closest('button');
-        if (!choiceButton) throw new Error('Choice button not found');
-
-        // Click on choiceButton
-        act(() => {
-            fireEvent.click(choiceButton);
-        });
-
-        const button = screen.getByText("Répondre");
-
-        act(() => {
-            fireEvent.click(button);
-        });
-
-        // Wait for the DOM to update
-            const correctAnswer = screen.getByText("Choice 1").closest('button');
-            expect(correctAnswer).toBeInTheDocument();
-            expect(correctAnswer?.textContent).toContain('✅');
-
-            const wrongAnswer1 = screen.getByText("Choice 2").closest('button');
-            expect(wrongAnswer1).toBeInTheDocument();
-            expect(wrongAnswer1?.textContent).toContain('❌');
-    });
-
-    it('should not show ✅ or ❌ when repondre button is not clicked', async () => {
-        const choiceButton = screen.getByText('Choice 1').closest('button');
-        if (!choiceButton) throw new Error('Choice button not found');
-
-        // Click on choiceButton
-        act(() => {
-            fireEvent.click(choiceButton);
-        });
-
-        // Check for correct answer
-        const correctAnswer = screen.getByText("Choice 1").closest('button');
-        expect(correctAnswer).toBeInTheDocument();
-        expect(correctAnswer?.textContent).not.toContain('✅');
-
-        // Check for wrong answers
-        const wrongAnswer1 = screen.getByText("Choice 2");
-        expect(wrongAnswer1).toBeInTheDocument();
-        expect(wrongAnswer1?.textContent).not.toContain('❌');
-    });
-
-    });
-

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

@@ -1,5 +1,5 @@
 // TrueFalseQuestion.test.tsx
-import React, { useState } from 'react';
+import React from 'react';
 import { render, fireEvent, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
@@ -9,31 +9,20 @@ import { parse, TrueFalseQuestion } from 'gift-pegjs';
 describe('TrueFalseQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
     const sampleStem = 'Sample True False Question';
-    const trueFalseQuestion =
+    const trueFalseQuestion = 
         parse(`${sampleStem}{T}`)[0] as TrueFalseQuestion;
 
-
+    const sampleProps = {
-    const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
+        question: trueFalseQuestion,
-        const [showAnswerState, setShowAnswerState] = useState(showAnswer);
+        handleOnSubmitAnswer: mockHandleSubmitAnswer,
-
+        showAnswer: false
-        const handleOnSubmitAnswer = (answer: boolean) => {
-            mockHandleSubmitAnswer(answer);
-            setShowAnswerState(true);
-        };
-
-        return (
-            <MemoryRouter>
-                <TrueFalseQuestionDisplay
-                    question={trueFalseQuestion}
-                    handleOnSubmitAnswer={handleOnSubmitAnswer}
-                    showAnswer={showAnswerState}
-                />
-            </MemoryRouter>
-        );
     };
 
     beforeEach(() => {
-        render(<TestWrapper showAnswer={false} />);
+        render(
+            <MemoryRouter>
+                <TrueFalseQuestionDisplay {...sampleProps} />
+            </MemoryRouter>);
     });
 
     it('renders correctly', () => {
@@ -84,50 +73,4 @@ describe('TrueFalseQuestion Component', () => {
 
         expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(false);
     });
-
-
-        it('should show ✅ next to the correct answer and ❌ next to the wrong answers when showAnswer is true', async () => {
-            const choiceButton = screen.getByText('Vrai').closest('button');
-            if (!choiceButton) throw new Error('T button not found');
-    
-            // Click on choiceButton
-            act(() => {
-                fireEvent.click(choiceButton);
-            });
-    
-            const button = screen.getByText("Répondre");
-    
-            act(() => {
-                fireEvent.click(button);
-            });
-    
-            // Wait for the DOM to update
-                const correctAnswer = screen.getByText("Vrai").closest('button');
-                expect(correctAnswer).toBeInTheDocument();
-                expect(correctAnswer?.textContent).toContain('✅');
-    
-                const wrongAnswer1 = screen.getByText("Faux").closest('button');
-                expect(wrongAnswer1).toBeInTheDocument();
-                expect(wrongAnswer1?.textContent).toContain('❌');
-        });
-    
-        it('should not show ✅ or ❌ when repondre button is not clicked', async () => {
-            const choiceButton = screen.getByText('Vrai').closest('button');
-            if (!choiceButton) throw new Error('Choice button not found');
-    
-            // Click on choiceButton
-            act(() => {
-                fireEvent.click(choiceButton);
-            });
-    
-            // Check for correct answer
-            const correctAnswer = screen.getByText("Vrai").closest('button');
-            expect(correctAnswer).toBeInTheDocument();
-            expect(correctAnswer?.textContent).not.toContain('✅');
-    
-            // Check for wrong answers
-            const wrongAnswer1 = screen.getByText("Faux");
-            expect(wrongAnswer1).toBeInTheDocument();
-            expect(wrongAnswer1?.textContent).not.toContain('❌');
-        });
 });

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

@@ -12,9 +12,10 @@ interface Props {
 }
 
 const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
+  
     const { question, showAnswer, handleOnSubmitAnswer } = props;
     const [answer, setAnswer] = useState<string>();
-    
+
     useEffect(() => {
         setAnswer(undefined);
     }, [question]);
@@ -23,6 +24,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
         setAnswer(choice);
     };
 
+
     const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
     const alphabet = alpha.map((x) => String.fromCharCode(x));
     return (
@@ -35,23 +37,25 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                     const selected = answer === choice.formattedText.text ? 'selected' : '';
                     return (
                         <div key={choice.formattedText.text + i} className="choice-container">
-                            <Button
+                                <Button
                                 variant="text"
                                 className="button-wrapper"
-                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
+                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
-                                {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
+                            >
-                                :``}
+                                {choice.formattedFeedback === null &&
+                                    showAnswer &&
+                                    (choice.isCorrect ? '✅' : '❌')}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
                                 </div>
-                                {choice.formattedFeedback && showAnswer && (
+                            </Button>
+                            {choice.formattedFeedback && showAnswer && (
                                 <div className="feedback-container mb-1 mt-1/2">
+                                    {choice.isCorrect ? '✅' : '❌'}
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
                                 </div>
                             )}
-                            </Button>
-
                         </div>
                     );
                 })}

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

@@ -22,6 +22,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
 
     const selectedTrue = answer ? 'selected' : '';
     const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
+    const correctAnswer = question.isTrue === answer;
     return (
         <div className="question-container">
             <div className="question content">
@@ -33,7 +34,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     onClick={() => !showAnswer && setAnswer(true)}
                     fullWidth
                 >
-                    {showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}                    
+                    {showAnswer && (correctAnswer ? '✅' : '❌')}
                     <div className={`circle ${selectedTrue}`}>V</div>
                     <div className={`answer-text ${selectedTrue}`}>Vrai</div>
                 </Button>
@@ -42,7 +43,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     onClick={() => !showAnswer && setAnswer(false)}
                     fullWidth
                 >
-                    {showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}                    
+                    {showAnswer && (!correctAnswer ? '✅' : '❌')}
                     <div className={`circle ${selectedFalse}`}>F</div>
                     <div className={`answer-text ${selectedFalse}`}>Faux</div>
                 </Button>

server/package-lock.json

@@ -31,7 +31,7 @@
         "supertest": "^6.3.4"
       },
       "engines": {
-        "node": "20.x"
+        "node": "18.x"
       }
     },
     "node_modules/@ampproject/remapping": {