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

@@ -55,7 +55,17 @@ exports[`MultipleChoice snapshot test 1`] = `
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -73,13 +83,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -97,7 +119,9 @@ 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 class="feedback-container">InCorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">InCorrect!</span>
           </input>
         </div>
         <div style="
@@ -170,7 +194,17 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -189,13 +223,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -214,13 +260,25 @@ 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 class="feedback-container">Incorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Incorrect!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -238,7 +296,9 @@ 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 class="feedback-container">Image Feedback</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Image Feedback</span>
           </input>
         </div>
         <div style="
@@ -312,7 +372,17 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -330,13 +400,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -354,7 +436,9 @@ 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 class="feedback-container">InCorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">InCorrect!</span>
           </input>
         </div>
         <div style="
@@ -427,7 +511,17 @@ exports[`MultipleChoice snapshot test with image 1`] = `
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -445,13 +539,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -469,13 +575,25 @@ 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 class="feedback-container">Incorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Incorrect!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -493,7 +611,9 @@ 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 class="feedback-container">Image Feedback</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Image Feedback</span>
           </input>
         </div>
         <div style="
@@ -567,7 +687,17 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -586,13 +716,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -611,13 +753,25 @@ 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 class="feedback-container">Incorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Incorrect!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -635,7 +789,9 @@ 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 class="feedback-container">Image Feedback</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Image Feedback</span>
           </input>
         </div>
         <div style="
@@ -709,7 +865,17 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -727,13 +893,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -751,7 +929,9 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         <div style="
@@ -824,7 +1004,17 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -842,13 +1032,25 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
         <div class='multiple-choice-answers-container'>
           <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
-          <span class="answer-weight-container answer-positive-weight">1%</span>
+          <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;
@@ -866,7 +1068,9 @@ 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 class="feedback-container">InCorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">InCorrect!</span>
           </input>
         </div>
         <div style="

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

@@ -50,7 +50,9 @@ 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;
@@ -66,23 +68,9 @@ exports[`Numerical snapshot test with html 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42"><div class="feedback-container">Correct</div><span style="
+" placeholder="42 (Correct), 43 (Incorrect!)">
-  color: hsl(0, 0%, 0%);
+      </div>
-">Réponse: </span><input class="gift-input" type="text" style="
+      <div 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;
@@ -148,7 +136,9 @@ 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;
@@ -164,42 +154,12 @@ exports[`Numerical snapshot test with image 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42"><div class="feedback-container">Correct!
+" placeholder="42 (Correct!
-</div><span style="
+), 43 (Incorrect!
-  color: hsl(0, 0%, 0%);
+), 44 (Also Incorrect! <img alt="" src="https://example.com/cat.jpg">
-">Réponse: </span><input class="gift-input" type="text" style="
+)">
-  display: inline-block;
+      </div>
-  padding: 0.375rem 0.75rem;
+      <div style="
-  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;
@@ -265,7 +225,9 @@ 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;
@@ -281,23 +243,9 @@ exports[`Numerical snapshot test with moodle 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42"><div class="feedback-container">Correct!</div><span style="
+" placeholder="42 (Correct!), 43 (Incorrect!)">
-  color: hsl(0, 0%, 0%);
+      </div>
-">Réponse: </span><input class="gift-input" type="text" style="
+      <div 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;
@@ -362,7 +310,9 @@ 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;
@@ -378,23 +328,9 @@ exports[`Numerical snapshot test with plain text 1`] = `
   font-size: inherit;
   line-height: inherit;
   width: 90%;
-" placeholder="42"><div class="feedback-container">Correct!</div><span style="
+" placeholder="42 (Correct!), 43 (Incorrect!)">
-  color: hsl(0, 0%, 0%);
+      </div>
-">Réponse: </span><input class="gift-input" type="text" style="
+      <div 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,7 +159,9 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
@@ -183,7 +185,9 @@ 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 class="feedback-container">Incorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Incorrect!</span>
           </input>
         </div>
         <div style="
@@ -274,7 +278,9 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
@@ -298,7 +304,9 @@ 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 class="feedback-container">Incorrect!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Incorrect!</span>
           </input>
         </div>
         <div style="
@@ -389,7 +397,9 @@ 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 class="feedback-container">Correct!</span>
+          <span style="
+      color: hsl(180, 15%, 41%);
+    ">Correct!</span>
           </input>
         </div>
         
@@ -413,7 +423,9 @@ 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 class="feedback-container">Incorrect!</span>
+          <span style="
+      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 } from '../constants';
+import { ParagraphStyle, theme } from '../constants';
 import { MultipleChoiceQuestion, TextChoice } from 'gift-pegjs';
 
 type MultipleChoiceAnswerOptions = TemplateOptions & Pick<MultipleChoiceQuestion, 'choices'>;
@@ -12,6 +12,7 @@ type AnswerFeedbackOptions = TemplateOptions & Pick<TextChoice, 'formattedFeedba
 
 interface AnswerWeightOptions extends TemplateOptions {
     weight: TextChoice['weight'];
+    correct: TextChoice['isCorrect'];
 }
 
 export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoiceAnswerOptions) {
@@ -39,7 +40,7 @@ export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoic
           <input class="gift-input" type="${
               isMultipleAnswer ? 'checkbox' : 'radio'
           }" id="${inputId}" name="${id}">
-          ${AnswerWeight({ weight: weight })}
+          ${AnswerWeight({ correct: isCorrectOption, weight: weight })}
             <label style="${CustomLabel} ${ParagraphStyle(state.theme)}" for="${inputId}">
             ${FormattedTextTemplate(formattedText)}
             </label>
@@ -54,36 +55,36 @@ export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoic
     return `${prompt}${result}`;
 }
 
-function AnswerWeight({ weight }: AnswerWeightOptions): string {
+function AnswerWeight({ weight, correct }: 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 ? `<span class="answer-weight-container ${weight > 0 ? 'answer-positive-weight' : 'answer-zero-or-less-weight'}">${weight}%</span>` : ``;
+    return weight
-        // ? `<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 class="feedback-container">${FormattedTextTemplate(formattedFeedback)}</span>` : ``;
+    return formattedFeedback ? `<span style="${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 { NumericalAnswer, NumericalQuestion, TextFormat } from 'gift-pegjs';
+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';
@@ -25,63 +25,32 @@ export default function NumericalTemplate({
                 title: title
             }),
             StemTemplate({formattedStem}),
-            NumericalAnswers2({ choices: choices }),
+            NumericalAnswers({ choices: choices }),
             formattedGlobalFeedback ? GlobalFeedback(formattedGlobalFeedback) : ''
         ]
     })}`;
 }
 
-function NumericalAnswers2({ choices }: NumericalAnswerOptions): string {
+function NumericalAnswers({ choices }: NumericalAnswerOptions): string {
-
+    const placeholder = isMultipleNumericalAnswer(choices[0])
-    // for each choice, return a separate <input> for each answer - answer should show weight and feedback
+    ? choices.map(choice => {
-    const answers = choices.map(choice => {
+        console.log(JSON.stringify(choice)); 
-        if (isMultipleNumericalAnswer(choice)) {
+        const c = choice as MultipleNumericalAnswer; 
-            return { answer: Answer(choice.answer), weight: choice.weight, feedback: choice.formattedFeedback };
+        return Answer(c.answer, c.formattedFeedback)
-        } else {
+    }).join(', ')
-            return { answer: Answer(choice) };
+    : Answer(choices[0]);
-        }
-    });
-
-    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;
 
+    return `
+      <div>
+          <span style="${ParagraphStyle(
+              state.theme
+          )}">Réponse: </span><input class="gift-input" type="text" style="${InputStyle(
+        state.theme
+    )}" placeholder="${placeholder}">
+      </div>
+      `;
 }
 
-// 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)})` : '';
     switch (true) {

client/src/components/QuestionsDisplay/questionStyle.css

@@ -76,40 +76,6 @@
     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;
@@ -122,14 +88,6 @@
 
 .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 {