diff --git a/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx b/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx index 4dc9f1e..179e454 100644 --- a/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx +++ b/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx @@ -137,19 +137,14 @@ const GiftCheatSheet: React.FC = () => {
-

8. LaTeX et Markdown

+

8. LaTeX

- Les format LaTeX et markdown sont supportés dans cette application. Vous devez cependant penser + Le format LaTeX est supporté dans cette application. Vous devez cependant penser à 'échapper' les caractères spéciaux mentionnés plus haut.

Exemple d'équation:

-                    {'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}
-                    {'\n$x\\= \\frac\\{y^2\\}\\{4\\}$'}
-
-

Exemple de texte Markdown:

- 
-                    {'[markdown]Grâce à la balise markdown, Il est possible d\'insérer du texte *italique*, **gras**, du `code` et bien plus.'}
+                    {'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}
diff --git a/client/src/components/GiftTemplate/templates/TextType.ts b/client/src/components/GiftTemplate/templates/TextType.ts index b250637..bf9a3a3 100644 --- a/client/src/components/GiftTemplate/templates/TextType.ts +++ b/client/src/components/GiftTemplate/templates/TextType.ts @@ -9,7 +9,6 @@ interface TextTypeOptions extends TemplateOptions { function formatLatex(text: string): string { return text .replace(/\$\$(.*?)\$\$/g, (_, inner) => katex.renderToString(inner, { displayMode: true })) - .replace(/\$(.*?)\$/g, (_, inner) => katex.renderToString(inner, { displayMode: false })) .replace(/\\\[(.*?)\\\]/g, (_, inner) => katex.renderToString(inner, { displayMode: true })) .replace(/\\\((.*?)\\\)/g, (_, inner) => katex.renderToString(inner, { displayMode: false }) diff --git a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx index d3e7a82..54022a3 100644 --- a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx +++ b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx @@ -1,10 +1,8 @@ // MultipleChoiceQuestion.tsx -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; +import Latex from 'react-latex'; import '../questionStyle.css'; import { Button } from '@mui/material'; -import TextType from '../../GiftTemplate/templates/TextType'; -import { TextFormat } from '../../GiftTemplate/templates/types'; -import Latex from 'react-latex'; type Choices = { feedback: { format: string; text: string } | null; @@ -14,7 +12,8 @@ type Choices = { }; interface Props { - questionContent: TextFormat; + questionTitle: string | null; + questionContent: string; choices: Choices[]; globalFeedback?: string | undefined; handleOnSubmitAnswer?: (answer: string) => void; @@ -22,24 +21,22 @@ interface Props { } const MultipleChoiceQuestion: React.FC = (props) => { - const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; + const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(); - useEffect(() => { - setAnswer(undefined); - }, [questionContent]); - const handleOnClickAnswer = (choice: string) => { setAnswer(choice); }; - const alpha = Array.from(Array(26)).map((_e, i) => i + 65); const alphabet = alpha.map((x) => String.fromCharCode(x)); return (
+
+ {questionTitle} +
-
+ {questionContent}
{choices.map((choice, i) => { diff --git a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx index a1bfa9a..0fcc56b 100644 --- a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx +++ b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx @@ -1,9 +1,8 @@ // NumericalQuestion.tsx import React, { useState } from 'react'; +import Latex from 'react-latex'; import '../questionStyle.css'; import { Button, TextField } from '@mui/material'; -import TextType from '../../GiftTemplate/templates/TextType'; -import { TextFormat } from '../../GiftTemplate/templates/types'; type CorrectAnswer = { numberHigh?: number; @@ -13,7 +12,8 @@ type CorrectAnswer = { }; interface Props { - questionContent: TextFormat; + questionTitle: string | null; + questionContent: string; correctAnswers: CorrectAnswer; globalFeedback?: string | undefined; handleOnSubmitAnswer?: (answer: number) => void; @@ -21,7 +21,7 @@ interface Props { } const NumericalQuestion: React.FC = (props) => { - const { questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } = + const { questionTitle, questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(); @@ -33,8 +33,11 @@ const NumericalQuestion: React.FC = (props) => { return (
+
+ {questionTitle} +
-
+ {questionContent}
{showAnswer ? ( <> @@ -46,8 +49,8 @@ const NumericalQuestion: React.FC = (props) => {
) => { setAnswer(e.target.valueAsNumber); }} diff --git a/client/src/components/Questions/Question.tsx b/client/src/components/Questions/Question.tsx index 28e4d9b..ca23679 100644 --- a/client/src/components/Questions/Question.tsx +++ b/client/src/components/Questions/Question.tsx @@ -30,7 +30,8 @@ const Question: React.FC = ({ case 'TF': questionTypeComponent = ( = ({ case 'MC': questionTypeComponent = ( = ({ if (!Array.isArray(question.choices)) { questionTypeComponent = ( = ({ } else { questionTypeComponent = ( = ({ case 'Short': questionTypeComponent = ( void; @@ -21,13 +21,16 @@ interface Props { } const ShortAnswerQuestion: React.FC = (props) => { - const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; + const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(); return (
+
+ {questionTitle} +
-
+ {questionContent}
{showAnswer ? ( <> @@ -43,8 +46,8 @@ const ShortAnswerQuestion: React.FC = (props) => {
{ setAnswer(e.target.value); }} diff --git a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx b/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx index f3a1357..e56eb4b 100644 --- a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx +++ b/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx @@ -1,12 +1,12 @@ // TrueFalseQuestion.tsx import React, { useState, useEffect } from 'react'; +import Latex from 'react-latex'; import '../questionStyle.css'; import { Button } from '@mui/material'; -import TextType from '../../GiftTemplate/templates/TextType'; -import { TextFormat } from '../../GiftTemplate/templates/types'; interface Props { - questionContent: TextFormat; + questionTitle: string | null; + questionContent: string; correctAnswer: boolean; globalFeedback?: string | undefined; handleOnSubmitAnswer?: (answer: boolean) => void; @@ -14,20 +14,23 @@ interface Props { } const TrueFalseQuestion: React.FC = (props) => { - const { questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } = + const { questionTitle, questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(undefined); useEffect(() => { setAnswer(undefined); - }, [questionContent]); + }, [questionTitle]); const selectedTrue = answer ? 'selected' : ''; const selectedFalse = answer !== undefined && !answer ? 'selected' : ''; return (
+
+ {questionTitle} +
-
+ {questionContent}