BDL-810: Fix image mapped inputs.

CHANGELOG.rst

@@ -5,6 +5,9 @@ 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: Fixed bug when image mapped input's Show Answer multiplies rectangles on
+ many inputtypes. BLD-810.
+
 LMS: Enabled screen reader feedback of problem responses.
   LMS-2158
 

common/lib/xmodule/xmodule/js/fixtures/imageinput.underscore

+<!-- ${id}     = 12345 -->
+<!-- ${width}  = 300   -->
+<!-- ${height} = 400   -->
+
+<div class="imageinput capa_inputtype" id="inputtype_<%=id%>">
+    <input
+        type="hidden"
+        class="imageinput"
+        src=""
+        name="input_<%=id%>"
+        id="input_<%=id%>"
+        value=""
+    />
+
+    <div style="position:relative;">
+        <div
+            id="imageinput_<%=id%>"
+            style="width: <%=width%>px; height: <%=height%>px; position: relative; left: 0; top: 0; visibility: hidden;"
+        >
+            <!-- image will go here -->
+        </div>
+        <div id="answer_<%=id%>" data-width="100" data-height="100"></div>
+    </div>
+
+
+    <!-- status == 'unsubmitted' -->
+        <span
+            class="unanswered"
+            style="display: inline-block;"
+            id="status_<%=id%>"
+            aria-describedby="input_<%=id%>"
+        >
+            <span class="sr">Status: unanswered</span>
+        </span>
+</div>

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

@@ -314,41 +314,29 @@ describe 'Problem', ->
           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)',
-              'regions': null
-            }
-          },
-          {
-            desc: 'region is drawn correctly',
-            data: {
-              'rectangle': null,
-              '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]]
-              ]'''
-            }
-          },
-        ]
+        imageinput_html = readFixtures('imageinput.underscore')
+
+        DEFAULTS =
+          id: '12345'
+          width: '300'
+          height: '400'
 
         beforeEach ->
           @problem = new Problem($('.xblock-student_view'))
-          @problem.el.prepend imageinput_html
+          @problem.el.prepend _.template(imageinput_html)(DEFAULTS)
+
+        assertAnswer = (problem, data) =>
+          stubRequest(data)
+          problem.show()
+
+          $.each data['answers'], (id, answer) =>
+            img = getImage(answer)
+            el = $('#inputtype_' + id)
+            expect(img).toImageDiffEqual(el.find('canvas')[0])
 
         stubRequest = (data) =>
           spyOn($, 'postWithPrefix').andCallFake (url, callback) ->
-              callback answers: "12345": data
+            callback data
 
         getImage = (coords, c_width, c_height) =>
           types =
@@ -407,13 +395,56 @@ describe 'Problem', ->
 
           return canvas
 
-        $.each states, (index, state) =>
-          it state.desc, ->
-            stubRequest(state.data)
-            @problem.show()
-            img = getImage(state.data)
-
-            expect(img).toImageDiffEqual($('canvas')[0])
+        it 'rectangle is drawn correctly', ->
+          assertAnswer(@problem, {
+            'answers':
+              '12345':
+                'rectangle': '(10,10)-(30,30)',
+                'regions': null
+          })
+
+        it 'region is drawn correctly', ->
+          assertAnswer(@problem, {
+            'answers':
+              '12345':
+                'rectangle': null,
+                'regions': '[[10,10],[30,30],[70,30],[20,30]]'
+          })
+
+        it 'mixed shapes are drawn correctly', ->
+          assertAnswer(@problem, {
+            'answers':'12345':
+              '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]]
+              ]'''
+          })
+
+        it 'multiple image inputs draw answers on separate canvases', ->
+          data =
+            id: '67890'
+            width: '400'
+            height: '300'
+
+          @problem.el.prepend _.template(imageinput_html)(data)
+          assertAnswer(@problem, {
+            'answers':
+              '12345':
+                'rectangle': null,
+                'regions': '[[10,10],[30,30],[70,30],[20,30]]'
+              '67890':
+                'rectangle': '(10,10)-(30,30)',
+                'regions': null
+          })
+
+        it 'dictionary with answers doesn\'t contain answer for current id', ->
+          spyOn console, 'log'
+          stubRequest({'answers':{}})
+          @problem.show()
+          el = $('#inputtype_12345')
+          expect(el.find('canvas')).not.toExist()
+          expect(console.log).toHaveBeenCalledWith('Answer is absent for image input with id=12345')
 
     describe 'when the answers are already shown', ->
       beforeEach ->

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

@@ -557,7 +557,7 @@ class @Problem
       #   'regions': '[[10,10], [30,30], [10, 30], [30, 10]]'
       # } }
       types =
-        rectangle: (coords) =>
+        rectangle: (ctx, coords) =>
           reg = /^\(([0-9]+),([0-9]+)\)-\(([0-9]+),([0-9]+)\)$/
           rects = coords.replace(/\s*/g, '').split(/;/)
 
@@ -573,7 +573,7 @@ class @Problem
           ctx.stroke()
           ctx.fill()
 
-        regions: (coords) =>
+        regions: (ctx, coords) =>
           parseCoords = (coords) =>
             reg = JSON.parse(coords)
 
@@ -618,11 +618,12 @@ class @Problem
       ctx.strokeStyle = "#FF0000";
       ctx.lineWidth = "2";
 
-      $.each answers, (key, answer) =>
-        $.each answer, (key, value) =>
-          types[key](value) if types[key]? and value
-
-      container.html(canvas)
+      if answers[id]
+        $.each answers[id], (key, value) =>
+          types[key](ctx, value) if types[key]? and value
+        container.html(canvas)
+      else
+        console.log "Answer is absent for image input with id=#{id}"
 
   inputtypeHideAnswerMethods:
     choicegroup: (element, display) =>