mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Generate error for unsupported GIFT types
labeled SVGs for easier testing removed templates for unsupported GIFT types
This commit is contained in:
C. Fuhrman
parent
124cea1a92
commit
d62b398de7
5 changed files with 78 additions and 75 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
// GIFTTemplatePreview.tsx
|
// GIFTTemplatePreview.tsx
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import Template, { ErrorTemplate } from './templates';
|
import Template, { ErrorTemplate, UnsupportedQuestionTypeError } from './templates';
|
||||||
import { parse } from 'gift-pegjs';
|
import { parse } from 'gift-pegjs';
|
||||||
import './styles.css';
|
import './styles.css';
|
||||||
import { FormattedTextTemplate } from './templates/TextTypeTemplate';
|
import { FormattedTextTemplate } from './templates/TextTypeTemplate';
|
||||||
|
|
@ -22,19 +22,6 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
|
||||||
try {
|
try {
|
||||||
let previewHTML = '';
|
let previewHTML = '';
|
||||||
questions.forEach((giftQuestion) => {
|
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 
|
|
||||||
|
|
||||||
// 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 {
|
try {
|
||||||
const question = parse(giftQuestion);
|
const question = parse(giftQuestion);
|
||||||
previewHTML += Template(question[0], {
|
previewHTML += Template(question[0], {
|
||||||
|
|
@ -42,11 +29,15 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
|
||||||
theme: 'light'
|
theme: 'light'
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error instanceof Error) {
|
let errorMsg: string;
|
||||||
previewHTML += ErrorTemplate(giftQuestion + '\n' + error.message);
|
if (error instanceof UnsupportedQuestionTypeError) {
|
||||||
|
errorMsg = ErrorTemplate(giftQuestion, `Erreur: ${error.message}`);
|
||||||
|
} else if (error instanceof Error) {
|
||||||
|
errorMsg = ErrorTemplate(giftQuestion, `Erreur GIFT: ${error.message}`);
|
||||||
} else {
|
} else {
|
||||||
previewHTML += ErrorTemplate(giftQuestion + '\n' + 'Erreur inconnue');
|
errorMsg = ErrorTemplate(giftQuestion, 'Erreur inconnue');
|
||||||
}
|
}
|
||||||
|
previewHTML += `<div label="error-message">${errorMsg}</div>`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 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 lightItems = multiple.map((item) => Template(item, { theme: 'light' })).join('');
|
||||||
|
|
||||||
const errorItem = ErrorTemplate('Hello');
|
const errorItem = ErrorTemplate('Hello', 'Error');
|
||||||
|
|
||||||
const app = document.getElementById('app');
|
const app = document.getElementById('app');
|
||||||
if (app) app.innerHTML = items + errorItemDark + lightItems + errorItem;
|
if (app) app.innerHTML = items + errorItemDark + lightItems + errorItem;
|
||||||
|
|
|
||||||
|
|
@ -25,11 +25,11 @@ export default function AnswerIcon({ correct }: AnswerIconOptions): string {
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CorrectIcon = (): 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 => {
|
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();
|
return correct ? CorrectIcon() : IncorrectIcon();
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { theme, ParagraphStyle } from '../constants';
|
import { theme, ParagraphStyle } from '../constants';
|
||||||
import { state } from '.';
|
import { state } from '.';
|
||||||
|
|
||||||
export default function (text: string): string {
|
export default function (questionText: string, errorText: string): string {
|
||||||
const Container = `
|
const Container = `
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -13,47 +13,49 @@ export default function (text: string): string {
|
||||||
box-shadow: 0px 1px 3px ${theme(state.theme, 'gray400', 'black900')};
|
box-shadow: 0px 1px 3px ${theme(state.theme, 'gray400', 'black900')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const document = removeBackslash(lineRegex(documentRegex(text))).split(/\r?\n/);
|
// const document = removeBackslash(lineRegex(documentRegex(text))).split(/\r?\n/);
|
||||||
return document[0] !== ``
|
// return document[0] !== ``
|
||||||
? `<section style="${Container}">${document
|
// ? `<section style="${Container}">${document
|
||||||
.map((i) => `<p style="${ParagraphStyle(state.theme)}">${i}</p>`)
|
// .map((i) => `<p style="${ParagraphStyle(state.theme)}">${i}</p>`)
|
||||||
.join('')}</section>`
|
// .join('')}</section>`
|
||||||
: ``;
|
// : ``;
|
||||||
|
return `<section style="${Container}"><p style="${ParagraphStyle(state.theme)}">${questionText}<br><em>${errorText}</em></p></section>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function documentRegex(text: string): string {
|
// function documentRegex(text: string): string {
|
||||||
const newText = text
|
// const newText = text
|
||||||
.split(/\r?\n/)
|
// .split(/\r?\n/)
|
||||||
.map((comment) => comment.replace(/(^[ \\t]+)?(^)((\/\/))(.*)/gm, ''))
|
// .map((comment) => comment.replace(/(^[ \\t]+)?(^)((\/\/))(.*)/gm, ''))
|
||||||
.join('');
|
// .join('');
|
||||||
|
|
||||||
const newLineAnswer = /([^\\]|[^\S\r\n][^=])(=|~)/g;
|
// const newLineAnswer = /([^\\]|[^\S\r\n][^=])(=|~)/g;
|
||||||
const correctAnswer = /([^\\]|^{)(([^\\]|^|\\s*)=(.*)(?=[=~}]|\\n))/g;
|
// const correctAnswer = /([^\\]|^{)(([^\\]|^|\\s*)=(.*)(?=[=~}]|\\n))/g;
|
||||||
const incorrectAnswer = /([^\\]|^{)(([^\\]|^|\\s*)~(.*)(?=[=~}]|\\n))/g;
|
// const incorrectAnswer = /([^\\]|^{)(([^\\]|^|\\s*)~(.*)(?=[=~}]|\\n))/g;
|
||||||
|
|
||||||
return newText
|
// return newText
|
||||||
.replace(newLineAnswer, `\n$2`)
|
// .replace(newLineAnswer, `\n$2`)
|
||||||
.replace(correctAnswer, `$1<li>$4</li>`)
|
// .replace(correctAnswer, `$1<li>$4</li>`)
|
||||||
.replace(incorrectAnswer, `$1<li>$4</li>`);
|
// .replace(incorrectAnswer, `$1<li>$4</li>`);
|
||||||
}
|
// }
|
||||||
|
|
||||||
function lineRegex(text: string): string {
|
// function lineRegex(text: string): string {
|
||||||
return text
|
// return text
|
||||||
.split(/\r?\n/)
|
// // CPF: disabled the following regex because it's not clear what it's supposed to do
|
||||||
.map((category) =>
|
// // .split(/\r?\n/)
|
||||||
category.replace(/(^[ \\t]+)?(((^|\n)\s*[$]CATEGORY:))(.+)/g, `<br><b>$5</b><br>`)
|
// // .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((title) => title.replace(/\s*(::)\s*(.*?)(::)/g, `<br><b>$2</b><br>`))
|
||||||
.map((closeBracket) => closeBracket.replace(/([^\\]|^)}/g, `$1<br>`))
|
// // .map((openBracket) => openBracket.replace(/([^\\]|^){([#])?/g, `$1<br>`))
|
||||||
.join('');
|
// // .map((closeBracket) => closeBracket.replace(/([^\\]|^)}/g, `$1<br>`))
|
||||||
}
|
// // .join('');
|
||||||
|
// }
|
||||||
|
|
||||||
function removeBackslash(text: string): string {
|
// function removeBackslash(text: string): string {
|
||||||
return text
|
// return text
|
||||||
.split(/\r?\n/)
|
// .split(/\r?\n/)
|
||||||
.map((colon) => colon.replace(/[\\]:/g, ':'))
|
// .map((colon) => colon.replace(/[\\]:/g, ':'))
|
||||||
.map((openBracket) => openBracket.replace(/[\\]{/g, '{'))
|
// .map((openBracket) => openBracket.replace(/[\\]{/g, '{'))
|
||||||
.map((closeBracket) => closeBracket.replace(/[\\]}/g, '}'))
|
// .map((closeBracket) => closeBracket.replace(/[\\]}/g, '}'))
|
||||||
.join('');
|
// .join('');
|
||||||
}
|
// }
|
||||||
|
|
|
||||||
|
|
@ -6,20 +6,32 @@ import {
|
||||||
MultipleChoiceQuestion as MultipleChoiceType,
|
MultipleChoiceQuestion as MultipleChoiceType,
|
||||||
NumericalQuestion as NumericalType,
|
NumericalQuestion as NumericalType,
|
||||||
ShortAnswerQuestion as ShortAnswerType,
|
ShortAnswerQuestion as ShortAnswerType,
|
||||||
// Essay as EssayType,
|
// EssayQuestion as EssayType,
|
||||||
TrueFalseQuestion as TrueFalseType,
|
TrueFalseQuestion as TrueFalseType,
|
||||||
// MatchingQuestion as MatchingType,
|
// MatchingQuestion as MatchingType,
|
||||||
} from 'gift-pegjs';
|
} from 'gift-pegjs';
|
||||||
import { DisplayOptions } from './types';
|
import { DisplayOptions } from './types';
|
||||||
import DescriptionTemplate from './DescriptionTemplate';
|
// import DescriptionTemplate from './DescriptionTemplate';
|
||||||
import EssayTemplate from './EssayTemplate';
|
// import EssayTemplate from './EssayTemplate';
|
||||||
import MatchingTemplate from './MatchingTemplate';
|
// import MatchingTemplate from './MatchingTemplate';
|
||||||
import MultipleChoiceTemplate from './MultipleChoiceTemplate';
|
import MultipleChoiceTemplate from './MultipleChoiceTemplate';
|
||||||
import NumericalTemplate from './NumericalTemplate';
|
import NumericalTemplate from './NumericalTemplate';
|
||||||
import ShortAnswerTemplate from './ShortAnswerTemplate';
|
import ShortAnswerTemplate from './ShortAnswerTemplate';
|
||||||
import TrueFalseTemplate from './TrueFalseTemplate';
|
import TrueFalseTemplate from './TrueFalseTemplate';
|
||||||
import Error from './ErrorTemplate';
|
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' };
|
export const state: DisplayOptions = { preview: true, theme: 'light' };
|
||||||
|
|
||||||
|
|
@ -54,23 +66,21 @@ export default function Template(
|
||||||
// case 'Matching':
|
// case 'Matching':
|
||||||
// return Matching({ ...(keys as MatchingType) });
|
// return Matching({ ...(keys as MatchingType) });
|
||||||
default:
|
default:
|
||||||
// TODO: throw error for unsupported question types?
|
// convert type to human-readable string
|
||||||
// throw new Error(`Unsupported question type: ${type}`);
|
throw new UnsupportedQuestionTypeError(type); }
|
||||||
return ``;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ErrorTemplate(text: string, options?: Partial<DisplayOptions>): string {
|
export function ErrorTemplate(questionText: string, errorText: string, options?: Partial<DisplayOptions>): string {
|
||||||
Object.assign(state, options);
|
Object.assign(state, options);
|
||||||
|
|
||||||
return Error(text);
|
return Error(questionText, errorText);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
CategoryTemplate,
|
// CategoryTemplate,
|
||||||
DescriptionTemplate as Description,
|
// DescriptionTemplate as Description,
|
||||||
EssayTemplate as Essay,
|
// EssayTemplate as Essay,
|
||||||
MatchingTemplate as Matching,
|
// MatchingTemplate as Matching,
|
||||||
MultipleChoiceTemplate as MultipleChoice,
|
MultipleChoiceTemplate as MultipleChoice,
|
||||||
NumericalTemplate as Numerical,
|
NumericalTemplate as Numerical,
|
||||||
ShortAnswerTemplate as ShortAnswer,
|
ShortAnswerTemplate as ShortAnswer,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue