gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Modification Katex, prise en charge markdown, ajout description

Browse source
This commit is contained in:
Melanie St-Hilaire 2024-04-16 12:14:20 -04:00
parent 2893683f1c
commit 7497abd712
7 changed files with 46 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
View file

@ -137,14 +137,19 @@ const GiftCheatSheet: React.FC = () => {
</div>
<div className="question-type">
<h4> 8. LaTeX </h4>
<h4> 8. LaTeX et Markdown</h4>
<p>
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.
</p>
<p>Exemple d'équation:</p>
<pre>
<code className="question-code-block">{'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}</code>
<code className="question-code-block selectable-text">{'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}</code>
<code className="question-code-block selectable-text">{'\n$x\\= \\frac\\{y^2\\}\\{4\\}$'}</code>
</pre>
<p>Exemple de texte Markdown:</p>
<pre>
<code className="question-code-block selectable-text">{'[markdown]Grâce à la balise markdown, Il est possible d\'insérer du texte *italique*, **gras**, du `code` et bien plus.'}</code>
</pre>
</div>

1
client/src/components/GiftTemplate/templates/TextType.ts
View file

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

21
client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
View file

@ -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> = (props) => {
const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
const [answer, setAnswer] = useState<string>();
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 (
<div className="question-container">
<div className="title mb-1 text-center align-h-center">
{questionTitle}
</div>
<div className="question content">
<Latex>{questionContent}</Latex>
<div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
</div>
<div className="choices-wrapper mb-1">
{choices.map((choice, i) => {

17
client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
View file

@ -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> = (props) => {
const { questionTitle, questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
const { questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
props;
const [answer, setAnswer] = useState<number>();
@ -33,11 +33,8 @@ const NumericalQuestion: React.FC<Props> = (props) => {
return (
<div className="question-wrapper">
<div className="title mb-1 text-center center-h-align">
{questionTitle}
</div>
<div>
<Latex>{questionContent}</Latex>
<div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
</div>
{showAnswer ? (
<>
@ -49,8 +46,8 @@ const NumericalQuestion: React.FC<Props> = (props) => {
<div className="answer-wrapper mb-1">
<TextField
type="number"
id={questionContent}
name={questionContent}
id={questionContent.text}
name={questionContent.text}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(e.target.valueAsNumber);
}}

15
client/src/components/Questions/Question.tsx
View file

@ -30,8 +30,7 @@ const Question: React.FC<QuestionProps> = ({
case 'TF':
questionTypeComponent = (
<TrueFalseQuestion
questionTitle={question.title}
questionContent={question.stem.text}
questionContent={question.stem}
correctAnswer={question.isTrue}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
@ -42,8 +41,7 @@ const Question: React.FC<QuestionProps> = ({
case 'MC':
questionTypeComponent = (
<MultipleChoiceQuestion
questionTitle={question.title}
questionContent={question.stem.text}
questionContent={question.stem}
choices={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
@ -56,8 +54,7 @@ const Question: React.FC<QuestionProps> = ({
if (!Array.isArray(question.choices)) {
questionTypeComponent = (
<NumericalQuestion
questionTitle={question.title}
questionContent={question.stem.text}
questionContent={question.stem}
correctAnswers={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
@ -67,8 +64,7 @@ const Question: React.FC<QuestionProps> = ({
} else {
questionTypeComponent = (
<NumericalQuestion
questionTitle={question.title}
questionContent={question.stem.text}
questionContent={question.stem}
correctAnswers={question.choices[0].text}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
@ -81,8 +77,7 @@ const Question: React.FC<QuestionProps> = ({
case 'Short':
questionTypeComponent = (
<ShortAnswerQuestion
questionTitle={question.title}
questionContent={question.stem.text}
questionContent={question.stem}
choices={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}

17
client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
View file

@ -1,8 +1,9 @@
// ShortAnswerQuestion.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 Choices = {
feedback: { format: string; text: string } | null;
@ -12,8 +13,7 @@ type Choices = {
};
interface Props {
questionTitle: string | null;
questionContent: string;
questionContent: TextFormat;
choices: Choices[];
globalFeedback?: string | undefined;
handleOnSubmitAnswer?: (answer: string) => void;
@ -21,16 +21,13 @@ interface Props {
}
const ShortAnswerQuestion: React.FC<Props> = (props) => {
const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
const { 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">
{questionTitle}
</div>
<div className="question content">
<Latex>{questionContent}</Latex>
<div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
</div>
{showAnswer ? (
<>
@ -46,8 +43,8 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
<div className="answer-wrapper mb-1">
<TextField
type="text"
id={questionContent}
name={questionContent}
id={questionContent.text}
name={questionContent.text}
onChange={(e) => {
setAnswer(e.target.value);
}}

15
client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
View file

@ -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> = (props) => {
const { questionTitle, questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
const { questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
props;
const [answer, setAnswer] = useState<boolean | undefined>(undefined);
useEffect(() => {
setAnswer(undefined);
}, [questionTitle]);
}, [questionContent]);
const selectedTrue = answer ? 'selected' : '';
const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
return (
<div className="question-container">
<div className="title mb-1">
{questionTitle}
</div>
<div className="question content">
<Latex>{questionContent}</Latex>
<div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
</div>
<div className="choices-wrapper mb-1">
<Button