Merge pull request #51 from louis-antoine-etsmtl/melanie_ite4

Modification affichage latex et titres

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) => {

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);
                             }}

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}

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);
                             }}

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

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;