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

Updating ImageInput JS code base.

Browse Source
This commit is contained in:
Valera Rozuvan
2013-12-12 14:20:17 +02:00
parent a78400a8d8
commit 7ebeccd4bf
2 changed files with 99 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
common/lib/capa/capa/templates/imageinput.html
View File

@@ -1,24 +1,60 @@
<span>
<input type="hidden" class="imageinput" src="${src}" name="input_${id}" id="input_${id}" value="${value}" />
<div id="imageinput_${id}" onclick="image_input_click('${id}',event);" style = "background-image:url('${src}');width:${width}px;height:${height}px;position: relative; left: 0; top: 0;">
<img src="${STATIC_URL}green-pointer.png" id="cross_${id}" style="position: absolute;top: ${gy}px;left: ${gx}px;" />
</div>
<input
type="hidden"
class="imageinput"
src="${src}"
name="input_${id}"
id="input_${id}"
value="${value}"
/>
% if status == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
<span class="sr">Status: unanswered</span>
</span>
% elif status == 'correct':
<span class="correct" id="status_${id}" aria-describedby="input_${id}">
<span class="sr">Status: correct</span>
</span>
% elif status == 'incorrect':
<span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
<span class="sr">Status: incorrect</span>
</span>
% elif status == 'incomplete':
<span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
<span class="sr">Status: incorrect</span>
</span>
% endif
<div
id="imageinput_${id}"
style="background-image: url('${src}'); width: ${width}px; height: ${height}px; position: relative; left: 0; top: 0;"
>
<img
src="${STATIC_URL}green-pointer.png"
id="cross_${id}"
style="position: absolute; top: ${gy}px; left: ${gx}px;"
/>
</div>
<script type="text/javascript" charset="utf-8">
(new ImageInput('${id}'));
</script>
% if status == 'unsubmitted':
<span
class="unanswered"
style="display: inline-block;"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: unanswered</span>
</span>
% elif status == 'correct':
<span
class="correct"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: correct</span>
</span>
% elif status == 'incorrect':
<span
class="incorrect"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: incorrect</span>
</span>
% elif status == 'incomplete':
<span
class="incorrect"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: incorrect</span>
</span>
% endif
</span>

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

@@ -13,24 +13,50 @@
* ~ Chinese Proverb
*/
window.image_input_click = function (id, event) {
var iiDiv = document.getElementById('imageinput_' + id),
window.ImageInput = (function ($, undefined) {
var ImageInput = ImageInputConstructor;
posX = event.offsetX ? event.offsetX : event.pageX - iiDiv.offsetLeft,
posY = event.offsetY ? event.offsetY : event.pageY - iiDiv.offsetTop,
ImageInput.prototype = {
constructor: ImageInputConstructor,
clickHandler: clickHandler
};
cross = document.getElementById('cross_' + id),
return ImageInput;
// 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) + ']';
function ImageInputConstructor(elementId) {
var _this = this;
cross.style.left = (posX - 15) + 'px';
cross.style.top = (posY - 15) + 'px';
cross.style.visibility = 'visible';
this.elementId = elementId;
this.el = $('#imageinput_' + elementId);
document.getElementById('input_' + id).value = result;
};
this.el.on('click', function (event) {
_this.clickHandler(event);
});
}
function clickHandler(event) {
var iiDiv = document.getElementById('imageinput_' + this.elementId),
posX = event.offsetX ?
event.offsetX : event.pageX - iiDiv.offsetLeft,
posY = event.offsetY ?
event.offsetY : event.pageY - iiDiv.offsetTop,
cross = document.getElementById('cross_' + this.elementId),
// 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) + ']';
console.log('[image_input_click]: event = ', event);
cross.style.left = (posX - 15) + 'px';
cross.style.top = (posY - 15) + 'px';
cross.style.visibility = 'visible';
document.getElementById('input_' + this.elementId).value = result;
}
}).call(this, window.jQuery);