BLD-21: Show answer for imageresponse.

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Show answer for imageresponse. BLD-21.
+
 Blades: LTI additional Python tests. LTI must use HTTPS for
 lis_outcome_service_url. BLD-564.
 

common/lib/capa/capa/responsetypes.py

@@ -2167,7 +2167,7 @@ class ImageResponse(LoncapaResponse):
         answers = {}
         for ielt in self.ielements:
             ie_id = ielt.get('id')
-            answers[ie_id] = (ielt.get('rectangle'), ielt.get('regions'))
+            answers[ie_id] = {'rectangle': ielt.get('rectangle'), 'regions': ielt.get('regions')}
 
         return answers
 

common/lib/capa/capa/templates/imageinput.html

-<span>
-    <input
-        type="hidden"
-        class="imageinput"
-        src="${src}"
-        name="input_${id}"
-        id="input_${id}"
-        value="${value}"
-    />
-
+<div class="imageinput capa_inputtype" id="inputtype_${id}">
+  <input
+    type="hidden"
+    class="imageinput"
+    src="${src}"
+    name="input_${id}"
+    id="input_${id}"
+    value="${value}"
+  />
+  <div style="position:relative;">
     <div
-        id="imageinput_${id}"
-        style="background-image: url('${src}'); width: ${width}px; height: ${height}px; position: relative; left: 0; top: 0;"
+      id="imageinput_${id}"
+      style="
+        background-image: url('${src}');
+        width: ${width}px;
+        height: ${height}px;
+        position: relative;
+        left: 0;
+        top: 0;"
     >
-        <img
-            src="${STATIC_URL}green-pointer.png"
-            id="cross_${id}"
-            style="position: absolute; top: ${gy}px; left: ${gx}px;"
-        />
+      <img
+        src="${STATIC_URL}green-pointer.png"
+        id="cross_${id}"
+        style="position: absolute; top: ${gy}px; left: ${gx}px;"
+      />
     </div>
+    <div
+      data-width="${width}"
+      data-height="${height}"
+      id="answer_${id}"
+      style="
+        position: absolute;
+        left: 0;
+        top: 0;"
+    ></div>
+  </div>
 
-    <script type="text/javascript" charset="utf-8">
-        (new ImageInput('${id}'));
-    </script>
+  <script type="text/javascript" charset="utf-8">
+    (new ImageInput('${id}'));
+  </script>
 
-    % if status == 'unsubmitted':
-        <span
-            class="unanswered"
-            style="display: inline-block;"
-            id="status_${id}"
-            aria-describedby="input_${id}"
-        >
-            <span class="sr">Status: unanswered</span>
-        </span>
-    % elif status == 'correct':
-        <span
-            class="correct"
-            id="status_${id}"
-            aria-describedby="input_${id}"
-        >
-            <span class="sr">Status: correct</span>
-        </span>
-    % elif status == 'incorrect':
-        <span
-            class="incorrect"
-            id="status_${id}"
-            aria-describedby="input_${id}"
-        >
-            <span class="sr">Status: incorrect</span>
-        </span>
-    % elif status == 'incomplete':
-        <span
-            class="incorrect"
-            id="status_${id}"
-            aria-describedby="input_${id}"
-        >
-            <span class="sr">Status: incorrect</span>
-        </span>
-    % endif
-</span>
+  % if status == 'unsubmitted':
+      <span
+        class="unanswered"
+        style="display: inline-block;"
+        id="status_${id}"
+        aria-describedby="input_${id}"
+      >
+        <span class="sr">Status: unanswered</span>
+      </span>
+  % elif status == 'correct':
+      <span
+        class="correct"
+        id="status_${id}"
+        aria-describedby="input_${id}"
+      >
+        <span class="sr">Status: correct</span>
+      </span>
+  % elif status == 'incorrect':
+      <span
+        class="incorrect"
+        id="status_${id}"
+        aria-describedby="input_${id}"
+      >
+        <span class="sr">Status: incorrect</span>
+      </span>
+  % elif status == 'incomplete':
+      <span
+        class="incorrect"
+        id="status_${id}"
+        aria-describedby="input_${id}"
+      >
+        <span class="sr">Status: incorrect</span>
+      </span>
+  % endif
+</div>

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -300,11 +300,11 @@ class @Problem
         # inputtype functions.
 
         @el.find(".capa_inputtype").each (index, inputtype) =>
-            classes = $(inputtype).attr('class').split(' ')
-            for cls in classes
-              display = @inputtypeDisplays[$(inputtype).attr('id')]
-              showMethod = @inputtypeShowAnswerMethods[cls]
-              showMethod(inputtype, display, answers) if showMethod?
+          classes = $(inputtype).attr('class').split(' ')
+          for cls in classes
+            display = @inputtypeDisplays[$(inputtype).attr('id')]
+            showMethod = @inputtypeShowAnswerMethods[cls]
+            showMethod(inputtype, display, answers) if showMethod?
 
         if MathJax?
           @el.find('.problem > div').each (index, element) =>
@@ -482,6 +482,69 @@ class @Problem
       for choice in answer
         element.find("section#forinput#{choice}").addClass 'choicetextgroup_show_correct'
 
+    imageinput: (element, display, answers) =>
+      types =
+        rectangle: (coords) =>
+          reg = /^\(([0-9]+),([0-9]+)\)-\(([0-9]+),([0-9]+)\)$/
+          rects = coords.replace(/\s*/g, '').split(/;/)
+
+          $.each rects, (index, rect) =>
+            abs = Math.abs
+            points = reg.exec(rect)
+            if points
+              # width
+              width = abs(points[3] - points[1])
+              # height
+              height = abs(points[4] - points[2])
+
+              ctx.rect(points[1], points[2], width, height)
+
+          ctx.stroke()
+          ctx.fill()
+
+        regions: (coords) =>
+          parseCoords = (coords) =>
+            reg = JSON.parse(coords)
+
+            if typeof reg[0][0] is undefined
+              reg = [reg]
+
+            return reg
+
+          $.each parseCoords(coords), (index, regions) =>
+            ctx.beginPath()
+            $.each regions, (index, points) =>
+              if index is 0
+                ctx.moveTo(points[0], points[1])
+              else
+                ctx.lineTo(points[0], points[1]);
+
+            ctx.closePath()
+            ctx.stroke()
+            ctx.fill()
+
+      element = $(element)
+      id = element.attr('id').replace(/inputtype_/,'')
+      container = element.find("#answer_#{id}")
+      canvas = document.createElement('canvas')
+      canvas.width = container.data('width')
+      canvas.height = container.data('height')
+
+      if canvas.getContext
+        ctx = canvas.getContext('2d')
+      else
+        return console.log 'Canvas is not supported.'
+
+      ctx.fillStyle = 'rgba(255,255,255,.3)';
+      ctx.strokeStyle = "#FF0000";
+      ctx.lineWidth = "2";
+
+      $.each answers, (key, answer) =>
+        $.each answer, (key, value) =>
+          types[key](value) if types[key]?
+
+      container.html(canvas)
+
   inputtypeHideAnswerMethods:
     choicegroup: (element, display) =>
       element = $(element)