diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 374e95662d18..73cfd9147c0d 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: Fix bug when Image mapping problems are not working for students in IE. BLD-413. + Blades: Add template that displays the most up-to-date features of drag-and-drop. BLD-479. diff --git a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js index d728c0522d85..518cd91bba95 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js +++ b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js @@ -1,22 +1,36 @@ -///////////////////////////////////////////////////////////////////////////// -// -// Simple image input -// -//////////////////////////////////////////////////////////////////////////////// +/** + * Simple image input + * + * + * Click on image. Update the coordinates of a dot on the image. + * The new coordinates are the location of the click. + */ -// click on image, return coordinates -// put a dot at location of click, on imag +/** + * 'The wise adapt themselves to circumstances, as water molds itself to the + * pitcher.' + * + * ~ Chinese Proverb + */ -window.image_input_click = function(id,event){ - iidiv = document.getElementById("imageinput_"+id); - pos_x = event.offsetX?(event.offsetX):event.pageX-iidiv.offsetLeft; - pos_y = event.offsetY?(event.offsetY):event.pageY-iidiv.offsetTop; - result = "[" + pos_x + "," + pos_y + "]"; - cx = (pos_x-15) +"px"; - cy = (pos_y-15) +"px" ; - // alert(result); - document.getElementById("cross_"+id).style.left = cx; - document.getElementById("cross_"+id).style.top = cy; - document.getElementById("cross_"+id).style.visibility = "visible" ; - document.getElementById("input_"+id).value =result; +window.image_input_click = function (id, event) { + var iiDiv = document.getElementById('imageinput_' + id), + + posX = event.offsetX ? event.offsetX : event.pageX - iiDiv.offsetLeft, + posY = event.offsetY ? event.offsetY : event.pageY - iiDiv.offsetTop, + + cross = document.getElementById('cross_' + id), + + // To reduce differences between values returned by different kinds of + // browsers, we round `posX` and `posY`. + // + // IE10: `posX` and `posY` - float. + // Chrome, FF: `posX` and `posY` - integers. + result = '[' + Math.round(posX) + ',' + Math.round(posY) + ']'; + + cross.style.left = (posX - 15) + 'px'; + cross.style.top = (posY - 15) + 'px'; + cross.style.visibility = 'visible'; + + document.getElementById('input_' + id).value = result; };