separate numerical answers, weight, feedback (tf and mc) snapshot updates, css

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

@@ -83,9 +83,7 @@ exports[`MultipleChoice snapshot test 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -119,9 +117,7 @@ exports[`MultipleChoice snapshot test 1`] = `
     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="
+          <span class="feedback-container">InCorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">InCorrect!</span>
           </input>
         </div>
         <div style="
@@ -223,9 +219,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -260,9 +254,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
     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="
+          <span class="feedback-container">Incorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">Incorrect!</span>
           </input>
         </div>
         
@@ -296,9 +288,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
     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="
+          <span class="feedback-container">Image Feedback</span>
-      color: hsl(180, 15%, 41%);
-    ">Image Feedback</span>
           </input>
         </div>
         <div style="
@@ -400,9 +390,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -436,9 +424,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
     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="
+          <span class="feedback-container">InCorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">InCorrect!</span>
           </input>
         </div>
         <div style="
@@ -539,9 +525,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -575,9 +559,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
     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="
+          <span class="feedback-container">Incorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">Incorrect!</span>
           </input>
         </div>
         
@@ -611,9 +593,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
     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="
+          <span class="feedback-container">Image Feedback</span>
-      color: hsl(180, 15%, 41%);
-    ">Image Feedback</span>
           </input>
         </div>
         <div style="
@@ -716,9 +696,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -753,9 +731,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
     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="
+          <span class="feedback-container">Incorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">Incorrect!</span>
           </input>
         </div>
         
@@ -789,9 +765,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
     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="
+          <span class="feedback-container">Image Feedback</span>
-      color: hsl(180, 15%, 41%);
-    ">Image Feedback</span>
           </input>
         </div>
         <div style="
@@ -893,9 +867,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -929,9 +901,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         <div style="
@@ -1032,9 +1002,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -1068,9 +1036,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
     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="
+          <span class="feedback-container">InCorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">InCorrect!</span>
           </input>
         </div>
         <div style="

client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap

@@ -50,9 +50,7 @@ exports[`Numerical snapshot test with html 1`] = `
                   </p>
     </span>
   </div>
-
+<div><span style="
-      <div>
-          <span style="
   color: hsl(0, 0%, 0%);
 ">Réponse: </span><input class="gift-input" type="text" style="
   display: inline-block;
@@ -68,9 +66,23 @@ exports[`Numerical snapshot test with html 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42 (Correct), 43 (Incorrect!)">
+" placeholder="42"><div class="feedback-container">Correct</div><span style="
-      </div>
+  color: hsl(0, 0%, 0%);
-      <div style="
+">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="43"><div class="feedback-container">Incorrect!</div></div><div style="
   position: relative;
   margin-top: 1rem;
   padding: 0 1rem;
@@ -136,9 +148,7 @@ exports[`Numerical snapshot test with image 1`] = `
                   </p>
     </span>
   </div>
-
+<div><span style="
-      <div>
-          <span style="
   color: hsl(0, 0%, 0%);
 ">Réponse: </span><input class="gift-input" type="text" style="
   display: inline-block;
@@ -154,12 +164,42 @@ exports[`Numerical snapshot test with image 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42 (Correct!
+" placeholder="42"><div class="feedback-container">Correct!
-), 43 (Incorrect!
+</div><span style="
-), 44 (Also Incorrect! <img alt="" src="https://example.com/cat.jpg">
+  color: hsl(0, 0%, 0%);
-)">
+">Réponse: </span><input class="gift-input" type="text" style="
-      </div>
+  display: inline-block;
-      <div style="
+  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="43"><div class="feedback-container">Incorrect!
+</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="44"><div class="feedback-container">Also Incorrect! <img alt="" src="https://example.com/cat.jpg">
+</div></div><div style="
   position: relative;
   margin-top: 1rem;
   padding: 0 1rem;
@@ -225,9 +265,7 @@ exports[`Numerical snapshot test with moodle 1`] = `
                   </p>
     </span>
   </div>
-
+<div><span style="
-      <div>
-          <span style="
   color: hsl(0, 0%, 0%);
 ">Réponse: </span><input class="gift-input" type="text" style="
   display: inline-block;
@@ -243,9 +281,23 @@ exports[`Numerical snapshot test with moodle 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42 (Correct!), 43 (Incorrect!)">
+" placeholder="42"><div class="feedback-container">Correct!</div><span style="
-      </div>
+  color: hsl(0, 0%, 0%);
-      <div style="
+">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="43"><div class="feedback-container">Incorrect!</div></div><div style="
   position: relative;
   margin-top: 1rem;
   padding: 0 1rem;
@@ -310,9 +362,7 @@ exports[`Numerical snapshot test with plain text 1`] = `
                   </p>
     </span>
   </div>
-
+<div><span style="
-      <div>
-          <span style="
   color: hsl(0, 0%, 0%);
 ">Réponse: </span><input class="gift-input" type="text" style="
   display: inline-block;
@@ -328,9 +378,23 @@ exports[`Numerical snapshot test with plain text 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42 (Correct!), 43 (Incorrect!)">
+" placeholder="42"><div class="feedback-container">Correct!</div><span style="
-      </div>
+  color: hsl(0, 0%, 0%);
-      <div style="
+">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="43"><div class="feedback-container">Incorrect!</div></div><div style="
   position: relative;
   margin-top: 1rem;
   padding: 0 1rem;

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

@@ -159,9 +159,7 @@ exports[`TrueFalse snapshot test with katex 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -185,9 +183,7 @@ exports[`TrueFalse snapshot test with katex 1`] = `
     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="
+          <span class="feedback-container">Incorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">Incorrect!</span>
           </input>
         </div>
         <div style="
@@ -278,9 +274,7 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -304,9 +298,7 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
     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="
+          <span class="feedback-container">Incorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">Incorrect!</span>
           </input>
         </div>
         <div style="
@@ -397,9 +389,7 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
     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="
+          <span class="feedback-container">Correct!</span>
-      color: hsl(180, 15%, 41%);
-    ">Correct!</span>
           </input>
         </div>
         
@@ -423,9 +413,7 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
     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="
+          <span class="feedback-container">Incorrect!</span>
-      color: hsl(180, 15%, 41%);
-    ">Incorrect!</span>
           </input>
         </div>
         <div style="

client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts

@@ -3,7 +3,7 @@ import { TemplateOptions } from './types';
 import {FormattedTextTemplate} from './TextTypeTemplate';
 import AnswerIcon from './AnswerIconTemplate';
 import { state } from '.';
-import { ParagraphStyle, theme } from '../constants';
+import { ParagraphStyle } from '../constants';
 import { MultipleChoiceQuestion, TextChoice } from 'gift-pegjs';
 
 type MultipleChoiceAnswerOptions = TemplateOptions & Pick<MultipleChoiceQuestion, 'choices'>;
@@ -12,7 +12,6 @@ type AnswerFeedbackOptions = TemplateOptions & Pick<TextChoice, 'formattedFeedba
 
 interface AnswerWeightOptions extends TemplateOptions {
     weight: TextChoice['weight'];
-    correct: TextChoice['isCorrect'];
 }
 
 export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoiceAnswerOptions) {
@@ -40,7 +39,7 @@ export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoic
           <input class="gift-input" type="${
               isMultipleAnswer ? 'checkbox' : 'radio'
           }" id="${inputId}" name="${id}">
-          ${AnswerWeight({ correct: isCorrectOption, weight: weight })}
+          ${AnswerWeight({ weight: weight })}
             <label style="${CustomLabel} ${ParagraphStyle(state.theme)}" for="${inputId}">
             ${FormattedTextTemplate(formattedText)}
             </label>
@@ -55,36 +54,36 @@ export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoic
     return `${prompt}${result}`;
 }
 
-function AnswerWeight({ weight, correct }: AnswerWeightOptions): string {
+function AnswerWeight({ weight }: AnswerWeightOptions): string {
-    const Container = `
+  //   const Container = `
-      box-shadow: 0px 1px 1px ${theme(state.theme, 'gray400', 'black900')};
+  //     box-shadow: 0px 1px 1px ${theme(state.theme, 'gray400', 'black900')};
-      border-radius: 3px;
+  //     border-radius: 3px;
-      padding-left: 0.2rem;
+  //     padding-left: 0.2rem;
-      padding-right: 0.2rem;
+  //     padding-right: 0.2rem;
-      padding-top: 0.05rem;
+  //     padding-top: 0.05rem;
-      padding-bottom: 0.05rem;
+  //     padding-bottom: 0.05rem;
-    `;
+  //   `;
 
-    const CorrectWeight = `
+  //   const CorrectWeight = `
-      color: ${theme(state.theme, 'green700', 'green100')};
+  //     color: ${theme(state.theme, 'green700', 'green100')};
-      background-color: ${theme(state.theme, 'green100', 'greenGray700')};
+  //     background-color: ${theme(state.theme, 'green100', 'greenGray700')};
-    `;
+  //   `;
-    const IncorrectWeight = `
+  //   const IncorrectWeight = `
-    color: ${theme(state.theme, 'beige600', 'beige100')};
+  //   color: ${theme(state.theme, 'beige600', 'beige100')};
-    background-color: ${theme(state.theme, 'beige300', 'beigeGray800')};
+  //   background-color: ${theme(state.theme, 'beige300', 'beigeGray800')};
-  `;
+  // `;
 
-    return weight
+    return weight ? `<span class="answer-weight-container ${weight > 0 ? 'answer-positive-weight' : 'answer-zero-or-less-weight'}">${weight}%</span>` : ``;
-        ? `<span style="${Container} ${
+        // ? `<span style="${Container} ${
-              correct ? `${CorrectWeight}` : `${IncorrectWeight}`
+        //       correct ? `${CorrectWeight}` : `${IncorrectWeight}`
-          }">${weight}%</span>`
+        //   }">${weight}%</span>`
-        : ``;
+        // : ``;
 }
 
 function AnswerFeedback({ formattedFeedback }: AnswerFeedbackOptions): string {
-    const Container = `
+    // const Container = `
-      color: ${theme(state.theme, 'teal700', 'gray700')};
+    //   color: ${theme(state.theme, 'teal700', 'gray700')};
-    `;
+    // `;
 
-    return formattedFeedback ? `<span style="${Container}">${FormattedTextTemplate(formattedFeedback)}</span>` : ``;
+    return formattedFeedback ? `<span class="feedback-container">${FormattedTextTemplate(formattedFeedback)}</span>` : ``;
 }

client/src/components/GiftTemplate/templates/NumericalTemplate.ts

@@ -4,7 +4,7 @@ import Title from './TitleTemplate';
 import GlobalFeedback from './GlobalFeedbackTemplate';
 import { ParagraphStyle, InputStyle } from '../constants';
 import { state } from '.';
-import { MultipleNumericalAnswer, NumericalAnswer, NumericalQuestion, TextFormat } from 'gift-pegjs';
+import { NumericalAnswer, NumericalQuestion, TextFormat } from 'gift-pegjs';
 import { isHighLowNumericalAnswer, isMultipleNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer } from 'gift-pegjs/typeGuards';
 import StemTemplate from './StemTemplate';
 import { FormattedTextTemplate } from './TextTypeTemplate';
@@ -25,31 +25,62 @@ export default function NumericalTemplate({
                 title: title
             }),
             StemTemplate({formattedStem}),
-            NumericalAnswers({ choices: choices }),
+            NumericalAnswers2({ choices: choices }),
             formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ''
         ]
     })}`;
 }
 
-function NumericalAnswers({ choices }: NumericalAnswerOptions): string {
+function NumericalAnswers2({ choices }: NumericalAnswerOptions): string {
-    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 `
+    // for each choice, return a separate <input> for each answer - answer should show weight and feedback
-      <div>
+    const answers = choices.map(choice => {
-          <span style="${ParagraphStyle(
+        if (isMultipleNumericalAnswer(choice)) {
-              state.theme
+            return { answer: Answer(choice.answer), weight: choice.weight, feedback: choice.formattedFeedback };
-          )}">Réponse: </span><input class="gift-input" type="text" style="${InputStyle(
+        } else {
-        state.theme
+            return { answer: Answer(choice) };
-    )}" placeholder="${placeholder}">
-      </div>
-      `;
         }
+    });
+
+    let result = '<div>';
+
+    answers.forEach(answer => {
+        const weight = answer.weight ? 
+        `<span class="numerical-answer-weight-container ${answer.weight > 0 ? 'answer-positive-weight' : 'answer-zero-or-less-weight'}">${answer.weight}%</span>` : 
+        ''
+        result += 
+            `<span style="${ParagraphStyle(state.theme)}">Réponse: </span>`
+            + `<input class="gift-input" type="text" style="${InputStyle(state.theme)}" placeholder="${answer.answer}">`
+            + weight
+            + (answer.feedback ? `<div class="feedback-container">${FormattedTextTemplate(answer.feedback)}</div>` : '');
+    });
+
+    result += '</div>';
+
+    return result;
+
+}
+
+// function NumericalAnswers({ choices }: NumericalAnswerOptions): string {
+//     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]);
+
+//     // TODO return a separate <input> for each answer - answer should show weight and feedback
+//     return `
+//       <div>
+//           <span style="${ParagraphStyle(
+//               state.theme
+//           )}">Réponse: </span><input class="gift-input" type="text" style="${InputStyle(
+//         state.theme
+//     )}" placeholder="${placeholder}">
+//       </div>
+//       `;
+// }
 
 function Answer(choice: NumericalAnswer, formattedFeedback?: TextFormat): string {
     const formattedFeedbackString = formattedFeedback ? ` (${FormattedTextTemplate(formattedFeedback)})` : '';

client/src/components/QuestionsDisplay/questionStyle.css

@@ -76,6 +76,40 @@
     box-shadow: 0 0 1px #3a3a3a;
 }
 
+.answer-weight-container {
+    display: flow;
+    /* float: left; */
+    box-shadow: 0px 1px 1px #3a3a3a;
+    border-radius: 3px;
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    padding-top: 0.05rem;
+    padding-bottom: 0.05rem;
+}
+
+.numerical-answer-weight-container {
+    display: flow;
+    float: left;
+    box-shadow: 0px 1px 1px #3a3a3a;
+    border-radius: 3px;
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    padding-top: 0.05rem;
+    padding-bottom: 0.05rem;
+}
+
+.answer-positive-weight {
+    background-color: hsl(
+        120, 100%, 90%
+    );
+}
+
+.answer-zero-or-less-weight {
+    background-color: hsl(
+        0, 100%, 90%
+    );
+}
+
 .answer-text.selected {
     background-color: var(--main-color);
     color: white;
@@ -88,6 +122,14 @@
 
 .feedback-container {
     margin-left: 1.1rem;
+    display: flow;
+    position: relative;
+    padding: 0 0.5rem;
+    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%);
 }
 
 .global-feedback {