L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-72679 qtype_ddmarker: Fix incorrect positions in multiple viewportss

Browse Source 
Co-authored-by: Huong Nguyen <[email protected]>
This commit is contained in:
Nathan Nguyen
2021-11-04 14:42:50 +07:00
committed by Huong Nguyen
co-authored by Huong Nguyen
parent 8ecf433c53
commit 41868f952b
5 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
question/type/ddmarker/amd/build/question.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
question/type/ddmarker/amd/build/question.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
question/type/ddmarker/amd/src/question.js
+11 -4
View File
@@ -141,7 +141,10 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
for (var i = 0; i < coords.length; i++) {
var dragInDrop = drag.clone();
dragInDrop.data('pagex', coords[i].x).data('pagey', coords[i].y);
thisQ.sendDragToDrop(dragInDrop, false);
// We always save the coordinates in the 1:1 ratio.
// So we need to set the scale ratio to 1 for the initial load.
dragInDrop.data('scaleRatio', 1);
thisQ.sendDragToDrop(dragInDrop, false, true);
}
thisQ.getDragClone(drag).addClass('active');
thisQ.cloneDragIfNeeded(drag);
@@ -553,9 +556,10 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
* Animate a drag item into a given place.
*
* @param {jQuery} drag the item to place.
* @param {boolean} isScaling Scaling or not
* @param {boolean} isScaling Scaling or not.
* @param {boolean} initialLoad Whether it is the initial load or not.
*/
DragDropMarkersQuestion.prototype.sendDragToDrop = function(drag, isScaling) {
DragDropMarkersQuestion.prototype.sendDragToDrop = function(drag, isScaling, initialLoad = false) {
var dropArea = this.dropArea(),
bgRatio = this.bgRatio();
drag.removeClass('beingdragged').removeClass('unneeded');
@@ -568,7 +572,10 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
drag.css('left', dragXY.x * bgRatio).css('top', dragXY.y * bgRatio);
}
// We need to save the original scale ratio for each draggable item.
drag.data('scaleRatio', bgRatio);
if (!initialLoad) {
// Only set the scale ratio for a current being-dragged item, not for the initial loading.
drag.data('scaleRatio', bgRatio);
}
dropArea.append(drag);
this.handleElementScale(drag, 'left top');
};
question/type/ddmarker/tests/behat/behat_qtype_ddmarker.php
+11 -3
View File
@@ -68,6 +68,7 @@ class behat_qtype_ddmarker extends behat_base {
// DOM node so that its centre is over the centre of anothe DOM node.
// Therefore to make it drag to the specified place, we have to add
// a target div.
$markerxpath = $this->marker_xpath($marker);
$this->execute_script("
(function() {
if (document.getElementById('target-{$x}-{$y}')) {
@@ -78,8 +79,15 @@ class behat_qtype_ddmarker extends behat_base {
target.setAttribute('id', 'target-{$x}-{$y}');
var container = document.querySelector('.droparea');
container.insertBefore(target, image);
var xadjusted = {$x} + (container.offsetWidth - image.offsetWidth) / 2;
var yadjusted = {$y} + (container.offsetHeight - image.offsetHeight) / 2;
var widthRatio = image.offsetWidth / image.naturalWidth;
var heightRatio = image.offsetHeight / image.naturalHeight;
var marker = document.evaluate('{$markerxpath}', document, null, XPathResult.ANY_TYPE, null).iterateNext();
var xadjusted = {$x} * widthRatio
+ (container.offsetWidth - image.offsetWidth) / 2
+ marker.offsetWidth / 2;
var yadjusted = {$y} * heightRatio
+ (container.offsetHeight - image.offsetHeight) / 2
+ marker.offsetHeight / 2;
target.style.setProperty('position', 'absolute');
target.style.setProperty('left', xadjusted + 'px');
target.style.setProperty('top', yadjusted + 'px');
@@ -89,7 +97,7 @@ class behat_qtype_ddmarker extends behat_base {
);
$generalcontext = behat_context_helper::get('behat_general');
$generalcontext->i_drag_and_i_drop_it_in($this->marker_xpath($marker),
$generalcontext->i_drag_and_i_drop_it_in($markerxpath,
'xpath_element', "#target-{$x}-{$y}", 'css_element');
}
question/type/ddmarker/tests/behat/preview.feature
+14 -11
View File
@@ -33,10 +33,10 @@ Feature: Preview a drag-drop marker question
And I change window size to "large"
And I wait "2" seconds
# Odd, but the <br>s go to nothing, not a space.
And I drag "OU" to "345,230" in the drag and drop markers question
And I drag "Railway station" to "262,197" in the drag and drop markers question
And I drag "Railway station" to "334,319" in the drag and drop markers question
And I drag "Railway station" to "211,101" in the drag and drop markers question
And I drag "OU" to "322,213" in the drag and drop markers question
And I drag "Railway station" to "144,84" in the drag and drop markers question
And I drag "Railway station" to "195,180" in the drag and drop markers question
And I drag "Railway station" to "267,302" in the drag and drop markers question
And I press "Submit and finish"
Then the state of "Please place the markers on the map of Milton Keynes" question is shown as "Correct"
And I should see "Mark 1.00 out of 1.00"
@@ -58,15 +58,18 @@ Feature: Preview a drag-drop marker question
And I switch to the main window
@javascript
Scenario: Preview a question in responsive mode.
Scenario: Preview a question in multiple viewports.
When I choose "Preview" action for "Drag markers" in the question bank
And I switch to "questionpreview" window
And I change window size to "large"
And I drag "OU" to "345,230" in the drag and drop markers question
And I drag "Railway station" to "262,197" in the drag and drop markers question
And I drag "Railway station" to "334,319" in the drag and drop markers question
And I change viewport size to "640x640"
And I drag "Railway station" to "200,85" in the drag and drop markers question
And I change viewport size to "large"
And I drag "OU" to "322,213" in the drag and drop markers question
And I drag "Railway station" to "144,84" in the drag and drop markers question
And I drag "Railway station" to "195,180" in the drag and drop markers question
And I press "Save"
And I change viewport size to "640x768"
And I press "Save"
And I drag "Railway station" to "267,302" in the drag and drop markers question
And I press "Save"
And I press "Submit and finish"
Then the state of "Please place the markers on the map of Milton Keynes" question is shown as "Correct"
And I should see "Mark 1.00 out of 1.00"