From 418d6fa9e18f34cbc5cd3fa669a27f0cfb1b20c5 Mon Sep 17 00:00:00 2001 From: polesye Date: Wed, 11 Dec 2013 15:20:05 +0200 Subject: [PATCH 1/3] BLD-413: Add rounding of coordinates. --- common/lib/xmodule/xmodule/js/src/capa/imageinput.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js index d728c0522d85..44910ff8887b 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js +++ b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js @@ -11,10 +11,10 @@ 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 + "]"; + result = "[" + Math.round(pos_x) + "," + Math.round(pos_y) + "]"; cx = (pos_x-15) +"px"; - cy = (pos_y-15) +"px" ; - // alert(result); + cy = (pos_y-15) +"px"; + document.getElementById("cross_"+id).style.left = cx; document.getElementById("cross_"+id).style.top = cy; document.getElementById("cross_"+id).style.visibility = "visible" ; From 79519b7a073e23ee9f277f9dce281514551a8669 Mon Sep 17 00:00:00 2001 From: polesye Date: Wed, 11 Dec 2013 16:25:07 +0200 Subject: [PATCH 2/3] Address comments. --- CHANGELOG.rst | 2 ++ .../xmodule/xmodule/js/src/capa/imageinput.js | 31 +++++++++++-------- 2 files changed, 20 insertions(+), 13 deletions(-) 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 44910ff8887b..47b3b06c2286 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js +++ b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js @@ -4,19 +4,24 @@ // //////////////////////////////////////////////////////////////////////////////// -// click on image, return coordinates -// put a dot at location of click, on imag +// click on image, update coordinates +// put a dot at location of click, on image -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 = "[" + Math.round(pos_x) + "," + Math.round(pos_y) + "]"; - cx = (pos_x-15) +"px"; - cy = (pos_y-15) +"px"; +window.image_input_click = function (id, event) { + var 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, + // To reduce differences between values returned by different kinds of + // browsers, we round `pos_x` and `pos_y`. + // IE10: `pos_x` and `pos_y` - float. + // Chrome, FF: `pos_x` and `pos_y` - integers. + result = "[" + Math.round(pos_x) + "," + Math.round(pos_y) + "]", + cx = (pos_x - 15) + "px", + cy = (pos_y - 15) + "px", + cross = document.getElementById("cross_" + id); - 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; + cross.style.left = cx; + cross.style.top = cy; + cross.style.visibility = "visible" ; + document.getElementById("input_" + id).value = result; }; From d31268e790401f4447da48f12d013a23ee390195 Mon Sep 17 00:00:00 2001 From: Valera Rozuvan Date: Wed, 11 Dec 2013 16:56:44 +0200 Subject: [PATCH 3/3] Minor changes by Valera. --- .../xmodule/xmodule/js/src/capa/imageinput.js | 51 +++++++++++-------- 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js index 47b3b06c2286..518cd91bba95 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/imageinput.js +++ b/common/lib/xmodule/xmodule/js/src/capa/imageinput.js @@ -1,27 +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, update coordinates -// put a dot at location of click, on image +/** + * 'The wise adapt themselves to circumstances, as water molds itself to the + * pitcher.' + * + * ~ Chinese Proverb + */ window.image_input_click = function (id, event) { - var 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, + 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 `pos_x` and `pos_y`. - // IE10: `pos_x` and `pos_y` - float. - // Chrome, FF: `pos_x` and `pos_y` - integers. - result = "[" + Math.round(pos_x) + "," + Math.round(pos_y) + "]", - cx = (pos_x - 15) + "px", - cy = (pos_y - 15) + "px", - cross = document.getElementById("cross_" + id); + // 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'; - cross.style.left = cx; - cross.style.top = cy; - cross.style.visibility = "visible" ; - document.getElementById("input_" + id).value = result; + document.getElementById('input_' + id).value = result; };