diff --git a/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx index 77a3277..631305b 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx @@ -32,7 +32,7 @@ const moodleMock: TemplateOptions & NumericalQuestion = const imageMock: TemplateOptions & NumericalQuestion = parse(` - ::Sample Numerical Title with Image::[markdown]Sample Stem with Image ![](https\\://example.com/cat.jpg){#=42#Correct!=43#Incorrect! ![](https\\://example.com/cat.jpg)####Sample Global Feedback with Image} + ::Sample Numerical Title with Image::[markdown]Sample Stem with Image ![](https\\://example.com/cat.jpg){#=42#Correct!=43#Incorrect!=44#Also Incorrect! ![](https\\://example.com/cat.jpg)####Sample Global Feedback with Image} `)[0] as NumericalQuestion; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap index 20ae2b9..15f5b72 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap @@ -38,9 +38,19 @@ exports[`Numerical snapshot test with html 1`] = ` ">Numérique</span> </span> </div> -<p style=" + + <div style=" + display: flex; +"> + <span> + <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> +" class="present-question-stem"> + <span class="katex-display"><span class="katex"><span class="katex-mathml"><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><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>\\frac{zzz}{yyy}</math></span><span aria-hidden="true" class="katex-html"><span class="base"><span style="height:1.988em;vertical-align:-0.8804em;" class="strut"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span style="height:1.1076em;" class="vlist"><span style="top:-2.314em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span style="margin-right:0.03588em;" class="mord mathnormal">yyy</span></span></span><span style="top:-3.23em;"><span style="height:3em;" class="pstrut"></span><span style="border-bottom-width:0.04em;" class="frac-line"></span></span><span style="top:-3.677em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span style="margin-right:0.04398em;" class="mord mathnormal">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span style="height:0.8804em;" class="vlist"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span> + </p> + </span> + </div> + <div> <span style=" color: hsl(0, 0%, 0%); @@ -58,7 +68,7 @@ exports[`Numerical snapshot test with html 1`] = ` font-size: inherit; line-height: inherit; width: 90%; -" placeholder="42, 43"> +" placeholder="42 (Correct), 43 (Incorrect!)"> </div> <div style=" position: relative; @@ -113,9 +123,20 @@ exports[`Numerical snapshot test with image 1`] = ` ">Numérique</span> </span> </div> -<p style=" + + <div style=" + display: flex; +"> + <span> + <p style=" color: hsl(0, 0%, 0%); -">Sample Stem with Image</p> +" class="present-question-stem"> + Sample Stem with Image <img alt="" src="https://example.com/cat.jpg"> + + </p> + </span> + </div> + <div> <span style=" color: hsl(0, 0%, 0%); @@ -133,7 +154,10 @@ exports[`Numerical snapshot test with image 1`] = ` font-size: inherit; line-height: inherit; width: 90%; -" placeholder="42, 43, 44"> +" placeholder="42 (Correct! +), 43 (Incorrect! +), 44 (Also Incorrect! <img alt="" src="https://example.com/cat.jpg"> +)"> </div> <div style=" position: relative; @@ -145,7 +169,8 @@ exports[`Numerical snapshot test with image 1`] = ` border-radius: 6px; box-shadow: 0px 2px 5px hsl(0, 0%, 74%); "> - <p>Sample Global Feedback with Image</p> + <p>Sample Global Feedback with Image +</p> </div></section> `; @@ -188,9 +213,19 @@ exports[`Numerical snapshot test with moodle 1`] = ` ">Numérique</span> </span> </div> -<p style=" + + <div style=" + display: flex; +"> + <span> + <p style=" color: hsl(0, 0%, 0%); -">Sample Stem</p> +" class="present-question-stem"> + Sample Stem + </p> + </span> + </div> + <div> <span style=" color: hsl(0, 0%, 0%); @@ -208,7 +243,7 @@ exports[`Numerical snapshot test with moodle 1`] = ` font-size: inherit; line-height: inherit; width: 90%; -" placeholder="42, 43"> +" placeholder="42 (Correct!), 43 (Incorrect!)"> </div> <div style=" position: relative; @@ -263,9 +298,19 @@ exports[`Numerical snapshot test with plain text 1`] = ` ">Numérique</span> </span> </div> -<p style=" + + <div style=" + display: flex; +"> + <span> + <p style=" color: hsl(0, 0%, 0%); -">Sample Stem</p> +" class="present-question-stem"> + Sample Stem + </p> + </span> + </div> + <div> <span style=" color: hsl(0, 0%, 0%); @@ -283,7 +328,7 @@ exports[`Numerical snapshot test with plain text 1`] = ` font-size: inherit; line-height: inherit; width: 90%; -" placeholder="42, 43"> +" placeholder="42 (Correct!), 43 (Incorrect!)"> </div> <div style=" position: relative; diff --git a/client/src/components/GiftTemplate/templates/NumericalTemplate.ts b/client/src/components/GiftTemplate/templates/NumericalTemplate.ts index 603eb00..129fc7a 100644 --- a/client/src/components/GiftTemplate/templates/NumericalTemplate.ts +++ b/client/src/components/GiftTemplate/templates/NumericalTemplate.ts @@ -4,9 +4,10 @@ import Title from './TitleTemplate'; import GlobalFeedback from './GlobalFeedbackTemplate'; import { ParagraphStyle, InputStyle } from '../constants'; import { state } from '.'; -import { NumericalAnswer, NumericalQuestion } from 'gift-pegjs'; -import { isHighLowNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer } from 'gift-pegjs/typeGuards'; +import { MultipleNumericalAnswer, NumericalAnswer, NumericalQuestion, TextFormat } from 'gift-pegjs'; +import { isHighLowNumericalAnswer, isMultipleNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer } from 'gift-pegjs/typeGuards'; import StemTemplate from './StemTemplate'; +import { FormattedTextTemplate } from './TextTypeTemplate'; type NumericalOptions = TemplateOptions & NumericalQuestion; type NumericalAnswerOptions = TemplateOptions & Pick; @@ -31,8 +32,12 @@ export default function NumericalTemplate({ } function NumericalAnswers({ choices }: NumericalAnswerOptions): string { - const placeholder = choices.length > 1 - ? choices.map(choice => {Answer(choice)}).join(', ') + const placeholder = isMultipleNumericalAnswer(choices[0]) + ? choices.map(choice => { + console.log(JSON.stringify(choice)); + const c = choice as MultipleNumericalAnswer; + return Answer(c.answer, c.formattedFeedback) + }).join(', ') : Answer(choices[0]); return ` @@ -46,14 +51,15 @@ function NumericalAnswers({ choices }: NumericalAnswerOptions): string { `; } -function Answer(choice: NumericalAnswer): string { +function Answer(choice: NumericalAnswer, formattedFeedback?: TextFormat): string { + const formattedFeedbackString = formattedFeedback ? ` (${FormattedTextTemplate(formattedFeedback)})` : ''; switch (true) { case isSimpleNumericalAnswer(choice): - return `${choice.number}`; + return `${choice.number}${formattedFeedbackString}`; case isRangeNumericalAnswer(choice): - return `${choice.number} ± ${choice.range}`; + return `${choice.number} ± ${choice.range}${formattedFeedbackString}`; case isHighLowNumericalAnswer(choice): - return `${choice.numberLow}..${choice.numberHigh}`; + return `${choice.numberLow}..${choice.numberHigh}${formattedFeedbackString}`; default: return ``; }