diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 6b29678a81..3e67502877 100644
--- a/CHANGELOG.rst
+++ b/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
diff --git a/common/lib/xmodule/xmodule/js/fixtures/imageinput.underscore b/common/lib/xmodule/xmodule/js/fixtures/imageinput.underscore
new file mode 100644
index 0000000000..bafdd797c9
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/fixtures/imageinput.underscore
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee b/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee
index baf860dc53..33927ed1f9 100644
--- a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee
+++ b/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)
+ it 'rectangle is drawn correctly', ->
+ assertAnswer(@problem, {
+ 'answers':
+ '12345':
+ 'rectangle': '(10,10)-(30,30)',
+ 'regions': null
+ })
- expect(img).toImageDiffEqual($('canvas')[0])
+ 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 ->
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee
index cfe8e67273..ad367d0176 100644
--- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee
+++ b/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) =>