MDL-55200 question type ddmarker: Display coordinates on image

To make the creation of dropzones easier, the mouse coordinates are shown.
This commit is contained in:
Steffen Pegenau 2016-07-18 11:42:30 +02:00 committed by David Monllao
parent 36a19ecc26
commit 51ed23519a
4 changed files with 55 additions and 16 deletions

View File

@ -32,10 +32,14 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
var tn = Y.one(this.get('topnode'));
tn.one('div.fcontainer').append(
'<div class="ddarea">' +
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<div class="grid"></div>' +
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<ul class="pager">' +
'<li><span id="xcoordpreview">X = </span></li>' +
'<li><span id="ycoordpreview">Y = </span></li>' +
'</ul>' +
'<div class="grid"></div>' +
'</div>');
this.doc = this.doc_structure(this);
this.stop_selector_events();
@ -44,6 +48,15 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
Y.later(500, this, this.update_drop_zones, [pendingid], true);
Y.after(this.load_bg_image, M.form_filepicker, 'callback', this);
this.load_bg_image();
var topnode = Y.one(this.get('topnode'));
topnode.one('.grid').on('mousemove', function (e) {
var img = topnode.one('.dropbackground');
var x = Math.round(Number(e.pageX) - img.getX() - 1);
var y = Math.round(Number(e.pageY) - img.getY() - 1);
topnode.one('#xcoordpreview').setHTML("X = " + x);
topnode.one('#ycoordpreview').setHTML("Y = " + y);
});
},
load_bg_image : function() {
@ -118,7 +131,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
}
},
set_options_for_drag_item_selectors : function () {
var dragitemsoptions = {'0': ''};
var dragitemsoptions = {0: ''};
for (var i = 1; i <= this.form.get_form_value('noitems', []); i++) {
var label = this.get_marker_text(i);
if (label !== "") {

File diff suppressed because one or more lines are too long

View File

@ -32,10 +32,14 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
var tn = Y.one(this.get('topnode'));
tn.one('div.fcontainer').append(
'<div class="ddarea">' +
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<div class="grid"></div>' +
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<ul class="pager">' +
'<li><span id="xcoordpreview">X = </span></li>' +
'<li><span id="ycoordpreview">Y = </span></li>' +
'</ul>' +
'<div class="grid"></div>' +
'</div>');
this.doc = this.doc_structure(this);
this.stop_selector_events();
@ -44,6 +48,15 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
Y.later(500, this, this.update_drop_zones, [pendingid], true);
Y.after(this.load_bg_image, M.form_filepicker, 'callback', this);
this.load_bg_image();
var topnode = Y.one(this.get('topnode'));
topnode.one('.grid').on('mousemove', function (e) {
var img = topnode.one('.dropbackground');
var x = Math.round(Number(e.pageX) - img.getX() - 1);
var y = Math.round(Number(e.pageY) - img.getY() - 1);
topnode.one('#xcoordpreview').setHTML("X = " + x);
topnode.one('#ycoordpreview').setHTML("Y = " + y);
});
},
load_bg_image : function() {
@ -118,7 +131,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
}
},
set_options_for_drag_item_selectors : function () {
var dragitemsoptions = {'0': ''};
var dragitemsoptions = {0: ''};
for (var i = 1; i <= this.form.get_form_value('noitems', []); i++) {
var label = this.get_marker_text(i);
if (label !== "") {

View File

@ -30,10 +30,14 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
var tn = Y.one(this.get('topnode'));
tn.one('div.fcontainer').append(
'<div class="ddarea">' +
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<div class="grid"></div>' +
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<ul class="pager">' +
'<li><span id="xcoordpreview">X = </span></li>' +
'<li><span id="ycoordpreview">Y = </span></li>' +
'</ul>' +
'<div class="grid"></div>' +
'</div>');
this.doc = this.doc_structure(this);
this.stop_selector_events();
@ -42,6 +46,15 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
Y.later(500, this, this.update_drop_zones, [pendingid], true);
Y.after(this.load_bg_image, M.form_filepicker, 'callback', this);
this.load_bg_image();
var topnode = Y.one(this.get('topnode'));
topnode.one('.grid').on('mousemove', function (e) {
var img = topnode.one('.dropbackground');
var x = Math.round(Number(e.pageX) - img.getX() - 1);
var y = Math.round(Number(e.pageY) - img.getY() - 1);
topnode.one('#xcoordpreview').setHTML("X = " + x);
topnode.one('#ycoordpreview').setHTML("Y = " + y);
});
},
load_bg_image : function() {
@ -116,7 +129,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
}
},
set_options_for_drag_item_selectors : function () {
var dragitemsoptions = {'0': ''};
var dragitemsoptions = {0: ''};
for (var i = 1; i <= this.form.get_form_value('noitems', []); i++) {
var label = this.get_marker_text(i);
if (label !== "") {