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
|
||||
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 
|
||||
|
||||
// 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>`;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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('');
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue