Merge pull request #232 from ets-cfuhrman-pfe/JubaAzul/issue230

Les longues réponses dépassent le cadre de la fenêtre de rétroaction

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

@@ -53,7 +53,7 @@ describe('TeacherModeQuiz', () => {
             fireEvent.click(screen.getByText('Répondre'));
         });
         expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1);
-        expect(screen.getByText('Votre réponse est "Option A".')).toBeInTheDocument();
+        expect(screen.getByText('Votre réponse est:')).toBeInTheDocument();
     });
 
     test('handles disconnect button click', () => {

client/src/components/GiftTemplate/GIFTTemplatePreview.tsx

@@ -74,6 +74,7 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
                 <div className="error">{error}</div>
             ) : isPreviewReady ? (
                 <div data-testid="preview-container">
+
                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate({ format: 'html', text: items }) }}></div>
                 </div>
             ) : (

client/src/components/GiftTemplate/templates/TextTypeTemplate.ts

@@ -5,6 +5,7 @@ import { TextFormat } from 'gift-pegjs';
 import DOMPurify from 'dompurify';  // cleans HTML to prevent XSS attacks, etc.
 
 function formatLatex(text: string): string {
+
     let renderedText = '';
 
     try {

client/src/components/LiveResults/LiveResults.tsx

@@ -9,8 +9,8 @@ import {
     Switch,
 } from '@mui/material';
 import { StudentType } from '../../Types/StudentType';
-import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
 
+import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
 
 interface LiveResultsProps {
     socket: Socket | null;
@@ -20,11 +20,11 @@ interface LiveResultsProps {
     students: StudentType[]
 }
 
+
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
 
-    
     return (
         <div>
             <div className="action-bar mb-1">
@@ -56,6 +56,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
             </div>
 
             <div className="table-container">
+
                 <LiveResultsTable
                     students={students}
                     questions={questions}

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -23,8 +23,22 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
 }) => {
     const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
     const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] = useState(false);
-    const [feedbackMessage, setFeedbackMessage] = useState('');
+    const [feedbackMessage, setFeedbackMessage] = useState<React.ReactNode>('');
+    
+    const renderFeedbackMessage = (answer: string) => {
 
+        if(answer === 'true' || answer === 'false'){
+        return (<span>
+            <strong>Votre réponse est: </strong>{answer==="true" ? 'Vrai' : 'Faux'}
+            </span>)
+        }
+        else{
+        return (
+            <span>
+                <strong>Votre réponse est: </strong>{answer.toString()}
+            </span>
+        );}
+    };
     useEffect(() => {
         // Close the feedback dialog when the question changes
         handleFeedbackDialogClose();
@@ -35,7 +49,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
     const handleOnSubmitAnswer = (answer: string | number | boolean) => {
         const idQuestion = Number(questionInfos.question.id) || -1;
         submitAnswer(answer, idQuestion);
-        setFeedbackMessage(`Votre réponse est "${answer.toString()}".`);
+        setFeedbackMessage(renderFeedbackMessage(answer.toString()));
         setIsFeedbackDialogOpen(true);
     };
 
@@ -77,7 +91,17 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
             >
                 <DialogTitle>Rétroaction</DialogTitle>
                 <DialogContent>
+                    <div style={{
+                            wordWrap: 'break-word',
+                            whiteSpace: 'pre-wrap',
+                            maxHeight: '400px',
+                            overflowY: 'auto',
+                        }}>
                     {feedbackMessage}
+                    <div style={{ textAlign: 'left', fontWeight: 'bold', marginTop: '10px'}}
+                    >Question : </div>                    
+                    </div>
+                    
                 <QuestionComponent
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}