From 4e10c72988c0d1553aabbdc056b00cba527716ea Mon Sep 17 00:00:00 2001 From: polesye Date: Tue, 10 Dec 2013 16:30:37 +0200 Subject: [PATCH] BLD-21: Show answer for imageresponse. --- CHANGELOG.rst | 2 + common/lib/capa/capa/responsetypes.py | 2 +- .../lib/capa/capa/templates/imageinput.html | 126 ++++++++++-------- .../xmodule/js/src/capa/display.coffee | 73 +++++++++- 4 files changed, 142 insertions(+), 61 deletions(-) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 3297f426a0..93d6749e40 100644 --- a/CHANGELOG.rst +++ b/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. diff --git a/common/lib/capa/capa/responsetypes.py b/common/lib/capa/capa/responsetypes.py index c71c1a7632..4d36d44f9e 100644 --- a/common/lib/capa/capa/responsetypes.py +++ b/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 diff --git a/common/lib/capa/capa/templates/imageinput.html b/common/lib/capa/capa/templates/imageinput.html index 77977a8d12..25da119651 100644 --- a/common/lib/capa/capa/templates/imageinput.html +++ b/common/lib/capa/capa/templates/imageinput.html @@ -1,60 +1,76 @@ - - - +
+ +
- +
+
+
- + - % if status == 'unsubmitted': - - Status: unanswered - - % elif status == 'correct': - - Status: correct - - % elif status == 'incorrect': - - Status: incorrect - - % elif status == 'incomplete': - - Status: incorrect - - % endif - + % if status == 'unsubmitted': + + Status: unanswered + + % elif status == 'correct': + + Status: correct + + % elif status == 'incorrect': + + Status: incorrect + + % elif status == 'incomplete': + + Status: incorrect + + % endif +
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee index 7982cbbf65..edd781f8a3 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee +++ b/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)