Skip to content

E
edx-platform
Commit 4e10c729 by polesye
Options

BLD-21: Show answer for imageresponse.

parent ae61db9a
Showing with 142 additions and 61 deletions
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.
......
common/lib/capa/capa/responsetypes.py
......@@ -2167,7 +2167,7 @@ class ImageResponse(LoncapaResponse):
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
<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/src/capa/display.coffee
......@@ -300,11 +300,11 @@ class @Problem
# inputtype functions.
@el.find(".capa_inputtype").each (index, inputtype) =>
classes = $(inputtype).attr('class').split(' ')
for cls in classes
display = @inputtypeDisplays[$(inputtype).attr('id')]
showMethod = @inputtypeShowAnswerMethods[cls]
showMethod(inputtype, display, answers) if showMethod?
classes = $(inputtype).attr('class').split(' ')
for cls in classes
display = @inputtypeDisplays[$(inputtype).attr('id')]
showMethod = @inputtypeShowAnswerMethods[cls]
showMethod(inputtype, display, answers) if showMethod?
if MathJax?
@el.find('.problem > div').each (index, element) =>
......@@ -482,6 +482,69 @@ class @Problem
for choice in answer
element.find("section#forinput#{choice}").addClass 'choicetextgroup_show_correct'
imageinput: (element, display, answers) =>
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
width = abs(points[3] - points[1])
# height
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] is undefined
reg = [reg]
return reg
$.each parseCoords(coords), (index, regions) =>
ctx.beginPath()
$.each regions, (index, points) =>
if index is 0
ctx.moveTo(points[0], points[1])
else
ctx.lineTo(points[0], points[1]);
ctx.closePath()
ctx.stroke()
ctx.fill()
element = $(element)
id = element.attr('id').replace(/inputtype_/,'')
container = element.find("#answer_#{id}")
canvas = document.createElement('canvas')
canvas.width = container.data('width')
canvas.height = container.data('height')
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 answers, (key, answer) =>
$.each answer, (key, value) =>
types[key](value) if types[key]?
container.html(canvas)
inputtypeHideAnswerMethods:
choicegroup: (element, display) =>
element = $(element)
......
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