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 @@ + + + + +
+ + +
+ +
+
+ + + + + Status: unanswered + +
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) =>