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

Adding snapshot tests for editor

Browse source
This commit is contained in:
JubaAzul 2025-01-10 17:39:19 -05:00
parent ebc0c64ef4
commit 427182e7a8
7 changed files with 650 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx Normal file
View file

@ -0,0 +1,72 @@
import { render } from '@testing-library/react';
import Numerical from '../../../../components/GiftTemplate/templates/Numerical';
import { TemplateOptions, Numerical as NumericalType } from '../../../../components/GiftTemplate/templates/types';
const plainTextMock: TemplateOptions & NumericalType = {
type: 'Numerical',
hasEmbeddedAnswers: false,
title: 'Sample Numerical Title',
stem: { format: 'plain', text: 'Sample Stem' },
choices: [
{ isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } },
{ isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } }
],
globalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
};
const htmlMock: TemplateOptions & NumericalType = {
type: 'Numerical',
hasEmbeddedAnswers: false,
title: 'Sample Numerical Title',
stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' },
choices: [
{ isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'html', text: 'Correct!' } },
{ isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'html', text: 'Incorrect!' } }
],
globalFeedback: { format: 'html', text: 'Sample Global Feedback' }
};
const moodleMock: TemplateOptions & NumericalType = {
type: 'Numerical',
hasEmbeddedAnswers: false,
title: 'Sample Numerical Title',
stem: { format: 'moodle', text: 'Sample Stem' },
choices: [
{ isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'moodle', text: 'Correct!' } },
{ isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'moodle', text: 'Incorrect!' } }
],
globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' }
};
const imageMock: TemplateOptions & NumericalType = {
type: 'Numerical',
hasEmbeddedAnswers: false,
title: 'Sample Numerical Title with Image',
stem: { format: 'plain', text: 'Sample Stem with Image' },
choices: [
{ isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } },
{ isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } },
{ isCorrect: false, weight: 1, text: { type: 'simple', number: 44}, feedback: { format: 'plain', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' } }
],
globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' }
};
test('Numerical snapshot test with plain text', () => {
const { asFragment } = render(<Numerical {...plainTextMock} />);
expect(asFragment()).toMatchSnapshot();
});
test('Numerical snapshot test with html', () => {
const { asFragment } = render(<Numerical {...htmlMock} />);
expect(asFragment()).toMatchSnapshot();
});
test('Numerical snapshot test with moodle', () => {
const { asFragment } = render(<Numerical {...moodleMock} />);
expect(asFragment()).toMatchSnapshot();
});
test('Numerical snapshot test with image', () => {
const { asFragment } = render(<Numerical {...imageMock} />);
expect(asFragment()).toMatchSnapshot();
});

23
client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx
View file

@ -32,12 +32,26 @@ const moodleMock: TemplateOptions & ShortAnswerType = {
title: 'Sample Short Answer Title',
stem: { format: 'moodle', text: 'Sample Stem' },
choices: [
{ text: { format: 'plain' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
{ text: { format: 'plain' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
{ text: { format: 'moodle' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
{ text: { format: 'moodle' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
],
globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' }
};
const imageMock: TemplateOptions & ShortAnswerType = {
type: 'Short',
hasEmbeddedAnswers: false,
title: 'Sample Short Answer Title with Image',
stem: { format: 'markdown', text: 'Sample Stem with Image' },
choices: [
{ text: { format: 'markdown', text: 'Answer 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
{ text: { format: 'markdown', text: 'Answer 2' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
{ text: { format: 'markdown', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }
],
globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' }
};
test('ShortAnswer snapshot test with plain text', () => {
const { asFragment } = render(<ShortAnswer {...plainTextMock} />);
expect(asFragment()).toMatchSnapshot();
@ -52,3 +66,8 @@ test('ShortAnswer snapshot test with moodle', () => {
const { asFragment } = render(<ShortAnswer {...moodleMock} />);
expect(asFragment()).toMatchSnapshot();
});
test('ShortAnswer snapshot test with image', () => {
const { asFragment } = render(<ShortAnswer {...imageMock} />);
expect(asFragment()).toMatchSnapshot();
});

16
client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx
View file

@ -35,6 +35,17 @@ const moodleMock: TemplateOptions & TrueFalseType = {
globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' }
};
const imageMock: TemplateOptions & TrueFalseType = {
type: 'TF',
hasEmbeddedAnswers: false,
title: 'Sample Short Answer Title with Image',
stem: { format: 'plain', text: 'Sample Stem with Image' },
trueFeedback: { format: 'moodle', text: 'Correct!' },
isTrue: true,
falseFeedback: { format: 'moodle', text: 'Incorrect!' },
globalFeedback: { format: 'plain', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' }
};
test('TrueFalse snapshot test with plain text', () => {
const { asFragment } = render(<TrueFalse {...plainTextMock} />);
expect(asFragment()).toMatchSnapshot();
@ -49,3 +60,8 @@ test('TrueFalse snapshot test with moodle', () => {
const { asFragment } = render(<TrueFalse {...moodleMock} />);
expect(asFragment()).toMatchSnapshot();
});
test('TrueFalse snapshot test with image', () => {
const { asFragment } = render(<TrueFalse {...imageMock} />);
expect(asFragment()).toMatchSnapshot();
});

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

@ -44,7 +44,7 @@ exports[`MultipleChoice snapshot test 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="ideNwBGu" name="id2CCZVRT9"&gt;
&lt;input class="gift-input" type="radio" id="idY6sLQS" name="idYcbBS3PT"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -61,7 +61,7 @@ exports[`MultipleChoice snapshot test 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="ideNwBGu"&gt;
" for="idY6sLQS"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
@ -80,7 +80,7 @@ exports[`MultipleChoice snapshot test 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idGR2h1H" name="id2CCZVRT9"&gt;
&lt;input class="gift-input" type="radio" id="ida41-A1" name="idYcbBS3PT"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -97,7 +97,7 @@ exports[`MultipleChoice snapshot test 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idGR2h1H"&gt;
" for="ida41-A1"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
@ -173,7 +173,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id57MvEd" name="idQ_whKmSd"&gt;
&lt;input class="gift-input" type="radio" id="idRndLXH" name="id41Q3iM9t"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -190,7 +190,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id57MvEd"&gt;
" for="idRndLXH"&gt;
Choice 1
&lt;/label&gt;
@ -210,7 +210,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idZ1O9uM" name="idQ_whKmSd"&gt;
&lt;input class="gift-input" type="radio" id="id9so1y3" name="id41Q3iM9t"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -227,7 +227,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idZ1O9uM"&gt;
" for="id9so1y3"&gt;
Choice 2
&lt;/label&gt;
@ -247,7 +247,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idJ4Wzh2" name="idQ_whKmSd"&gt;
&lt;input class="gift-input" type="radio" id="idyhlQbI" name="id41Q3iM9t"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -264,7 +264,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idJ4Wzh2"&gt;
" for="idyhlQbI"&gt;
&lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;
&lt;/label&gt;
&lt;svg style="
@ -341,7 +341,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idmWstm6" name="idhXDZKhP7"&gt;
&lt;input class="gift-input" type="radio" id="idOkvGfv" name="idG7FzhlwG"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -358,7 +358,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idmWstm6"&gt;
" for="idOkvGfv"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
@ -377,7 +377,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id7sfVHd" name="idhXDZKhP7"&gt;
&lt;input class="gift-input" type="radio" id="idWc4Fdg" name="idG7FzhlwG"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -394,7 +394,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id7sfVHd"&gt;
" for="idWc4Fdg"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
@ -470,7 +470,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idYcIYQH" name="id4wrZpxqV"&gt;
&lt;input class="gift-input" type="radio" id="idtg_4sy" name="idtYfkT0sj"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -487,7 +487,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idYcIYQH"&gt;
" for="idtg_4sy"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
@ -506,7 +506,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id2Vhlzo" name="id4wrZpxqV"&gt;
&lt;input class="gift-input" type="radio" id="idsl9DOz" name="idtYfkT0sj"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -523,7 +523,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id2Vhlzo"&gt;
" for="idsl9DOz"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
@ -542,7 +542,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idz87odw" name="id4wrZpxqV"&gt;
&lt;input class="gift-input" type="radio" id="idPEStwV" name="idtYfkT0sj"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -559,7 +559,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idz87odw"&gt;
" for="idPEStwV"&gt;
&lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;
&lt;/label&gt;
&lt;svg style="
@ -636,7 +636,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idGnTXOs" name="idy3Mbb-wN"&gt;
&lt;input class="gift-input" type="radio" id="idfcMRhV" name="idIpMjpvV3"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -653,7 +653,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idGnTXOs"&gt;
" for="idfcMRhV"&gt;
Choice 1
&lt;/label&gt;
@ -673,7 +673,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id4cQyMJ" name="idy3Mbb-wN"&gt;
&lt;input class="gift-input" type="radio" id="idS15bbw" name="idIpMjpvV3"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -690,7 +690,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id4cQyMJ"&gt;
" for="idS15bbw"&gt;
Choice 2
&lt;/label&gt;
@ -710,7 +710,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="ideT1A0q" name="idy3Mbb-wN"&gt;
&lt;input class="gift-input" type="radio" id="id5hwUQu" name="idIpMjpvV3"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -727,7 +727,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="ideT1A0q"&gt;
" for="id5hwUQu"&gt;
&lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;
&lt;/label&gt;
&lt;svg style="
@ -804,7 +804,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idNwG_aI" name="idir2jT135"&gt;
&lt;input class="gift-input" type="radio" id="id_8Kbh1" name="idwLkHBxIV"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -821,7 +821,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idNwG_aI"&gt;
" for="id_8Kbh1"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
@ -840,7 +840,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idbqDUYQ" name="idir2jT135"&gt;
&lt;input class="gift-input" type="radio" id="idmmZ__M" name="idwLkHBxIV"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -849,15 +849,15 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
padding-top: 0.05rem;
padding-bottom: 0.05rem;
color: hsl(35, 51%, 33%);
background-color: hsl(36, 84%, 93%);
color: hsl(134, 31%, 32%);
background-color: hsl(134, 68%, 95%);
"&gt;1%&lt;/span&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idbqDUYQ"&gt;
" for="idmmZ__M"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="
@ -866,12 +866,12 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
margin-left: 0.1rem;
margin-right: 0.2rem;
width: 0.75em;
color: hsl(2, 64%, 58%);
" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;
width: 1em;
color: hsl(120, 39%, 54%);
" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;
&lt;span style="
color: hsl(180, 15%, 41%);
"&gt;InCorrect!&lt;/span&gt;
"&gt;Correct!&lt;/span&gt;
&lt;/input&gt;
&lt;/div&gt;
&lt;div style="
@ -933,7 +933,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idhrJmYd" name="idiA6lal3j"&gt;
&lt;input class="gift-input" type="radio" id="idmhYkGR" name="id7uMk4tB5"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -950,7 +950,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idhrJmYd"&gt;
" for="idmhYkGR"&gt;
Choice 1
&lt;/label&gt;
&lt;svg style="
@ -969,7 +969,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idxZUKMy" name="idiA6lal3j"&gt;
&lt;input class="gift-input" type="radio" id="idvT6Xg7" name="id7uMk4tB5"&gt;
&lt;span style="
box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
border-radius: 3px;
@ -986,7 +986,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idxZUKMy"&gt;
" for="idvT6Xg7"&gt;
Choice 2
&lt;/label&gt;
&lt;svg style="

301
client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap Normal file
View file

@ -0,0 +1,301 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Numerical snapshot test with html 1`] = `
<DocumentFragment>
&lt;section style="
flex-wrap: wrap;
position: relative;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
background-color: hsl(0, 0%, 100%);
border: solid hsl(0, 0%, 100%) 2px;
border-radius: 6px;
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
"&gt;
&lt;div style="
display: flex;
font-weight: bold;
"&gt;
&lt;span&gt;
&lt;span style="
color: #5271FF;
"&gt;Sample Numerical Title&lt;/span&gt;
&lt;/span&gt;
&lt;span style="
margin-left: auto;
padding-left: 0.75rem;
flex: none;
margin-bottom: 10px;"&gt;
&lt;span style="
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
color: hsl(180, 15%, 41%);
"&gt;Numérique&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;p style="
color: hsl(0, 0%, 0%);
"&gt;&lt;span class="katex-display"&gt;&lt;span class="katex"&gt;&lt;span class="katex-mathml"&gt;&lt;math xmlns="http://www.w3.org/1998/Math/MathML" display="block"&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;/mrow&gt;&lt;annotation encoding="application/x-tex"&gt;\\frac{zzz}{yyy}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class="katex-html" aria-hidden="true"&gt;&lt;span class="base"&gt;&lt;span class="strut" style="height:1.988em;vertical-align:-0.8804em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mopen nulldelimiter"&gt;&lt;/span&gt;&lt;span class="mfrac"&gt;&lt;span class="vlist-t vlist-t2"&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:1.1076em;"&gt;&lt;span style="top:-2.314em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.03588em;"&gt;yyy&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.23em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="frac-line" style="border-bottom-width:0.04em;"&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.677em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.04398em;"&gt;zzz&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-s"&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:0.8804em;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="mclose nulldelimiter"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div&gt;
&lt;span style="
color: hsl(0, 0%, 0%);
"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: hsl(0, 0%, 16%);
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 81%);
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 90%;
" placeholder="42, 43"&gt;
&lt;/div&gt;
&lt;div style="
position: relative;
margin-top: 1rem;
padding: 0 1rem;
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%);
"&gt;
&lt;p&gt;Sample Global Feedback&lt;/p&gt;
&lt;/div&gt;&lt;/section&gt;
</DocumentFragment>
`;
exports[`Numerical snapshot test with image 1`] = `
<DocumentFragment>
&lt;section style="
flex-wrap: wrap;
position: relative;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
background-color: hsl(0, 0%, 100%);
border: solid hsl(0, 0%, 100%) 2px;
border-radius: 6px;
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
"&gt;
&lt;div style="
display: flex;
font-weight: bold;
"&gt;
&lt;span&gt;
&lt;span style="
color: #5271FF;
"&gt;Sample Numerical Title with Image&lt;/span&gt;
&lt;/span&gt;
&lt;span style="
margin-left: auto;
padding-left: 0.75rem;
flex: none;
margin-bottom: 10px;"&gt;
&lt;span style="
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
color: hsl(180, 15%, 41%);
"&gt;Numérique&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;p style="
color: hsl(0, 0%, 0%);
"&gt;Sample Stem with Image&lt;/p&gt;
&lt;div&gt;
&lt;span style="
color: hsl(0, 0%, 0%);
"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: hsl(0, 0%, 16%);
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 81%);
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 90%;
" placeholder="42, 43, 44"&gt;
&lt;/div&gt;
&lt;div style="
position: relative;
margin-top: 1rem;
padding: 0 1rem;
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%);
"&gt;
&lt;p&gt;Sample Global Feedback with Image&lt;/p&gt;
&lt;/div&gt;&lt;/section&gt;
</DocumentFragment>
`;
exports[`Numerical snapshot test with moodle 1`] = `
<DocumentFragment>
&lt;section style="
flex-wrap: wrap;
position: relative;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
background-color: hsl(0, 0%, 100%);
border: solid hsl(0, 0%, 100%) 2px;
border-radius: 6px;
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
"&gt;
&lt;div style="
display: flex;
font-weight: bold;
"&gt;
&lt;span&gt;
&lt;span style="
color: #5271FF;
"&gt;Sample Numerical Title&lt;/span&gt;
&lt;/span&gt;
&lt;span style="
margin-left: auto;
padding-left: 0.75rem;
flex: none;
margin-bottom: 10px;"&gt;
&lt;span style="
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
color: hsl(180, 15%, 41%);
"&gt;Numérique&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;p style="
color: hsl(0, 0%, 0%);
"&gt;Sample Stem&lt;/p&gt;
&lt;div&gt;
&lt;span style="
color: hsl(0, 0%, 0%);
"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: hsl(0, 0%, 16%);
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 81%);
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 90%;
" placeholder="42, 43"&gt;
&lt;/div&gt;
&lt;div style="
position: relative;
margin-top: 1rem;
padding: 0 1rem;
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%);
"&gt;
&lt;p&gt;Sample Global Feedback&lt;/p&gt;
&lt;/div&gt;&lt;/section&gt;
</DocumentFragment>
`;
exports[`Numerical snapshot test with plain text 1`] = `
<DocumentFragment>
&lt;section style="
flex-wrap: wrap;
position: relative;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
background-color: hsl(0, 0%, 100%);
border: solid hsl(0, 0%, 100%) 2px;
border-radius: 6px;
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
"&gt;
&lt;div style="
display: flex;
font-weight: bold;
"&gt;
&lt;span&gt;
&lt;span style="
color: #5271FF;
"&gt;Sample Numerical Title&lt;/span&gt;
&lt;/span&gt;
&lt;span style="
margin-left: auto;
padding-left: 0.75rem;
flex: none;
margin-bottom: 10px;"&gt;
&lt;span style="
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
color: hsl(180, 15%, 41%);
"&gt;Numérique&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;p style="
color: hsl(0, 0%, 0%);
"&gt;Sample Stem&lt;/p&gt;
&lt;div&gt;
&lt;span style="
color: hsl(0, 0%, 0%);
"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: hsl(0, 0%, 16%);
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 81%);
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 90%;
" placeholder="42, 43"&gt;
&lt;/div&gt;
&lt;div style="
position: relative;
margin-top: 1rem;
padding: 0 1rem;
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%);
"&gt;
&lt;p&gt;Sample Global Feedback&lt;/p&gt;
&lt;/div&gt;&lt;/section&gt;
</DocumentFragment>
`;

78
client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap
View file

@ -1,5 +1,83 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ShortAnswer snapshot test with image 1`] = `
<DocumentFragment>
&lt;section style="
flex-wrap: wrap;
position: relative;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
background-color: hsl(0, 0%, 100%);
border: solid hsl(0, 0%, 100%) 2px;
border-radius: 6px;
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
"&gt;
&lt;div style="
display: flex;
font-weight: bold;
"&gt;
&lt;span&gt;
&lt;span style="
color: #5271FF;
"&gt;Sample Short Answer Title with Image&lt;/span&gt;
&lt;/span&gt;
&lt;span style="
margin-left: auto;
padding-left: 0.75rem;
flex: none;
margin-bottom: 10px;"&gt;
&lt;span style="
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
color: hsl(180, 15%, 41%);
"&gt;Réponse courte&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;p style="
color: hsl(0, 0%, 0%);
"&gt;Sample Stem with Image
&lt;/p&gt;
&lt;div&gt;
&lt;span style="
color: hsl(0, 0%, 0%);
"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: hsl(0, 0%, 16%);
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 81%);
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 90%;
" placeholder="Answer 1
, Answer 2
, &lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;"&gt;
&lt;/div&gt;
&lt;div style="
position: relative;
margin-top: 1rem;
padding: 0 1rem;
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%);
"&gt;
&lt;p&gt;Sample Global Feedback with Image&lt;/p&gt;
&lt;/div&gt;&lt;/section&gt;
</DocumentFragment>
`;
exports[`ShortAnswer snapshot test with katex 1`] = `
<DocumentFragment>
&lt;section style="

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

@ -1,5 +1,114 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TrueFalse snapshot test with image 1`] = `
<DocumentFragment>
&lt;section style="
flex-wrap: wrap;
position: relative;
padding: 1rem 1rem;
margin-bottom: 0.5rem;
background-color: hsl(0, 0%, 100%);
border: solid hsl(0, 0%, 100%) 2px;
border-radius: 6px;
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
"&gt;
&lt;div style="
display: flex;
font-weight: bold;
"&gt;
&lt;span&gt;
&lt;span style="
color: #5271FF;
"&gt;Sample Short Answer Title with Image&lt;/span&gt;
&lt;/span&gt;
&lt;span style="
margin-left: auto;
padding-left: 0.75rem;
flex: none;
margin-bottom: 10px;"&gt;
&lt;span style="
box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
color: hsl(180, 15%, 41%);
"&gt;Vrai/Faux&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;p style="
color: hsl(0, 0%, 0%);
"&gt;Sample Stem with Image&lt;/p&gt;&lt;span style="
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idgpc2Rm" name="idrK_AqV9h"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idgpc2Rm"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
margin-right: 0.2rem;
width: 1em;
color: hsl(120, 39%, 54%);
" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;
&lt;span style="
color: hsl(180, 15%, 41%);
"&gt;Correct!&lt;/span&gt;
&lt;/input&gt;
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idQF-GNQ" name="idrK_AqV9h"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idQF-GNQ"&gt;
Faux
&lt;/label&gt;
&lt;svg style="
vertical-align: text-bottom;
display: inline-block;
margin-left: 0.1rem;
margin-right: 0.2rem;
width: 0.75em;
color: hsl(2, 64%, 58%);
" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;
&lt;span style="
color: hsl(180, 15%, 41%);
"&gt;Incorrect!&lt;/span&gt;
&lt;/input&gt;
&lt;/div&gt;
&lt;div style="
position: relative;
margin-top: 1rem;
padding: 0 1rem;
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%);
"&gt;
&lt;p&gt;&lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;&lt;/p&gt;
&lt;/div&gt;&lt;/section&gt;
</DocumentFragment>
`;
exports[`TrueFalse snapshot test with katex 1`] = `
<DocumentFragment>
&lt;section style="
@ -44,14 +153,14 @@ exports[`TrueFalse snapshot test with katex 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idJPS1EM" name="idpM8HEdsR"&gt;
&lt;input class="gift-input" type="radio" id="idHBTzQU" name="idA0BQMs9B"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idJPS1EM"&gt;
" for="idHBTzQU"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
@ -70,14 +179,14 @@ exports[`TrueFalse snapshot test with katex 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id_-5rkc" name="idpM8HEdsR"&gt;
&lt;input class="gift-input" type="radio" id="idYE-crD" name="idA0BQMs9B"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id_-5rkc"&gt;
" for="idYE-crD"&gt;
Faux
&lt;/label&gt;
&lt;svg style="
@ -154,14 +263,14 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idOPBdFk" name="idoMEBjTDb"&gt;
&lt;input class="gift-input" type="radio" id="idf3UShS" name="idNOTYKGh8"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idOPBdFk"&gt;
" for="idf3UShS"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
@ -180,14 +289,14 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id3lljUu" name="idoMEBjTDb"&gt;
&lt;input class="gift-input" type="radio" id="idtUEUUA" name="idNOTYKGh8"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id3lljUu"&gt;
" for="idtUEUUA"&gt;
Faux
&lt;/label&gt;
&lt;svg style="
@ -263,14 +372,14 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
color: hsl(0, 0%, 0%);
"&gt;Choisir une réponse:&lt;/span&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="id2_2M-E" name="idpl2XIOYb"&gt;
&lt;input class="gift-input" type="radio" id="idgBg2Sw" name="idWE_PEATF"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="id2_2M-E"&gt;
" for="idgBg2Sw"&gt;
Vrai
&lt;/label&gt;
&lt;svg style="
@ -289,14 +398,14 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
&lt;/div&gt;
&lt;div class='multiple-choice-answers-container'&gt;
&lt;input class="gift-input" type="radio" id="idPc16JK" name="idpl2XIOYb"&gt;
&lt;input class="gift-input" type="radio" id="idSjCrHY" name="idWE_PEATF"&gt;
&lt;label style="
display: inline-block;
padding: 0.2em 0 0.2em 0;
color: hsl(0, 0%, 0%);
" for="idPc16JK"&gt;
" for="idSjCrHY"&gt;
Faux
&lt;/label&gt;
&lt;svg style="