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

Merge remote-tracking branch 'test-1/main' into restore-reverted-sso-pr

Browse source
This commit is contained in:
Eddi3_As 2025-02-28 13:13:03 -05:00
commit 3a2baaaa1c
12 changed files with 201 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx
View file

@ -3,66 +3,87 @@ import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';
const validQuestions = [
'::TFTitle::[markdown]Troo statement {TRUE}',
'::SATitle::[markdown]What is the answer? {=ShortAnswerOne =ShortAnswerTwo}',
'::MCQTitle::[markdown]MultiChoice question? {=MQAnswerOne ~MQAnswerTwo#feedback####Gen feedback}',
];
const unsupportedQuestions = [
'::Title::[markdown]Essay {}',
'::Title::[markdown]Matching {}',
'::Title::[markdown]Description',
'$CATEGORY a/b/c'
];
describe('GIFTTemplatePreview Component', () => {
test('renders error message when questions contain invalid syntax', () => {
render(<GIFTTemplatePreview questions={[':: title']} />);
const errorMessage = screen.getByText(/Title ::, Category, Description, or Question formatted stem but ":" found./i);
it('renders error message when questions contain invalid syntax', () => {
render(<GIFTTemplatePreview questions={['T{']} hideAnswers={false} />);
const previewContainer = screen.getByTestId('preview-container');
expect(previewContainer).toBeInTheDocument();
const errorMessage = previewContainer.querySelector('div[label="error-message"]');
expect(errorMessage).toBeInTheDocument();
});
test('renders preview when valid questions are provided', () => {
const questions = [
'Stem1 {=ans1 ~ans2 ~ans3}',
];
render(<GIFTTemplatePreview questions={questions} />);
it('renders preview when valid questions are provided, including answers, has no errors', () => {
render(<GIFTTemplatePreview questions={validQuestions} hideAnswers={false} />);
const previewContainer = screen.getByTestId('preview-container');
expect(previewContainer).toBeInTheDocument();
// const question1 = screen.getByText('Stem1');
const mcQuestion1 = screen.getByText('Stem1');
const ans1 = screen.getByText('ans1');
const ans2 = screen.getByText('ans2');
const ans3 = screen.getByText('ans3');
expect(mcQuestion1).toBeInTheDocument();
expect(ans1).toBeInTheDocument();
expect(ans2).toBeInTheDocument();
expect(ans3).toBeInTheDocument();
// each answer should have a radio button before it
const radioButtons = screen.getAllByRole('radio');
expect(radioButtons).toHaveLength(3);
// ans1 should be the <label> for the first radio button
expect(radioButtons[0].nextElementSibling).toBe(ans1);
// ans2 should be the <label> for the second radio button
expect(radioButtons[1].nextElementSibling).toBe(ans2);
// ans3 should be the <label> for the third radio button
expect(radioButtons[2].nextElementSibling).toBe(ans3);
// after the <label> for correct answer (ans1) there should be an svg with aria-hidden="true"
expect(ans1.nextElementSibling).toHaveAttribute('aria-hidden', 'true');
// after the <label> for incorrect answer (ans2) there should be an svg with aria-hidden="true"
expect(ans2.nextElementSibling).toHaveAttribute('aria-hidden', 'true');
// after the <label> for incorrect answer (ans3) there should be an svg with aria-hidden="true"
expect(ans3.nextElementSibling).toHaveAttribute('aria-hidden', 'true');
// Check that all question titles are rendered inside the previewContainer
validQuestions.forEach((question) => {
const title = question.split('::')[1].split('::')[0];
expect(previewContainer).toHaveTextContent(title);
});
test('hides correct/incorrect answers when hideAnswers prop is true', () => {
const questions = [
'Stem1 {=ans1 ~ans2 ~ans3}',
];
render(<GIFTTemplatePreview questions={questions} hideAnswers />);
// There should be no errors
const errorMessage = previewContainer.querySelector('div[label="error-message"]');
expect(errorMessage).not.toBeInTheDocument();
// Check that some stems and answers are rendered inside the previewContainer
expect(previewContainer).toHaveTextContent('Troo statement');
expect(previewContainer).toHaveTextContent('What is the answer?');
expect(previewContainer).toHaveTextContent('MultiChoice question?');
expect(previewContainer).toHaveTextContent('Vrai');
// short answers are stored in a textbox
const answerInputElements = screen.getAllByRole('textbox');
const giftInputElements = answerInputElements.filter(element => element.classList.contains('gift-input'));
expect(giftInputElements).toHaveLength(1);
expect(giftInputElements[0]).toHaveAttribute('placeholder', 'ShortAnswerOne, ShortAnswerTwo');
// Check for correct answer icon just after MQAnswerOne
const mqAnswerOneElement = screen.getByText('MQAnswerOne');
const correctAnswerIcon = mqAnswerOneElement.parentElement?.querySelector('[data-testid="correct-icon"]');
expect(correctAnswerIcon).toBeInTheDocument();
// Check for incorrect answer icon just after MQAnswerTwo
const mqAnswerTwoElement = screen.getByText('MQAnswerTwo');
const incorrectAnswerIcon = mqAnswerTwoElement.parentElement?.querySelector('[data-testid="incorrect-icon"]');
expect(incorrectAnswerIcon).toBeInTheDocument();
});
it('hides answers when hideAnswers prop is true', () => {
render(<GIFTTemplatePreview questions={validQuestions} hideAnswers={true} />);
const previewContainer = screen.getByTestId('preview-container');
expect(previewContainer).toBeInTheDocument();
const ans1 = screen.queryByText('ans1');
const ans2 = screen.queryByText('ans2');
const ans3 = screen.queryByText('ans3');
const radioButtons = screen.getAllByRole('radio');
expect(radioButtons).toHaveLength(3);
expect(radioButtons[0].nextElementSibling).toBe(ans1);
expect(ans1?.nextElementSibling).toBeNull();
expect(radioButtons[1].nextElementSibling).toBe(ans2);
expect(ans2?.nextElementSibling).toBeNull();
expect(radioButtons[2].nextElementSibling).toBe(ans3);
expect(ans3?.nextElementSibling).toBeNull();
expect(previewContainer).toHaveTextContent('Troo statement');
expect(previewContainer).toHaveTextContent('What is the answer?');
expect(previewContainer).toHaveTextContent('MultiChoice question?');
expect(previewContainer).toHaveTextContent('Vrai');
expect(previewContainer).not.toHaveTextContent('ShortAnswerOne');
expect(previewContainer).not.toHaveTextContent('ShortAnswerTwo');
// shouldn't have correct/incorrect icons
const correctAnswerIcon = screen.queryByTestId('correct-icon');
expect(correctAnswerIcon).not.toBeInTheDocument();
const incorrectAnswerIcon = screen.queryByTestId('incorrect-icon');
expect(incorrectAnswerIcon).not.toBeInTheDocument();
});
it('should indicate in the preview that unsupported GIFT questions are not supported', () => {
render(<GIFTTemplatePreview questions={unsupportedQuestions} hideAnswers={false} />);
const previewContainer = screen.getByTestId('preview-container');
expect(previewContainer).toBeInTheDocument();
// find all unsupported errors (should be 4)
const unsupportedMessages = previewContainer.querySelectorAll('div[label="error-message"]');
expect(unsupportedMessages).toHaveLength(4);
});
});

34
client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap
View file

@ -64,7 +64,7 @@ exports[`MultipleChoice snapshot test 1`] = `
" for="idmocked-id"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -88,7 +88,7 @@ exports[`MultipleChoice snapshot test 1`] = `
" for="idmocked-id"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -180,7 +180,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -205,7 +205,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -229,7 +229,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
" for="idmocked-id"&gt;
&lt;img alt="Sample Image" src="https://via.placeholder.com/150"&gt;
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -321,7 +321,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
" for="idmocked-id"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -345,7 +345,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
" for="idmocked-id"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -436,7 +436,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
" for="idmocked-id"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -460,7 +460,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
" for="idmocked-id"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -484,7 +484,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
" for="idmocked-id"&gt;
&lt;img alt="Sample Image" src="https://via.placeholder.com/150"&gt;
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -577,7 +577,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -602,7 +602,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -626,7 +626,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
" for="idmocked-id"&gt;
&lt;img alt="Sample Image" src="https://via.placeholder.com/150"&gt;
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -718,7 +718,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
" for="idmocked-id"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -742,7 +742,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
" for="idmocked-id"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -833,7 +833,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
" for="idmocked-id"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -857,7 +857,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
" for="idmocked-id"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;

12
client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap
View file

@ -150,7 +150,7 @@ exports[`TrueFalse snapshot test with katex 1`] = `
" for="idmocked-id"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -174,7 +174,7 @@ exports[`TrueFalse snapshot test with katex 1`] = `
" for="idmocked-id"&gt;
Faux
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -265,7 +265,7 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
" for="idmocked-id"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -289,7 +289,7 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
" for="idmocked-id"&gt;
Faux
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -380,7 +380,7 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
" for="idmocked-id"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="correct-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
@ -404,7 +404,7 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
" for="idmocked-id"&gt;
Faux
&lt;/label&gt;
&lt;svg style="
&lt;svg data-testid="incorrect-icon" style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;

25
client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
View file

@ -1,6 +1,6 @@
// GIFTTemplatePreview.tsx
import React, { useEffect, useState } from 'react';
import Template, { ErrorTemplate } from './templates';
import Template, { ErrorTemplate, UnsupportedQuestionTypeError } from './templates';
import { parse } from 'gift-pegjs';
import './styles.css';
import { FormattedTextTemplate } from './templates/TextTypeTemplate';
@ -22,19 +22,6 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
try {
let previewHTML = '';
questions.forEach((giftQuestion) => {
// TODO : afficher un message que les images spécifiées par <img> sont dépréciées et qu'il faut utiliser [markdown] et la syntaxe ![alt](url)
// const isImage = item.includes('<img');
// if (isImage) {
// const imageUrlMatch = item.match(/<img[^>]+>/i);
// if (imageUrlMatch) {
// let imageUrl = imageUrlMatch[0];
// imageUrl = imageUrl.replace('img', 'img style="width:10vw;" src=');
// item = item.replace(imageUrlMatch[0], '');
// previewHTML += `${imageUrl}`;
// }
// }
try {
const question = parse(giftQuestion);
previewHTML += Template(question[0], {
@ -42,11 +29,15 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
theme: 'light'
});
} catch (error) {
if (error instanceof Error) {
previewHTML += ErrorTemplate(giftQuestion + '\n' + error.message);
let errorMsg: string;
if (error instanceof UnsupportedQuestionTypeError) {
errorMsg = ErrorTemplate(giftQuestion, `Erreur: ${error.message}`);
} else if (error instanceof Error) {
errorMsg = ErrorTemplate(giftQuestion, `Erreur GIFT: ${error.message}`);
} else {
previewHTML += ErrorTemplate(giftQuestion + '\n' + 'Erreur inconnue');
errorMsg = ErrorTemplate(giftQuestion, 'Erreur inconnue');
}
previewHTML += `<div label="error-message">${errorMsg}</div>`;
}
});

4
client/src/components/GiftTemplate/index.ts
View file

@ -18,11 +18,11 @@ What is the capital of Canada? {=Canada -> Ottawa =Italy -> Rome =Japan -> Tokyo
const items = multiple.map((item) => Template(item, { theme: 'dark' })).join('');
const errorItemDark = ErrorTemplate('Hello');
const errorItemDark = ErrorTemplate('Hello', 'Error');
const lightItems = multiple.map((item) => Template(item, { theme: 'light' })).join('');
const errorItem = ErrorTemplate('Hello');
const errorItem = ErrorTemplate('Hello', 'Error');
const app = document.getElementById('app');
if (app) app.innerHTML = items + errorItemDark + lightItems + errorItem;

4
client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts
View file

@ -25,11 +25,11 @@ export default function AnswerIcon({ correct }: AnswerIconOptions): string {
`;
const CorrectIcon = (): string => {
return `<svg style="${Icon} ${Correct}" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>`;
return `<svg data-testid="correct-icon" style="${Icon} ${Correct}" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>`;
};
const IncorrectIcon = (): string => {
return `<svg style="${Icon} ${Incorrect}" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>`;
return `<svg data-testid="incorrect-icon" style="${Icon} ${Incorrect}" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>`;
};
return correct ? CorrectIcon() : IncorrectIcon();

80
client/src/components/GiftTemplate/templates/ErrorTemplate.ts
View file

@ -1,7 +1,7 @@
import { theme, ParagraphStyle } from '../constants';
import { state } from '.';
export default function (text: string): string {
export default function (questionText: string, errorText: string): string {
const Container = `
flex-wrap: wrap;
position: relative;
@ -13,47 +13,49 @@ export default function (text: string): string {
box-shadow: 0px 1px 3px ${theme(state.theme, 'gray400', 'black900')};
`;
const document = removeBackslash(lineRegex(documentRegex(text))).split(/\r?\n/);
return document[0] !== ``
? `<section style="${Container}">${document
.map((i) => `<p style="${ParagraphStyle(state.theme)}">${i}</p>`)
.join('')}</section>`
: ``;
// const document = removeBackslash(lineRegex(documentRegex(text))).split(/\r?\n/);
// return document[0] !== ``
// ? `<section style="${Container}">${document
// .map((i) => `<p style="${ParagraphStyle(state.theme)}">${i}</p>`)
// .join('')}</section>`
// : ``;
return `<section style="${Container}"><p style="${ParagraphStyle(state.theme)}">${questionText}<br><em>${errorText}</em></p></section>`;
}
function documentRegex(text: string): string {
const newText = text
.split(/\r?\n/)
.map((comment) => comment.replace(/(^[ \\t]+)?(^)((\/\/))(.*)/gm, ''))
.join('');
// function documentRegex(text: string): string {
// const newText = text
// .split(/\r?\n/)
// .map((comment) => comment.replace(/(^[ \\t]+)?(^)((\/\/))(.*)/gm, ''))
// .join('');
const newLineAnswer = /([^\\]|[^\S\r\n][^=])(=|~)/g;
const correctAnswer = /([^\\]|^{)(([^\\]|^|\\s*)=(.*)(?=[=~}]|\\n))/g;
const incorrectAnswer = /([^\\]|^{)(([^\\]|^|\\s*)~(.*)(?=[=~}]|\\n))/g;
// const newLineAnswer = /([^\\]|[^\S\r\n][^=])(=|~)/g;
// const correctAnswer = /([^\\]|^{)(([^\\]|^|\\s*)=(.*)(?=[=~}]|\\n))/g;
// const incorrectAnswer = /([^\\]|^{)(([^\\]|^|\\s*)~(.*)(?=[=~}]|\\n))/g;
return newText
.replace(newLineAnswer, `\n$2`)
.replace(correctAnswer, `$1<li>$4</li>`)
.replace(incorrectAnswer, `$1<li>$4</li>`);
}
// return newText
// .replace(newLineAnswer, `\n$2`)
// .replace(correctAnswer, `$1<li>$4</li>`)
// .replace(incorrectAnswer, `$1<li>$4</li>`);
// }
function lineRegex(text: string): string {
return text
.split(/\r?\n/)
.map((category) =>
category.replace(/(^[ \\t]+)?(((^|\n)\s*[$]CATEGORY:))(.+)/g, `<br><b>$5</b><br>`)
)
.map((title) => title.replace(/\s*(::)\s*(.*?)(::)/g, `<br><b>$2</b><br>`))
.map((openBracket) => openBracket.replace(/([^\\]|^){([#])?/g, `$1<br>`))
.map((closeBracket) => closeBracket.replace(/([^\\]|^)}/g, `$1<br>`))
.join('');
}
// function lineRegex(text: string): string {
// return text
// // CPF: disabled the following regex because it's not clear what it's supposed to do
// // .split(/\r?\n/)
// // .map((category) =>
// // category.replace(/(^[ \\t]+)?(((^|\n)\s*[$]CATEGORY:))(.+)/g, `<br><b>$5</b><br>`)
// // )
// // .map((title) => title.replace(/\s*(::)\s*(.*?)(::)/g, `<br><b>$2</b><br>`))
// // .map((openBracket) => openBracket.replace(/([^\\]|^){([#])?/g, `$1<br>`))
// // .map((closeBracket) => closeBracket.replace(/([^\\]|^)}/g, `$1<br>`))
// // .join('');
// }
function removeBackslash(text: string): string {
return text
.split(/\r?\n/)
.map((colon) => colon.replace(/[\\]:/g, ':'))
.map((openBracket) => openBracket.replace(/[\\]{/g, '{'))
.map((closeBracket) => closeBracket.replace(/[\\]}/g, '}'))
.join('');
}
// function removeBackslash(text: string): string {
// return text
// .split(/\r?\n/)
// .map((colon) => colon.replace(/[\\]:/g, ':'))
// .map((openBracket) => openBracket.replace(/[\\]{/g, '{'))
// .map((closeBracket) => closeBracket.replace(/[\\]}/g, '}'))
// .join('');
// }

40
client/src/components/GiftTemplate/templates/index.ts
View file

@ -6,20 +6,32 @@ import {
MultipleChoiceQuestion as MultipleChoiceType,
NumericalQuestion as NumericalType,
ShortAnswerQuestion as ShortAnswerType,
// Essay as EssayType,
// EssayQuestion as EssayType,
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 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';
// import CategoryTemplate from './CategoryTemplate';
export class UnsupportedQuestionTypeError extends globalThis.Error {
constructor(type: string) {
const userFriendlyType = (type === 'Essay') ? 'Réponse longue (Essay)'
: (type === 'Matching') ? 'Association (Matching)'
: (type === 'Category') ? 'Catégorie (Category)'
: type;
super(`Les questions du type ${userFriendlyType} ne sont pas supportées.`);
this.name = 'UnsupportedQuestionTypeError';
}
}
export const state: DisplayOptions = { preview: true, theme: 'light' };
@ -54,23 +66,21 @@ export default function Template(
// case 'Matching':
// return Matching({ ...(keys as MatchingType) });
default:
// TODO: throw error for unsupported question types?
// throw new Error(`Unsupported question type: ${type}`);
return ``;
}
// convert type to human-readable string
throw new UnsupportedQuestionTypeError(type); }
}
export function ErrorTemplate(text: string, options?: Partial<DisplayOptions>): string {
export function ErrorTemplate(questionText: string, errorText: string, options?: Partial<DisplayOptions>): string {
Object.assign(state, options);
return Error(text);
return Error(questionText, errorText);
}
export {
CategoryTemplate,
DescriptionTemplate as Description,
EssayTemplate as Essay,
MatchingTemplate as Matching,
// CategoryTemplate,
// DescriptionTemplate as Description,
// EssayTemplate as Essay,
// MatchingTemplate as Matching,
MultipleChoiceTemplate as MultipleChoice,
NumericalTemplate as Numerical,
ShortAnswerTemplate as ShortAnswer,

8
client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx
View file

@ -1,12 +1,12 @@
import { TableCell, TableHead, TableRow } from "@mui/material";
import React from "react";
import { TableCell, TableHead, TableRow } from "@mui/material";
interface LiveResultsFooterProps {
interface LiveResultsHeaderProps {
maxQuestions: number;
showSelectedQuestion: (index: number) => void;
}
const LiveResultsTableFooter: React.FC<LiveResultsFooterProps> = ({
const LiveResultsTableHeader: React.FC<LiveResultsHeaderProps> = ({
maxQuestions,
showSelectedQuestion,
}) => {
@ -47,4 +47,4 @@ const LiveResultsTableFooter: React.FC<LiveResultsFooterProps> = ({
</TableHead>
);
};
export default LiveResultsTableFooter;
export default LiveResultsTableHeader;

12
client/src/pages/Student/JoinRoom/JoinRoom.tsx
View file

@ -113,6 +113,12 @@ const JoinRoom: React.FC = () => {
webSocketService.submitAnswer(answerData);
};
const handleReturnKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && username && roomName) {
handleSocket();
}
};
if (isWaitingForTeacher) {
return (
<div className='room'>
@ -169,7 +175,8 @@ const JoinRoom: React.FC = () => {
onChange={(e) => setRoomName(e.target.value)}
placeholder="Numéro de la salle"
sx={{ marginBottom: '1rem' }}
fullWidth
fullWidth={true}
onKeyDown={handleReturnKey}
/>
<TextField
@ -179,7 +186,8 @@ const JoinRoom: React.FC = () => {
onChange={(e) => setUsername(e.target.value)}
placeholder="Nom d'utilisateur"
sx={{ marginBottom: '1rem' }}
fullWidth
fullWidth={true}
onKeyDown={handleReturnKey}
/>
<LoadingButton

6
client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
View file

@ -118,7 +118,11 @@ const QuizForm: React.FC = () => {
setValue(value);
}
const linesArray = value.split(/(?<=^|[^\\]}.*)[\n]+/);
// split value when there is at least one blank line
const linesArray = value.split(/\n{2,}/);
// if the first item in linesArray is blank, remove it
if (linesArray[0] === '') linesArray.shift();
if (linesArray[linesArray.length - 1] === '') linesArray.pop();

15
client/src/pages/Teacher/Login/Login.tsx
View file

@ -1,6 +1,4 @@
import { useNavigate, Link } from 'react-router-dom';
// JoinRoom.tsx
import { Link, useNavigate } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import './Login.css';
@ -38,6 +36,11 @@ const Login: React.FC = () => {
};
const handleReturnKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && email && password) {
login();
}
};
return (
<LoginContainer
@ -51,7 +54,8 @@ const Login: React.FC = () => {
onChange={(e) => setEmail(e.target.value)}
placeholder="Adresse courriel"
sx={{ marginBottom: '1rem' }}
fullWidth
fullWidth={true}
onKeyDown={handleReturnKey} // Add this line as well
/>
<TextField
@ -62,7 +66,8 @@ const Login: React.FC = () => {
onChange={(e) => setPassword(e.target.value)}
placeholder="Mot de passe"
sx={{ marginBottom: '1rem' }}
fullWidth
fullWidth={true}
onKeyDown={handleReturnKey} // Add this line as well
/>
<LoadingButton