From 2d391d1b10f9fc3a356278139375ae80b6c10dda Mon Sep 17 00:00:00 2001 From: Tim Hunt Date: Mon, 26 Oct 2015 17:40:26 +0000 Subject: [PATCH] MDL-51914 qtype_ddmarker: precise grading round the edges of zones There was a previous change to the CSS (7px -> 3px) to make things look prettier, which acutally broke the grading by a few pixes. I fixed this by: * Changing the offset of the cross hairs back to the correct value, and adding a comment to point out the imporance of not changing that CSS. * Achieved the nice layout of the label relative to the cross-hairs in a different way. * Added a similar clafirying comment in the JavaScript. * Improved how the grid on the editing form is aligned with the background image. * Added rounding to the grading code, to cope better now that browsers do sub-pixel positioning. --- question/type/ddmarker/question.php | 2 ++ question/type/ddmarker/styles.css | 6 +++--- .../moodle-qtype_ddmarker-dd-debug.js | 2 ++ .../moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js | 2 ++ .../moodle-qtype_ddmarker-form-debug.js | 2 +- .../moodle-qtype_ddmarker-form-min.js | 2 +- .../moodle-qtype_ddmarker-form.js | 2 +- question/type/ddmarker/yui/src/ddmarker/js/ddmarker.js | 2 ++ question/type/ddmarker/yui/src/form/js/form.js | 2 +- 9 files changed, 15 insertions(+), 7 deletions(-) diff --git a/question/type/ddmarker/question.php b/question/type/ddmarker/question.php index e45f9a240c5..e1f38d24be6 100644 --- a/question/type/ddmarker/question.php +++ b/question/type/ddmarker/question.php @@ -214,6 +214,8 @@ class qtype_ddmarker_question extends qtype_ddtoimage_question_base { continue; } $pointxy = explode(',', $coord); + $pointxy[0] = round($pointxy[0]); + $pointxy[1] = round($pointxy[1]); if ($place->drop_hit($pointxy)) { if (!isset($hits[$placeno])) { $hits[$placeno] = array(); diff --git a/question/type/ddmarker/styles.css b/question/type/ddmarker/styles.css index 17e3cb9a1f7..0111c6a9c7d 100644 --- a/question/type/ddmarker/styles.css +++ b/question/type/ddmarker/styles.css @@ -40,7 +40,7 @@ form.mform fieldset#id_previewareaheader div.draghome, form.mform fieldset#id_pr .que.ddmarker div.dragitems span.markertext, .que.ddmarker div.markertexts span.markertext, form.mform fieldset#id_previewareaheader div.markertexts span.markertext { - margin: 5px; + margin: 0 5px; z-index: 3; background-color: white; border: 2px solid black; @@ -70,8 +70,8 @@ form.mform fieldset#id_previewareaheader div.markertexts span.markertext { } .que.ddmarker div.dragitems img.target { position: absolute; - left: -7px; - top: -3px; + left: -7px; /* This must be half the size of the target image, minus 0.5. */ + top: -7px; /* In other words, this works for a 15x15 cross-hair. */ } .que.ddmarker div.dragitems div.draghome img.target { display: none; diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js index 2556cd7891f..e089cb7f240 100644 --- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js +++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js @@ -133,6 +133,8 @@ Y.extend(DDMARKER_DD, Y.Base, { return colour; }, convert_to_window_xy : function (bgimgxy) { + // The +1 seems rather odd, but seems to give the best results in + // the three main browsers at a range of zoom levels. return [Number(bgimgxy[0]) + this.doc.bg_img().getX() + 1, Number(bgimgxy[1]) + this.doc.bg_img().getY() + 1]; }, diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js index 2556cd7891f..e089cb7f240 100644 --- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js +++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js @@ -133,6 +133,8 @@ Y.extend(DDMARKER_DD, Y.Base, { return colour; }, convert_to_window_xy : function (bgimgxy) { + // The +1 seems rather odd, but seems to give the best results in + // the three main browsers at a range of zoom levels. return [Number(bgimgxy[0]) + this.doc.bg_img().getX() + 1, Number(bgimgxy[1]) + this.doc.bg_img().getY() + 1]; }, diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js index 914c262ef5f..d451d07858b 100644 --- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js +++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js @@ -98,7 +98,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, { } if (this.doc.bg_img()) { Y.one('div.ddarea .grid') - .setXY(this.doc.bg_img().getXY()) + .setXY(this.convert_to_window_xy([0, 0])) .setStyle('width', this.doc.bg_img().get('width')) .setStyle('height', this.doc.bg_img().get('height')); } diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js index 4e443e20130..8247169c3e9 100644 --- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js +++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js @@ -1 +1 @@ -YUI.add("moodle-qtype_ddmarker-form",function(e,t){var n="moodle-qtype_ddmarker-form",r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,M.qtype_ddmarker.dd_base_class,{fp:null,initializer:function(){var t="qtype_ddmarker-form-"+Math.random().toString(36).slice(2);M.util.js_pending(t),this.fp=this.file_pickers();var n=e.one(this.get("topnode"));n.one("div.fcontainer").append('
'),this.doc=this.doc_structure(this),this.stop_selector_events(),this.set_options_for_drag_item_selectors(),this.setup_form_events(),e.later(500,this,this.update_drop_zones,[t],!0),e.after(this.load_bg_image,M.form_filepicker,"callback",this),this.load_bg_image()},load_bg_image:function(){var t=this.fp.file("bgimage").href;if(t!==null){this.doc.load_bg_img(t);var n=new e.DD.Drop({node:this.doc.bg_img()});n.on("drop:hit",function(e){e.drag.get("node").setData("gooddrop",!0)}),this.afterimageloaddone=!1,this.doc.bg_img().on("load",this.constrain_image_size,this)}},constrain_image_size:function(e){var t=this.get("maxsizes").bgimage,n=Math.max(e.target.get("width")/t.width,e.target.get("height")/t.height);n>1&&e.target.set("width",Math.floor(e.target.get("width")/n)),e.target.addClass("constrained"),e.target.detach("load",this.constrain_image_size)},update_drop_zones:function(t){this.graphics!==null&&this.graphics.destroy(),this.restart_colours(),this.graphics=new e.Graphic({render:"div.ddarea div.dropzones"});var n=this.form.get_form_value("nodropzone",[]);for(var r=0;r'+t[o]+"";s.append(u);var a=s.one('option[value="'+o+'"]');if(o===i[n])a.set("selected",!0);else if(o!==0){var f=this.form.get_form_value("drags",[o-1,"noofdrags"]);if(Number(f)!==0)for(var l in i)if(Number(i[l])===o){if(Number(f)===1){a.set("disabled",!0);break}f--}}}}},stop_selector_events:function(){e.all("fieldset#id_dropzoneheader select").detachAll()},setup_form_events:function(){e.all("fieldset#id_draggableitemheader input").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_draggableitemheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_dropzoneheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this)},form:{to_name_with_index:function(e,t){var n=e;for(var r=0;r
'),this.doc=this.doc_structure(this),this.stop_selector_events(),this.set_options_for_drag_item_selectors(),this.setup_form_events(),e.later(500,this,this.update_drop_zones,[t],!0),e.after(this.load_bg_image,M.form_filepicker,"callback",this),this.load_bg_image()},load_bg_image:function(){var t=this.fp.file("bgimage").href;if(t!==null){this.doc.load_bg_img(t);var n=new e.DD.Drop({node:this.doc.bg_img()});n.on("drop:hit",function(e){e.drag.get("node").setData("gooddrop",!0)}),this.afterimageloaddone=!1,this.doc.bg_img().on("load",this.constrain_image_size,this)}},constrain_image_size:function(e){var t=this.get("maxsizes").bgimage,n=Math.max(e.target.get("width")/t.width,e.target.get("height")/t.height);n>1&&e.target.set("width",Math.floor(e.target.get("width")/n)),e.target.addClass("constrained"),e.target.detach("load",this.constrain_image_size)},update_drop_zones:function(t){this.graphics!==null&&this.graphics.destroy(),this.restart_colours(),this.graphics=new e.Graphic({render:"div.ddarea div.dropzones"});var n=this.form.get_form_value("nodropzone",[]);for(var r=0;r'+t[o]+"";s.append(u);var a=s.one('option[value="'+o+'"]');if(o===i[n])a.set("selected",!0);else if(o!==0){var f=this.form.get_form_value("drags",[o-1,"noofdrags"]);if(Number(f)!==0)for(var l in i)if(Number(i[l])===o){if(Number(f)===1){a.set("disabled",!0);break}f--}}}}},stop_selector_events:function(){e.all("fieldset#id_dropzoneheader select").detachAll()},setup_form_events:function(){e.all("fieldset#id_draggableitemheader input").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_draggableitemheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_dropzoneheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this)},form:{to_name_with_index:function(e,t){var n=e;for(var r=0;r