Si vous souhaitez utiliser certains caractères spéciaux dans vos énoncés,
réponses ou feedback, vous devez «échapper» ces derniers en ajoutant un \
@@ -155,7 +155,7 @@ const GiftCheatSheet: React.FC = () => {
9. Images
-
Pour insérer une image dans une question ou dans une réponse, vous devez utiliser la syntaxe suivante:
+
Il est possible d'insérer une image dans une question, une réponse (choix multiple) et dans une rétroaction. D'abord, le format de l'élément doit être [markdown] . Ensuite utilisez la syntaxe suivante :
{'!['}
@@ -173,8 +173,14 @@ const GiftCheatSheet: React.FC = () => {
{'[markdown]Ceci est un chat: \n\n{T}'}
+
Exemple d'une question à choix multiple avec l'image d'un chat dans une rétroaction :
+
+
+ {`[markdown]Qui a initié le développement d'ÉvalueTonSavoir {=ÉTS#OUI! 
+ ~EPFL#Non...}`}
+
+
Note : les images étant spécifiées avec la syntaxe Markdown dans GIFT, on doit échapper les caractères spéciales (:) dans l'URL de l'image.
-
Note : On ne peut utiliser les images dans les messages de rétroaction (GIFT), car les rétroactions ne supportent pas le texte avec formatage (Markdown).
Attention: l'ancienne fonctionnalité avec les balises {' n'est plus
supportée.
diff --git a/client/src/components/GiftTemplate/index.ts b/client/src/components/GiftTemplate/index.ts
index 1f39302..04de882 100644
--- a/client/src/components/GiftTemplate/index.ts
+++ b/client/src/components/GiftTemplate/index.ts
@@ -1,256 +1,21 @@
import Template, { ErrorTemplate } from './templates';
-import { GIFTQuestion } from './templates/types';
import './styles.css';
+import { parse } from 'gift-pegjs';
+
+const multiple = parse(`
+Who's buried in Grant's tomb? {~%-50%Grant=%50%Jefferson=%50%no one####Not sure? There are many answers for this question so do not fret. Not sure? There are many answers for this question so do not fret.}
+
+Grant is _____ in Grant's tomb. {=buried#No one is buried there.=entombed~living}
+
+Grant is buried in Grant's tomb. {FALSE}
+
+Who's buried in Grant's tomb? {=no one=nobody}
+
+When was Ulysses S. Grant born? {#1822:5}
+
+What is the capital of Canada? {=Canada -> Ottawa =Italy -> Rome =Japan -> Tokyo}
+`);
-const multiple: GIFTQuestion[] = [
- {
- type: 'MC',
- title: null,
- stem: { format: 'markdown', text: "Who's buried in Grant's \r\n tomb?" },
- hasEmbeddedAnswers: false,
- globalFeedback: {
- format: 'moodle',
- text: 'Not sure? There are many answers for this question so do not fret. Not sure? There are many answers for this question so do not fret.'
- },
- choices: [
- {
- isCorrect: false,
- weight: -50,
- text: { format: 'moodle', text: 'Grant' },
- feedback: null
- },
- {
- isCorrect: true,
- weight: 50,
- text: { format: 'moodle', text: 'Jefferson' },
- feedback: null
- },
- {
- isCorrect: true,
- weight: 50,
- text: { format: 'moodle', text: 'no one' },
- feedback: null
- }
- ]
- },
- {
- type: 'MC',
- title: null,
- stem: { format: 'moodle', text: "Grant is _____ in Grant's tomb." },
- hasEmbeddedAnswers: true,
- globalFeedback: null,
- choices: [
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'buried' },
- feedback: null
- },
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'entombed' },
- feedback: null
- },
- {
- isCorrect: false,
- weight: null,
- text: { format: 'moodle', text: 'living' },
- feedback: null
- }
- ]
- },
- {
- type: 'TF',
- title: null,
- stem: { format: 'moodle', text: "Grant is buried in Grant's tomb." },
- hasEmbeddedAnswers: false,
- globalFeedback: null,
- isTrue: false,
- falseFeedback: null,
- trueFeedback: null
- },
- {
- type: 'Short',
- title: null,
- stem: { format: 'moodle', text: "Who's buried in Grant's tomb?" },
- hasEmbeddedAnswers: false,
- globalFeedback: null,
- choices: [
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'no one " has got me' },
- feedback: null
- },
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'nobody' },
- feedback: null
- }
- ]
- },
- {
- type: 'Numerical',
- title: null,
- stem: { format: 'moodle', text: 'When was Ulysses S. Grant born?' },
- hasEmbeddedAnswers: false,
- globalFeedback: null,
- choices: {
- type: 'range',
- number: 1822,
- range: 5
- }
- },
- {
- type: 'Matching',
- title: null,
- stem: {
- format: 'moodle',
- text: 'Match the following countries with their corresponding capitals.'
- },
- hasEmbeddedAnswers: false,
- globalFeedback: null,
- matchPairs: [
- {
- subquestion: { format: 'moodle', text: 'Canada' },
- subanswer: 'Ottawa'
- },
- {
- subquestion: { format: 'moodle', text: 'Italy' },
- subanswer: 'Rome'
- },
- {
- subquestion: { format: 'moodle', text: 'Japan' },
- subanswer: 'Tokyo'
- }
- ]
- },
- {
- type: 'MC',
- title: "Grant's Tomb",
- stem: { format: 'moodle', text: "Grant is _____ in Grant's tomb." },
- hasEmbeddedAnswers: true,
- globalFeedback: null,
- choices: [
- {
- isCorrect: false,
- weight: null,
- text: { format: 'moodle', text: 'buried' },
- feedback: { format: 'moodle', text: 'No one is buried there.' }
- },
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'entombed' },
- feedback: { format: 'moodle', text: 'Right answer!' }
- },
- {
- isCorrect: false,
- weight: null,
- text: { format: 'moodle', text: 'living' },
- feedback: { format: 'moodle', text: 'We hope not!' }
- }
- ]
- },
- {
- type: 'MC',
- title: null,
- stem: { format: 'moodle', text: 'Difficult multiple choice question.' },
- hasEmbeddedAnswers: false,
- globalFeedback: null,
- choices: [
- {
- isCorrect: false,
- weight: null,
- text: { format: 'moodle', text: 'wrong answer' },
- feedback: { format: 'moodle', text: 'comment on wrong answer' }
- },
- {
- isCorrect: false,
- weight: 50,
- text: { format: 'moodle', text: 'half credit answer' },
- feedback: { format: 'moodle', text: 'comment on answer' }
- },
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'full credit answer' },
- feedback: { format: 'moodle', text: 'well done!' }
- }
- ]
- },
- {
- type: 'Short',
- title: "Jesus' hometown (Short answer ex.)",
- stem: { format: 'moodle', text: 'Jesus Christ was from _____ .' },
- hasEmbeddedAnswers: true,
- globalFeedback: null,
- choices: [
- {
- isCorrect: true,
- weight: null,
- text: { format: 'moodle', text: 'Nazareth' },
- feedback: { format: 'moodle', text: "Yes! That's right!" }
- },
- {
- isCorrect: true,
- weight: 75,
- text: { format: 'moodle', text: 'Nazereth' },
- feedback: { format: 'moodle', text: 'Right, but misspelled.' }
- },
- {
- isCorrect: true,
- weight: 25,
- text: { format: 'moodle', text: 'Bethlehem' },
- feedback: {
- format: 'moodle',
- text: 'He was born here, but not raised here.'
- }
- }
- ]
- },
- {
- type: 'Numerical',
- title: 'Numerical example',
- stem: { format: 'moodle', text: 'When was Ulysses S. Grant born?' },
- hasEmbeddedAnswers: false,
- globalFeedback: null,
- choices: [
- {
- isCorrect: true,
- weight: null,
- text: {
- type: 'range',
- number: 1822,
- range: 0
- },
- feedback: { format: 'moodle', text: 'Correct! 100% credit' }
- },
- {
- isCorrect: true,
- weight: 50,
- text: {
- type: 'range',
- number: 1822,
- range: 2
- },
- feedback: {
- format: 'moodle',
- text: 'He was born in 1822. You get 50% credit for being close.'
- }
- }
- ]
- },
- {
- type: 'Essay',
- title: 'Essay Example',
- stem: { format: 'moodle', text: 'This is an essay.' },
- hasEmbeddedAnswers: false,
- globalFeedback: null
- }
-];
const items = multiple.map((item) => Template(item, { theme: 'dark' })).join('');
const errorItemDark = ErrorTemplate('Hello');
diff --git a/client/src/components/GiftTemplate/styles.css b/client/src/components/GiftTemplate/styles.css
index cefa560..e017de1 100644
--- a/client/src/components/GiftTemplate/styles.css
+++ b/client/src/components/GiftTemplate/styles.css
@@ -72,6 +72,11 @@
font-size: 2rem;
font-weight: 500;
}
+
+.present-question-stem {
+ margin-bottom: 2vh;
+}
+
.preview-container {
margin-bottom: 2vh;
width: 60vw;
diff --git a/client/src/components/GiftTemplate/templates/AnswerIcon.ts b/client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts
similarity index 100%
rename from client/src/components/GiftTemplate/templates/AnswerIcon.ts
rename to client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts
diff --git a/client/src/components/GiftTemplate/templates/Category.ts b/client/src/components/GiftTemplate/templates/Category.ts
deleted file mode 100644
index c279b29..0000000
--- a/client/src/components/GiftTemplate/templates/Category.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { TemplateOptions, Category as CategoryType } from './types';
-import QuestionContainer from './QuestionContainer';
-import Title from './Title';
-
-type CategoryOptions = TemplateOptions & CategoryType;
-
-export default function Category({ title }: CategoryOptions): string {
- return `${QuestionContainer({
- children: Title({
- type: 'Catégorie',
- title: title
- })
- })}`;
-}
diff --git a/client/src/components/GiftTemplate/templates/CategoryTemplate.ts b/client/src/components/GiftTemplate/templates/CategoryTemplate.ts
new file mode 100644
index 0000000..ef15ad9
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/CategoryTemplate.ts
@@ -0,0 +1,15 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import Title from './TitleTemplate';
+import { Category } from 'gift-pegjs';
+
+type CategoryOptions = TemplateOptions & Category;
+
+export default function CategoryTemplate( { title }: CategoryOptions): string {
+ return `${QuestionContainer({
+ children: Title({
+ type: 'Catégorie',
+ title: title
+ })
+ })}`;
+}
diff --git a/client/src/components/GiftTemplate/templates/Description.ts b/client/src/components/GiftTemplate/templates/Description.ts
deleted file mode 100644
index b4e5d6e..0000000
--- a/client/src/components/GiftTemplate/templates/Description.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TemplateOptions, Description as DescriptionType } from './types';
-import QuestionContainer from './QuestionContainer';
-import Title from './Title';
-import textType from './TextType';
-import { ParagraphStyle } from '../constants';
-import { state } from '.';
-
-type DescriptionOptions = TemplateOptions & DescriptionType;
-
-export default function Description({ title, stem }: DescriptionOptions): string {
- return `${QuestionContainer({
- children: [
- Title({
- type: 'Description',
- title: title
- }),
- `
${textType({
- text: stem
- })}
`
- ]
- })}`;
-}
diff --git a/client/src/components/GiftTemplate/templates/DescriptionTemplate.ts b/client/src/components/GiftTemplate/templates/DescriptionTemplate.ts
new file mode 100644
index 0000000..5e934a7
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/DescriptionTemplate.ts
@@ -0,0 +1,19 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import Title from './TitleTemplate';
+import { Description } from 'gift-pegjs';
+import StemTemplate from './StemTemplate';
+
+type DescriptionOptions = TemplateOptions & Description;
+
+export default function DescriptionTemplate({ title, formattedStem}: DescriptionOptions): string {
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Description',
+ title: title
+ }),
+ StemTemplate({formattedStem}),
+ ]
+ })}`;
+}
diff --git a/client/src/components/GiftTemplate/templates/Error.ts b/client/src/components/GiftTemplate/templates/ErrorTemplate.ts
similarity index 100%
rename from client/src/components/GiftTemplate/templates/Error.ts
rename to client/src/components/GiftTemplate/templates/ErrorTemplate.ts
diff --git a/client/src/components/GiftTemplate/templates/Essay.ts b/client/src/components/GiftTemplate/templates/Essay.ts
deleted file mode 100644
index a003d78..0000000
--- a/client/src/components/GiftTemplate/templates/Essay.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TemplateOptions, Essay as EssayType } from './types';
-import QuestionContainer from './QuestionContainer';
-import Title from './Title';
-import textType from './TextType';
-import GlobalFeedback from './GlobalFeedback';
-import { ParagraphStyle, TextAreaStyle } from '../constants';
-import { state } from '.';
-
-type EssayOptions = TemplateOptions & EssayType;
-
-export default function Essay({ title, stem, globalFeedback }: EssayOptions): string {
- return `${QuestionContainer({
- children: [
- Title({
- type: 'Développement',
- title: title
- }),
- `
${textType({
- text: stem
- })}
`,
- `
`,
- GlobalFeedback({ feedback: globalFeedback })
- ]
- })}`;
-}
diff --git a/client/src/components/GiftTemplate/templates/EssayTemplate.ts b/client/src/components/GiftTemplate/templates/EssayTemplate.ts
new file mode 100644
index 0000000..ba1ac03
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/EssayTemplate.ts
@@ -0,0 +1,27 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import Title from './TitleTemplate';
+import GlobalFeedbackTemplate from './GlobalFeedbackTemplate';
+import { TextAreaStyle } from '../constants';
+import { state } from '.';
+import { EssayQuestion } from 'gift-pegjs';
+import StemTemplate from './StemTemplate';
+
+type EssayOptions = TemplateOptions & EssayQuestion;
+
+export default function EssayTemplate({ title, formattedStem, formattedGlobalFeedback }: EssayOptions): string {
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Développement',
+ title: title
+ }),
+ StemTemplate({formattedStem}),
+ `
`,
+ (formattedGlobalFeedback && formattedGlobalFeedback.text) ?
+ GlobalFeedbackTemplate(formattedGlobalFeedback) : ``
+ ]
+ })}`;
+}
diff --git a/client/src/components/GiftTemplate/templates/GlobalFeedback.ts b/client/src/components/GiftTemplate/templates/GlobalFeedbackTemplate.ts
similarity index 57%
rename from client/src/components/GiftTemplate/templates/GlobalFeedback.ts
rename to client/src/components/GiftTemplate/templates/GlobalFeedbackTemplate.ts
index 6826c7c..faa0cea 100644
--- a/client/src/components/GiftTemplate/templates/GlobalFeedback.ts
+++ b/client/src/components/GiftTemplate/templates/GlobalFeedbackTemplate.ts
@@ -1,13 +1,12 @@
-import { TemplateOptions, Question } from './types';
-import textType from './TextType';
+import { TemplateOptions } from './types';
+import {FormattedTextTemplate} from './TextTypeTemplate';
import { state } from '.';
import { theme } from '../constants';
+import { TextFormat } from 'gift-pegjs';
-interface GlobalFeedbackOptions extends TemplateOptions {
- feedback: Question['globalFeedback'];
-}
+type GlobalFeedbackOptions = TemplateOptions & TextFormat;
-export default function GlobalFeedback({ feedback }: GlobalFeedbackOptions): string {
+export default function GlobalFeedbackTemplate({ format, text }: GlobalFeedbackOptions): string {
const Container = `
position: relative;
margin-top: 1rem;
@@ -19,9 +18,9 @@ export default function GlobalFeedback({ feedback }: GlobalFeedbackOptions): str
box-shadow: 0px 2px 5px ${theme(state.theme, 'gray400', 'black800')};
`;
- return feedback !== null
+ return (format && text)
? `
-
${textType({ text: feedback })}
+
${FormattedTextTemplate({format: format, text: text})}
`
: ``;
}
diff --git a/client/src/components/GiftTemplate/templates/Matching.ts b/client/src/components/GiftTemplate/templates/MatchingTemplate.ts
similarity index 74%
rename from client/src/components/GiftTemplate/templates/Matching.ts
rename to client/src/components/GiftTemplate/templates/MatchingTemplate.ts
index 97e4dce..f03671b 100644
--- a/client/src/components/GiftTemplate/templates/Matching.ts
+++ b/client/src/components/GiftTemplate/templates/MatchingTemplate.ts
@@ -1,22 +1,24 @@
-import { TemplateOptions, Matching as MatchingType } from './types';
-import QuestionContainer from './QuestionContainer';
-import Title from './Title';
-import textType from './TextType';
-import GlobalFeedback from './GlobalFeedback';
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import Title from './TitleTemplate';
+import {FormattedTextTemplate} from './TextTypeTemplate';
+import GlobalFeedback from './GlobalFeedbackTemplate';
import { ParagraphStyle, SelectStyle } from '../constants';
import { state } from '.';
+import { MatchingQuestion } from 'gift-pegjs';
+import StemTemplate from './StemTemplate';
-type MatchingOptions = TemplateOptions & MatchingType;
+type MatchingOptions = TemplateOptions & MatchingQuestion;
interface MatchAnswerOptions extends TemplateOptions {
- choices: MatchingType['matchPairs'];
+ choices: MatchingQuestion['matchPairs'];
}
-export default function Matching({
+export default function MatchingTemplate({
title,
- stem,
+ formattedStem,
matchPairs,
- globalFeedback
+ formattedGlobalFeedback
}: MatchingOptions): string {
return `${QuestionContainer({
children: [
@@ -24,11 +26,9 @@ export default function Matching({
type: 'Appariement',
title: title
}),
- `
${textType({
- text: stem
- })}
`,
+ StemTemplate({formattedStem}),
MatchAnswers({ choices: matchPairs }),
- GlobalFeedback({ feedback: globalFeedback })
+ formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ''
]
})}`;
}
@@ -64,10 +64,10 @@ function MatchAnswers({ choices }: MatchAnswerOptions): string {
const uniqueMatchOptions = Array.from(new Set(choices.map(({ subanswer }) => subanswer)));
const result = choices
- .map(({ subquestion }) => {
+ .map(({ formattedSubquestion }) => {
return `
- ${textType({ text: subquestion })}
+ ${FormattedTextTemplate(formattedSubquestion)}
diff --git a/client/src/components/GiftTemplate/templates/MultipleChoice.ts b/client/src/components/GiftTemplate/templates/MultipleChoice.ts
deleted file mode 100644
index 8605f4e..0000000
--- a/client/src/components/GiftTemplate/templates/MultipleChoice.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { TemplateOptions, MultipleChoice as MultipleChoiceType } from './types';
-import QuestionContainer from './QuestionContainer';
-import GlobalFeedback from './GlobalFeedback';
-import Title from './Title';
-import textType from './TextType';
-import MultipleChoiceAnswers from './MultipleChoiceAnswers';
-import { ParagraphStyle } from '../constants';
-import { state } from '.';
-
-type MultipleChoiceOptions = TemplateOptions & MultipleChoiceType;
-
-export default function MultipleChoice({
- title,
- stem,
- choices,
- globalFeedback
-}: MultipleChoiceOptions): string {
- return `${QuestionContainer({
- children: [
- Title({
- type: 'Choix multiple',
- title: title
- }),
- `${textType({
- text: stem
- })}
`,
- MultipleChoiceAnswers({ choices: choices }),
- GlobalFeedback({ feedback: globalFeedback })
- ]
- })}`;
-}
diff --git a/client/src/components/GiftTemplate/templates/MultipleChoiceAnswers.ts b/client/src/components/GiftTemplate/templates/MultipleChoiceAnswers.ts
deleted file mode 100644
index a762327..0000000
--- a/client/src/components/GiftTemplate/templates/MultipleChoiceAnswers.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { nanoid } from 'nanoid';
-import { TemplateOptions, TextFormat, Choice, MultipleChoice as MultipleChoiceType } from './types';
-import textType from './TextType';
-import AnswerIcon from './AnswerIcon';
-import { state } from '.';
-import { ParagraphStyle, theme } from '../constants';
-
-type MultipleChoiceAnswerOptions = TemplateOptions & Pick;
-
-type AnswerFeedbackOptions = TemplateOptions & Pick;
-
-interface AnswerWeightOptions extends TemplateOptions {
- weight: Choice['weight'];
- correct: Choice['isCorrect'];
-}
-
-export default function MultipleChoiceAnswers({ choices }: MultipleChoiceAnswerOptions) {
- const id = `id${nanoid(8)}`;
-
- const isMultipleAnswer = choices.filter(({ isCorrect }) => isCorrect === true).length === 0;
-
- const prompt = `Choisir une réponse${
- isMultipleAnswer ? ` ou plusieurs` : ``
- }: `;
- const result = choices
- .map(({ weight, isCorrect, text, feedback }) => {
- const CustomLabel = `
- display: inline-block;
- padding: 0.2em 0 0.2em 0;
- `;
-
- const inputId = `id${nanoid(6)}`;
-
- const isPositiveWeight = weight !== null && weight > 0;
- const isCorrectOption = isMultipleAnswer ? isPositiveWeight : isCorrect;
-
- return `
-
-
- ${textType({ text: text as TextFormat })}
-
- ${AnswerIcon({ correct: isCorrectOption })}
- ${AnswerFeedback({ feedback: feedback })}
-
-
- `;
- })
- .join('');
-
- return `${prompt}${result}`;
-}
-
-function AnswerWeight({ weight, correct }: AnswerWeightOptions): string {
- const Container = `
- box-shadow: 0px 1px 1px ${theme(state.theme, 'gray400', 'black900')};
- border-radius: 3px;
- padding-left: 0.2rem;
- padding-right: 0.2rem;
- padding-top: 0.05rem;
- padding-bottom: 0.05rem;
- `;
-
- const CorrectWeight = `
- color: ${theme(state.theme, 'green700', 'green100')};
- background-color: ${theme(state.theme, 'green100', 'greenGray700')};
- `;
- const IncorrectWeight = `
- color: ${theme(state.theme, 'beige600', 'beige100')};
- background-color: ${theme(state.theme, 'beige300', 'beigeGray800')};
- `;
-
- return weight
- ? `${weight}% `
- : ``;
-}
-
-function AnswerFeedback({ feedback }: AnswerFeedbackOptions): string {
- const Container = `
- color: ${theme(state.theme, 'teal700', 'gray700')};
- `;
-
- return feedback ? `${textType({ text: feedback })} ` : ``;
-}
diff --git a/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts b/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts
new file mode 100644
index 0000000..2bc423d
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts
@@ -0,0 +1,63 @@
+import { nanoid } from 'nanoid';
+import { TemplateOptions } from './types';
+import {FormattedTextTemplate} from './TextTypeTemplate';
+import AnswerIcon from './AnswerIconTemplate';
+import { state } from '.';
+import { ParagraphStyle } from '../constants';
+import { MultipleChoiceQuestion, TextChoice } from 'gift-pegjs';
+
+type MultipleChoiceAnswerOptions = TemplateOptions & Pick;
+
+type AnswerFeedbackOptions = TemplateOptions & Pick;
+
+interface AnswerWeightOptions extends TemplateOptions {
+ weight: TextChoice['weight'];
+}
+
+export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoiceAnswerOptions) {
+ const id = `id${nanoid(8)}`;
+
+ const isMultipleAnswer = choices.filter(({ isCorrect }) => isCorrect === true).length === 0;
+
+ const prompt = `Choisir une réponse${
+ isMultipleAnswer ? ` ou plusieurs` : ``
+ }: `;
+ const result = choices
+ .map(({ weight, isCorrect, formattedText, formattedFeedback }) => {
+ const CustomLabel = `
+ display: inline-block;
+ padding: 0.2em 0 0.2em 0;
+ `;
+
+ const inputId = `id${nanoid(6)}`;
+
+ const isPositiveWeight = (weight != undefined) && (weight > 0);
+ const isCorrectOption = isMultipleAnswer ? isPositiveWeight : isCorrect;
+
+ return `
+
+
+ ${FormattedTextTemplate(formattedText)}
+
+ ${AnswerIcon({ correct: isCorrectOption })}
+ ${AnswerFeedback({ formattedFeedback: formattedFeedback })}
+
+
+ `;
+ })
+ .join('');
+
+ return `${prompt}${result}`;
+}
+
+function AnswerWeight({ weight }: AnswerWeightOptions): string {
+ return weight ? `${weight}% ` : ``;
+}
+
+function AnswerFeedback({ formattedFeedback }: AnswerFeedbackOptions): string {
+ return formattedFeedback ? `${FormattedTextTemplate(formattedFeedback)} ` : ``;
+}
diff --git a/client/src/components/GiftTemplate/templates/MultipleChoiceTemplate.ts b/client/src/components/GiftTemplate/templates/MultipleChoiceTemplate.ts
new file mode 100644
index 0000000..07817eb
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/MultipleChoiceTemplate.ts
@@ -0,0 +1,28 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import GlobalFeedback from './GlobalFeedbackTemplate';
+import Title from './TitleTemplate';
+import MultipleChoiceAnswers from './MultipleChoiceAnswersTemplate';
+import { MultipleChoiceQuestion } from 'gift-pegjs';
+import StemTemplate from './StemTemplate';
+
+type MultipleChoiceOptions = TemplateOptions & MultipleChoiceQuestion;
+
+export default function MultipleChoiceTemplate({
+ title,
+ formattedStem,
+ choices,
+ formattedGlobalFeedback
+}: MultipleChoiceOptions): string {
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Choix multiple',
+ title: title
+ }),
+ StemTemplate({formattedStem}),
+ MultipleChoiceAnswers({ choices: choices }),
+ formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ''
+ ]
+ })}`;
+}
diff --git a/client/src/components/GiftTemplate/templates/Numerical.ts b/client/src/components/GiftTemplate/templates/Numerical.ts
deleted file mode 100644
index 08567a2..0000000
--- a/client/src/components/GiftTemplate/templates/Numerical.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { TemplateOptions, Numerical as NumericalType, NumericalFormat } from './types';
-import QuestionContainer from './QuestionContainer';
-import Title from './Title';
-import textType from './TextType';
-import GlobalFeedback from './GlobalFeedback';
-import { ParagraphStyle, InputStyle } from '../constants';
-import { state } from '.';
-
-type NumericalOptions = TemplateOptions & NumericalType;
-type NumericalAnswerOptions = TemplateOptions & Pick;
-
-export default function Numerical({
- title,
- stem,
- choices,
- globalFeedback
-}: NumericalOptions): string {
- return `${QuestionContainer({
- children: [
- Title({
- type: 'Numérique',
- title: title
- }),
- `${textType({
- text: stem
- })}
`,
- NumericalAnswers({ choices: choices }),
- GlobalFeedback({ feedback: globalFeedback })
- ]
- })}`;
-}
-
-function NumericalAnswers({ choices }: NumericalAnswerOptions): string {
- const placeholder = Array.isArray(choices)
- ? choices.map(({ text }) => Answer(text)).join(', ')
- : Answer(choices);
-
- return `
-
- Réponse:
- `;
-}
-
-function Answer({ type, number, range, numberLow, numberHigh }: NumericalFormat): string {
- switch (type) {
- case 'simple':
- return `${number}`;
- case 'range':
- return `${number} ± ${range}`;
- case 'high-low':
- return `${numberLow} - ${numberHigh}`;
- default:
- return ``;
- }
-}
diff --git a/client/src/components/GiftTemplate/templates/NumericalTemplate.ts b/client/src/components/GiftTemplate/templates/NumericalTemplate.ts
new file mode 100644
index 0000000..4428226
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/NumericalTemplate.ts
@@ -0,0 +1,97 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import Title from './TitleTemplate';
+import GlobalFeedback from './GlobalFeedbackTemplate';
+import { ParagraphStyle, InputStyle } from '../constants';
+import { state } from '.';
+import { NumericalAnswer, NumericalQuestion, TextFormat } from 'gift-pegjs';
+import { isHighLowNumericalAnswer, isMultipleNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer } from 'gift-pegjs/typeGuards';
+import StemTemplate from './StemTemplate';
+import { FormattedTextTemplate } from './TextTypeTemplate';
+
+type NumericalOptions = TemplateOptions & NumericalQuestion;
+type NumericalAnswerOptions = TemplateOptions & Pick;
+
+export default function NumericalTemplate({
+ title,
+ formattedStem,
+ choices,
+ formattedGlobalFeedback
+}: NumericalOptions): string {
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Numérique',
+ title: title
+ }),
+ StemTemplate({formattedStem}),
+ NumericalAnswers2({ choices: choices }),
+ formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ''
+ ]
+ })}`;
+}
+
+function NumericalAnswers2({ choices }: NumericalAnswerOptions): string {
+
+ // for each choice, return a separate ';
+
+ answers.forEach(answer => {
+ const weight = answer.weight ?
+ `
${answer.weight}% ` :
+ ''
+ result +=
+ `
Réponse:
`
+ + `
`
+ + weight
+ + (answer.feedback ? `
${FormattedTextTemplate(answer.feedback)}
` : '');
+ });
+
+ result += '
+// Réponse:
+// `;
+// }
+
+function Answer(choice: NumericalAnswer, formattedFeedback?: TextFormat): string {
+ const formattedFeedbackString = formattedFeedback ? ` (${FormattedTextTemplate(formattedFeedback)})` : '';
+ switch (true) {
+ case isSimpleNumericalAnswer(choice):
+ return `${choice.number}${formattedFeedbackString}`;
+ case isRangeNumericalAnswer(choice):
+ return `${choice.number} ± ${choice.range}${formattedFeedbackString}`;
+ case isHighLowNumericalAnswer(choice):
+ return `${choice.numberLow}..${choice.numberHigh}${formattedFeedbackString}`;
+ default:
+ return ``;
+ }
+}
diff --git a/client/src/components/GiftTemplate/templates/QuestionContainer.ts b/client/src/components/GiftTemplate/templates/QuestionContainerTemplate.ts
similarity index 100%
rename from client/src/components/GiftTemplate/templates/QuestionContainer.ts
rename to client/src/components/GiftTemplate/templates/QuestionContainerTemplate.ts
diff --git a/client/src/components/GiftTemplate/templates/ShortAnswer.ts b/client/src/components/GiftTemplate/templates/ShortAnswer.ts
deleted file mode 100644
index a46282d..0000000
--- a/client/src/components/GiftTemplate/templates/ShortAnswer.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { TemplateOptions, ShortAnswer as ShortAnswerType, TextFormat } from './types';
-import QuestionContainer from './QuestionContainer';
-import Title from './Title';
-import textType from './TextType';
-import GlobalFeedback from './GlobalFeedback';
-import { ParagraphStyle, InputStyle } from '../constants';
-import { state } from './index';
-
-type ShortAnswerOptions = TemplateOptions & ShortAnswerType;
-type AnswerOptions = TemplateOptions & Pick;
-
-export default function ShortAnswer({
- title,
- stem,
- choices,
- globalFeedback
-}: ShortAnswerOptions): string {
- return `${QuestionContainer({
- children: [
- Title({
- type: 'Réponse courte',
- title: title
- }),
- `${textType({
- text: stem
- })}
`,
- Answers({ choices: choices }),
- GlobalFeedback({ feedback: globalFeedback })
- ]
- })}`;
-}
-
-function Answers({ choices }: AnswerOptions): string {
- const placeholder = choices
- .map(({ text }) => textType({ text: text as TextFormat }))
- .join(', ');
- return `
-
- Réponse:
- `;
-}
diff --git a/client/src/components/GiftTemplate/templates/ShortAnswerTemplate.ts b/client/src/components/GiftTemplate/templates/ShortAnswerTemplate.ts
new file mode 100644
index 0000000..6971785
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/ShortAnswerTemplate.ts
@@ -0,0 +1,46 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import Title from './TitleTemplate';
+import {FormattedTextTemplate} from './TextTypeTemplate';
+import GlobalFeedback from './GlobalFeedbackTemplate';
+import { ParagraphStyle, InputStyle } from '../constants';
+import { state } from './index';
+import { ShortAnswerQuestion } from 'gift-pegjs';
+import StemTemplate from './StemTemplate';
+
+type ShortAnswerOptions = TemplateOptions & ShortAnswerQuestion;
+type AnswerOptions = TemplateOptions & Pick;
+
+export default function ShortAnswerTemplate({
+ title,
+ formattedStem,
+ choices,
+ formattedGlobalFeedback
+}: ShortAnswerOptions): string {
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Réponse courte',
+ title: title
+ }),
+ StemTemplate({formattedStem}),
+ Answers({ choices: choices }),
+ formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ''
+ ]
+ })}`;
+}
+
+function Answers({ choices }: AnswerOptions): string {
+ const placeholder = choices
+ .map(({ text }) => FormattedTextTemplate({ format: '', text: text }))
+ .join(', ');
+ return `
+
+ Réponse:
+ `;
+}
diff --git a/client/src/components/GiftTemplate/templates/StemTemplate.ts b/client/src/components/GiftTemplate/templates/StemTemplate.ts
new file mode 100644
index 0000000..1eb9241
--- /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 { FormattedTextTemplate } 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 `
+
+
+
+ ${FormattedTextTemplate(formattedStem)}
+
+
+
)(.*?)(<\/p>)$/gm, '$2');
+ result = formatText.replace(/(^
)(.*?)(<\/p>)$/gm, '$2');
+ break;
case 'markdown':
- parsedText = marked.parse(formatText, { breaks: true }) as string; // https://github.com/markedjs/marked/discussions/3219
- return parsedText.replace(/(^
)(.*?)(<\/p>)$/gm, '$2');
+ parsedText = marked.parse(formatText, { breaks: true, gfm: true }) as string; //
)(.*?)(<\/p>)$/gm, '$2');
+ break;
default:
- throw new Error(`Unsupported text format: ${text.format}`);
+ throw new Error(`Unsupported text format: ${formattedText.format}`);
}
+ return DOMPurify.sanitize(result);
}
// Function to replace \n outside of SVG paths
diff --git a/client/src/components/GiftTemplate/templates/Title.ts b/client/src/components/GiftTemplate/templates/TitleTemplate.ts
similarity index 93%
rename from client/src/components/GiftTemplate/templates/Title.ts
rename to client/src/components/GiftTemplate/templates/TitleTemplate.ts
index 8e89553..1722161 100644
--- a/client/src/components/GiftTemplate/templates/Title.ts
+++ b/client/src/components/GiftTemplate/templates/TitleTemplate.ts
@@ -1,6 +1,7 @@
-import { TemplateOptions, Question } from './types';
+import { TemplateOptions } from './types';
import { state } from '.';
import { theme } from '../constants';
+import { Question } from 'gift-pegjs';
// Type is string to allow for custom question type text (e,g, "Multiple Choice")
interface TitleOptions extends TemplateOptions {
@@ -43,7 +44,7 @@ export default function Title({ type, title }: TitleOptions): string {
${
- title !== null
+ title
? `${title} `
: `(Sans titre) ${textType({
- text: stem
- })}
`,
- MultipleChoiceAnswers({ choices: choices }),
- GlobalFeedback({ feedback: globalFeedback })
- ]
- })}`;
-}
diff --git a/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts b/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts
new file mode 100644
index 0000000..4028430
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/TrueFalseTemplate.ts
@@ -0,0 +1,47 @@
+import { TemplateOptions } from './types';
+import QuestionContainer from './QuestionContainerTemplate';
+import GlobalFeedback from './GlobalFeedbackTemplate';
+import MultipleChoiceAnswersTemplate from './MultipleChoiceAnswersTemplate';
+import Title from './TitleTemplate';
+import { TextChoice, TrueFalseQuestion } from 'gift-pegjs';
+import StemTemplate from './StemTemplate';
+
+type TrueFalseOptions = TemplateOptions & TrueFalseQuestion;
+
+export default function TrueFalseTemplate({
+ isTrue,
+ title,
+ formattedStem,
+ trueFormattedFeedback, falseFormattedFeedback,
+ formattedGlobalFeedback
+}: TrueFalseOptions): string {
+ const choices: TextChoice[] = [
+ {
+ formattedText: {
+ format: 'moodle',
+ text: 'Vrai'
+ },
+ isCorrect: isTrue,
+ formattedFeedback: trueFormattedFeedback
+ },
+ {
+ formattedText: {
+ format: 'moodle',
+ text: 'Faux'
+ },
+ isCorrect: !isTrue,
+ formattedFeedback: falseFormattedFeedback
+ }
+ ];
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Vrai/Faux',
+ title: title
+ }),
+ StemTemplate({formattedStem}),
+ MultipleChoiceAnswersTemplate({ choices: choices }),
+ formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ``
+ ]
+ })}`;
+}
diff --git a/client/src/components/GiftTemplate/templates/index.ts b/client/src/components/GiftTemplate/templates/index.ts
index f5f5fde..0ed65e0 100644
--- a/client/src/components/GiftTemplate/templates/index.ts
+++ b/client/src/components/GiftTemplate/templates/index.ts
@@ -1,24 +1,25 @@
-import Category from './Category';
-import Description from './Description';
-import Essay from './Essay';
-import Matching from './Matching';
-import MultipleChoice from './MultipleChoice';
-import Numerical from './Numerical';
-import ShortAnswer from './ShortAnswer';
-import TrueFalse from './TrueFalse';
-import Error from './Error';
+
import {
- GIFTQuestion,
+ ParsedGIFTQuestion as GIFTQuestion,
// Category as CategoryType,
// Description as DescriptionType,
- MultipleChoice as MultipleChoiceType,
- Numerical as NumericalType,
- ShortAnswer as ShortAnswerType,
+ MultipleChoiceQuestion as MultipleChoiceType,
+ NumericalQuestion as NumericalType,
+ ShortAnswerQuestion as ShortAnswerType,
// Essay as EssayType,
- TrueFalse as TrueFalseType,
- Matching as MatchingType,
- DisplayOptions
-} from './types';
+ TrueFalseQuestion as TrueFalseType,
+ // MatchingQuestion as MatchingType,
+} from 'gift-pegjs';
+import { DisplayOptions } from './types';
+import DescriptionTemplate from './DescriptionTemplate';
+import EssayTemplate from './EssayTemplate';
+import MatchingTemplate from './MatchingTemplate';
+import MultipleChoiceTemplate from './MultipleChoiceTemplate';
+import NumericalTemplate from './NumericalTemplate';
+import ShortAnswerTemplate from './ShortAnswerTemplate';
+import TrueFalseTemplate from './TrueFalseTemplate';
+import Error from './ErrorTemplate';
+import CategoryTemplate from './CategoryTemplate';
export const state: DisplayOptions = { preview: true, theme: 'light' };
@@ -37,21 +38,21 @@ export default function Template(
// ...(keys as DescriptionType)
// });
case 'MC':
- return MultipleChoice({
+ return MultipleChoiceTemplate({
...(keys as MultipleChoiceType)
});
case 'Numerical':
- return Numerical({ ...(keys as NumericalType) });
+ return NumericalTemplate({ ...(keys as NumericalType) });
case 'Short':
- return ShortAnswer({
+ return ShortAnswerTemplate({
...(keys as ShortAnswerType)
});
// case 'Essay':
// return Essay({ ...(keys as EssayType) });
case 'TF':
- return TrueFalse({ ...(keys as TrueFalseType) });
- case 'Matching':
- return Matching({ ...(keys as MatchingType) });
+ return TrueFalseTemplate({ ...(keys as TrueFalseType) });
+ // case 'Matching':
+ // return Matching({ ...(keys as MatchingType) });
default:
// TODO: throw error for unsupported question types?
// throw new Error(`Unsupported question type: ${type}`);
@@ -66,13 +67,13 @@ export function ErrorTemplate(text: string, options?: Partial):
}
export {
- Category,
- Description,
- Essay,
- Matching,
- MultipleChoice,
- Numerical,
- ShortAnswer,
- TrueFalse,
+ CategoryTemplate,
+ DescriptionTemplate as Description,
+ EssayTemplate as Essay,
+ MatchingTemplate as Matching,
+ MultipleChoiceTemplate as MultipleChoice,
+ NumericalTemplate as Numerical,
+ ShortAnswerTemplate as ShortAnswer,
+ TrueFalseTemplate as TrueFalse,
Error
};
diff --git a/client/src/components/GiftTemplate/templates/types.d.ts b/client/src/components/GiftTemplate/templates/types.d.ts
index f7160fd..23081c8 100644
--- a/client/src/components/GiftTemplate/templates/types.d.ts
+++ b/client/src/components/GiftTemplate/templates/types.d.ts
@@ -12,13 +12,13 @@ export interface DisplayOptions {
preview: boolean;
}
-export {
- QuestionType, FormatType, NumericalType, TextFormat, NumericalFormat, TextChoice, NumericalChoice, Question, Description, Category, MultipleChoice, ShortAnswer, Numerical, Essay, TrueFalse,
- Matching, Match, GIFTQuestion } from 'gift-pegjs';
+// export {
+// QuestionType, FormatType, NumericalType, TextFormat, NumericalFormat, TextChoice, NumericalChoice, Question, Description, Category, MultipleChoice, ShortAnswer, Numerical, Essay, TrueFalse,
+// Matching, Match, GIFTQuestion } from 'gift-pegjs';
-export interface Choice {
- isCorrect: boolean;
- weight: number | null;
- text: TextFormat | NumericalFormat;
- feedback: TextFormat | null;
-}
+// export interface Choice {
+// isCorrect: boolean;
+// weight: number | null;
+// text: TextFormat | NumericalFormat;
+// feedback: TextFormat | null;
+// }
diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx
index b7d1c72..6bcd7ce 100644
--- a/client/src/components/LiveResults/LiveResults.tsx
+++ b/client/src/components/LiveResults/LiveResults.tsx
@@ -20,7 +20,7 @@ import {
TableRow
} from '@mui/material';
import { StudentType } from '../../Types/StudentType';
-import { formatLatex } from '../GiftTemplate/templates/TextType';
+import { formatLatex } from '../GiftTemplate/templates/TextTypeTemplate';
interface LiveResultsProps {
socket: Socket | null;
diff --git a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
deleted file mode 100644
index 7a9cec7..0000000
--- a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// NumericalQuestion.tsx
-import React, { useState } from 'react';
-import '../questionStyle.css';
-import { Button, TextField } from '@mui/material';
-import textType from '../../GiftTemplate/templates/TextType';
-import { TextFormat } from '../../GiftTemplate/templates/types';
-import DOMPurify from 'dompurify';
-
-type CorrectAnswer = {
- numberHigh?: number;
- numberLow?: number;
- number?: number;
- type: string;
-};
-
-interface Props {
- questionContent: TextFormat;
- correctAnswers: CorrectAnswer;
- globalFeedback?: string | undefined;
- handleOnSubmitAnswer?: (answer: number) => void;
- showAnswer?: boolean;
-}
-
-const NumericalQuestion: React.FC = (props) => {
- const { questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
- props;
-
- const [answer, setAnswer] = useState();
-
- const correctAnswer =
- correctAnswers.type === 'high-low'
- ? `Entre ${correctAnswers.numberLow} et ${correctAnswers.numberHigh}`
- : correctAnswers.number;
-
- return (
-
-
- {showAnswer ? (
- <>
-
{correctAnswer}
- {globalFeedback &&
{globalFeedback}
}
-
- ) : (
- <>
-
- ) => {
- setAnswer(e.target.valueAsNumber);
- }}
- inputProps={{ 'data-testid': 'number-input' }}
- />
-
- {globalFeedback && showAnswer && (
-
{globalFeedback}
- )}
- {handleOnSubmitAnswer && (
-
- answer !== undefined &&
- handleOnSubmitAnswer &&
- handleOnSubmitAnswer(answer)
- }
- disabled={answer === undefined || isNaN(answer)}
- >
- Répondre
-
- )}
-
- )}
-
= ({
- question,
- handleOnSubmitAnswer,
- showAnswer,
- imageUrl
-}) => {
- const isMobile = useCheckMobileScreen();
- const imgWidth = useMemo(() => {
- return isMobile ? '100%' : '20%';
- }, [isMobile]);
-
- let questionTypeComponent = null;
- switch (question?.type) {
- case 'TF':
- questionTypeComponent = (
- ({ ...choice, id: index.toString() }))}
- handleOnSubmitAnswer={handleOnSubmitAnswer}
- showAnswer={showAnswer}
- globalFeedback={question.globalFeedback?.text}
- />
- );
- break;
- case 'Numerical':
- if (question.choices) {
- if (!Array.isArray(question.choices)) {
- questionTypeComponent = (
- ({ ...choice, id: index.toString() }))}
- handleOnSubmitAnswer={handleOnSubmitAnswer}
- showAnswer={showAnswer}
- globalFeedback={question.globalFeedback?.text}
- />
- );
- break;
- }
- return (
-
- {questionTypeComponent ? (
- <>
- {imageUrl && (
-
- )}
- {questionTypeComponent}
-
- ) : (
-
Question de type inconnue
- )}
-
= (props) => {
+const MultipleChoiceQuestionDisplay: React.FC = (props) => {
- const { questionStem: questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+ const { question, showAnswer, handleOnSubmitAnswer } = props;
const [answer, setAnswer] = useState();
useEffect(() => {
setAnswer(undefined);
- }, [questionContent]);
+ }, [question]);
const handleOnClickAnswer = (choice: string) => {
setAnswer(choice);
@@ -41,38 +30,40 @@ const MultipleChoiceQuestion: React.FC = (props) => {
return (
- {choices.map((choice, i) => {
- const selected = answer === choice.text.text ? 'selected' : '';
+ {question.choices.map((choice, i) => {
+ const selected = answer === choice.formattedText.text ? 'selected' : '';
return (
-
+
!showAnswer && handleOnClickAnswer(choice.text.text)}
+ onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
>
- {choice.feedback === null &&
+ {choice.formattedFeedback === null &&
showAnswer &&
(choice.isCorrect ? '✅' : '❌')}
{alphabet[i]}
- {choice.feedback && showAnswer && (
+ {choice.formattedFeedback && showAnswer && (
{choice.isCorrect ? '✅' : '❌'}
- {choice.feedback?.text}
+
)}
);
})}
- {globalFeedback && showAnswer && (
-
{globalFeedback}
+ {question.formattedGlobalFeedback && showAnswer && (
+
)}
{!showAnswer && handleOnSubmitAnswer && (
@@ -92,4 +83,4 @@ const MultipleChoiceQuestion: React.FC
= (props) => {
);
};
-export default MultipleChoiceQuestion;
+export default MultipleChoiceQuestionDisplay;
diff --git a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
new file mode 100644
index 0000000..ac9c83f
--- /dev/null
+++ b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
@@ -0,0 +1,89 @@
+// NumericalQuestion.tsx
+import React, { useState } from 'react';
+import '../questionStyle.css';
+import { Button, TextField } from '@mui/material';
+import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
+import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
+import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards';
+
+interface Props {
+ question: NumericalQuestion;
+ handleOnSubmitAnswer?: (answer: number) => void;
+ showAnswer?: boolean;
+}
+
+const NumericalQuestionDisplay: React.FC = (props) => {
+ const { question, showAnswer, handleOnSubmitAnswer } =
+ props;
+
+ const [answer, setAnswer] = useState();
+
+ const correctAnswers = question.choices;
+ let correctAnswer = '';
+
+ //const isSingleAnswer = correctAnswers.length === 1;
+
+ if (isSimpleNumericalAnswer(correctAnswers[0])) {
+ correctAnswer = `${(correctAnswers[0] as SimpleNumericalAnswer).number}`;
+ } else if (isRangeNumericalAnswer(correctAnswers[0])) {
+ const choice = correctAnswers[0] as RangeNumericalAnswer;
+ correctAnswer = `Entre ${choice.number - choice.range} et ${choice.number + choice.range}`;
+ } else if (isHighLowNumericalAnswer(correctAnswers[0])) {
+ const choice = correctAnswers[0] as HighLowNumericalAnswer;
+ correctAnswer = `Entre ${choice.numberLow} et ${choice.numberHigh}`;
+ } else if (isMultipleNumericalAnswer(correctAnswers[0])) {
+ correctAnswer = `MultipleNumericalAnswer is not supported yet`;
+ } else {
+ throw new Error('Unknown numerical answer type');
+ }
+
+ return (
+
+
+ {showAnswer ? (
+ <>
+
{correctAnswer}
+ {question.formattedGlobalFeedback &&
}
+
+ ) : (
+ <>
+
+ ) => {
+ setAnswer(e.target.valueAsNumber);
+ }}
+ inputProps={{ 'data-testid': 'number-input' }}
+ />
+
+ {question.formattedGlobalFeedback && showAnswer && (
+
+ )}
+ {handleOnSubmitAnswer && (
+
+ answer !== undefined &&
+ handleOnSubmitAnswer &&
+ handleOnSubmitAnswer(answer)
+ }
+ disabled={answer === undefined || isNaN(answer)}
+ >
+ Répondre
+
+ )}
+
+ )}
+
= ({
+ question,
+ handleOnSubmitAnswer,
+ showAnswer,
+}) => {
+ // const isMobile = useCheckMobileScreen();
+ // const imgWidth = useMemo(() => {
+ // return isMobile ? '100%' : '20%';
+ // }, [isMobile]);
+
+ let questionTypeComponent = null;
+ switch (question?.type) {
+ case 'TF':
+ questionTypeComponent = (
+
+ {questionTypeComponent ? (
+ <>
+ {questionTypeComponent}
+
+ ) : (
+
Question de type inconnue
+ )}
+
= (props) => {
- const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+const ShortAnswerQuestionDisplay: React.FC = (props) => {
+ const { question, showAnswer, handleOnSubmitAnswer } = props;
const [answer, setAnswer] = useState();
return (
{showAnswer ? (
<>
- {choices.map((choice) => (
-
- {choice.text.text}
+ {question.choices.map((choice) => (
+
+ {choice.text}
))}
- {globalFeedback &&
{globalFeedback}
}
+ {question.formattedGlobalFeedback &&
}
) : (
<>
{
setAnswer(e.target.value);
}}
disabled={showAnswer}
- inputProps={{ 'data-testid': 'text-input' }}
+ aria-label="short-answer-input"
/>
{handleOnSubmitAnswer && (
@@ -75,4 +65,4 @@ const ShortAnswerQuestion: React.FC
= (props) => {
);
};
-export default ShortAnswerQuestion;
+export default ShortAnswerQuestionDisplay;
diff --git a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
similarity index 57%
rename from client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
rename to client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
index 18b7038..6ab1e07 100644
--- a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@@ -2,33 +2,31 @@
import React, { useState, useEffect } from 'react';
import '../questionStyle.css';
import { Button } from '@mui/material';
-import textType from '../../GiftTemplate/templates/TextType';
-import { TextFormat } from '../../GiftTemplate/templates/types';
-import DOMPurify from 'dompurify';
+import { TrueFalseQuestion } from 'gift-pegjs';
+import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
interface Props {
- questionContent: TextFormat;
- correctAnswer: boolean;
- globalFeedback?: string | undefined;
+ question: TrueFalseQuestion;
handleOnSubmitAnswer?: (answer: boolean) => void;
showAnswer?: boolean;
}
-const TrueFalseQuestion: React.FC = (props) => {
- const { questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
+const TrueFalseQuestionDisplay: React.FC = (props) => {
+ const { question, showAnswer, handleOnSubmitAnswer } =
props;
const [answer, setAnswer] = useState(undefined);
useEffect(() => {
setAnswer(undefined);
- }, [questionContent]);
+ }, [question]);
const selectedTrue = answer ? 'selected' : '';
const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
+ const correctAnswer = question.isTrue === answer;
return (
- {globalFeedback && showAnswer && (
-
{globalFeedback}
+ {/* selected TRUE, show True feedback if it exists */}
+ {showAnswer && answer && question.trueFormattedFeedback && (
+
+ )}
+ {/* selected FALSE, show False feedback if it exists */}
+ {showAnswer && !answer && question.falseFormattedFeedback && (
+
+ )}
+ {question.formattedGlobalFeedback && showAnswer && (
+
)}
{!showAnswer && handleOnSubmitAnswer && (
= (props) => {
);
};
-export default TrueFalseQuestion;
+export default TrueFalseQuestionDisplay;
diff --git a/client/src/components/Questions/questionStyle.css b/client/src/components/QuestionsDisplay/questionStyle.css
similarity index 64%
rename from client/src/components/Questions/questionStyle.css
rename to client/src/components/QuestionsDisplay/questionStyle.css
index 8009a4b..3958e92 100644
--- a/client/src/components/Questions/questionStyle.css
+++ b/client/src/components/QuestionsDisplay/questionStyle.css
@@ -76,6 +76,39 @@
box-shadow: 0 0 1px #3a3a3a;
}
+.answer-weight-container {
+ display: flow;
+ /* float: left; */
+ box-shadow: 0px 1px 1px #3a3a3a;
+ border-radius: 3px;
+ padding-left: 0.2rem;
+ padding-right: 0.2rem;
+ padding-top: 0.05rem;
+ padding-bottom: 0.05rem;
+}
+
+.numerical-answer-weight-container {
+ display: inline;
+ box-shadow: 0px 1px 1px #3a3a3a;
+ border-radius: 3px;
+ padding-left: 0.2rem;
+ padding-right: 0.2rem;
+ padding-top: 0.05rem;
+ padding-bottom: 0.05rem;
+}
+
+.answer-positive-weight {
+ background-color: hsl(
+ 120, 100%, 90%
+ );
+}
+
+.answer-zero-or-less-weight {
+ background-color: hsl(
+ 0, 100%, 90%
+ );
+}
+
.answer-text.selected {
background-color: var(--main-color);
color: white;
@@ -88,8 +121,23 @@
.feedback-container {
margin-left: 1.1rem;
+ display: inline-flex !important; /* override the parent */
+ align-items: center;
+ position: relative;
+ padding: 0 0.5rem;
+ background-color: hsl(43, 100%, 94%);
+ color: hsl(43, 95%, 9%);
+ border: hsl(36, 84%, 93%) 1px solid;
+ border-radius: 6px;
+ box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
}
+.feedback-container img {
+ vertical-align: middle;
+ /* height: 1em; */
+}
+
+
.global-feedback {
position: relative;
padding: 0 1rem;
diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
index 15d6fba..eb70432 100644
--- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
+++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
@@ -1,6 +1,6 @@
// StudentModeQuiz.tsx
import React, { useEffect, useState } from 'react';
-import QuestionComponent from '../Questions/Question';
+import QuestionComponent from '../QuestionsDisplay/QuestionDisplay';
import '../../pages/Student/JoinRoom/joinRoom.css';
import { QuestionType } from '../../Types/QuestionType';
// import { QuestionService } from '../../services/QuestionService';
@@ -8,6 +8,7 @@ import { Button } from '@mui/material';
//import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
//import { ChevronLeft, ChevronRight } from '@mui/icons-material';
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
+import { Question } from 'gift-pegjs';
interface StudentModeQuizProps {
questions: QuestionType[];
@@ -63,7 +64,7 @@ const StudentModeQuiz: React.FC = ({
diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
index 1afab71..ae2d382 100644
--- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
+++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
@@ -1,13 +1,14 @@
// TeacherModeQuiz.tsx
import React, { useEffect, useState } from 'react';
-import QuestionComponent from '../Questions/Question';
+import QuestionComponent from '../QuestionsDisplay/QuestionDisplay';
import '../../pages/Student/JoinRoom/joinRoom.css';
import { QuestionType } from '../../Types/QuestionType';
// import { QuestionService } from '../../services/QuestionService';
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+import { Question } from 'gift-pegjs';
interface TeacherModeQuizProps {
questionInfos: QuestionType;
@@ -63,7 +64,7 @@ const TeacherModeQuiz: React.FC
= ({
) : (
= ({
{feedbackMessage}
{currentQuestion && (
-
)}
diff --git a/client/src/services/ApiService.tsx b/client/src/services/ApiService.tsx
index 4893c32..ef124b4 100644
--- a/client/src/services/ApiService.tsx
+++ b/client/src/services/ApiService.tsx
@@ -419,7 +419,7 @@ class ApiService {
*/
public async renameFolder(folderId: string, newTitle: string): Promise
{
try {
-
+ console.log(`rename folder: folderId: ${folderId}, newTitle: ${newTitle}`);
if (!folderId || !newTitle) {
throw new Error(`Le folderId et le nouveau titre sont requis.`);
}
@@ -428,7 +428,9 @@ class ApiService {
const headers = this.constructRequestHeaders();
const body = { folderId, newTitle };
- const result: AxiosResponse = await axios.put(url, body, { headers: headers });
+ const result = await axios.put(url, body, { headers: headers });
+
+ console.log(`rename folder: result: ${result.status}, ${result.data}`);
if (result.status !== 200) {
throw new Error(`Le changement de nom de dossier a échoué. Status: ${result.status}`);
}
@@ -440,6 +442,7 @@ class ApiService {
if (axios.isAxiosError(error)) {
const err = error as AxiosError;
+ console.log(JSON.stringify(err));
const data = err.response?.data as { error: string } | undefined;
return data?.error || 'Erreur serveur inconnue lors de la requête.';
}
diff --git a/client/src/services/WebsocketService.tsx b/client/src/services/WebsocketService.tsx
index 9c7bd89..87cb188 100644
--- a/client/src/services/WebsocketService.tsx
+++ b/client/src/services/WebsocketService.tsx
@@ -21,7 +21,7 @@ class WebSocketService {
private socket: Socket | null = null;
connect(backendUrl: string): Socket {
- console.log(`WebSocketService.connect('${backendUrl}')`);
+ // console.log(`WebSocketService.connect('${backendUrl}')`);
// // Ensure the URL uses wss: if the URL starts with https:
// const protocol = backendUrl.startsWith('https:') ? 'wss:' : 'ws:';
diff --git a/client/tsconfig.json b/client/tsconfig.json
index a6b7592..5115a44 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -2,14 +2,19 @@
"compilerOptions": {
"baseUrl": "./",
"paths": {
- "src/*": ["src/*"]
+ "src/*": [
+ "src/*"
+ ]
},
"target": "ESNext",
"useDefineForClassFields": true,
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ],
"module": "ESNext",
"skipLibCheck": true,
-
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
@@ -17,7 +22,6 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
-
/* Linting */
"strict": true,
"noUnusedLocals": true,
@@ -25,6 +29,16 @@
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true
},
- "include": ["src"],
- "references": [{ "path": "./tsconfig.node.json" }]
+ // "exclude": [
+ // // "src/components/GiftTemplate/**/*",
+ // // "src/__tests__/components/GiftTemplate/**/*",
+ // ],
+ "include": [
+ "src"
+ ],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
}
diff --git a/server/__tests__/folders.test.js b/server/__tests__/folders.test.js
index 84a7c7f..acde762 100644
--- a/server/__tests__/folders.test.js
+++ b/server/__tests__/folders.test.js
@@ -197,32 +197,52 @@ describe('Folders', () => {
it('should rename a folder and return true', async () => {
const folderId = '60c72b2f9b1d8b3a4c8e4d3b';
const newTitle = 'New Folder Name';
+ const userId = '12345';
// Mock the database response
collection.updateOne.mockResolvedValue({ modifiedCount: 1 });
- const result = await folders.rename(folderId, newTitle);
+ const result = await folders.rename(folderId, userId, newTitle);
expect(db.connect).toHaveBeenCalled();
expect(db.collection).toHaveBeenCalledWith('folders');
- expect(collection.updateOne).toHaveBeenCalledWith({ _id: new ObjectId(folderId) }, { $set: { title: newTitle } });
+ // { _id: ObjectId.createFromHexString(folderId), userId: userId }, { $set: { title: newTitle } }
+ expect(collection.updateOne).toHaveBeenCalledWith({ _id: new ObjectId(folderId), userId: userId }, { $set: { title: newTitle } });
expect(result).toBe(true);
});
it('should return false if the folder does not exist', async () => {
const folderId = '60c72b2f9b1d8b3a4c8e4d3b';
const newTitle = 'New Folder Name';
+ const userId = '12345';
// Mock the database response
collection.updateOne.mockResolvedValue({ modifiedCount: 0 });
- const result = await folders.rename(folderId, newTitle);
+ const result = await folders.rename(folderId, userId, newTitle);
expect(db.connect).toHaveBeenCalled();
expect(db.collection).toHaveBeenCalledWith('folders');
- expect(collection.updateOne).toHaveBeenCalledWith({ _id: new ObjectId(folderId) }, { $set: { title: newTitle } });
+ expect(collection.updateOne).toHaveBeenCalledWith({ _id: new ObjectId(folderId), userId: userId }, { $set: { title: newTitle } });
expect(result).toBe(false);
});
+
+ it('should throw an error if the new title is already in use', async () => {
+ const folderId = '60c72b2f9b1d8b3a4c8e4d3b';
+ const newTitle = 'Existing Folder';
+ const userId = '12345';
+
+ // Mock the database response
+ collection.findOne.mockResolvedValue({ title: newTitle });
+ collection.updateOne.mockResolvedValue({ modifiedCount: 0 });
+
+ await expect(folders.rename(folderId, userId, newTitle)).rejects.toThrow(`Folder with name '${newTitle}' already exists.`);
+
+ expect(db.connect).toHaveBeenCalled();
+ expect(db.collection).toHaveBeenCalledWith('folders');
+ // expect(collection.updateOne).toHaveBeenCalledWith({ _id: new ObjectId(folderId) }, { $set: { title: newTitle } });
+ expect(collection.findOne).toHaveBeenCalledWith({ userId: userId, title: newTitle });
+ });
});
// duplicate
diff --git a/server/constants/errorCodes.js b/server/constants/errorCodes.js
index fb691f8..41147ae 100644
--- a/server/constants/errorCodes.js
+++ b/server/constants/errorCodes.js
@@ -29,7 +29,7 @@ exports.UPDATE_PASSWORD_ERROR = {
code: 400
}
exports.DELETE_USER_ERROR = {
- message: 'Une erreur s\'est produite lors de supression de l\'utilisateur.',
+ message: 'Une erreur s\'est produite lors de suppression de l\'utilisateur.',
code: 400
}
@@ -43,15 +43,15 @@ exports.QUIZ_NOT_FOUND = {
code: 404
}
exports.QUIZ_ALREADY_EXISTS = {
- message: 'Le quiz existe déja.',
+ message: 'Le quiz existe déjà.',
code: 400
}
exports.UPDATE_QUIZ_ERROR = {
- message: 'Une erreur s\'est produite lors de la mise à jours du quiz.',
+ message: 'Une erreur s\'est produite lors de la mise à jour du quiz.',
code: 400
}
exports.DELETE_QUIZ_ERROR = {
- message: 'Une erreur s\'est produite lors de la supression du quiz.',
+ message: 'Une erreur s\'est produite lors de la suppression du quiz.',
code: 400
}
exports.GETTING_QUIZ_ERROR = {
@@ -76,15 +76,15 @@ exports.FOLDER_NOT_FOUND = {
code: 404
}
exports.FOLDER_ALREADY_EXISTS = {
- message: 'Le dossier existe déja.',
- code: 400
+ message: 'Le dossier existe déjà.',
+ code: 409
}
exports.UPDATE_FOLDER_ERROR = {
- message: 'Une erreur s\'est produite lors de la mise à jours du dossier.',
+ message: 'Une erreur s\'est produite lors de la mise à jour du dossier.',
code: 400
}
exports.DELETE_FOLDER_ERROR = {
- message: 'Une erreur s\'est produite lors de la supression du dossier.',
+ message: 'Une erreur s\'est produite lors de la suppression du dossier.',
code: 400
}
exports.GETTING_FOLDER_ERROR = {
diff --git a/server/controllers/folders.js b/server/controllers/folders.js
index 9858821..87528b3 100644
--- a/server/controllers/folders.js
+++ b/server/controllers/folders.js
@@ -126,8 +126,15 @@ class FoldersController {
if (owner != req.user.userId) {
throw new AppError(FOLDER_NOT_FOUND);
}
-
- const result = await this.folders.rename(folderId, newTitle);
+
+ // Is this the new title already taken by another folder that I own?
+ const exists = await this.folders.folderExists(newTitle, req.user.userId);
+
+ if (exists) {
+ throw new AppError(FOLDER_ALREADY_EXISTS);
+ }
+
+ const result = await this.folders.rename(folderId, req.user.userId, newTitle);
if (!result) {
throw new AppError(UPDATE_FOLDER_ERROR);
diff --git a/server/middleware/AppError.js b/server/middleware/AppError.js
index 9744646..58a4d83 100644
--- a/server/middleware/AppError.js
+++ b/server/middleware/AppError.js
@@ -2,7 +2,8 @@ class AppError extends Error {
constructor (errorCode) {
super(errorCode.message)
this.statusCode = errorCode.code;
+ this.isOperational = true; // Optional: to distinguish operational errors from programming errors
}
}
-module.exports = AppError;
\ No newline at end of file
+module.exports = AppError;
diff --git a/server/middleware/errorHandler.js b/server/middleware/errorHandler.js
index 61fede6..73c3add 100644
--- a/server/middleware/errorHandler.js
+++ b/server/middleware/errorHandler.js
@@ -1,8 +1,7 @@
const AppError = require("./AppError");
const fs = require('fs');
-const errorHandler = (error, req, res) => {
- console.log("ERROR", error);
+const errorHandler = (error, req, res, _next) => {
if (error instanceof AppError) {
logError(error);
diff --git a/server/models/folders.js b/server/models/folders.js
index 5ddc225..7a5fb30 100644
--- a/server/models/folders.js
+++ b/server/models/folders.js
@@ -10,8 +10,6 @@ class Folders {
async create(title, userId) {
- console.log("LOG: create", title, userId);
-
if (!title || !userId) {
throw new Error('Missing required parameter(s)');
}
@@ -86,13 +84,18 @@ class Folders {
return true;
}
- async rename(folderId, newTitle) {
+ async rename(folderId, userId, newTitle) {
await this.db.connect()
const conn = this.db.getConnection();
const foldersCollection = conn.collection('folders');
- const result = await foldersCollection.updateOne({ _id: ObjectId.createFromHexString(folderId) }, { $set: { title: newTitle } })
+ // see if a folder exists for this user with the new title
+ const existingFolder = await foldersCollection.findOne({ title: newTitle, userId: userId });
+
+ if (existingFolder) throw new Error(`Folder with name '${newTitle}' already exists.`);
+
+ const result = await foldersCollection.updateOne({ _id: ObjectId.createFromHexString(folderId), userId: userId }, { $set: { title: newTitle } })
if (result.modifiedCount != 1) return false;
@@ -100,7 +103,6 @@ class Folders {
}
async duplicate(folderId, userId) {
- console.log("LOG: duplicate", folderId, userId);
const conn = this.db.getConnection();
const foldersCollection = conn.collection('folders');
@@ -112,7 +114,7 @@ class Folders {
const theUserId = userId;
// Use the utility function to generate a unique title
const newFolderTitle = await generateUniqueTitle(sourceFolder.title, async (title) => {
- console.log(`generateUniqueTitle(${title}): userId`, theUserId);
+ // console.log(`generateUniqueTitle(${title}): userId`, theUserId);
return await foldersCollection.findOne({ title: title, userId: theUserId });
});
@@ -124,9 +126,9 @@ class Folders {
// copy the quizzes from source folder to destination folder
const content = await this.getContent(folderId);
- console.log("folders.duplicate: found content", content);
+ // console.log("folders.duplicate: found content", content);
for (const quiz of content) {
- console.log("folders.duplicate: creating quiz (copy)", quiz);
+ // console.log("folders.duplicate: creating quiz (copy)", quiz);
const result = await this.quizModel.create(quiz.title, quiz.content, newFolderId.toString(), userId);
if (!result) {
throw new Error('Failed to create duplicate quiz');
@@ -137,14 +139,12 @@ class Folders {
}
async folderExists(title, userId) {
- console.log("LOG: folderExists", title, userId);
await this.db.connect();
const conn = this.db.getConnection();
const foldersCollection = conn.collection('folders');
- const existingFolder = await foldersCollection.findOne({ title: title, userId: userId });
-
- return !!existingFolder;
+ const existingFolder = await foldersCollection.findOne({ title: title, userId: userId });
+ return existingFolder ? true : false;
}
diff --git a/server/models/quiz.js b/server/models/quiz.js
index 5aabd59..b388659 100644
--- a/server/models/quiz.js
+++ b/server/models/quiz.js
@@ -9,7 +9,7 @@ class Quiz {
}
async create(title, content, folderId, userId) {
- console.log(`quizzes: create title: ${title}, folderId: ${folderId}, userId: ${userId}`);
+ // console.log(`quizzes: create title: ${title}, folderId: ${folderId}, userId: ${userId}`);
await this.db.connect()
const conn = this.db.getConnection();
@@ -31,7 +31,7 @@ class Quiz {
}
const result = await quizCollection.insertOne(newQuiz);
- console.log("quizzes: create insertOne result", result);
+ // console.log("quizzes: create insertOne result", result);
return result.insertedId;
}
diff --git a/server/models/utils.js b/server/models/utils.js
index 8e99a85..219564b 100644
--- a/server/models/utils.js
+++ b/server/models/utils.js
@@ -1,6 +1,6 @@
// utils.js
async function generateUniqueTitle(baseTitle, existsCallback) {
- console.log(`generateUniqueTitle(${baseTitle})`);
+ // console.log(`generateUniqueTitle(${baseTitle})`);
let newTitle = baseTitle;
let counter = 1;
@@ -19,12 +19,12 @@ async function generateUniqueTitle(baseTitle, existsCallback) {
newTitle = `${baseTitle} (${counter})`;
}
- console.log(`first check of newTitle: ${newTitle}`);
+ // console.log(`first check of newTitle: ${newTitle}`);
while (await existsCallback(newTitle)) {
counter++;
newTitle = `${baseTitle} (${counter})`;
- console.log(`trying newTitle: ${newTitle}`);
+ // console.log(`trying newTitle: ${newTitle}`);
}
return newTitle;
diff --git a/server/package.json b/server/package.json
index c659597..da602ee 100644
--- a/server/package.json
+++ b/server/package.json
@@ -35,7 +35,7 @@
"supertest": "^6.3.4"
},
"engines": {
- "node": "18.x"
+ "node": "20.x"
},
"jest": {
"testEnvironment": "node",
diff --git a/server/routers/folders.js b/server/routers/folders.js
index a7898ed..008f0d7 100644
--- a/server/routers/folders.js
+++ b/server/routers/folders.js
@@ -2,17 +2,17 @@ const express = require('express');
const router = express.Router();
const jwt = require('../middleware/jwtToken.js');
const folders = require('../app.js').folders;
+const asyncHandler = require('./routerUtils.js');
-router.post("/create", jwt.authenticate, folders.create);
-router.get("/getUserFolders", jwt.authenticate, folders.getUserFolders);
-router.get("/getFolderContent/:folderId", jwt.authenticate, folders.getFolderContent);
-router.delete("/delete/:folderId", jwt.authenticate, folders.delete);
-router.put("/rename", jwt.authenticate, folders.rename);
+router.post("/create", jwt.authenticate, asyncHandler(folders.create));
+router.get("/getUserFolders", jwt.authenticate, asyncHandler(folders.getUserFolders));
+router.get("/getFolderContent/:folderId", jwt.authenticate, asyncHandler(folders.getFolderContent));
+router.delete("/delete/:folderId", jwt.authenticate, asyncHandler(folders.delete));
+router.put("/rename", jwt.authenticate, asyncHandler(folders.rename));
-//router.post("/duplicate", jwt.authenticate, foldersController.duplicate);
-router.post("/duplicate", jwt.authenticate, folders.duplicate);
+router.post("/duplicate", jwt.authenticate, asyncHandler(folders.duplicate));
-router.post("/copy/:folderId", jwt.authenticate, folders.copy);
+router.post("/copy/:folderId", jwt.authenticate, asyncHandler(folders.copy));
module.exports = router;
diff --git a/server/routers/images.js b/server/routers/images.js
index 3723f45..06e2830 100644
--- a/server/routers/images.js
+++ b/server/routers/images.js
@@ -1,6 +1,7 @@
const express = require('express');
const router = express.Router();
const images = require('../app.js').images;
+const asyncHandler = require('./routerUtils.js');
const jwt = require('../middleware/jwtToken.js');
@@ -9,7 +10,7 @@ const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });
-router.post("/upload", jwt.authenticate, upload.single('image'), images.upload);
-router.get("/get/:id", images.get);
+router.post("/upload", jwt.authenticate, upload.single('image'), asyncHandler(images.upload));
+router.get("/get/:id", asyncHandler(images.get));
module.exports = router;
diff --git a/server/routers/quiz.js b/server/routers/quiz.js
index 136e4c9..0139c7b 100644
--- a/server/routers/quiz.js
+++ b/server/routers/quiz.js
@@ -2,21 +2,22 @@ const express = require('express');
const router = express.Router();
const quizzes = require('../app.js').quizzes;
const jwt = require('../middleware/jwtToken.js');
+const asyncHandler = require('./routerUtils.js');
if (!quizzes) {
console.error("quizzes is not defined");
}
-router.post("/create", jwt.authenticate, quizzes.create);
-router.get("/get/:quizId", jwt.authenticate, quizzes.get);
-router.delete("/delete/:quizId", jwt.authenticate, quizzes.delete);
-router.put("/update", jwt.authenticate, quizzes.update);
-router.put("/move", jwt.authenticate, quizzes.move);
+router.post("/create", jwt.authenticate, asyncHandler(quizzes.create));
+router.get("/get/:quizId", jwt.authenticate, asyncHandler(asyncHandler(quizzes.get)));
+router.delete("/delete/:quizId", jwt.authenticate, asyncHandler(quizzes.delete));
+router.put("/update", jwt.authenticate, asyncHandler(quizzes.update));
+router.put("/move", jwt.authenticate, asyncHandler(quizzes.move));
-router.post("/duplicate", jwt.authenticate, quizzes.duplicate);
-router.post("/copy/:quizId", jwt.authenticate, quizzes.copy);
-router.put("/Share", jwt.authenticate, quizzes.share);
-router.get("/getShare/:quizId", jwt.authenticate, quizzes.getShare);
-router.post("/receiveShare", jwt.authenticate, quizzes.receiveShare);
+router.post("/duplicate", jwt.authenticate, asyncHandler(quizzes.duplicate));
+router.post("/copy/:quizId", jwt.authenticate, asyncHandler(quizzes.copy));
+router.put("/Share", jwt.authenticate, asyncHandler(quizzes.share));
+router.get("/getShare/:quizId", jwt.authenticate, asyncHandler(quizzes.getShare));
+router.post("/receiveShare", jwt.authenticate, asyncHandler(quizzes.receiveShare));
module.exports = router;
diff --git a/server/routers/routerUtils.js b/server/routers/routerUtils.js
new file mode 100644
index 0000000..335d1c7
--- /dev/null
+++ b/server/routers/routerUtils.js
@@ -0,0 +1,6 @@
+// asyncHandler is a wrapper for async functions that catch errors and pass them to the next middleware
+const asyncHandler = fn => (req, res, next) => {
+ Promise.resolve(fn(req, res, next)).catch(next);
+};
+
+module.exports = asyncHandler;
diff --git a/server/routers/users.js b/server/routers/users.js
index 608daa5..d1f81b7 100644
--- a/server/routers/users.js
+++ b/server/routers/users.js
@@ -2,11 +2,12 @@ const express = require('express');
const router = express.Router();
const users = require('../app.js').users;
const jwt = require('../middleware/jwtToken.js');
+const asyncHandler = require('./routerUtils.js');
-router.post("/register", users.register);
-router.post("/login", users.login);
-router.post("/reset-password", users.resetPassword);
-router.post("/change-password", jwt.authenticate, users.changePassword);
-router.post("/delete-user", jwt.authenticate, users.delete);
+router.post("/register", asyncHandler(users.register));
+router.post("/login", asyncHandler(users.login));
+router.post("/reset-password", asyncHandler(users.resetPassword));
+router.post("/change-password", jwt.authenticate, asyncHandler(users.changePassword));
+router.post("/delete-user", jwt.authenticate, asyncHandler(users.delete));
module.exports = router;
\n';
+ expect(FormattedTextTemplate(input)).toBe(expectedOutput);
+ });
});
diff --git a/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx
index 0a9226b..efaed61 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
-import AnswerIcon from 'src/components/GiftTemplate/templates/AnswerIcon';
+import AnswerIcon from 'src/components/GiftTemplate/templates/AnswerIconTemplate';
import DOMPurify from 'dompurify';
describe('AnswerIcon', () => {
diff --git a/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx
index 53c86c0..bdecb06 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx
@@ -2,99 +2,100 @@ import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { MultipleChoice } from 'src/components/GiftTemplate/templates';
-import { TemplateOptions, MultipleChoice as MultipleChoiceType } from 'src/components/GiftTemplate/templates/types';
+import { TemplateOptions } from 'src/components/GiftTemplate/templates/types';
+import { MultipleChoiceQuestion } from 'gift-pegjs';
// Mock the nanoid function
jest.mock('nanoid', () => ({
nanoid: jest.fn(() => 'mocked-id')
}));
-const mockProps: TemplateOptions & MultipleChoiceType = {
+const mockProps: TemplateOptions & MultipleChoiceQuestion = {
type: 'MC',
hasEmbeddedAnswers: false,
title: 'Sample Title',
- stem: { format: 'plain' , text: 'Sample Stem'},
+ formattedStem: { format: 'plain' , text: 'Sample Stem'},
choices: [
- { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
- { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 }
+ { formattedText: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, formattedFeedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
+ { formattedText: { format: 'plain', text: 'Choice 2' }, isCorrect: false, formattedFeedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 }
],
- globalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
+ formattedGlobalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
};
-const katekMock: TemplateOptions & MultipleChoiceType = {
+const katekMock: TemplateOptions & MultipleChoiceQuestion = {
type: 'MC',
hasEmbeddedAnswers: false,
title: 'Sample Title',
- stem: { format: 'plain' , text: '$$\\frac{zzz}{yyy}$$'},
+ formattedStem: { format: 'plain' , text: '$$\\frac{zzz}{yyy}$$'},
choices: [
- { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
- { text: { format: 'plain', text: 'Choice 2' }, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
+ { formattedText: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, formattedFeedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
+ { formattedText: { format: 'plain', text: 'Choice 2' }, isCorrect: true, formattedFeedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
],
- globalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
+ formattedGlobalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
};
-const imageMock: TemplateOptions & MultipleChoiceType = {
+const imageMock: TemplateOptions & MultipleChoiceQuestion = {
type: 'MC',
hasEmbeddedAnswers: false,
title: 'Sample Title with Image',
- stem: { format: 'plain', text: 'Sample Stem with Image' },
+ formattedStem: { format: 'plain', text: 'Sample Stem with Image' },
choices: [
- { text: { format: 'plain', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
- { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 },
- { text: { format: 'plain', text: '