Merge pull request #1917 from edx/anton/fix-imageresponse-in-ie

Fix image mapping in IE

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.
 

common/lib/xmodule/xmodule/js/src/capa/imageinput.js

-/////////////////////////////////////////////////////////////////////////////
-//
-//  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;
 };