Commit 1f5ae87f by polesye

BDL-810: Fix image mapped inputs.

parent 385880d8
...@@ -5,6 +5,9 @@ These are notable changes in edx-platform. This is a rolling list of changes, ...@@ -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 in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected. 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: Enabled screen reader feedback of problem responses.
LMS-2158 LMS-2158
......
<!-- ${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>
...@@ -314,41 +314,29 @@ describe 'Problem', -> ...@@ -314,41 +314,29 @@ describe 'Problem', ->
expect($('input#1_2_1').attr('disabled')).not.toEqual('disabled') expect($('input#1_2_1').attr('disabled')).not.toEqual('disabled')
describe 'imageinput', -> describe 'imageinput', ->
imageinput_html = readFixtures('imageinput.html') imageinput_html = readFixtures('imageinput.underscore')
states = [
{ DEFAULTS =
desc: 'rectangle is drawn correctly', id: '12345'
data: { width: '300'
'rectangle': '(10,10)-(30,30)', height: '400'
'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]]
]'''
}
},
]
beforeEach -> beforeEach ->
@problem = new Problem($('.xblock-student_view')) @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) => stubRequest = (data) =>
spyOn($, 'postWithPrefix').andCallFake (url, callback) -> spyOn($, 'postWithPrefix').andCallFake (url, callback) ->
callback answers: "12345": data callback data
getImage = (coords, c_width, c_height) => getImage = (coords, c_width, c_height) =>
types = types =
...@@ -407,13 +395,56 @@ describe 'Problem', -> ...@@ -407,13 +395,56 @@ describe 'Problem', ->
return canvas return canvas
$.each states, (index, state) => it 'rectangle is drawn correctly', ->
it state.desc, -> assertAnswer(@problem, {
stubRequest(state.data) 'answers':
@problem.show() '12345':
img = getImage(state.data) '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', -> describe 'when the answers are already shown', ->
beforeEach -> beforeEach ->
......
...@@ -557,7 +557,7 @@ class @Problem ...@@ -557,7 +557,7 @@ class @Problem
# 'regions': '[[10,10], [30,30], [10, 30], [30, 10]]' # 'regions': '[[10,10], [30,30], [10, 30], [30, 10]]'
# } } # } }
types = types =
rectangle: (coords) => rectangle: (ctx, coords) =>
reg = /^\(([0-9]+),([0-9]+)\)-\(([0-9]+),([0-9]+)\)$/ reg = /^\(([0-9]+),([0-9]+)\)-\(([0-9]+),([0-9]+)\)$/
rects = coords.replace(/\s*/g, '').split(/;/) rects = coords.replace(/\s*/g, '').split(/;/)
...@@ -573,7 +573,7 @@ class @Problem ...@@ -573,7 +573,7 @@ class @Problem
ctx.stroke() ctx.stroke()
ctx.fill() ctx.fill()
regions: (coords) => regions: (ctx, coords) =>
parseCoords = (coords) => parseCoords = (coords) =>
reg = JSON.parse(coords) reg = JSON.parse(coords)
...@@ -618,11 +618,12 @@ class @Problem ...@@ -618,11 +618,12 @@ class @Problem
ctx.strokeStyle = "#FF0000"; ctx.strokeStyle = "#FF0000";
ctx.lineWidth = "2"; ctx.lineWidth = "2";
$.each answers, (key, answer) => if answers[id]
$.each answer, (key, value) => $.each answers[id], (key, value) =>
types[key](value) if types[key]? and value types[key](ctx, value) if types[key]? and value
container.html(canvas)
container.html(canvas) else
console.log "Answer is absent for image input with id=#{id}"
inputtypeHideAnswerMethods: inputtypeHideAnswerMethods:
choicegroup: (element, display) => choicegroup: (element, display) =>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment