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

* fix: convert mako to django templates for problem block

* fix: pylint issues

xmodule/capa/templates/imageinput.html

@@ -1,35 +1,35 @@
-<%page expression_filter="h"/>
-<div class="imageinput capa_inputtype" id="inputtype_${id}">
+{% load static %}
+<div class="imageinput capa_inputtype" id="inputtype_{{ id }}">
   <input
     type="hidden"
     class="imageinput"
-    src="${src}"
-    name="input_${id}"
-    id="input_${id}"
-    value="${value}"
+    src="{{ src }}"
+    name="input_{{ id }}"
+    id="input_{{ id }}"
+    value="{{ value }}"
   />
   <div style="position:relative;">
     <div
-      id="imageinput_${id}"
+      id="imageinput_{{ id }}"
       style="
-        background-image: url('${src}');
-        width: ${width}px;
-        height: ${height}px;
+        background-image: url('{{ src }}');
+        width: {{ width }}px;
+        height: {{ height }}px;
         position: relative;
         left: 0;
         top: 0;"
     >
       <img
-        src="${STATIC_URL}images/green-pointer.png"
-        id="cross_${id}"
-        style="position: absolute; top: ${gy}px; left: ${gx}px;"
+        src="{% static 'images/green-pointer.png' %}"
+        id="cross_{{ id }}"
+        style="position: absolute; top: {{ gy }}px; left: {{ gx }}px;"
         alt="Selection indicator"
       />
     </div>
     <div
-      data-width="${width}"
-      data-height="${height}"
-      id="answer_${id}"
+      data-width="{{ width }}"
+      data-height="{{ height }}"
+      id="answer_{{ id }}"
       style="
         position: absolute;
         left: 0;
@@ -38,8 +38,8 @@
   </div>
 
   <script type="text/javascript" charset="utf-8">
-    (new ImageInput('${id | n, decode.utf8}'));
+    (new ImageInput('{{ id }}'));
   </script>
 
-  <%include file="status_span.html" args="status=status, status_id=id"/>
+  {% include "status_span.html" with status=status status_id=id %}
 </div>