Merge pull request #13210 from edx/alisan/fix-TNL-4584-trailing-text

[TNL-4584] capa numerical input trailing text

common/lib/capa/capa/templates/formulaequationinput.html

@@ -1,15 +1,17 @@
+<%page expression_filter="h"/>
+<%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = 'style="display:inline-block;vertical-align:top"' if inline else "" %>
 <section id="formulaequationinput_${id}" class="inputtype formulaequationinput" ${doinline}>
   <div class="${status.classname}" id="status_${id}">
     <input type="text" name="input_${id}" id="input_${id}"
-        data-input-id="${id}" value="${value|h}"
+        data-input-id="${id}" value="${value}"
         aria-label="${label}"
         aria-describedby="${id}_status"
         % if size:
         size="${size}"
         % endif
         />
-    ${trailing_text | h}
+    <span class="trailing_text">${trailing_text}</span>
 
       <span class="status" id="${id}_status" data-tooltip="${status.display_tooltip}">
         <span class="sr">
@@ -28,6 +30,6 @@
   <div class="script_placeholder" data-src="${previewer}"/>
 
   % if msg:
-      <span class="message">${msg|n}</span>
+      <span class="message">${HTML(msg)}</span>
   % endif
 </section>

common/lib/capa/capa/templates/textline.html

@@ -1,3 +1,5 @@
+<%page expression_filter="h"/>
+<%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = "inline" if inline else "" %>
 
 <div id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline" >
@@ -14,7 +16,7 @@
       <div style="display:none;" name="${hidden}" inputid="input_${id}" />
     % endif
 
-  <input type="text" name="input_${id}" id="input_${id}" aria-label="${label}" aria-describedby="answer_${id}" value="${value|h}"
+  <input type="text" name="input_${id}" id="input_${id}" aria-label="${label}" aria-describedby="answer_${id}" value="${value}"
         % if do_math:
             class="math"
         % endif
@@ -25,7 +27,7 @@
             style="display:none;"
         % endif
    />
-   ${trailing_text | h}
+   <span class="trailing_text">${trailing_text}</span>
 
       <span class="status" 
          %if status != 'unsubmitted':
@@ -33,7 +35,7 @@
          aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}">
         <span class="sr">
           %if value:
-            ${value|h}
+            ${value}
           % else:
             ${label}
           %endif
@@ -55,7 +57,7 @@
 % endif
 
   % if msg:
-      <span class="message">${msg|n}</span>
+      <span class="message">${HTML(msg)}</span>
   % endif
 
 </div>

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -819,10 +819,8 @@ div.problem {
   }
 
   .capa_inputtype.textline.text-input-dynamath, .inputtype.formulaequationinput {
-    display: inline-block;
-
-    input {
-      width: calc(100% - 45px);
+    .trailing_text {
+      display: inline-block;
     }
   }
 }