diff --git a/client/src/components/GiftTemplate/templates/StemTemplate.ts b/client/src/components/GiftTemplate/templates/StemTemplate.ts
new file mode 100644
index 0000000..016a247
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/StemTemplate.ts
@@ -0,0 +1,26 @@
+import { TemplateOptions } from './types';
+import { state } from '.';
+import { ParagraphStyle } from '../constants';
+import { BaseQuestion } from 'gift-pegjs';
+import { FormatTextTemplate } from './TextTypeTemplate';
+
+// Type is string to allow for custom question type text (e,g, "Multiple Choice")
+interface StemOptions extends TemplateOptions {
+ formattedStem: BaseQuestion['formattedStem'];
+}
+
+export default function StemTemplate({ formattedStem }: StemOptions): string {
+ const Container = `
+ display: flex;
+`;
+
+ return `
+
+
+
+ ${FormatTextTemplate(formattedStem)}
+
+
+
+`;
+}
diff --git a/client/src/components/GiftTemplate/templates/TextTypeTemplate.ts b/client/src/components/GiftTemplate/templates/TextTypeTemplate.ts
index 0777324..3ee4217 100644
--- a/client/src/components/GiftTemplate/templates/TextTypeTemplate.ts
+++ b/client/src/components/GiftTemplate/templates/TextTypeTemplate.ts
@@ -1,7 +1,7 @@
import { marked } from 'marked';
import katex from 'katex';
import { TextFormat } from 'gift-pegjs';
-
+import DOMPurify from 'dompurify'; // cleans HTML to prevent XSS attacks, etc.
export function formatLatex(text: string): string {
return text
@@ -25,7 +25,7 @@ export function formatLatex(text: string): string {
* @see marked
* @see katex
*/
-export function textType(formattedText: TextFormat): string {
+export function FormatTextTemplate(formattedText: TextFormat): string {
const formatText = formatLatex(formattedText.text.trim()); // latex needs pure "&", ">", etc. Must not be escaped
let parsedText = '';
switch (formattedText.format) {
@@ -33,13 +33,13 @@ export function textType(formattedText: TextFormat): string {
case 'moodle':
case 'plain':
// Replace newlines with
tags
- return formatText.replace(/(?:\r\n|\r|\n)/g, '
');
+ return DOMPurify.sanitize(formatText.replace(/(?:\r\n|\r|\n)/g, '
'));
case 'html':
// Strip outer paragraph tags (not a great approach with regex)
- return formatText.replace(/(^
)(.*?)(<\/p>)$/gm, '$2');
+ return DOMPurify.sanitize(formatText.replace(/(^
)(.*?)(<\/p>)$/gm, '$2'));
case 'markdown':
parsedText = marked.parse(formatText, { breaks: true }) as string; // https://github.com/markedjs/marked/discussions/3219
- return parsedText.replace(/(^
)(.*?)(<\/p>)$/gm, '$2');
+ return DOMPurify.sanitize(parsedText.replace(/(^
)(.*?)(<\/p>)$/gm, '$2'));
default:
throw new Error(`Unsupported text format: ${formattedText.format}`);
}
diff --git a/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts b/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts
index 329987e..4028430 100644
--- a/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts
+++ b/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts
@@ -1,13 +1,10 @@
import { TemplateOptions } from './types';
import QuestionContainer from './QuestionContainerTemplate';
-import {textType} from './TextTypeTemplate';
import GlobalFeedback from './GlobalFeedbackTemplate';
import MultipleChoiceAnswersTemplate from './MultipleChoiceAnswersTemplate';
import Title from './TitleTemplate';
import { TextChoice, TrueFalseQuestion } from 'gift-pegjs';
-import { ParagraphStyle } from '../constants';
-import { state } from '.';
-import DOMPurify from 'dompurify';
+import StemTemplate from './StemTemplate';
type TrueFalseOptions = TemplateOptions & TrueFalseQuestion;
@@ -42,7 +39,7 @@ export default function TrueFalseTemplate({
type: 'Vrai/Faux',
title: title
}),
- `
${DOMPurify.sanitize(textType(formattedStem))}
`,
+ StemTemplate({formattedStem}),
MultipleChoiceAnswersTemplate({ choices: choices }),
formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ``
]
diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
index 519c110..1e55ee7 100644
--- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
@@ -2,9 +2,8 @@
import React, { useEffect, useState } from 'react';
import '../questionStyle.css';
import { Button } from '@mui/material';
-import { textType } from '../../GiftTemplate/templates/TextTypeTemplate';
+import { FormatTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { MultipleChoiceQuestion } from 'gift-pegjs';
-import DOMPurify from 'dompurify';
interface Props {
question: MultipleChoiceQuestion;
@@ -31,7 +30,7 @@ const MultipleChoiceQuestionDisplay: React.FC
= (props) => {
return (
{question.choices.map((choice, i) => {
@@ -48,13 +47,13 @@ const MultipleChoiceQuestionDisplay: React.FC
= (props) => {
(choice.isCorrect ? '✅' : '❌')}
{alphabet[i]}
{choice.formattedFeedback && showAnswer && (
{choice.isCorrect ? '✅' : '❌'}
-
+
@@ -63,7 +62,7 @@ const MultipleChoiceQuestionDisplay: React.FC
= (props) => {
{question.formattedGlobalFeedback && showAnswer && (
)}
diff --git a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
index b1e8154..4067f18 100644
--- a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
@@ -2,10 +2,9 @@
import React, { useState } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
-import { textType } from '../../GiftTemplate/templates/TextTypeTemplate';
+import { FormatTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards';
-import DOMPurify from 'dompurify';
interface Props {
question: NumericalQuestion;
@@ -41,13 +40,13 @@ const NumericalQuestionDisplay: React.FC = (props) => {
return (
{showAnswer ? (
<>
{correctAnswer}
{question.formattedGlobalFeedback &&
}
) : (
@@ -65,7 +64,7 @@ const NumericalQuestionDisplay: React.FC
= (props) => {
{question.formattedGlobalFeedback && showAnswer && (
)}
{handleOnSubmitAnswer && (
diff --git a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx
index 55cbba4..f6f09d0 100644
--- a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx
@@ -1,9 +1,8 @@
import React, { useState } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
-import { textType } from '../../GiftTemplate/templates/TextTypeTemplate';
+import { FormatTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { ShortAnswerQuestion } from 'gift-pegjs';
-import DOMPurify from 'dompurify';
interface Props {
question: ShortAnswerQuestion;
@@ -18,7 +17,7 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => {
return (
{showAnswer ? (
<>
@@ -30,7 +29,7 @@ const ShortAnswerQuestionDisplay: React.FC
= (props) => {
))}
{question.formattedGlobalFeedback && }
) : (
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
index 1c4fcdb..218619f 100644
--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@@ -4,7 +4,7 @@ import '../questionStyle.css';
import { Button } from '@mui/material';
import { TrueFalseQuestion } from 'gift-pegjs';
import DOMPurify from 'dompurify';
-import { textType } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
+import { FormatTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
interface Props {
question: TrueFalseQuestion;
@@ -27,7 +27,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => {
return (