From 459f561d36337b583cbc2d612c996cb548b6f568 Mon Sep 17 00:00:00 2001
From: Melanie St-Hilaire <melanie.sthilaire.1@ens.etsmtl.ca>
Date: Mon, 8 Apr 2024 21:37:11 -0400
Subject: [PATCH] Modification affichage latex et titres

---
 .../MultipleChoiceQuestion.tsx                    | 10 +++++++---
 .../NumericalQuestion/NumericalQuestion.tsx       | 14 +++++++++-----
 client/src/components/Questions/Question.tsx      | 15 ++++++++++-----
 .../ShortAnswerQuestion/ShortAnswerQuestion.tsx   | 14 +++++++++-----
 .../TrueFalseQuestion/TrueFalseQuestion.tsx       | 10 +++++++---
 client/src/components/Questions/questionStyle.css |  5 +++++
 6 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
index 84ab45a..54022a3 100644
--- a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
+++ b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
@@ -12,7 +12,8 @@ type Choices = {
 };
 
 interface Props {
-    questionTitle: string;
+    questionTitle: string | null;
+    questionContent: string;
     choices: Choices[];
     globalFeedback?: string | undefined;
     handleOnSubmitAnswer?: (answer: string) => void;
@@ -20,7 +21,7 @@ interface Props {
 }
 
 const MultipleChoiceQuestion: React.FC<Props> = (props) => {
-    const { questionTitle, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+    const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
     const [answer, setAnswer] = useState<string>();
 
     const handleOnClickAnswer = (choice: string) => {
@@ -32,7 +33,10 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="title mb-1 text-center align-h-center">
-                <Latex>{questionTitle}</Latex>
+                {questionTitle}
+            </div>
+            <div className="question content">
+                <Latex>{questionContent}</Latex>
             </div>
             <div className="choices-wrapper mb-1">
                 {choices.map((choice, i) => {
diff --git a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
index 9611888..0fcc56b 100644
--- a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
+++ b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
@@ -12,7 +12,8 @@ type CorrectAnswer = {
 };
 
 interface Props {
-    questionTitle: string;
+    questionTitle: string | null;
+    questionContent: string;
     correctAnswers: CorrectAnswer;
     globalFeedback?: string | undefined;
     handleOnSubmitAnswer?: (answer: number) => void;
@@ -20,7 +21,7 @@ interface Props {
 }
 
 const NumericalQuestion: React.FC<Props> = (props) => {
-    const { questionTitle, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
+    const { questionTitle, questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
         props;
 
     const [answer, setAnswer] = useState<number>();
@@ -33,7 +34,10 @@ const NumericalQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div className="title mb-1 text-center center-h-align">
-                <Latex>{questionTitle}</Latex>
+                {questionTitle}
+            </div>
+            <div>
+                <Latex>{questionContent}</Latex>
             </div>
             {showAnswer ? (
                 <>
@@ -45,8 +49,8 @@ const NumericalQuestion: React.FC<Props> = (props) => {
                     <div className="answer-wrapper mb-1">
                         <TextField
                             type="number"
-                            id={questionTitle}
-                            name={questionTitle}
+                            id={questionContent}
+                            name={questionContent}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 setAnswer(e.target.valueAsNumber);
                             }}
diff --git a/client/src/components/Questions/Question.tsx b/client/src/components/Questions/Question.tsx
index 5038541..ca23679 100644
--- a/client/src/components/Questions/Question.tsx
+++ b/client/src/components/Questions/Question.tsx
@@ -30,7 +30,8 @@ const Question: React.FC<QuestionProps> = ({
         case 'TF':
             questionTypeComponent = (
                 <TrueFalseQuestion
-                    questionTitle={question.stem.text}
+                    questionTitle={question.title}
+                    questionContent={question.stem.text}
                     correctAnswer={question.isTrue}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
@@ -41,7 +42,8 @@ const Question: React.FC<QuestionProps> = ({
         case 'MC':
             questionTypeComponent = (
                 <MultipleChoiceQuestion
-                    questionTitle={question.stem.text}
+                    questionTitle={question.title}
+                    questionContent={question.stem.text}
                     choices={question.choices}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
@@ -54,7 +56,8 @@ const Question: React.FC<QuestionProps> = ({
                 if (!Array.isArray(question.choices)) {
                     questionTypeComponent = (
                         <NumericalQuestion
-                            questionTitle={question.stem.text}
+                            questionTitle={question.title}
+                            questionContent={question.stem.text}
                             correctAnswers={question.choices}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
@@ -64,7 +67,8 @@ const Question: React.FC<QuestionProps> = ({
                 } else {
                     questionTypeComponent = (
                         <NumericalQuestion
-                            questionTitle={question.stem.text}
+                            questionTitle={question.title}
+                            questionContent={question.stem.text}
                             correctAnswers={question.choices[0].text}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
@@ -77,7 +81,8 @@ const Question: React.FC<QuestionProps> = ({
         case 'Short':
             questionTypeComponent = (
                 <ShortAnswerQuestion
-                    questionTitle={question.stem.text}
+                    questionTitle={question.title}
+                    questionContent={question.stem.text}
                     choices={question.choices}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
diff --git a/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx b/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
index 8708d33..7adbc0e 100644
--- a/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
+++ b/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
@@ -12,7 +12,8 @@ type Choices = {
 };
 
 interface Props {
-    questionTitle: string;
+    questionTitle: string | null;
+    questionContent: string;
     choices: Choices[];
     globalFeedback?: string | undefined;
     handleOnSubmitAnswer?: (answer: string) => void;
@@ -20,13 +21,16 @@ interface Props {
 }
 
 const ShortAnswerQuestion: React.FC<Props> = (props) => {
-    const { questionTitle, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+    const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
     const [answer, setAnswer] = useState<string>();
 
     return (
         <div className="question-wrapper">
             <div className="title mb-1 text-center center-h-align">
-                <Latex>{questionTitle}</Latex>
+                {questionTitle}
+            </div>
+            <div className="question content">
+                <Latex>{questionContent}</Latex>
             </div>
             {showAnswer ? (
                 <>
@@ -42,8 +46,8 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
                     <div className="answer-wrapper mb-1">
                         <TextField
                             type="text"
-                            id={questionTitle}
-                            name={questionTitle}
+                            id={questionContent}
+                            name={questionContent}
                             onChange={(e) => {
                                 setAnswer(e.target.value);
                             }}
diff --git a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx b/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
index e8dac26..e56eb4b 100644
--- a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
+++ b/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
@@ -5,7 +5,8 @@ import '../questionStyle.css';
 import { Button } from '@mui/material';
 
 interface Props {
-    questionTitle: string;
+    questionTitle: string | null;
+    questionContent: string;
     correctAnswer: boolean;
     globalFeedback?: string | undefined;
     handleOnSubmitAnswer?: (answer: boolean) => void;
@@ -13,7 +14,7 @@ interface Props {
 }
 
 const TrueFalseQuestion: React.FC<Props> = (props) => {
-    const { questionTitle, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
+    const { questionTitle, questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
         props;
     const [answer, setAnswer] = useState<boolean | undefined>(undefined);
 
@@ -26,7 +27,10 @@ const TrueFalseQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="title mb-1">
-                <Latex>{questionTitle}</Latex>
+                {questionTitle}
+            </div>
+            <div className="question content">
+                <Latex>{questionContent}</Latex>
             </div>
             <div className="choices-wrapper mb-1">
                 <Button
diff --git a/client/src/components/Questions/questionStyle.css b/client/src/components/Questions/questionStyle.css
index 9a1aa9d..07a2be0 100644
--- a/client/src/components/Questions/questionStyle.css
+++ b/client/src/components/Questions/questionStyle.css
@@ -26,6 +26,11 @@
     justify-content: center;
 }
 
+.question-wrapper .katex {
+    display: block;
+    text-align: center;
+}
+
 .circle {
     height: 2.3rem;
     width: 2.3rem;