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

8. LaTeX

+

8. LaTeX et Markdown

- Le format LaTeX est supporté dans cette application. Vous devez cependant penser + Les format LaTeX et markdown sont supportés 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\\}$$'}
+                    {'$$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.'}
diff --git a/client/src/components/GiftTemplate/templates/TextType.ts b/client/src/components/GiftTemplate/templates/TextType.ts index bf9a3a3..b250637 100644 --- a/client/src/components/GiftTemplate/templates/TextType.ts +++ b/client/src/components/GiftTemplate/templates/TextType.ts @@ -9,6 +9,7 @@ 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 54022a3..d3e7a82 100644 --- a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx +++ b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx @@ -1,8 +1,10 @@ // MultipleChoiceQuestion.tsx -import React, { useState } from 'react'; -import Latex from 'react-latex'; +import React, { useEffect, useState } from 'react'; 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; @@ -12,8 +14,7 @@ type Choices = { }; interface Props { - questionTitle: string | null; - questionContent: string; + questionContent: TextFormat; choices: Choices[]; globalFeedback?: string | undefined; handleOnSubmitAnswer?: (answer: string) => void; @@ -21,22 +22,24 @@ interface Props { } const MultipleChoiceQuestion: React.FC = (props) => { - const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; + const { 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 0fcc56b..a1bfa9a 100644 --- a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx +++ b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx @@ -1,8 +1,9 @@ // 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; @@ -12,8 +13,7 @@ type CorrectAnswer = { }; interface Props { - questionTitle: string | null; - questionContent: string; + questionContent: TextFormat; correctAnswers: CorrectAnswer; globalFeedback?: string | undefined; handleOnSubmitAnswer?: (answer: number) => void; @@ -21,7 +21,7 @@ interface Props { } const NumericalQuestion: React.FC = (props) => { - const { questionTitle, questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } = + const { questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(); @@ -33,11 +33,8 @@ const NumericalQuestion: React.FC = (props) => { return (
-
- {questionTitle} -
- {questionContent} +
{showAnswer ? ( <> @@ -49,8 +46,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 ca23679..28e4d9b 100644 --- a/client/src/components/Questions/Question.tsx +++ b/client/src/components/Questions/Question.tsx @@ -30,8 +30,7 @@ const Question: React.FC = ({ case 'TF': questionTypeComponent = ( = ({ case 'MC': questionTypeComponent = ( = ({ if (!Array.isArray(question.choices)) { questionTypeComponent = ( = ({ } else { questionTypeComponent = ( = ({ case 'Short': questionTypeComponent = ( void; @@ -21,16 +21,13 @@ interface Props { } const ShortAnswerQuestion: React.FC = (props) => { - const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; + const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(); return (
-
- {questionTitle} -
- {questionContent} +
{showAnswer ? ( <> @@ -46,8 +43,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 e56eb4b..f3a1357 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 { - questionTitle: string | null; - questionContent: string; + questionContent: TextFormat; correctAnswer: boolean; globalFeedback?: string | undefined; handleOnSubmitAnswer?: (answer: boolean) => void; @@ -14,23 +14,20 @@ interface Props { } const TrueFalseQuestion: React.FC = (props) => { - const { questionTitle, questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } = + const { questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const [answer, setAnswer] = useState(undefined); useEffect(() => { setAnswer(undefined); - }, [questionTitle]); + }, [questionContent]); const selectedTrue = answer ? 'selected' : ''; const selectedFalse = answer !== undefined && !answer ? 'selected' : ''; return (
-
- {questionTitle} -
- {questionContent} +