fix template, update snapshots numerical answers (formatted stem, multiple answers with feedback)

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;
 
 

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>
 </DocumentFragment>
 `;
@@ -188,9 +213,19 @@ exports[`Numerical snapshot test with moodle 1`] = `
 "&gt;Numérique&lt;/span&gt;
     &lt;/span&gt;
   &lt;/div&gt;
-&lt;p style="
+
+  &lt;div style="
+  display: flex;
+"&gt;
+    &lt;span&gt;
+      &lt;p style="
   color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;
+" class="present-question-stem"&gt;
+                      Sample Stem
+                  &lt;/p&gt;
+    &lt;/span&gt;
+  &lt;/div&gt;
+
       &lt;div&gt;
           &lt;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"&gt;
+" placeholder="42 (Correct!), 43 (Incorrect!)"&gt;
       &lt;/div&gt;
       &lt;div style="
   position: relative;
@@ -263,9 +298,19 @@ exports[`Numerical snapshot test with plain text 1`] = `
 "&gt;Numérique&lt;/span&gt;
     &lt;/span&gt;
   &lt;/div&gt;
-&lt;p style="
+
+  &lt;div style="
+  display: flex;
+"&gt;
+    &lt;span&gt;
+      &lt;p style="
   color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;
+" class="present-question-stem"&gt;
+                      Sample Stem
+                  &lt;/p&gt;
+    &lt;/span&gt;
+  &lt;/div&gt;
+
       &lt;div&gt;
           &lt;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"&gt;
+" placeholder="42 (Correct!), 43 (Incorrect!)"&gt;
       &lt;/div&gt;
       &lt;div style="
   position: relative;

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<NumericalQuestion, 'choices'>;
@@ -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} &plusmn; ${choice.range}`;
+            return `${choice.number} &plusmn; ${choice.range}${formattedFeedbackString}`;
         case isHighLowNumericalAnswer(choice):
-            return `${choice.numberLow}..${choice.numberHigh}`;
+            return `${choice.numberLow}..${choice.numberHigh}${formattedFeedbackString}`;
         default:
             return ``;
     }