Convert Problem Block Mako Templates to Django Templates (#37570)

* fix: convert mako to django templates for problem block

* fix: pylint issues

xmodule/capa/templates/jsinput.html

@@ -1,59 +1,57 @@
-<%page expression_filter="h"/>
-<%! from openedx.core.djangolib.markup import HTML %>
-<div id="inputtype_${id}" class="jsinput"
-    data="${gradefn}"
-    % if saved_state:
-    data-stored="${saved_state}"
-    % endif
-    % if initial_state:
-    data-initial-state="${initial_state}"
-    % endif
-    % if get_statefn:
-    data-getstate="${get_statefn}"
-    % endif
-    % if set_statefn:
-    data-setstate="${set_statefn}"
-    % endif
-    % if sop:
-    data-sop="${sop}"
-    % endif
+<div id="inputtype_{{ id }}" class="jsinput"
+    data="{{ gradefn }}"
+    {% if saved_state %}
+    data-stored="{{ saved_state }}"
+    {% endif %}
+    {% if initial_state %}
+    data-initial-state="{{ initial_state }}"
+    {% endif %}
+    {% if get_statefn %}
+    data-getstate="{{ get_statefn }}"
+    {% endif %}
+    {% if set_statefn %}
+    data-setstate="{{ set_statefn }}"
+    {% endif %}
+    {% if sop %}
+    data-sop="{{ sop }}"
+    {% endif %}
     data-processed="false"
     >
 
-  <div class="script_placeholder" data-src="${jschannel_loader}"/>
-  <div class="script_placeholder" data-src="${jsinput_loader}"/>
-  % if status in ['unsubmitted', 'submitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
-  <div class="${status.classname}">
-  % endif
+  <div class="script_placeholder" data-src="{{ jschannel_loader }}"/>
+  <div class="script_placeholder" data-src="{{ jsinput_loader }}"/>
+  {% if status == 'unsubmitted' or status == 'submitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
+  <div class="{{ status.classname }}">
+  {% endif %}
 
-  <iframe name="iframe_${id}"
-      id="iframe_${id}"
+  <iframe name="iframe_{{ id }}"
+      id="iframe_{{ id }}"
       sandbox="allow-scripts allow-popups allow-same-origin allow-forms allow-pointer-lock allow-downloads"
       seamless="seamless"
       frameborder="0"
-      src="${html_file}"
-      height="${height}"
-      width="${width}"
-      title="${title}"
+      src="{{ html_file }}"
+      height="{{ height }}"
+      width="{{ width }}"
+      title="{{ title }}"
       />
-  <input type="hidden" name="input_${id}" id="input_${id}"
+  <input type="hidden" name="input_{{ id }}" id="input_{{ id }}"
     waitfor=""
-    value="${value}"/>
+    value="{{ value }}"/>
 
   <br/>
-    <p id="answer_${id}" class="answer"></p>
+    <p id="answer_{{ id }}" class="answer"></p>
 
     <div class="indicator-container">
-        <%include file="status_span.html" args="status=status, status_id=id"/>
+        {% include "status_span.html" with status=status status_id=id %}
     </div>
 
     <div class="error_message" style="padding: 5px 5px 5px 5px; background-color:#FA6666; height:60px;width:400px; display: none"></div>
 
-  % if status in ['unsubmitted', 'submitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
+  {% if status == 'unsubmitted' or status == 'submitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
   </div>
-  % endif
+  {% endif %}
 
-  % if msg:
-      <span class="message" tabindex="-1">${HTML(msg)}</span>
-  % endif
+  {% if msg %}
+      <span class="message" tabindex="-1">{{ msg|safe }}</span>
+  {% endif %}
 </div>