MDL-51914 qtype_ddmarker: precise grading round the edges of zones
authorTim Hunt <T.J.Hunt@open.ac.uk>
Mon, 26 Oct 2015 17:40:26 +0000 (17:40 +0000)
committerTim Hunt <T.J.Hunt@open.ac.uk>
Wed, 28 Oct 2015 10:53:00 +0000 (10:53 +0000)
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
question/type/ddmarker/styles.css
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js
question/type/ddmarker/yui/src/ddmarker/js/ddmarker.js
question/type/ddmarker/yui/src/form/js/form.js

index e45f9a2..e1f38d2 100644 (file)
@@ -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();
index 17e3cb9..0111c6a 100644 (file)
@@ -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: 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;
index 2556cd7..e089cb7 100644 (file)
Binary files a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js and b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd-debug.js differ
index 2556cd7..e089cb7 100644 (file)
Binary files a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js and b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-dd/moodle-qtype_ddmarker-dd.js differ
index 914c262..d451d07 100644 (file)
Binary files a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js and b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js differ
index 4e443e2..8247169 100644 (file)
Binary files a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js and b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js differ
index 914c262..d451d07 100644 (file)
Binary files a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js and b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js differ
index 360c306..4aa4584 100644 (file)
@@ -131,6 +131,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];
     },
index 6e11b5f..ea4435b 100644 (file)
@@ -96,7 +96,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'));
         }