Please test this in as many different browsers as possible. During development I was testing Firefix, Chrome and IE11 on Windows.
Testing the form:
- Create a ddmarker question with the attached 'redsquare.png' image as background. (it is 150x150 px, with a 50x50 px red square in the middle.)
- Make one drag item with label "Red".
- Set one drop zone that is a rectangle with coordinates "50,50;50,50".
- At a range of browser zoom levels, look at the preview section of the form, and verify that the green grid and the translucent image of the drop zone are reasonably well lined up with the background image.
- Save the question.
Testing attempting:
- Preview the question (or add it to a quiz and perview/attempt the quiz.)
- Place the marker cross-hairs on the top-left red pixel in the top row, and submit.
- Verify that you are graded correctly.
Again, if possible, plese do these steps at a range of browser zoom levels. (You can keep the question preview window open. Just keep clicking start again.)
Repeat these steps for the top-right, bottom-left and bottom-right pixels.
Comments.
If you want to see what is going on, look at the hidden input in the .ddform div while attempting the question.
Note, it may, in some circumstances, be possible to get a response graded correct with the cross-hairs on a while pixel just outside the red square. This is intentional. It is much worse to grade a correct answer wrong, than it is to grade a faractionally incorrect answer right.
Note also, that teachers are not expected to create questions where the a response 1 pixel out is graded wrong. Normally, it is recommended to make the the drop zones a little bit on the generous side. (I just added a note at https://docs.moodle.org/30/en/Drag_and_drop_markers_question_type#How_to_create_a_question to warn about that.)