Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
Fix image mapping in IE
This commit is contained in:
Anton Stupak
2013-12-12 03:58:03 -08:00
parent a79d79aa12 d31268e790
commit 5eb029293c
2 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.rst
View File

@@ -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.

52
common/lib/xmodule/xmodule/js/src/capa/imageinput.js
View File

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