From ebc0c64ef4eecdd8678481320f14a93dafabb7ae Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Fri, 10 Jan 2025 12:39:52 -0500 Subject: [PATCH] Added tests --- .../templates/MultipleChoice.test.tsx | 126 ++ .../templates/ShortAnswer.test.tsx | 54 + .../GiftTemplate/templates/TrueFalse.test.tsx | 51 + .../MultipleChoice.test.tsx.snap | 1019 +++++++++++++++++ .../__snapshots__/ShortAnswer.test.tsx.snap | 226 ++++ .../__snapshots__/TrueFalse.test.tsx.snap | 329 ++++++ 6 files changed, 1805 insertions(+) create mode 100644 client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx create mode 100644 client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx create mode 100644 client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx create mode 100644 client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap create mode 100644 client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap create mode 100644 client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap diff --git a/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx new file mode 100644 index 0000000..9932fb1 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx @@ -0,0 +1,126 @@ +import { render } from '@testing-library/react'; +import { MultipleChoice } from '../../../../components/GiftTemplate/templates'; +import { TemplateOptions, MultipleChoice as MultipleChoiceType } from '../../../../components/GiftTemplate/templates/types'; + +const mockProps: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'plain' , text: 'Sample Stem'}, + choices: [ + { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const katekMock: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'plain' , text: '$$\\frac{zzz}{yyy}$$'}, + choices: [ + { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const imageMock: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title with Image', + stem: { format: 'plain', text: 'Sample Stem with Image' }, + choices: [ + { text: { format: 'plain', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 }, + { text: { format: 'plain', text: 'Sample Image' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' } +}; + +const mockMoodle: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'moodle' , text: 'Sample Stem'}, + choices: [ + { text: { format: 'moodle' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + + +const mockHTML: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'html' , text: '$$\\frac{zzz}{yyy}$$'}, + choices: [ + { text: { format: 'html' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'html', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 } + ], + globalFeedback: { format: 'html', text: 'Sample Global Feedback' } +}; + +const mockMarkdown: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title with Image', + stem: { format: 'markdown', text: 'Sample Stem with Image' }, + choices: [ + { text: { format: 'markdown', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Sample Image' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 } + ], + globalFeedback: { format: 'markdown', text: 'Sample Global Feedback with Image' } +}; + +const mockMarkdownTwoImages: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title with Image', + stem: { format: 'markdown', text: 'Sample Image' }, + choices: [ + { text: { format: 'markdown', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Sample Image' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 } + ], + globalFeedback: { format: 'markdown', text: 'Sample Global Feedback with Image' } +}; + +test('MultipleChoice snapshot test', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with katex', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with Moodle text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with katex, using html text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with image using markdown text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with 2 images using markdown text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx new file mode 100644 index 0000000..626389c --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx @@ -0,0 +1,54 @@ +import { render } from '@testing-library/react'; +import ShortAnswer from '../../../../components/GiftTemplate/templates/ShortAnswer'; +import { TemplateOptions, ShortAnswer as ShortAnswerType } from '../../../../components/GiftTemplate/templates/types'; + +const plainTextMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title', + stem: { format: 'plain', 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 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const katexMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title', + stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' }, + choices: [ + { text: { format: 'html' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'html' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'html' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'moodle' , text: 'Correct!'}, weight: 1 } + ], + globalFeedback: { format: 'html', text: 'Sample Global Feedback' } +}; + +const moodleMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + 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 } + ], + globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } +}; + +test('ShortAnswer snapshot test with plain text', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('ShortAnswer snapshot test with katex', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('ShortAnswer snapshot test with moodle', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx new file mode 100644 index 0000000..69cd3e7 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx @@ -0,0 +1,51 @@ +import { render } from '@testing-library/react'; +import TrueFalse from '../../../../components/GiftTemplate/templates'; +import { TemplateOptions, TrueFalse as TrueFalseType } from '../../../../components/GiftTemplate/templates/types'; + +const plainTextMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample True/False Title', + stem: { format: 'plain', text: 'Sample Stem' }, + isTrue: true, + trueFeedback: { format: 'plain', text: 'Correct!' }, + falseFeedback: { format: 'plain', text: 'Incorrect!' }, + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const katexMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample True/False Title', + stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' }, + isTrue: true, + trueFeedback: { format: 'moodle', text: 'Correct!' }, + falseFeedback: { format: 'html', text: 'Incorrect!' }, + globalFeedback: { format: 'markdown', text: 'Sample Global Feedback' } +}; + +const moodleMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample True/False Title', + stem: { format: 'moodle', text: 'Sample Stem' }, + isTrue: true, + trueFeedback: { format: 'moodle', text: 'Correct!' }, + falseFeedback: { format: 'moodle', text: 'Incorrect!' }, + globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } +}; + +test('TrueFalse snapshot test with plain text', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('TrueFalse snapshot test with katex', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('TrueFalse snapshot test with moodle', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap new file mode 100644 index 0000000..75e7226 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap @@ -0,0 +1,1019 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MultipleChoice snapshot test 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="ideNwBGu" name="id2CCZVRT9"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="ideNwBGu"> + Choice 1 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idGR2h1H" name="id2CCZVRT9"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idGR2h1H"> + Choice 2 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with 2 images using markdown text format 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><img src="https://via.placeholder.com/150" alt = "Sample Image"/></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id57MvEd" name="idQ_whKmSd"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id57MvEd"> + Choice 1 + + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idZ1O9uM" name="idQ_whKmSd"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idZ1O9uM"> + Choice 2 + + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idJ4Wzh2" name="idQ_whKmSd"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idJ4Wzh2"> + <img src="https://via.placeholder.com/150" alt="Sample Image" /> + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Image Feedback</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback with Image +</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with Moodle text format 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmWstm6" name="idhXDZKhP7"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmWstm6"> + Choice 1 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id7sfVHd" name="idhXDZKhP7"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id7sfVHd"> + Choice 2 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with image 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idYcIYQH" name="id4wrZpxqV"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idYcIYQH"> + Choice 1 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id2Vhlzo" name="id4wrZpxqV"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id2Vhlzo"> + Choice 2 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idz87odw" name="id4wrZpxqV"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idz87odw"> + <img src="https://via.placeholder.com/150" alt="Sample Image" /> + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Image Feedback</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback with Image</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with image using markdown text format 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image +</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idGnTXOs" name="idy3Mbb-wN"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idGnTXOs"> + Choice 1 + + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id4cQyMJ" name="idy3Mbb-wN"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id4cQyMJ"> + Choice 2 + + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="ideT1A0q" name="idy3Mbb-wN"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="ideT1A0q"> + <img src="https://via.placeholder.com/150" alt="Sample Image" /> + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Image Feedback</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback with Image +</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with katex 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idNwG_aI" name="idir2jT135"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idNwG_aI"> + Choice 1 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idbqDUYQ" name="idir2jT135"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idbqDUYQ"> + Choice 2 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with katex, using html text format 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idhrJmYd" name="idiA6lal3j"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idhrJmYd"> + Choice 1 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idxZUKMy" name="idiA6lal3j"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idxZUKMy"> + Choice 2 + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap new file mode 100644 index 0000000..9646352 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap @@ -0,0 +1,226 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ShortAnswer snapshot test with katex 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><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"> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`ShortAnswer snapshot test with moodle 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><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"> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`ShortAnswer snapshot test with plain text 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><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"> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap new file mode 100644 index 0000000..8d914d8 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap @@ -0,0 +1,329 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TrueFalse snapshot test with katex 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample True/False Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idJPS1EM" name="idpM8HEdsR"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idJPS1EM"> + Vrai + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id_-5rkc" name="idpM8HEdsR"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id_-5rkc"> + Faux + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback +</p> + </div></section> + +`; + +exports[`TrueFalse snapshot test with moodle 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample True/False Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idOPBdFk" name="idoMEBjTDb"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idOPBdFk"> + Vrai + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id3lljUu" name="idoMEBjTDb"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id3lljUu"> + Faux + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`TrueFalse snapshot test with plain text 1`] = ` + + <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%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample True/False Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <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%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="id2_2M-E" name="idpl2XIOYb"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="id2_2M-E"> + Vrai + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idPc16JK" name="idpl2XIOYb"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idPc16JK"> + Faux + </label> + <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"><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> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <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%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`;