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.
 

cms/static/coffee/spec/main.coffee

@@ -34,6 +34,7 @@ requirejs.config({
         "sinon": "xmodule_js/common_static/js/vendor/sinon-1.7.1",
         "squire": "xmodule_js/common_static/js/vendor/Squire",
         "jasmine-jquery": "xmodule_js/common_static/js/vendor/jasmine-jquery",
+        "jasmine-imagediff": "xmodule_js/common_static/js/vendor/jasmine-imagediff",
         "jasmine-stealth": "xmodule_js/common_static/js/vendor/jasmine-stealth",
         "jasmine.async": "xmodule_js/common_static/js/vendor/jasmine.async",
         "draggabilly": "xmodule_js/common_static/js/vendor/draggabilly.pkgd",
@@ -151,6 +152,9 @@ requirejs.config({
         "jasmine-jquery": {
             deps: ["jasmine"]
         },
+        "jasmine-imagediff": {
+            deps: ["jasmine"]
+        },
         "jasmine-stealth": {
             deps: ["jasmine"]
         },

cms/static/js_test.yml

@@ -47,6 +47,7 @@ lib_paths:
     - xmodule_js/common_static/js/vendor/Squire.js
     - xmodule_js/common_static/js/vendor/jasmine-jquery.js
     - xmodule_js/common_static/js/vendor/jasmine-stealth.js
+    - xmodule_js/common_static/js/vendor/jasmine-imagediff.js
     - xmodule_js/common_static/js/vendor/jasmine.async.js
     - xmodule_js/common_static/js/vendor/jquery.maskedinput.min.js
     - xmodule_js/common_static/js/vendor/CodeMirror/codemirror.js

cms/static/js_test_squire.yml

@@ -46,6 +46,7 @@ lib_paths:
     - xmodule_js/common_static/js/vendor/Squire.js
     - xmodule_js/common_static/js/vendor/jasmine-jquery.js
     - xmodule_js/common_static/js/vendor/jasmine-stealth.js
+    - xmodule_js/common_static/js/vendor/jasmine-imagediff.js
     - xmodule_js/common_static/js/vendor/jasmine.async.js
     - xmodule_js/common_static/js/vendor/CodeMirror/codemirror.js
     - xmodule_js/src/xmodule.js

common/lib/capa/capa/responsetypes.py

@@ -2167,7 +2167,7 @@ def get_answers(self):
         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

@@ -1,60 +1,76 @@
-<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/fixtures/imageinput.html

@@ -2,7 +2,7 @@
 <!-- ${width}  = 300   -->
 <!-- ${height} = 400   -->
 
-<span>
+<div class="imageinput capa_inputtype" id="inputtype_12345">
     <input
         type="hidden"
         class="imageinput"
@@ -12,13 +12,17 @@
         value=""
     />
 
-    <div
-        id="imageinput_12345"
-        style="width: 300px; height: 400px; position: relative; left: 0; top: 0; visibility: hidden;"
-    >
-        <!-- image will go here -->
+    <div style="position:relative;">
+        <div
+            id="imageinput_12345"
+            style="width: 300px; height: 400px; position: relative; left: 0; top: 0; visibility: hidden;"
+        >
+            <!-- image will go here -->
+        </div>
+        <div id="answer_12345" data-width="100" data-height="100"></div>
     </div>
 
+
     <!-- status == 'unsubmitted' -->
         <span
             class="unanswered"
@@ -28,4 +32,4 @@
         >
             <span class="sr">Status: unanswered</span>
         </span>
-</span>
+</div>

common/lib/xmodule/xmodule/js/js_test.yml

@@ -36,6 +36,7 @@ lib_paths:
     - common_static/coffee/src/ajax_prefix.js
     - common_static/coffee/src/logger.js
     - common_static/js/vendor/jasmine-jquery.js
+    - common_static/js/vendor/jasmine-imagediff.js
     - common_static/js/vendor/require.js
     - RequireJS-namespace-undefine.js
     - common_static/js/vendor/jquery.min.js

common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee

@@ -303,6 +303,102 @@ describe 'Problem', ->
           expect($('input#1_2_1_choiceinput_2bc').attr('disabled')).not.toEqual('disabled')
           expect($('input#1_2_1').attr('disabled')).not.toEqual('disabled')
 
+      describe 'imageinput', ->
+        imageinput_html = readFixtures('imageinput.html')
+        states = [
+          {
+            desc: 'rectangle is drawn correctly',
+            data: {'rectangle': '(10,10)-(30,30)'}
+          },
+          {
+            desc: 'region is drawn correctly',
+            data: {'regions': '[[10,10],[30,30],[70,30],[20,30]]'}
+          },
+          {
+            desc: 'mixed shapes are drawn correctly',
+            data: {
+              'rectangle': '(10,10)-(30,30);(5,5)-(20,20)',
+              'regions': '''[
+                [[50,50],[40,40],[70,30],[50,70]],
+                [[90,95],[95,95],[90,70],[70,70]]
+              ]'''
+            }
+          },
+        ]
+
+        beforeEach ->
+          @problem = new Problem($('.xblock-student_view'))
+          @problem.el.prepend imageinput_html
+
+        stubRequest = (data) =>
+          spyOn($, 'postWithPrefix').andCallFake (url, callback) ->
+              callback answers: "12345": data
+
+        getImage = (coords, c_width, c_height) =>
+          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 = abs(points[3] - points[1])
+                  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][0] == "undefined"
+                  reg = [reg]
+
+                return reg
+
+              $.each parseCoords(coords), (index, region) =>
+                ctx.beginPath()
+                $.each region, (index, point) =>
+                  if index is 0
+                    ctx.moveTo(point[0], point[1])
+                  else
+                    ctx.lineTo(point[0], point[1]);
+
+                ctx.closePath()
+                ctx.stroke()
+                ctx.fill()
+
+          canvas = document.createElement('canvas')
+          canvas.width = c_width or 100
+          canvas.height = c_height or 100
+
+          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 coords, (key, value) =>
+            types[key](value) if types[key]?
+
+          return canvas
+
+        $.each states, (index, state) =>
+          it state.desc, ->
+            stubRequest(state.data)
+            @problem.show()
+            img = getImage(state.data)
+
+            expect(img).toImageDiffEqual($('canvas')[0])
+
     describe 'when the answers are already shown', ->
       beforeEach ->
         @problem.el.addClass 'showed'
@@ -409,4 +505,3 @@ describe 'Problem', ->
       expect(@problem.answers).toEqual "input_1_1=one&input_1_2=two"
 
 
-

common/lib/xmodule/xmodule/js/spec/helper.coffee

@@ -162,6 +162,8 @@ beforeEach ->
     toBeInArray: (array) ->
       return $.inArray(@.actual, array) > -1
 
+  @addMatchers imagediff.jasmine
+
 # Stub jQuery.cookie
 $.cookie = jasmine.createSpy('jQuery.cookie').andReturn '1.0'