From c25554b93ca230e2ceb8bcb7ea630b14c40a6c1e Mon Sep 17 00:00:00 2001 From: hieuvu Date: Wed, 21 Aug 2024 09:30:22 +0700 Subject: [PATCH] MDL-82832 ddimageortext: center the dd item using js. --- question/type/ddimageortext/amd/build/question.min.js | 2 +- question/type/ddimageortext/amd/build/question.min.js.map | 2 +- question/type/ddimageortext/amd/src/question.js | 6 +++++- question/type/ddimageortext/styles.css | 7 ++++++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/question/type/ddimageortext/amd/build/question.min.js b/question/type/ddimageortext/amd/build/question.min.js index 94ab303b95c..f71dd843c2c 100644 --- a/question/type/ddimageortext/amd/build/question.min.js +++ b/question/type/ddimageortext/amd/build/question.min.js @@ -5,6 +5,6 @@ * @copyright 2018 The Open University * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define("qtype_ddimageortext/question",["jquery","core/dragdrop","core/key_codes","core_form/changechecker","core_filters/events"],(function($,dragDrop,keys,FormChangeChecker,filterEvent){function DragDropOntoImageQuestion(containerId,readOnly,places){this.containerId=containerId,this.questionAnswer={},this.questionDragDropWidthHeight=[],M.util.js_pending("qtype_ddimageortext-init-"+this.containerId),this.places=places,this.allImagesLoaded=!1,this.imageLoadingTimeoutId=null,this.isPrinting=!1,readOnly&&this.getRoot().addClass("qtype_ddimageortext-readonly");var thisQ=this;this.getNotYetLoadedImages().one("load",(function(){thisQ.waitForAllImagesToBeLoaded()})),this.waitForAllImagesToBeLoaded()}DragDropOntoImageQuestion.prototype.changeAllDragsAndDropsToFilteredContent=function(filteredElement){let currentFilteredItem=$(filteredElement);const parentIsDD=currentFilteredItem.parent().closest("div").hasClass("placed")||currentFilteredItem.parent().hasClass("draghome"),isDD=currentFilteredItem.hasClass("placed")||currentFilteredItem.hasClass("draghome");if(!parentIsDD&&!isDD)return;if(parentIsDD&&(currentFilteredItem=currentFilteredItem.parent().closest("div")),this.getRoot().find(currentFilteredItem).length<=0)return;const group=this.getGroup(currentFilteredItem),choice=this.getChoice(currentFilteredItem);let listOfModifiedDragDrop=[];this.getRoot().find(".group"+group+".choice"+choice).each((function(i,node){if($(node).get(0)===currentFilteredItem.get(0))return;const originalClass=$(node).attr("class"),originalStyle=$(node).attr("style"),filteredDragDropClone=currentFilteredItem.clone();questionManager.addEventHandlersToDrag(filteredDragDropClone),filteredDragDropClone.attr("class",originalClass),filteredDragDropClone.attr("style",originalStyle),$(node).before(filteredDragDropClone),listOfModifiedDragDrop.push(node)})),listOfModifiedDragDrop.forEach((function(node){$(node).remove()}));const currentHeight=currentFilteredItem.height(),currentWidth=currentFilteredItem.width();currentFilteredItem.height("auto"),currentFilteredItem.width("auto"),filteredElement.offsetWidth&&filteredElement.offsetHeight||filteredElement.classList.add("d-block"),this.questionDragDropWidthHeight[group].maxWidth0?this.imageLoadingTimeoutId=setTimeout((function(){thisQ.waitForAllImagesToBeLoaded()}),100):(this.allImagesLoaded=!0,thisQ.setupQuestion(),document.addEventListener(filterEvent.eventTypes.filterContentRenderingComplete,(elements=>{elements.detail.nodes.forEach((element=>{thisQ.changeAllDragsAndDropsToFilteredContent(element)}))}))))},DragDropOntoImageQuestion.prototype.getNotYetLoadedImages=function(){var thisQ=this;return this.getRoot().find(".ddarea img").not((function(i,imgNode){return thisQ.imageIsLoaded(imgNode)}))},DragDropOntoImageQuestion.prototype.imageIsLoaded=function(imgElement){return imgElement.complete&&0!==imgElement.naturalHeight},DragDropOntoImageQuestion.prototype.setupQuestion=function(){this.resizeAllDragsAndDrops(),this.cloneDrags(),this.positionDragsAndDrops(),M.util.js_complete("qtype_ddimageortext-init-"+this.containerId)},DragDropOntoImageQuestion.prototype.resizeAllDragsAndDrops=function(){var thisQ=this;this.getRoot().find(".draghomes > div").each((function(i,node){thisQ.resizeAllDragsAndDropsInGroup(thisQ.getClassnameNumericSuffix($(node),"dragitemgroup"))}))},DragDropOntoImageQuestion.prototype.resizeAllDragsAndDropsInGroup=function(group){var root=this.getRoot(),dragHomes=root.find(".draghome.group"+group),maxWidth=0,maxHeight=0;for(var i in dragHomes.each((function(i,drag){maxWidth=Math.max(maxWidth,Math.ceil(drag.offsetWidth)),maxHeight=Math.max(maxHeight,Math.ceil(drag.offsetHeight))})),maxWidth+=10,maxHeight+=10,this.questionDragDropWidthHeight[group]={maxWidth:maxWidth,maxHeight:maxHeight},dragHomes.each((function(i,drag){$(drag).width(maxWidth).height(maxHeight).css("lineHeight",maxHeight+"px")})),this.places)if(this.places.hasOwnProperty(i)){var place=this.places[i],label=place.text;parseInt(place.group)===group&&(""===label&&(label=M.util.get_string("blank","qtype_ddimageortext")),0===root.find(".dropzones .dropzone.group"+place.group+".place"+i).length&&root.find(".dropzones").append('
'+label+" 
"),root.find(".dropzone.place"+i).width(maxWidth-2).height(maxHeight-2))}},DragDropOntoImageQuestion.prototype.cloneDrags=function(){var thisQ=this;thisQ.getRoot().find(".draghome").each((function(index,dragHome){var drag=$(dragHome),placeHolder=drag.clone();placeHolder.removeClass(),placeHolder.addClass("draghome choice"+thisQ.getChoice(drag)+" group"+thisQ.getGroup(drag)+" dragplaceholder"),drag.before(placeHolder)}))},DragDropOntoImageQuestion.prototype.cloneDragsForOneChoice=function(dragHome){if(dragHome.hasClass("infinite"))for(var noOfDrags=this.noOfDropsInGroup(this.getGroup(dragHome)),i=0;i0&&"0"===choice)){var place=thisQ.getPlace(input),unplacedDrag=thisQ.getUnplacedChoice(thisQ.getGroup(input),choice),hiddenDrag=thisQ.getDragClone(unplacedDrag);if(hiddenDrag.length)if(unplacedDrag.hasClass("infinite")){var noOfDrags=thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));if(thisQ.getInfiniteDragClones(unplacedDrag,!1).length{result[inputNode.id]=inputNode.value})),result},DragDropOntoImageQuestion.prototype.isQuestionInteracted=function(){const oldAnswer=this.questionAnswer,newAnswer=this.getQuestionAnsweredValues();let isInteracted=!1;return JSON.stringify(newAnswer)!==JSON.stringify(oldAnswer)?(isInteracted=!0,isInteracted):(Object.keys(newAnswer).forEach((key=>{newAnswer[key]!==oldAnswer[key]&&(isInteracted=!0)})),isInteracted)},DragDropOntoImageQuestion.prototype.handleDragStart=function(e){var thisQ=this,drag=$(e.target).closest(".draghome"),newIndex=this.calculateZIndex()+2;if(dragDrop.prepare(e).start&&!drag.hasClass("beingdragged")){drag.addClass("beingdragged").css("transform","").css("z-index",newIndex);var currentPlace=this.getClassnameNumericSuffix(drag,"inplace");if(null!==currentPlace){this.setInputValue(currentPlace,0),drag.removeClass("inplace"+currentPlace);var hiddenDrop=thisQ.getDrop(drag,currentPlace);hiddenDrop.length&&(hiddenDrop.addClass("active"),drag.offset(hiddenDrop.offset()))}else{var hiddenDrag=thisQ.getDragClone(drag);if(hiddenDrag.length)if(drag.hasClass("infinite")){var noOfDrags=this.noOfDropsInGroup(thisQ.getGroup(drag));if(this.getInfiniteDragClones(drag,!1).length1;)choice--,previous=this.getUnplacedChoice(group,choice);return previous},DragDropOntoImageQuestion.prototype.animateTo=function(drag,target){var currentPos=drag.offset(),targetPos=target.offset(),thisQ=this;M.util.js_pending("qtype_ddimageortext-animate-"+thisQ.containerId),drag.animate({left:parseInt(drag.css("left"))+targetPos.left-currentPos.left,top:parseInt(drag.css("top"))+targetPos.top-currentPos.top},{duration:"fast",done:function(){$("body").trigger("qtype_ddimageortext-dragmoved",[drag,target,thisQ]),M.util.js_complete("qtype_ddimageortext-animate-"+thisQ.containerId)}})},DragDropOntoImageQuestion.prototype.isPointInDrop=function(pageX,pageY,drop){var position=drop.offset();return drop.hasClass("draghome")?pageX>=position.left&&pageX=position.top&&pageY=position.left&&pageX=position.top&&pageYzIndex&&(zIndex=itemZIndex)})),zIndex},DragDropOntoImageQuestion.prototype.isDragSameAsDrop=function(drag,drop){return this.getChoice(drag)===this.getChoice(drop)&&this.getGroup(drag)===this.getGroup(drop)};var questionManager={eventHandlersInitialised:!1,dragEventHandlersInitialised:{},isPrinting:!1,isKeyboardNavigation:!1,questions:{},init:function(containerId,readOnly,places){if(questionManager.questions[containerId]=new DragDropOntoImageQuestion(containerId,readOnly,places),questionManager.eventHandlersInitialised||(questionManager.setupEventHandlers(),questionManager.eventHandlersInitialised=!0),!questionManager.dragEventHandlersInitialised.hasOwnProperty(containerId)){questionManager.dragEventHandlersInitialised[containerId]=!0;var questionContainer=document.getElementById(containerId);questionContainer.classList.contains("ddimageortext")&&!questionContainer.classList.contains("qtype_ddimageortext-readonly")&&questionManager.addEventHandlersToDrag($(questionContainer).find(".draghome"))}},setupEventHandlers:function(){$("body").on("keydown",".que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone",questionManager.handleKeyPress).on("keydown",".que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)",questionManager.handleKeyPress).on("qtype_ddimageortext-dragmoved",questionManager.handleDragMoved),$(window).on("resize",(function(){questionManager.handleWindowResize(!1)})),window.addEventListener("beforeprint",(function(){questionManager.isPrinting=!0,questionManager.handleWindowResize(questionManager.isPrinting)})),window.addEventListener("afterprint",(function(){questionManager.isPrinting=!1,questionManager.handleWindowResize(questionManager.isPrinting)})),setTimeout((function(){questionManager.fixLayoutIfThingsMoved()}),100)},addEventHandlersToDrag:function(element){element.unbind("mousedown touchstart"),element.on("mousedown touchstart",questionManager.handleDragStart)},handleDragStart:function(e){e.preventDefault();var question=questionManager.getQuestionForEvent(e);question&&question.handleDragStart(e)},handleKeyPress:function(e){if(!questionManager.isKeyboardNavigation){questionManager.isKeyboardNavigation=!0;var question=questionManager.getQuestionForEvent(e);question&&question.handleKeyPress(e)}},handleWindowResize:function(isPrinting){for(var containerId in questionManager.questions)questionManager.questions.hasOwnProperty(containerId)&&(questionManager.questions[containerId].isPrinting=isPrinting,questionManager.questions[containerId].handleResize())},fixLayoutIfThingsMoved:function(){this.handleWindowResize(questionManager.isPrinting),setTimeout((function(){questionManager.fixLayoutIfThingsMoved(questionManager.isPrinting)}),100)},handleDragMoved:function(e,drag,target,thisQ){drag.removeClass("beingdragged").css("z-index",""),drag.css("top",target.position().top).css("left",target.position().left),target.after(drag),target.removeClass("active"),void 0!==drag.data("unplaced")&&!0===drag.data("unplaced")?(drag.removeClass("placed").addClass("unplaced"),drag.removeAttr("tabindex"),drag.removeData("unplaced"),drag.css("top","").css("left","").css("transform",""),drag.hasClass("infinite")&&thisQ.getInfiniteDragClones(drag,!0).length>1&&thisQ.getInfiniteDragClones(drag,!0).first().remove()):(drag.data("originX",target.data("originX")).data("originY",target.data("originY")),thisQ.handleElementScale(drag,"left top")),void 0!==drag.data("isfocus")&&!0===drag.data("isfocus")&&(drag.focus(),drag.removeData("isfocus")),void 0!==target.data("isfocus")&&!0===target.data("isfocus")&&target.removeData("isfocus"),questionManager.isKeyboardNavigation&&(questionManager.isKeyboardNavigation=!1),thisQ.isQuestionInteracted()&&(questionManager.handleFormDirty(),thisQ.questionAnswer=thisQ.getQuestionAnsweredValues())},getQuestionForEvent:function(e){var containerId=$(e.currentTarget).closest(".que.ddimageortext").attr("id");return questionManager.questions[containerId]},handleFormDirty:function(){const responseForm=document.getElementById("responseform");FormChangeChecker.markFormAsDirty(responseForm)}};return{init:questionManager.init}})); +define("qtype_ddimageortext/question",["jquery","core/dragdrop","core/key_codes","core_form/changechecker","core_filters/events"],(function($,dragDrop,keys,FormChangeChecker,filterEvent){function DragDropOntoImageQuestion(containerId,readOnly,places){this.containerId=containerId,this.questionAnswer={},this.questionDragDropWidthHeight=[],M.util.js_pending("qtype_ddimageortext-init-"+this.containerId),this.places=places,this.allImagesLoaded=!1,this.imageLoadingTimeoutId=null,this.isPrinting=!1,readOnly&&this.getRoot().addClass("qtype_ddimageortext-readonly");var thisQ=this;this.getNotYetLoadedImages().one("load",(function(){thisQ.waitForAllImagesToBeLoaded()})),this.waitForAllImagesToBeLoaded()}DragDropOntoImageQuestion.prototype.changeAllDragsAndDropsToFilteredContent=function(filteredElement){let currentFilteredItem=$(filteredElement);const parentIsDD=currentFilteredItem.parent().closest("div").hasClass("placed")||currentFilteredItem.parent().hasClass("draghome"),isDD=currentFilteredItem.hasClass("placed")||currentFilteredItem.hasClass("draghome");if(!parentIsDD&&!isDD)return;if(parentIsDD&&(currentFilteredItem=currentFilteredItem.parent().closest("div")),this.getRoot().find(currentFilteredItem).length<=0)return;const group=this.getGroup(currentFilteredItem),choice=this.getChoice(currentFilteredItem);let listOfModifiedDragDrop=[];this.getRoot().find(".group"+group+".choice"+choice).each((function(i,node){if($(node).get(0)===currentFilteredItem.get(0))return;const originalClass=$(node).attr("class"),originalStyle=$(node).attr("style"),filteredDragDropClone=currentFilteredItem.clone();questionManager.addEventHandlersToDrag(filteredDragDropClone),filteredDragDropClone.attr("class",originalClass),filteredDragDropClone.attr("style",originalStyle),$(node).before(filteredDragDropClone),listOfModifiedDragDrop.push(node)})),listOfModifiedDragDrop.forEach((function(node){$(node).remove()}));const currentHeight=currentFilteredItem.height(),currentWidth=currentFilteredItem.width();currentFilteredItem.height("auto"),currentFilteredItem.width("auto"),filteredElement.offsetWidth&&filteredElement.offsetHeight||filteredElement.classList.add("d-block"),this.questionDragDropWidthHeight[group].maxWidth0?this.imageLoadingTimeoutId=setTimeout((function(){thisQ.waitForAllImagesToBeLoaded()}),100):(this.allImagesLoaded=!0,thisQ.setupQuestion(),document.addEventListener(filterEvent.eventTypes.filterContentRenderingComplete,(elements=>{elements.detail.nodes.forEach((element=>{thisQ.changeAllDragsAndDropsToFilteredContent(element)}))}))))},DragDropOntoImageQuestion.prototype.getNotYetLoadedImages=function(){var thisQ=this;return this.getRoot().find(".ddarea img").not((function(i,imgNode){return thisQ.imageIsLoaded(imgNode)}))},DragDropOntoImageQuestion.prototype.imageIsLoaded=function(imgElement){return imgElement.complete&&0!==imgElement.naturalHeight},DragDropOntoImageQuestion.prototype.setupQuestion=function(){this.resizeAllDragsAndDrops(),this.cloneDrags(),this.positionDragsAndDrops(),M.util.js_complete("qtype_ddimageortext-init-"+this.containerId)},DragDropOntoImageQuestion.prototype.resizeAllDragsAndDrops=function(){var thisQ=this;this.getRoot().find(".draghomes > div").each((function(i,node){thisQ.resizeAllDragsAndDropsInGroup(thisQ.getClassnameNumericSuffix($(node),"dragitemgroup"))}))},DragDropOntoImageQuestion.prototype.resizeAllDragsAndDropsInGroup=function(group){var root=this.getRoot(),dragHomes=root.find(".draghome.group"+group),maxWidth=0,maxHeight=0;for(var i in dragHomes.each((function(i,drag){maxWidth=Math.max(maxWidth,Math.ceil(drag.offsetWidth)),maxHeight=Math.max(maxHeight,Math.ceil(drag.offsetHeight))})),maxWidth+=10,maxHeight+=10,this.questionDragDropWidthHeight[group]={maxWidth:maxWidth,maxHeight:maxHeight},dragHomes.each((function(i,drag){const top=Math.floor((maxHeight-drag.offsetHeight)/2);$(drag).width(maxWidth).height(maxHeight).css({"padding-top":top+"px"})})),this.places)if(this.places.hasOwnProperty(i)){var place=this.places[i],label=place.text;parseInt(place.group)===group&&(""===label&&(label=M.util.get_string("blank","qtype_ddimageortext")),0===root.find(".dropzones .dropzone.group"+place.group+".place"+i).length&&root.find(".dropzones").append('
'+label+" 
"),root.find(".dropzone.place"+i).width(maxWidth-2).height(maxHeight-2))}},DragDropOntoImageQuestion.prototype.cloneDrags=function(){var thisQ=this;thisQ.getRoot().find(".draghome").each((function(index,dragHome){var drag=$(dragHome),placeHolder=drag.clone();placeHolder.removeClass(),placeHolder.addClass("draghome choice"+thisQ.getChoice(drag)+" group"+thisQ.getGroup(drag)+" dragplaceholder"),drag.before(placeHolder)}))},DragDropOntoImageQuestion.prototype.cloneDragsForOneChoice=function(dragHome){if(dragHome.hasClass("infinite"))for(var noOfDrags=this.noOfDropsInGroup(this.getGroup(dragHome)),i=0;i0&&"0"===choice)){var place=thisQ.getPlace(input),unplacedDrag=thisQ.getUnplacedChoice(thisQ.getGroup(input),choice),hiddenDrag=thisQ.getDragClone(unplacedDrag);if(hiddenDrag.length)if(unplacedDrag.hasClass("infinite")){var noOfDrags=thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));if(thisQ.getInfiniteDragClones(unplacedDrag,!1).length{result[inputNode.id]=inputNode.value})),result},DragDropOntoImageQuestion.prototype.isQuestionInteracted=function(){const oldAnswer=this.questionAnswer,newAnswer=this.getQuestionAnsweredValues();let isInteracted=!1;return JSON.stringify(newAnswer)!==JSON.stringify(oldAnswer)?(isInteracted=!0,isInteracted):(Object.keys(newAnswer).forEach((key=>{newAnswer[key]!==oldAnswer[key]&&(isInteracted=!0)})),isInteracted)},DragDropOntoImageQuestion.prototype.handleDragStart=function(e){var thisQ=this,drag=$(e.target).closest(".draghome"),newIndex=this.calculateZIndex()+2;if(dragDrop.prepare(e).start&&!drag.hasClass("beingdragged")){drag.addClass("beingdragged").css("transform","").css("z-index",newIndex);var currentPlace=this.getClassnameNumericSuffix(drag,"inplace");if(null!==currentPlace){this.setInputValue(currentPlace,0),drag.removeClass("inplace"+currentPlace);var hiddenDrop=thisQ.getDrop(drag,currentPlace);hiddenDrop.length&&(hiddenDrop.addClass("active"),drag.offset(hiddenDrop.offset()))}else{var hiddenDrag=thisQ.getDragClone(drag);if(hiddenDrag.length)if(drag.hasClass("infinite")){var noOfDrags=this.noOfDropsInGroup(thisQ.getGroup(drag));if(this.getInfiniteDragClones(drag,!1).length1;)choice--,previous=this.getUnplacedChoice(group,choice);return previous},DragDropOntoImageQuestion.prototype.animateTo=function(drag,target){var currentPos=drag.offset(),targetPos=target.offset(),thisQ=this;M.util.js_pending("qtype_ddimageortext-animate-"+thisQ.containerId),drag.animate({left:parseInt(drag.css("left"))+targetPos.left-currentPos.left,top:parseInt(drag.css("top"))+targetPos.top-currentPos.top},{duration:"fast",done:function(){$("body").trigger("qtype_ddimageortext-dragmoved",[drag,target,thisQ]),M.util.js_complete("qtype_ddimageortext-animate-"+thisQ.containerId)}})},DragDropOntoImageQuestion.prototype.isPointInDrop=function(pageX,pageY,drop){var position=drop.offset();return drop.hasClass("draghome")?pageX>=position.left&&pageX=position.top&&pageY=position.left&&pageX=position.top&&pageYzIndex&&(zIndex=itemZIndex)})),zIndex},DragDropOntoImageQuestion.prototype.isDragSameAsDrop=function(drag,drop){return this.getChoice(drag)===this.getChoice(drop)&&this.getGroup(drag)===this.getGroup(drop)};var questionManager={eventHandlersInitialised:!1,dragEventHandlersInitialised:{},isPrinting:!1,isKeyboardNavigation:!1,questions:{},init:function(containerId,readOnly,places){if(questionManager.questions[containerId]=new DragDropOntoImageQuestion(containerId,readOnly,places),questionManager.eventHandlersInitialised||(questionManager.setupEventHandlers(),questionManager.eventHandlersInitialised=!0),!questionManager.dragEventHandlersInitialised.hasOwnProperty(containerId)){questionManager.dragEventHandlersInitialised[containerId]=!0;var questionContainer=document.getElementById(containerId);questionContainer.classList.contains("ddimageortext")&&!questionContainer.classList.contains("qtype_ddimageortext-readonly")&&questionManager.addEventHandlersToDrag($(questionContainer).find(".draghome"))}},setupEventHandlers:function(){$("body").on("keydown",".que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone",questionManager.handleKeyPress).on("keydown",".que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)",questionManager.handleKeyPress).on("qtype_ddimageortext-dragmoved",questionManager.handleDragMoved),$(window).on("resize",(function(){questionManager.handleWindowResize(!1)})),window.addEventListener("beforeprint",(function(){questionManager.isPrinting=!0,questionManager.handleWindowResize(questionManager.isPrinting)})),window.addEventListener("afterprint",(function(){questionManager.isPrinting=!1,questionManager.handleWindowResize(questionManager.isPrinting)})),setTimeout((function(){questionManager.fixLayoutIfThingsMoved()}),100)},addEventHandlersToDrag:function(element){element.unbind("mousedown touchstart"),element.on("mousedown touchstart",questionManager.handleDragStart)},handleDragStart:function(e){e.preventDefault();var question=questionManager.getQuestionForEvent(e);question&&question.handleDragStart(e)},handleKeyPress:function(e){if(!questionManager.isKeyboardNavigation){questionManager.isKeyboardNavigation=!0;var question=questionManager.getQuestionForEvent(e);question&&question.handleKeyPress(e)}},handleWindowResize:function(isPrinting){for(var containerId in questionManager.questions)questionManager.questions.hasOwnProperty(containerId)&&(questionManager.questions[containerId].isPrinting=isPrinting,questionManager.questions[containerId].handleResize())},fixLayoutIfThingsMoved:function(){this.handleWindowResize(questionManager.isPrinting),setTimeout((function(){questionManager.fixLayoutIfThingsMoved(questionManager.isPrinting)}),100)},handleDragMoved:function(e,drag,target,thisQ){drag.removeClass("beingdragged").css("z-index",""),drag.css("top",target.position().top).css("left",target.position().left),target.after(drag),target.removeClass("active"),void 0!==drag.data("unplaced")&&!0===drag.data("unplaced")?(drag.removeClass("placed").addClass("unplaced"),drag.removeAttr("tabindex"),drag.removeData("unplaced"),drag.css("top","").css("left","").css("transform",""),drag.hasClass("infinite")&&thisQ.getInfiniteDragClones(drag,!0).length>1&&thisQ.getInfiniteDragClones(drag,!0).first().remove()):(drag.data("originX",target.data("originX")).data("originY",target.data("originY")),thisQ.handleElementScale(drag,"left top")),void 0!==drag.data("isfocus")&&!0===drag.data("isfocus")&&(drag.focus(),drag.removeData("isfocus")),void 0!==target.data("isfocus")&&!0===target.data("isfocus")&&target.removeData("isfocus"),questionManager.isKeyboardNavigation&&(questionManager.isKeyboardNavigation=!1),thisQ.isQuestionInteracted()&&(questionManager.handleFormDirty(),thisQ.questionAnswer=thisQ.getQuestionAnsweredValues())},getQuestionForEvent:function(e){var containerId=$(e.currentTarget).closest(".que.ddimageortext").attr("id");return questionManager.questions[containerId]},handleFormDirty:function(){const responseForm=document.getElementById("responseform");FormChangeChecker.markFormAsDirty(responseForm)}};return{init:questionManager.init}})); //# sourceMappingURL=question.min.js.map \ No newline at end of file diff --git a/question/type/ddimageortext/amd/build/question.min.js.map b/question/type/ddimageortext/amd/build/question.min.js.map index 9b89c089dc4..2462c615a78 100644 --- a/question/type/ddimageortext/amd/build/question.min.js.map +++ b/question/type/ddimageortext/amd/build/question.min.js.map @@ -1 +1 @@ -{"version":3,"file":"question.min.js","sources":["../src/question.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/*\n * JavaScript to allow dragging options to slots (using mouse down or touch) or tab through slots using keyboard.\n *\n * @module qtype_ddimageortext/question\n * @copyright 2018 The Open University\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine([\n 'jquery',\n 'core/dragdrop',\n 'core/key_codes',\n 'core_form/changechecker',\n 'core_filters/events',\n], function(\n $,\n dragDrop,\n keys,\n FormChangeChecker,\n filterEvent\n) {\n\n \"use strict\";\n\n /**\n * Initialise one drag-drop onto image question.\n *\n * @param {String} containerId id of the outer div for this question.\n * @param {boolean} readOnly whether the question is being displayed read-only.\n * @param {Array} places Information about the drop places.\n * @constructor\n */\n function DragDropOntoImageQuestion(containerId, readOnly, places) {\n this.containerId = containerId;\n this.questionAnswer = {};\n this.questionDragDropWidthHeight = [];\n M.util.js_pending('qtype_ddimageortext-init-' + this.containerId);\n this.places = places;\n this.allImagesLoaded = false;\n this.imageLoadingTimeoutId = null;\n this.isPrinting = false;\n if (readOnly) {\n this.getRoot().addClass('qtype_ddimageortext-readonly');\n }\n\n var thisQ = this;\n this.getNotYetLoadedImages().one('load', function() {\n thisQ.waitForAllImagesToBeLoaded();\n });\n this.waitForAllImagesToBeLoaded();\n }\n\n /**\n * Change all the drags and drops related to the item that has been changed by filter to correct size and content.\n *\n * @param {object} filteredElement the element has been modified by filter.\n */\n DragDropOntoImageQuestion.prototype.changeAllDragsAndDropsToFilteredContent = function(filteredElement) {\n let currentFilteredItem = $(filteredElement);\n const parentIsDD = currentFilteredItem.parent().closest('div').hasClass('placed') ||\n currentFilteredItem.parent().hasClass('draghome');\n const isDD = currentFilteredItem.hasClass('placed') || currentFilteredItem.hasClass('draghome');\n // The filtered element or parent element should a drag or drop item.\n if (!parentIsDD && !isDD) {\n return;\n }\n if (parentIsDD) {\n currentFilteredItem = currentFilteredItem.parent().closest('div');\n }\n if (this.getRoot().find(currentFilteredItem).length <= 0) {\n // If the DD item doesn't belong to this question\n // In case we have multiple questions in the same page.\n return;\n }\n const group = this.getGroup(currentFilteredItem),\n choice = this.getChoice(currentFilteredItem);\n let listOfModifiedDragDrop = [];\n // Get the list of drag and drop item within the same group and choice.\n this.getRoot().find('.group' + group + '.choice' + choice).each(function(i, node) {\n // Same modified item, skip it.\n if ($(node).get(0) === currentFilteredItem.get(0)) {\n return;\n }\n const originalClass = $(node).attr('class');\n const originalStyle = $(node).attr('style');\n // We want to keep all the handler and event for filtered item, so using clone is the only choice.\n const filteredDragDropClone = currentFilteredItem.clone();\n // Sometimes, for the question that has a lot of input groups and unlimited draggable items,\n // this 'clone' process takes longer than usual,it will not add the eventHandler for this cloned drag.\n // We need to make sure to add the eventHandler for the cloned drag too.\n questionManager.addEventHandlersToDrag(filteredDragDropClone);\n // Replace the class and style of the drag drop item we want to replace for the clone.\n filteredDragDropClone.attr('class', originalClass);\n filteredDragDropClone.attr('style', originalStyle);\n // Insert into DOM.\n $(node).before(filteredDragDropClone);\n // Add the item has been replaced to a list so we can remove it later.\n listOfModifiedDragDrop.push(node);\n });\n\n listOfModifiedDragDrop.forEach(function(node) {\n $(node).remove();\n });\n // Save the current height and width.\n const currentHeight = currentFilteredItem.height();\n const currentWidth = currentFilteredItem.width();\n // Set to auto, so we can get the real height and width of the filtered item.\n currentFilteredItem.height('auto');\n currentFilteredItem.width('auto');\n // We need to set display block so we can get height and width.\n // Some browsers can't get the offsetWidth/Height if they are an inline element like span tag.\n if (!filteredElement.offsetWidth || !filteredElement.offsetHeight) {\n filteredElement.classList.add('d-block');\n }\n if (this.questionDragDropWidthHeight[group].maxWidth < Math.ceil(filteredElement.offsetWidth) ||\n this.questionDragDropWidthHeight[group].maxHeight < Math.ceil(0 + filteredElement.offsetHeight)) {\n // Remove the d-block class before calculation.\n filteredElement.classList.remove('d-block');\n // Now resize all the items in the same group if we have new maximum width or height.\n this.resizeAllDragsAndDropsInGroup(group);\n } else {\n currentFilteredItem.height(currentHeight);\n currentFilteredItem.width(currentWidth);\n }\n // Remove the d-block class after resize.\n filteredElement.classList.remove('d-block');\n };\n\n /**\n * Waits until all images are loaded before calling setupQuestion().\n *\n * This function is called from the onLoad of each image, and also polls with\n * a time-out, because image on-loads are allegedly unreliable.\n */\n DragDropOntoImageQuestion.prototype.waitForAllImagesToBeLoaded = function() {\n var thisQ = this;\n\n // This method may get called multiple times (via image on-loads or timeouts.\n // If we are already done, don't do it again.\n if (this.allImagesLoaded) {\n return;\n }\n\n // Clear any current timeout, if set.\n if (this.imageLoadingTimeoutId !== null) {\n clearTimeout(this.imageLoadingTimeoutId);\n }\n\n // If we have not yet loaded all images, set a timeout to\n // call ourselves again, since apparently images on-load\n // events are flakey.\n if (this.getNotYetLoadedImages().length > 0) {\n this.imageLoadingTimeoutId = setTimeout(function() {\n thisQ.waitForAllImagesToBeLoaded();\n }, 100);\n return;\n }\n\n // We now have all images. Carry on, but only after giving the layout a chance to settle down.\n this.allImagesLoaded = true;\n thisQ.setupQuestion();\n // Wait for all dynamic content loaded by filter to be completed.\n document.addEventListener(filterEvent.eventTypes.filterContentRenderingComplete, (elements) => {\n elements.detail.nodes.forEach((element) => {\n thisQ.changeAllDragsAndDropsToFilteredContent(element);\n });\n });\n };\n\n /**\n * Get any of the images in the drag-drop area that are not yet fully loaded.\n *\n * @returns {jQuery} those images.\n */\n DragDropOntoImageQuestion.prototype.getNotYetLoadedImages = function() {\n var thisQ = this;\n return this.getRoot().find('.ddarea img').not(function(i, imgNode) {\n return thisQ.imageIsLoaded(imgNode);\n });\n };\n\n /**\n * Check if an image has loaded without errors.\n *\n * @param {HTMLImageElement} imgElement an image.\n * @returns {boolean} true if this image has loaded without errors.\n */\n DragDropOntoImageQuestion.prototype.imageIsLoaded = function(imgElement) {\n return imgElement.complete && imgElement.naturalHeight !== 0;\n };\n\n /**\n * Set up the question, once all images have been loaded.\n */\n DragDropOntoImageQuestion.prototype.setupQuestion = function() {\n this.resizeAllDragsAndDrops();\n this.cloneDrags();\n this.positionDragsAndDrops();\n M.util.js_complete('qtype_ddimageortext-init-' + this.containerId);\n };\n\n /**\n * In each group, resize all the items to be the same size.\n */\n DragDropOntoImageQuestion.prototype.resizeAllDragsAndDrops = function() {\n var thisQ = this;\n this.getRoot().find('.draghomes > div').each(function(i, node) {\n thisQ.resizeAllDragsAndDropsInGroup(\n thisQ.getClassnameNumericSuffix($(node), 'dragitemgroup'));\n });\n };\n\n /**\n * In a given group, set all the drags and drops to be the same size.\n *\n * @param {int} group the group number.\n */\n DragDropOntoImageQuestion.prototype.resizeAllDragsAndDropsInGroup = function(group) {\n var root = this.getRoot(),\n dragHomes = root.find(\".draghome.group\" + group),\n maxWidth = 0,\n maxHeight = 0;\n\n // Find the maximum size of any drag in this groups.\n dragHomes.each(function(i, drag) {\n maxWidth = Math.max(maxWidth, Math.ceil(drag.offsetWidth));\n maxHeight = Math.max(maxHeight, Math.ceil(drag.offsetHeight));\n });\n\n // The size we will want to set is a bit bigger than this.\n maxWidth += 10;\n maxHeight += 10;\n this.questionDragDropWidthHeight[group] = {maxWidth, maxHeight};\n\n // Set each drag home to that size.\n dragHomes.each(function(i, drag) {\n $(drag).width(maxWidth).height(maxHeight).css('lineHeight', maxHeight + 'px');\n });\n\n // Create the drops and make them the right size.\n for (var i in this.places) {\n if (!this.places.hasOwnProperty((i))) {\n continue;\n }\n var place = this.places[i],\n label = place.text;\n if (parseInt(place.group) !== group) {\n continue;\n }\n if (label === '') {\n label = M.util.get_string('blank', 'qtype_ddimageortext');\n }\n if (root.find('.dropzones .dropzone.group' + place.group + '.place' + i).length === 0) {\n root.find('.dropzones').append('
' +\n '' + label + ' 
');\n }\n root.find('.dropzone.place' + i).width(maxWidth - 2).height(maxHeight - 2);\n }\n };\n\n /**\n * Invisible 'drag homes' are output by the renderer. These have the same properties\n * as the drag items but are invisible. We clone these invisible elements to make the\n * actual drag items.\n */\n DragDropOntoImageQuestion.prototype.cloneDrags = function() {\n var thisQ = this;\n thisQ.getRoot().find('.draghome').each(function(index, dragHome) {\n var drag = $(dragHome);\n var placeHolder = drag.clone();\n placeHolder.removeClass();\n placeHolder.addClass('draghome choice' +\n thisQ.getChoice(drag) + ' group' +\n thisQ.getGroup(drag) + ' dragplaceholder');\n drag.before(placeHolder);\n });\n };\n\n /**\n * Clone drag item for one choice.\n *\n * @param {jQuery} dragHome the drag home to clone.\n */\n DragDropOntoImageQuestion.prototype.cloneDragsForOneChoice = function(dragHome) {\n if (dragHome.hasClass('infinite')) {\n var noOfDrags = this.noOfDropsInGroup(this.getGroup(dragHome));\n for (var i = 0; i < noOfDrags; i++) {\n this.cloneDrag(dragHome);\n }\n } else {\n this.cloneDrag(dragHome);\n }\n };\n\n /**\n * Clone drag item.\n *\n * @param {jQuery} dragHome\n */\n DragDropOntoImageQuestion.prototype.cloneDrag = function(dragHome) {\n var drag = dragHome.clone();\n drag.removeClass('draghome')\n .addClass('drag unplaced moodle-has-zindex')\n .offset(dragHome.offset());\n this.getRoot().find('.dragitems').append(drag);\n };\n\n /**\n * Update the position of drags.\n */\n DragDropOntoImageQuestion.prototype.positionDragsAndDrops = function() {\n var thisQ = this,\n root = this.getRoot(),\n bgRatio = this.bgRatio();\n\n // Move the drops into position.\n root.find('.ddarea .dropzone').each(function(i, dropNode) {\n var drop = $(dropNode),\n place = thisQ.places[thisQ.getPlace(drop)];\n // The xy values come from PHP as strings, so we need parseInt to stop JS doing string concatenation.\n drop.css('left', parseInt(place.xy[0]) * bgRatio)\n .css('top', parseInt(place.xy[1]) * bgRatio);\n drop.data('originX', parseInt(place.xy[0]))\n .data('originY', parseInt(place.xy[1]));\n thisQ.handleElementScale(drop, 'left top');\n });\n\n // First move all items back home.\n root.find('.draghome').not('.dragplaceholder').each(function(i, dragNode) {\n var drag = $(dragNode),\n currentPlace = thisQ.getClassnameNumericSuffix(drag, 'inplace');\n drag.addClass('unplaced')\n .removeClass('placed');\n drag.removeAttr('tabindex');\n if (currentPlace !== null) {\n drag.removeClass('inplace' + currentPlace);\n }\n });\n\n // Then place the ones that should be placed.\n root.find('input.placeinput').each(function(i, inputNode) {\n var input = $(inputNode),\n choice = input.val();\n if (choice.length === 0 || (choice.length > 0 && choice === '0')) {\n // No item in this place.\n return;\n }\n\n var place = thisQ.getPlace(input);\n // Get the unplaced drag.\n var unplacedDrag = thisQ.getUnplacedChoice(thisQ.getGroup(input), choice);\n // Get the clone of the drag.\n var hiddenDrag = thisQ.getDragClone(unplacedDrag);\n if (hiddenDrag.length) {\n if (unplacedDrag.hasClass('infinite')) {\n var noOfDrags = thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));\n var cloneDrags = thisQ.getInfiniteDragClones(unplacedDrag, false);\n if (cloneDrags.length < noOfDrags) {\n var cloneDrag = unplacedDrag.clone();\n cloneDrag.removeClass('beingdragged');\n cloneDrag.removeAttr('tabindex');\n hiddenDrag.after(cloneDrag);\n // Sometimes, for the question that has a lot of input groups and unlimited draggable items,\n // this 'clone' process takes longer than usual, so the questionManager.init() method\n // will not add the eventHandler for this cloned drag.\n // We need to make sure to add the eventHandler for the cloned drag too.\n questionManager.addEventHandlersToDrag(cloneDrag);\n } else {\n hiddenDrag.addClass('active');\n }\n } else {\n hiddenDrag.addClass('active');\n }\n }\n\n // Send the drag to drop.\n var drop = root.find('.dropzone.place' + place);\n thisQ.sendDragToDrop(unplacedDrag, drop);\n });\n\n // Save the question answer.\n thisQ.questionAnswer = thisQ.getQuestionAnsweredValues();\n };\n\n /**\n * Get the question answered values.\n *\n * @return {Object} Contain key-value with key is the input id and value is the input value.\n */\n DragDropOntoImageQuestion.prototype.getQuestionAnsweredValues = function() {\n let result = {};\n this.getRoot().find('input.placeinput').each((i, inputNode) => {\n result[inputNode.id] = inputNode.value;\n });\n\n return result;\n };\n\n /**\n * Check if the question is being interacted or not.\n *\n * @return {boolean} Return true if the user has changed the question-answer.\n */\n DragDropOntoImageQuestion.prototype.isQuestionInteracted = function() {\n const oldAnswer = this.questionAnswer;\n const newAnswer = this.getQuestionAnsweredValues();\n let isInteracted = false;\n\n // First, check both answers have the same structure or not.\n if (JSON.stringify(newAnswer) !== JSON.stringify(oldAnswer)) {\n isInteracted = true;\n return isInteracted;\n }\n // Check the values.\n Object.keys(newAnswer).forEach(key => {\n if (newAnswer[key] !== oldAnswer[key]) {\n isInteracted = true;\n }\n });\n\n return isInteracted;\n };\n\n /**\n * Handles the start of dragging an item.\n *\n * @param {Event} e the touch start or mouse down event.\n */\n DragDropOntoImageQuestion.prototype.handleDragStart = function(e) {\n var thisQ = this,\n drag = $(e.target).closest('.draghome'),\n currentIndex = this.calculateZIndex(),\n newIndex = currentIndex + 2;\n\n var info = dragDrop.prepare(e);\n if (!info.start || drag.hasClass('beingdragged')) {\n return;\n }\n\n drag.addClass('beingdragged').css('transform', '').css('z-index', newIndex);\n var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');\n if (currentPlace !== null) {\n this.setInputValue(currentPlace, 0);\n drag.removeClass('inplace' + currentPlace);\n var hiddenDrop = thisQ.getDrop(drag, currentPlace);\n if (hiddenDrop.length) {\n hiddenDrop.addClass('active');\n drag.offset(hiddenDrop.offset());\n }\n } else {\n var hiddenDrag = thisQ.getDragClone(drag);\n if (hiddenDrag.length) {\n if (drag.hasClass('infinite')) {\n var noOfDrags = this.noOfDropsInGroup(thisQ.getGroup(drag));\n var cloneDrags = this.getInfiniteDragClones(drag, false);\n if (cloneDrags.length < noOfDrags) {\n var cloneDrag = drag.clone();\n cloneDrag.removeClass('beingdragged');\n cloneDrag.removeAttr('tabindex');\n hiddenDrag.after(cloneDrag);\n questionManager.addEventHandlersToDrag(cloneDrag);\n drag.offset(cloneDrag.offset());\n } else {\n hiddenDrag.addClass('active');\n drag.offset(hiddenDrag.offset());\n }\n } else {\n hiddenDrag.addClass('active');\n drag.offset(hiddenDrag.offset());\n }\n }\n }\n\n dragDrop.start(e, drag, function(x, y, drag) {\n thisQ.dragMove(x, y, drag);\n }, function(x, y, drag) {\n thisQ.dragEnd(x, y, drag);\n });\n };\n\n /**\n * Called whenever the currently dragged items moves.\n *\n * @param {Number} pageX the x position.\n * @param {Number} pageY the y position.\n * @param {jQuery} drag the item being moved.\n */\n DragDropOntoImageQuestion.prototype.dragMove = function(pageX, pageY, drag) {\n var thisQ = this,\n highlighted = false;\n this.getRoot().find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {\n var drop = $(dropNode);\n if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted) {\n highlighted = true;\n drop.addClass('valid-drag-over-drop');\n } else {\n drop.removeClass('valid-drag-over-drop');\n }\n });\n this.getRoot().find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, dropNode) {\n var drop = $(dropNode);\n if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted && !thisQ.isDragSameAsDrop(drag, drop)) {\n highlighted = true;\n drop.addClass('valid-drag-over-drop');\n } else {\n drop.removeClass('valid-drag-over-drop');\n }\n });\n };\n\n /**\n * Called when user drops a drag item.\n *\n * @param {Number} pageX the x position.\n * @param {Number} pageY the y position.\n * @param {jQuery} drag the item being moved.\n */\n DragDropOntoImageQuestion.prototype.dragEnd = function(pageX, pageY, drag) {\n var thisQ = this,\n root = this.getRoot(),\n placed = false;\n\n // Looking for drag that was dropped on a dropzone.\n root.find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {\n var drop = $(dropNode);\n if (!thisQ.isPointInDrop(pageX, pageY, drop)) {\n // Not this drop.\n return true;\n }\n\n // Now put this drag into the drop.\n drop.removeClass('valid-drag-over-drop');\n thisQ.sendDragToDrop(drag, drop);\n placed = true;\n return false; // Stop the each() here.\n });\n\n if (!placed) {\n // Looking for drag that was dropped on a placed drag.\n root.find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, placedNode) {\n var placedDrag = $(placedNode);\n if (!thisQ.isPointInDrop(pageX, pageY, placedDrag) || thisQ.isDragSameAsDrop(drag, placedDrag)) {\n // Not this placed drag.\n return true;\n }\n\n // Now put this drag into the drop.\n placedDrag.removeClass('valid-drag-over-drop');\n var currentPlace = thisQ.getClassnameNumericSuffix(placedDrag, 'inplace');\n var drop = thisQ.getDrop(drag, currentPlace);\n thisQ.sendDragToDrop(drag, drop);\n placed = true;\n return false; // Stop the each() here.\n });\n }\n\n if (!placed) {\n this.sendDragHome(drag);\n }\n };\n\n /**\n * Animate a drag item into a given place (or back home).\n *\n * @param {jQuery|null} drag the item to place. If null, clear the place.\n * @param {jQuery} drop the place to put it.\n */\n DragDropOntoImageQuestion.prototype.sendDragToDrop = function(drag, drop) {\n // Is there already a drag in this drop? if so, evict it.\n var oldDrag = this.getCurrentDragInPlace(this.getPlace(drop));\n if (oldDrag.length !== 0) {\n oldDrag.addClass('beingdragged');\n oldDrag.offset(oldDrag.offset());\n var currentPlace = this.getClassnameNumericSuffix(oldDrag, 'inplace');\n var hiddenDrop = this.getDrop(oldDrag, currentPlace);\n hiddenDrop.addClass('active');\n this.sendDragHome(oldDrag);\n }\n\n if (drag.length === 0) {\n this.setInputValue(this.getPlace(drop), 0);\n if (drop.data('isfocus')) {\n drop.focus();\n }\n } else {\n this.setInputValue(this.getPlace(drop), this.getChoice(drag));\n drag.removeClass('unplaced')\n .addClass('placed inplace' + this.getPlace(drop));\n drag.attr('tabindex', 0);\n this.animateTo(drag, drop);\n }\n };\n\n /**\n * Animate a drag back to its home.\n *\n * @param {jQuery} drag the item being moved.\n */\n DragDropOntoImageQuestion.prototype.sendDragHome = function(drag) {\n var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');\n if (currentPlace !== null) {\n drag.removeClass('inplace' + currentPlace);\n }\n drag.data('unplaced', true);\n\n this.animateTo(drag, this.getDragHome(this.getGroup(drag), this.getChoice(drag)));\n };\n\n /**\n * Handles keyboard events on drops.\n *\n * Drops are focusable. Once focused, right/down/space switches to the next choice, and\n * left/up switches to the previous. Escape clear.\n *\n * @param {KeyboardEvent} e\n */\n DragDropOntoImageQuestion.prototype.handleKeyPress = function(e) {\n var drop = $(e.target).closest('.dropzone');\n if (drop.length === 0) {\n var placedDrag = $(e.target);\n var currentPlace = this.getClassnameNumericSuffix(placedDrag, 'inplace');\n if (currentPlace !== null) {\n drop = this.getDrop(placedDrag, currentPlace);\n }\n }\n var currentDrag = this.getCurrentDragInPlace(this.getPlace(drop)),\n nextDrag = $();\n\n switch (e.keyCode) {\n case keys.space:\n case keys.arrowRight:\n case keys.arrowDown:\n nextDrag = this.getNextDrag(this.getGroup(drop), currentDrag);\n break;\n\n case keys.arrowLeft:\n case keys.arrowUp:\n nextDrag = this.getPreviousDrag(this.getGroup(drop), currentDrag);\n break;\n\n case keys.escape:\n questionManager.isKeyboardNavigation = false;\n break;\n\n default:\n questionManager.isKeyboardNavigation = false;\n return; // To avoid the preventDefault below.\n }\n\n if (nextDrag.length) {\n nextDrag.data('isfocus', true);\n nextDrag.addClass('beingdragged');\n var hiddenDrag = this.getDragClone(nextDrag);\n if (hiddenDrag.length) {\n if (nextDrag.hasClass('infinite')) {\n var noOfDrags = this.noOfDropsInGroup(this.getGroup(nextDrag));\n var cloneDrags = this.getInfiniteDragClones(nextDrag, false);\n if (cloneDrags.length < noOfDrags) {\n var cloneDrag = nextDrag.clone();\n cloneDrag.removeClass('beingdragged');\n cloneDrag.removeAttr('tabindex');\n hiddenDrag.after(cloneDrag);\n questionManager.addEventHandlersToDrag(cloneDrag);\n nextDrag.offset(cloneDrag.offset());\n } else {\n hiddenDrag.addClass('active');\n nextDrag.offset(hiddenDrag.offset());\n }\n } else {\n hiddenDrag.addClass('active');\n nextDrag.offset(hiddenDrag.offset());\n }\n }\n } else {\n drop.data('isfocus', true);\n }\n\n e.preventDefault();\n this.sendDragToDrop(nextDrag, drop);\n };\n\n /**\n * Choose the next drag in a group.\n *\n * @param {int} group which group.\n * @param {jQuery} drag current choice (empty jQuery if there isn't one).\n * @return {jQuery} the next drag in that group, or null if there wasn't one.\n */\n DragDropOntoImageQuestion.prototype.getNextDrag = function(group, drag) {\n var choice,\n numChoices = this.noOfChoicesInGroup(group);\n\n if (drag.length === 0) {\n choice = 1; // Was empty, so we want to select the first choice.\n } else {\n choice = this.getChoice(drag) + 1;\n }\n\n var next = this.getUnplacedChoice(group, choice);\n while (next.length === 0 && choice < numChoices) {\n choice++;\n next = this.getUnplacedChoice(group, choice);\n }\n\n return next;\n };\n\n /**\n * Choose the previous drag in a group.\n *\n * @param {int} group which group.\n * @param {jQuery} drag current choice (empty jQuery if there isn't one).\n * @return {jQuery} the next drag in that group, or null if there wasn't one.\n */\n DragDropOntoImageQuestion.prototype.getPreviousDrag = function(group, drag) {\n var choice;\n\n if (drag.length === 0) {\n choice = this.noOfChoicesInGroup(group);\n } else {\n choice = this.getChoice(drag) - 1;\n }\n\n var previous = this.getUnplacedChoice(group, choice);\n while (previous.length === 0 && choice > 1) {\n choice--;\n previous = this.getUnplacedChoice(group, choice);\n }\n\n // Does this choice exist?\n return previous;\n };\n\n /**\n * Animate an object to the given destination.\n *\n * @param {jQuery} drag the element to be animated.\n * @param {jQuery} target element marking the place to move it to.\n */\n DragDropOntoImageQuestion.prototype.animateTo = function(drag, target) {\n var currentPos = drag.offset(),\n targetPos = target.offset(),\n thisQ = this;\n\n M.util.js_pending('qtype_ddimageortext-animate-' + thisQ.containerId);\n // Animate works in terms of CSS position, whereas locating an object\n // on the page works best with jQuery offset() function. So, to get\n // the right target position, we work out the required change in\n // offset() and then add that to the current CSS position.\n drag.animate(\n {\n left: parseInt(drag.css('left')) + targetPos.left - currentPos.left,\n top: parseInt(drag.css('top')) + targetPos.top - currentPos.top\n },\n {\n duration: 'fast',\n done: function() {\n $('body').trigger('qtype_ddimageortext-dragmoved', [drag, target, thisQ]);\n M.util.js_complete('qtype_ddimageortext-animate-' + thisQ.containerId);\n }\n }\n );\n };\n\n /**\n * Detect if a point is inside a given DOM node.\n *\n * @param {Number} pageX the x position.\n * @param {Number} pageY the y position.\n * @param {jQuery} drop the node to check (typically a drop).\n * @return {boolean} whether the point is inside the node.\n */\n DragDropOntoImageQuestion.prototype.isPointInDrop = function(pageX, pageY, drop) {\n var position = drop.offset();\n if (drop.hasClass('draghome')) {\n return pageX >= position.left && pageX < position.left + drop.outerWidth()\n && pageY >= position.top && pageY < position.top + drop.outerHeight();\n }\n return pageX >= position.left && pageX < position.left + drop.width()\n && pageY >= position.top && pageY < position.top + drop.height();\n };\n\n /**\n * Set the value of the hidden input for a place, to record what is currently there.\n *\n * @param {int} place which place to set the input value for.\n * @param {int} choice the value to set.\n */\n DragDropOntoImageQuestion.prototype.setInputValue = function(place, choice) {\n this.getRoot().find('input.placeinput.place' + place).val(choice);\n };\n\n /**\n * Get the outer div for this question.\n *\n * @returns {jQuery} containing that div.\n */\n DragDropOntoImageQuestion.prototype.getRoot = function() {\n return $(document.getElementById(this.containerId));\n };\n\n /**\n * Get the img that is the background image.\n * @returns {jQuery} containing that img.\n */\n DragDropOntoImageQuestion.prototype.bgImage = function() {\n return this.getRoot().find('img.dropbackground');\n };\n\n /**\n * Get drag home for a given choice.\n *\n * @param {int} group the group.\n * @param {int} choice the choice number.\n * @returns {jQuery} containing that div.\n */\n DragDropOntoImageQuestion.prototype.getDragHome = function(group, choice) {\n if (!this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice).is(':visible')) {\n return this.getRoot().find('.dragitemgroup' + group +\n ' .draghome.infinite' +\n '.choice' + choice +\n '.group' + group);\n }\n return this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice);\n };\n\n /**\n * Get an unplaced choice for a particular group.\n *\n * @param {int} group the group.\n * @param {int} choice the choice number.\n * @returns {jQuery} jQuery wrapping the unplaced choice. If there isn't one, the jQuery will be empty.\n */\n DragDropOntoImageQuestion.prototype.getUnplacedChoice = function(group, choice) {\n return this.getRoot().find('.ddarea .draghome.group' + group + '.choice' + choice + '.unplaced').slice(0, 1);\n };\n\n /**\n * Get the drag that is currently in a given place.\n *\n * @param {int} place the place number.\n * @return {jQuery} the current drag (or an empty jQuery if none).\n */\n DragDropOntoImageQuestion.prototype.getCurrentDragInPlace = function(place) {\n return this.getRoot().find('.ddarea .draghome.inplace' + place);\n };\n\n /**\n * Return the number of blanks in a given group.\n *\n * @param {int} group the group number.\n * @returns {int} the number of drops.\n */\n DragDropOntoImageQuestion.prototype.noOfDropsInGroup = function(group) {\n return this.getRoot().find('.dropzone.group' + group).length;\n };\n\n /**\n * Return the number of choices in a given group.\n *\n * @param {int} group the group number.\n * @returns {int} the number of choices.\n */\n DragDropOntoImageQuestion.prototype.noOfChoicesInGroup = function(group) {\n return this.getRoot().find('.dragitemgroup' + group + ' .draghome').length;\n };\n\n /**\n * Return the number at the end of the CSS class name with the given prefix.\n *\n * @param {jQuery} node\n * @param {String} prefix name prefix\n * @returns {Number|null} the suffix if found, else null.\n */\n DragDropOntoImageQuestion.prototype.getClassnameNumericSuffix = function(node, prefix) {\n var classes = node.attr('class');\n if (classes !== '') {\n var classesArr = classes.split(' ');\n for (var index = 0; index < classesArr.length; index++) {\n var patt1 = new RegExp('^' + prefix + '([0-9])+$');\n if (patt1.test(classesArr[index])) {\n var patt2 = new RegExp('([0-9])+$');\n var match = patt2.exec(classesArr[index]);\n return Number(match[0]);\n }\n }\n }\n return null;\n };\n\n /**\n * Get the choice number of a drag.\n *\n * @param {jQuery} drag the drag.\n * @returns {Number} the choice number.\n */\n DragDropOntoImageQuestion.prototype.getChoice = function(drag) {\n return this.getClassnameNumericSuffix(drag, 'choice');\n };\n\n /**\n * Given a DOM node that is significant to this question\n * (drag, drop, ...) get the group it belongs to.\n *\n * @param {jQuery} node a DOM node.\n * @returns {Number} the group it belongs to.\n */\n DragDropOntoImageQuestion.prototype.getGroup = function(node) {\n return this.getClassnameNumericSuffix(node, 'group');\n };\n\n /**\n * Get the place number of a drop, or its corresponding hidden input.\n *\n * @param {jQuery} node the DOM node.\n * @returns {Number} the place number.\n */\n DragDropOntoImageQuestion.prototype.getPlace = function(node) {\n return this.getClassnameNumericSuffix(node, 'place');\n };\n\n /**\n * Get drag clone for a given drag.\n *\n * @param {jQuery} drag the drag.\n * @returns {jQuery} the drag's clone.\n */\n DragDropOntoImageQuestion.prototype.getDragClone = function(drag) {\n return this.getRoot().find('.dragitemgroup' +\n this.getGroup(drag) +\n ' .draghome' +\n '.choice' + this.getChoice(drag) +\n '.group' + this.getGroup(drag) +\n '.dragplaceholder');\n };\n\n /**\n * Get infinite drag clones for given drag.\n *\n * @param {jQuery} drag the drag.\n * @param {Boolean} inHome in the home area or not.\n * @returns {jQuery} the drag's clones.\n */\n DragDropOntoImageQuestion.prototype.getInfiniteDragClones = function(drag, inHome) {\n if (inHome) {\n return this.getRoot().find('.dragitemgroup' +\n this.getGroup(drag) +\n ' .draghome' +\n '.choice' + this.getChoice(drag) +\n '.group' + this.getGroup(drag) +\n '.infinite').not('.dragplaceholder');\n }\n return this.getRoot().find('.draghome' +\n '.choice' + this.getChoice(drag) +\n '.group' + this.getGroup(drag) +\n '.infinite').not('.dragplaceholder');\n };\n\n /**\n * Get drop for a given drag and place.\n *\n * @param {jQuery} drag the drag.\n * @param {Integer} currentPlace the current place of drag.\n * @returns {jQuery} the drop's clone.\n */\n DragDropOntoImageQuestion.prototype.getDrop = function(drag, currentPlace) {\n return this.getRoot().find('.dropzone.group' + this.getGroup(drag) + '.place' + currentPlace);\n };\n\n /**\n * Handle when the window is resized.\n */\n DragDropOntoImageQuestion.prototype.handleResize = function() {\n var thisQ = this,\n bgRatio = this.bgRatio();\n if (this.isPrinting) {\n bgRatio = 1;\n }\n\n this.getRoot().find('.ddarea .dropzone').each(function(i, dropNode) {\n $(dropNode)\n .css('left', parseInt($(dropNode).data('originX')) * parseFloat(bgRatio))\n .css('top', parseInt($(dropNode).data('originY')) * parseFloat(bgRatio));\n thisQ.handleElementScale(dropNode, 'left top');\n });\n\n this.getRoot().find('div.droparea .draghome').not('.beingdragged').each(function(key, drag) {\n $(drag)\n .css('left', parseFloat($(drag).data('originX')) * parseFloat(bgRatio))\n .css('top', parseFloat($(drag).data('originY')) * parseFloat(bgRatio));\n thisQ.handleElementScale(drag, 'left top');\n });\n };\n\n /**\n * Return the background ratio.\n *\n * @returns {number} Background ratio.\n */\n DragDropOntoImageQuestion.prototype.bgRatio = function() {\n var bgImg = this.bgImage();\n var bgImgNaturalWidth = bgImg.get(0).naturalWidth;\n var bgImgClientWidth = bgImg.width();\n\n return bgImgClientWidth / bgImgNaturalWidth;\n };\n\n /**\n * Scale the drag if needed.\n *\n * @param {jQuery} element the item to place.\n * @param {String} type scaling type\n */\n DragDropOntoImageQuestion.prototype.handleElementScale = function(element, type) {\n var bgRatio = parseFloat(this.bgRatio());\n if (this.isPrinting) {\n bgRatio = 1;\n }\n $(element).css({\n '-webkit-transform': 'scale(' + bgRatio + ')',\n '-moz-transform': 'scale(' + bgRatio + ')',\n '-ms-transform': 'scale(' + bgRatio + ')',\n '-o-transform': 'scale(' + bgRatio + ')',\n 'transform': 'scale(' + bgRatio + ')',\n 'transform-origin': type\n });\n };\n\n /**\n * Calculate z-index value.\n *\n * @returns {number} z-index value\n */\n DragDropOntoImageQuestion.prototype.calculateZIndex = function() {\n var zIndex = 0;\n this.getRoot().find('.ddarea .dropzone, div.droparea .draghome').each(function(i, dropNode) {\n dropNode = $(dropNode);\n // Note that webkit browsers won't return the z-index value from the CSS stylesheet\n // if the element doesn't have a position specified. Instead it'll return \"auto\".\n var itemZIndex = dropNode.css('z-index') ? parseInt(dropNode.css('z-index')) : 0;\n\n if (itemZIndex > zIndex) {\n zIndex = itemZIndex;\n }\n });\n\n return zIndex;\n };\n\n /**\n * Check that the drag is drop to it's clone.\n *\n * @param {jQuery} drag The drag.\n * @param {jQuery} drop The drop.\n * @returns {boolean}\n */\n DragDropOntoImageQuestion.prototype.isDragSameAsDrop = function(drag, drop) {\n return this.getChoice(drag) === this.getChoice(drop) && this.getGroup(drag) === this.getGroup(drop);\n };\n\n /**\n * Singleton object that handles all the DragDropOntoImageQuestions\n * on the page, and deals with event dispatching.\n * @type {Object}\n */\n var questionManager = {\n\n /**\n * {boolean} ensures that the event handlers are only initialised once per page.\n */\n eventHandlersInitialised: false,\n\n /**\n * {Object} ensures that the drag event handlers are only initialised once per question,\n * indexed by containerId (id on the .que div).\n */\n dragEventHandlersInitialised: {},\n\n /**\n * {boolean} is printing or not.\n */\n isPrinting: false,\n\n /**\n * {boolean} is keyboard navigation or not.\n */\n isKeyboardNavigation: false,\n\n /**\n * {Object} all the questions on this page, indexed by containerId (id on the .que div).\n */\n questions: {}, // An object containing all the information about each question on the page.\n\n /**\n * Initialise one question.\n *\n * @method\n * @param {String} containerId the id of the div.que that contains this question.\n * @param {boolean} readOnly whether the question is read-only.\n * @param {Array} places data.\n */\n init: function(containerId, readOnly, places) {\n questionManager.questions[containerId] =\n new DragDropOntoImageQuestion(containerId, readOnly, places);\n if (!questionManager.eventHandlersInitialised) {\n questionManager.setupEventHandlers();\n questionManager.eventHandlersInitialised = true;\n }\n if (!questionManager.dragEventHandlersInitialised.hasOwnProperty(containerId)) {\n questionManager.dragEventHandlersInitialised[containerId] = true;\n // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.\n var questionContainer = document.getElementById(containerId);\n if (questionContainer.classList.contains('ddimageortext') &&\n !questionContainer.classList.contains('qtype_ddimageortext-readonly')) {\n // TODO: Convert all the jQuery selectors and events to native Javascript.\n questionManager.addEventHandlersToDrag($(questionContainer).find('.draghome'));\n }\n }\n },\n\n /**\n * Set up the event handlers that make this question type work. (Done once per page.)\n */\n setupEventHandlers: function() {\n $('body')\n .on('keydown',\n '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone',\n questionManager.handleKeyPress)\n .on('keydown',\n '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)',\n questionManager.handleKeyPress)\n .on('qtype_ddimageortext-dragmoved', questionManager.handleDragMoved);\n $(window).on('resize', function() {\n questionManager.handleWindowResize(false);\n });\n window.addEventListener('beforeprint', function() {\n questionManager.isPrinting = true;\n questionManager.handleWindowResize(questionManager.isPrinting);\n });\n window.addEventListener('afterprint', function() {\n questionManager.isPrinting = false;\n questionManager.handleWindowResize(questionManager.isPrinting);\n });\n setTimeout(function() {\n questionManager.fixLayoutIfThingsMoved();\n }, 100);\n },\n\n /**\n * Binding the drag/touch event again for newly created element.\n *\n * @param {jQuery} element Element to bind the event\n */\n addEventHandlersToDrag: function(element) {\n // Unbind all the mousedown and touchstart events to prevent double binding.\n element.unbind('mousedown touchstart');\n element.on('mousedown touchstart', questionManager.handleDragStart);\n },\n\n /**\n * Handle mouse down / touch start events on drags.\n * @param {Event} e the DOM event.\n */\n handleDragStart: function(e) {\n e.preventDefault();\n var question = questionManager.getQuestionForEvent(e);\n if (question) {\n question.handleDragStart(e);\n }\n },\n\n /**\n * Handle key down / press events on drags.\n * @param {KeyboardEvent} e\n */\n handleKeyPress: function(e) {\n if (questionManager.isKeyboardNavigation) {\n return;\n }\n questionManager.isKeyboardNavigation = true;\n var question = questionManager.getQuestionForEvent(e);\n if (question) {\n question.handleKeyPress(e);\n }\n },\n\n /**\n * Handle when the window is resized.\n * @param {boolean} isPrinting\n */\n handleWindowResize: function(isPrinting) {\n for (var containerId in questionManager.questions) {\n if (questionManager.questions.hasOwnProperty(containerId)) {\n questionManager.questions[containerId].isPrinting = isPrinting;\n questionManager.questions[containerId].handleResize();\n }\n }\n },\n\n /**\n * Sometimes, despite our best efforts, things change in a way that cannot\n * be specifically caught (e.g. dock expanding or collapsing in Boost).\n * Therefore, we need to periodically check everything is in the right position.\n */\n fixLayoutIfThingsMoved: function() {\n this.handleWindowResize(questionManager.isPrinting);\n // We use setTimeout after finishing work, rather than setInterval,\n // in case positioning things is slow. We want 100 ms gap\n // between executions, not what setInterval does.\n setTimeout(function() {\n questionManager.fixLayoutIfThingsMoved(questionManager.isPrinting);\n }, 100);\n },\n\n /**\n * Handle when drag moved.\n *\n * @param {Event} e the event.\n * @param {jQuery} drag the drag\n * @param {jQuery} target the target\n * @param {DragDropOntoImageQuestion} thisQ the question.\n */\n handleDragMoved: function(e, drag, target, thisQ) {\n drag.removeClass('beingdragged').css('z-index', '');\n drag.css('top', target.position().top).css('left', target.position().left);\n target.after(drag);\n target.removeClass('active');\n if (typeof drag.data('unplaced') !== 'undefined' && drag.data('unplaced') === true) {\n drag.removeClass('placed').addClass('unplaced');\n drag.removeAttr('tabindex');\n drag.removeData('unplaced');\n drag.css('top', '')\n .css('left', '')\n .css('transform', '');\n if (drag.hasClass('infinite') && thisQ.getInfiniteDragClones(drag, true).length > 1) {\n thisQ.getInfiniteDragClones(drag, true).first().remove();\n }\n } else {\n drag.data('originX', target.data('originX')).data('originY', target.data('originY'));\n thisQ.handleElementScale(drag, 'left top');\n }\n if (typeof drag.data('isfocus') !== 'undefined' && drag.data('isfocus') === true) {\n drag.focus();\n drag.removeData('isfocus');\n }\n if (typeof target.data('isfocus') !== 'undefined' && target.data('isfocus') === true) {\n target.removeData('isfocus');\n }\n if (questionManager.isKeyboardNavigation) {\n questionManager.isKeyboardNavigation = false;\n }\n if (thisQ.isQuestionInteracted()) {\n // The user has interacted with the draggable items. We need to mark the form as dirty.\n questionManager.handleFormDirty();\n // Save the new answered value.\n thisQ.questionAnswer = thisQ.getQuestionAnsweredValues();\n }\n },\n\n /**\n * Given an event, work out which question it effects.\n * @param {Event} e the event.\n * @returns {DragDropOntoImageQuestion|undefined} The question, or undefined.\n */\n getQuestionForEvent: function(e) {\n var containerId = $(e.currentTarget).closest('.que.ddimageortext').attr('id');\n return questionManager.questions[containerId];\n },\n\n /**\n * Handle when the form is dirty.\n */\n handleFormDirty: function() {\n const responseForm = document.getElementById('responseform');\n FormChangeChecker.markFormAsDirty(responseForm);\n }\n };\n\n /**\n * @alias module:qtype_ddimageortext/question\n */\n return {\n init: questionManager.init\n };\n});\n"],"names":["define","$","dragDrop","keys","FormChangeChecker","filterEvent","DragDropOntoImageQuestion","containerId","readOnly","places","questionAnswer","questionDragDropWidthHeight","M","util","js_pending","this","allImagesLoaded","imageLoadingTimeoutId","isPrinting","getRoot","addClass","thisQ","getNotYetLoadedImages","one","waitForAllImagesToBeLoaded","prototype","changeAllDragsAndDropsToFilteredContent","filteredElement","currentFilteredItem","parentIsDD","parent","closest","hasClass","isDD","find","length","group","getGroup","choice","getChoice","listOfModifiedDragDrop","each","i","node","get","originalClass","attr","originalStyle","filteredDragDropClone","clone","questionManager","addEventHandlersToDrag","before","push","forEach","remove","currentHeight","height","currentWidth","width","offsetWidth","offsetHeight","classList","add","maxWidth","Math","ceil","maxHeight","resizeAllDragsAndDropsInGroup","clearTimeout","setTimeout","setupQuestion","document","addEventListener","eventTypes","filterContentRenderingComplete","elements","detail","nodes","element","not","imgNode","imageIsLoaded","imgElement","complete","naturalHeight","resizeAllDragsAndDrops","cloneDrags","positionDragsAndDrops","js_complete","getClassnameNumericSuffix","root","dragHomes","drag","max","css","hasOwnProperty","place","label","text","parseInt","get_string","append","index","dragHome","placeHolder","removeClass","cloneDragsForOneChoice","noOfDrags","noOfDropsInGroup","cloneDrag","offset","bgRatio","dropNode","drop","getPlace","xy","data","handleElementScale","dragNode","currentPlace","removeAttr","inputNode","input","val","unplacedDrag","getUnplacedChoice","hiddenDrag","getDragClone","getInfiniteDragClones","after","sendDragToDrop","getQuestionAnsweredValues","result","id","value","isQuestionInteracted","oldAnswer","newAnswer","isInteracted","JSON","stringify","Object","key","handleDragStart","e","target","newIndex","calculateZIndex","prepare","start","setInputValue","hiddenDrop","getDrop","x","y","dragMove","dragEnd","pageX","pageY","highlighted","isPointInDrop","isDragSameAsDrop","placed","placedNode","placedDrag","sendDragHome","oldDrag","getCurrentDragInPlace","focus","animateTo","getDragHome","handleKeyPress","currentDrag","nextDrag","keyCode","space","arrowRight","arrowDown","getNextDrag","arrowLeft","arrowUp","getPreviousDrag","escape","isKeyboardNavigation","preventDefault","numChoices","noOfChoicesInGroup","next","previous","currentPos","targetPos","animate","left","top","duration","done","trigger","position","outerWidth","outerHeight","getElementById","bgImage","is","slice","prefix","classes","classesArr","split","RegExp","test","match","exec","Number","inHome","handleResize","parseFloat","bgImg","bgImgNaturalWidth","naturalWidth","type","zIndex","itemZIndex","eventHandlersInitialised","dragEventHandlersInitialised","questions","init","setupEventHandlers","questionContainer","contains","on","handleDragMoved","window","handleWindowResize","fixLayoutIfThingsMoved","unbind","question","getQuestionForEvent","removeData","first","handleFormDirty","currentTarget","responseForm","markFormAsDirty"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"question.min.js","sources":["../src/question.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/*\n * JavaScript to allow dragging options to slots (using mouse down or touch) or tab through slots using keyboard.\n *\n * @module qtype_ddimageortext/question\n * @copyright 2018 The Open University\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine([\n 'jquery',\n 'core/dragdrop',\n 'core/key_codes',\n 'core_form/changechecker',\n 'core_filters/events',\n], function(\n $,\n dragDrop,\n keys,\n FormChangeChecker,\n filterEvent\n) {\n\n \"use strict\";\n\n /**\n * Initialise one drag-drop onto image question.\n *\n * @param {String} containerId id of the outer div for this question.\n * @param {boolean} readOnly whether the question is being displayed read-only.\n * @param {Array} places Information about the drop places.\n * @constructor\n */\n function DragDropOntoImageQuestion(containerId, readOnly, places) {\n this.containerId = containerId;\n this.questionAnswer = {};\n this.questionDragDropWidthHeight = [];\n M.util.js_pending('qtype_ddimageortext-init-' + this.containerId);\n this.places = places;\n this.allImagesLoaded = false;\n this.imageLoadingTimeoutId = null;\n this.isPrinting = false;\n if (readOnly) {\n this.getRoot().addClass('qtype_ddimageortext-readonly');\n }\n\n var thisQ = this;\n this.getNotYetLoadedImages().one('load', function() {\n thisQ.waitForAllImagesToBeLoaded();\n });\n this.waitForAllImagesToBeLoaded();\n }\n\n /**\n * Change all the drags and drops related to the item that has been changed by filter to correct size and content.\n *\n * @param {object} filteredElement the element has been modified by filter.\n */\n DragDropOntoImageQuestion.prototype.changeAllDragsAndDropsToFilteredContent = function(filteredElement) {\n let currentFilteredItem = $(filteredElement);\n const parentIsDD = currentFilteredItem.parent().closest('div').hasClass('placed') ||\n currentFilteredItem.parent().hasClass('draghome');\n const isDD = currentFilteredItem.hasClass('placed') || currentFilteredItem.hasClass('draghome');\n // The filtered element or parent element should a drag or drop item.\n if (!parentIsDD && !isDD) {\n return;\n }\n if (parentIsDD) {\n currentFilteredItem = currentFilteredItem.parent().closest('div');\n }\n if (this.getRoot().find(currentFilteredItem).length <= 0) {\n // If the DD item doesn't belong to this question\n // In case we have multiple questions in the same page.\n return;\n }\n const group = this.getGroup(currentFilteredItem),\n choice = this.getChoice(currentFilteredItem);\n let listOfModifiedDragDrop = [];\n // Get the list of drag and drop item within the same group and choice.\n this.getRoot().find('.group' + group + '.choice' + choice).each(function(i, node) {\n // Same modified item, skip it.\n if ($(node).get(0) === currentFilteredItem.get(0)) {\n return;\n }\n const originalClass = $(node).attr('class');\n const originalStyle = $(node).attr('style');\n // We want to keep all the handler and event for filtered item, so using clone is the only choice.\n const filteredDragDropClone = currentFilteredItem.clone();\n // Sometimes, for the question that has a lot of input groups and unlimited draggable items,\n // this 'clone' process takes longer than usual,it will not add the eventHandler for this cloned drag.\n // We need to make sure to add the eventHandler for the cloned drag too.\n questionManager.addEventHandlersToDrag(filteredDragDropClone);\n // Replace the class and style of the drag drop item we want to replace for the clone.\n filteredDragDropClone.attr('class', originalClass);\n filteredDragDropClone.attr('style', originalStyle);\n // Insert into DOM.\n $(node).before(filteredDragDropClone);\n // Add the item has been replaced to a list so we can remove it later.\n listOfModifiedDragDrop.push(node);\n });\n\n listOfModifiedDragDrop.forEach(function(node) {\n $(node).remove();\n });\n // Save the current height and width.\n const currentHeight = currentFilteredItem.height();\n const currentWidth = currentFilteredItem.width();\n // Set to auto, so we can get the real height and width of the filtered item.\n currentFilteredItem.height('auto');\n currentFilteredItem.width('auto');\n // We need to set display block so we can get height and width.\n // Some browsers can't get the offsetWidth/Height if they are an inline element like span tag.\n if (!filteredElement.offsetWidth || !filteredElement.offsetHeight) {\n filteredElement.classList.add('d-block');\n }\n if (this.questionDragDropWidthHeight[group].maxWidth < Math.ceil(filteredElement.offsetWidth) ||\n this.questionDragDropWidthHeight[group].maxHeight < Math.ceil(0 + filteredElement.offsetHeight)) {\n // Remove the d-block class before calculation.\n filteredElement.classList.remove('d-block');\n // Now resize all the items in the same group if we have new maximum width or height.\n this.resizeAllDragsAndDropsInGroup(group);\n } else {\n currentFilteredItem.height(currentHeight);\n currentFilteredItem.width(currentWidth);\n }\n // Remove the d-block class after resize.\n filteredElement.classList.remove('d-block');\n };\n\n /**\n * Waits until all images are loaded before calling setupQuestion().\n *\n * This function is called from the onLoad of each image, and also polls with\n * a time-out, because image on-loads are allegedly unreliable.\n */\n DragDropOntoImageQuestion.prototype.waitForAllImagesToBeLoaded = function() {\n var thisQ = this;\n\n // This method may get called multiple times (via image on-loads or timeouts.\n // If we are already done, don't do it again.\n if (this.allImagesLoaded) {\n return;\n }\n\n // Clear any current timeout, if set.\n if (this.imageLoadingTimeoutId !== null) {\n clearTimeout(this.imageLoadingTimeoutId);\n }\n\n // If we have not yet loaded all images, set a timeout to\n // call ourselves again, since apparently images on-load\n // events are flakey.\n if (this.getNotYetLoadedImages().length > 0) {\n this.imageLoadingTimeoutId = setTimeout(function() {\n thisQ.waitForAllImagesToBeLoaded();\n }, 100);\n return;\n }\n\n // We now have all images. Carry on, but only after giving the layout a chance to settle down.\n this.allImagesLoaded = true;\n thisQ.setupQuestion();\n // Wait for all dynamic content loaded by filter to be completed.\n document.addEventListener(filterEvent.eventTypes.filterContentRenderingComplete, (elements) => {\n elements.detail.nodes.forEach((element) => {\n thisQ.changeAllDragsAndDropsToFilteredContent(element);\n });\n });\n };\n\n /**\n * Get any of the images in the drag-drop area that are not yet fully loaded.\n *\n * @returns {jQuery} those images.\n */\n DragDropOntoImageQuestion.prototype.getNotYetLoadedImages = function() {\n var thisQ = this;\n return this.getRoot().find('.ddarea img').not(function(i, imgNode) {\n return thisQ.imageIsLoaded(imgNode);\n });\n };\n\n /**\n * Check if an image has loaded without errors.\n *\n * @param {HTMLImageElement} imgElement an image.\n * @returns {boolean} true if this image has loaded without errors.\n */\n DragDropOntoImageQuestion.prototype.imageIsLoaded = function(imgElement) {\n return imgElement.complete && imgElement.naturalHeight !== 0;\n };\n\n /**\n * Set up the question, once all images have been loaded.\n */\n DragDropOntoImageQuestion.prototype.setupQuestion = function() {\n this.resizeAllDragsAndDrops();\n this.cloneDrags();\n this.positionDragsAndDrops();\n M.util.js_complete('qtype_ddimageortext-init-' + this.containerId);\n };\n\n /**\n * In each group, resize all the items to be the same size.\n */\n DragDropOntoImageQuestion.prototype.resizeAllDragsAndDrops = function() {\n var thisQ = this;\n this.getRoot().find('.draghomes > div').each(function(i, node) {\n thisQ.resizeAllDragsAndDropsInGroup(\n thisQ.getClassnameNumericSuffix($(node), 'dragitemgroup'));\n });\n };\n\n /**\n * In a given group, set all the drags and drops to be the same size.\n *\n * @param {int} group the group number.\n */\n DragDropOntoImageQuestion.prototype.resizeAllDragsAndDropsInGroup = function(group) {\n var root = this.getRoot(),\n dragHomes = root.find(\".draghome.group\" + group),\n maxWidth = 0,\n maxHeight = 0;\n\n // Find the maximum size of any drag in this groups.\n dragHomes.each(function(i, drag) {\n maxWidth = Math.max(maxWidth, Math.ceil(drag.offsetWidth));\n maxHeight = Math.max(maxHeight, Math.ceil(drag.offsetHeight));\n });\n\n // The size we will want to set is a bit bigger than this.\n maxWidth += 10;\n maxHeight += 10;\n this.questionDragDropWidthHeight[group] = {maxWidth, maxHeight};\n\n // Set each drag home to that size.\n dragHomes.each(function(i, drag) {\n const top = Math.floor((maxHeight - drag.offsetHeight) / 2);\n // Set top padding so the item is centred.\n $(drag).width(maxWidth).height(maxHeight).css({\n 'padding-top': top + 'px',\n });\n });\n\n // Create the drops and make them the right size.\n for (var i in this.places) {\n if (!this.places.hasOwnProperty((i))) {\n continue;\n }\n var place = this.places[i],\n label = place.text;\n if (parseInt(place.group) !== group) {\n continue;\n }\n if (label === '') {\n label = M.util.get_string('blank', 'qtype_ddimageortext');\n }\n if (root.find('.dropzones .dropzone.group' + place.group + '.place' + i).length === 0) {\n root.find('.dropzones').append('
' +\n '' + label + ' 
');\n }\n root.find('.dropzone.place' + i).width(maxWidth - 2).height(maxHeight - 2);\n }\n };\n\n /**\n * Invisible 'drag homes' are output by the renderer. These have the same properties\n * as the drag items but are invisible. We clone these invisible elements to make the\n * actual drag items.\n */\n DragDropOntoImageQuestion.prototype.cloneDrags = function() {\n var thisQ = this;\n thisQ.getRoot().find('.draghome').each(function(index, dragHome) {\n var drag = $(dragHome);\n var placeHolder = drag.clone();\n placeHolder.removeClass();\n placeHolder.addClass('draghome choice' +\n thisQ.getChoice(drag) + ' group' +\n thisQ.getGroup(drag) + ' dragplaceholder');\n drag.before(placeHolder);\n });\n };\n\n /**\n * Clone drag item for one choice.\n *\n * @param {jQuery} dragHome the drag home to clone.\n */\n DragDropOntoImageQuestion.prototype.cloneDragsForOneChoice = function(dragHome) {\n if (dragHome.hasClass('infinite')) {\n var noOfDrags = this.noOfDropsInGroup(this.getGroup(dragHome));\n for (var i = 0; i < noOfDrags; i++) {\n this.cloneDrag(dragHome);\n }\n } else {\n this.cloneDrag(dragHome);\n }\n };\n\n /**\n * Clone drag item.\n *\n * @param {jQuery} dragHome\n */\n DragDropOntoImageQuestion.prototype.cloneDrag = function(dragHome) {\n var drag = dragHome.clone();\n drag.removeClass('draghome')\n .addClass('drag unplaced moodle-has-zindex')\n .offset(dragHome.offset());\n this.getRoot().find('.dragitems').append(drag);\n };\n\n /**\n * Update the position of drags.\n */\n DragDropOntoImageQuestion.prototype.positionDragsAndDrops = function() {\n var thisQ = this,\n root = this.getRoot(),\n bgRatio = this.bgRatio();\n\n // Move the drops into position.\n root.find('.ddarea .dropzone').each(function(i, dropNode) {\n var drop = $(dropNode),\n place = thisQ.places[thisQ.getPlace(drop)];\n // The xy values come from PHP as strings, so we need parseInt to stop JS doing string concatenation.\n drop.css('left', parseInt(place.xy[0]) * bgRatio)\n .css('top', parseInt(place.xy[1]) * bgRatio);\n drop.data('originX', parseInt(place.xy[0]))\n .data('originY', parseInt(place.xy[1]));\n thisQ.handleElementScale(drop, 'left top');\n });\n\n // First move all items back home.\n root.find('.draghome').not('.dragplaceholder').each(function(i, dragNode) {\n var drag = $(dragNode),\n currentPlace = thisQ.getClassnameNumericSuffix(drag, 'inplace');\n drag.addClass('unplaced')\n .removeClass('placed');\n drag.removeAttr('tabindex');\n if (currentPlace !== null) {\n drag.removeClass('inplace' + currentPlace);\n }\n });\n\n // Then place the ones that should be placed.\n root.find('input.placeinput').each(function(i, inputNode) {\n var input = $(inputNode),\n choice = input.val();\n if (choice.length === 0 || (choice.length > 0 && choice === '0')) {\n // No item in this place.\n return;\n }\n\n var place = thisQ.getPlace(input);\n // Get the unplaced drag.\n var unplacedDrag = thisQ.getUnplacedChoice(thisQ.getGroup(input), choice);\n // Get the clone of the drag.\n var hiddenDrag = thisQ.getDragClone(unplacedDrag);\n if (hiddenDrag.length) {\n if (unplacedDrag.hasClass('infinite')) {\n var noOfDrags = thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));\n var cloneDrags = thisQ.getInfiniteDragClones(unplacedDrag, false);\n if (cloneDrags.length < noOfDrags) {\n var cloneDrag = unplacedDrag.clone();\n cloneDrag.removeClass('beingdragged');\n cloneDrag.removeAttr('tabindex');\n hiddenDrag.after(cloneDrag);\n // Sometimes, for the question that has a lot of input groups and unlimited draggable items,\n // this 'clone' process takes longer than usual, so the questionManager.init() method\n // will not add the eventHandler for this cloned drag.\n // We need to make sure to add the eventHandler for the cloned drag too.\n questionManager.addEventHandlersToDrag(cloneDrag);\n } else {\n hiddenDrag.addClass('active');\n }\n } else {\n hiddenDrag.addClass('active');\n }\n }\n\n // Send the drag to drop.\n var drop = root.find('.dropzone.place' + place);\n thisQ.sendDragToDrop(unplacedDrag, drop);\n });\n\n // Save the question answer.\n thisQ.questionAnswer = thisQ.getQuestionAnsweredValues();\n };\n\n /**\n * Get the question answered values.\n *\n * @return {Object} Contain key-value with key is the input id and value is the input value.\n */\n DragDropOntoImageQuestion.prototype.getQuestionAnsweredValues = function() {\n let result = {};\n this.getRoot().find('input.placeinput').each((i, inputNode) => {\n result[inputNode.id] = inputNode.value;\n });\n\n return result;\n };\n\n /**\n * Check if the question is being interacted or not.\n *\n * @return {boolean} Return true if the user has changed the question-answer.\n */\n DragDropOntoImageQuestion.prototype.isQuestionInteracted = function() {\n const oldAnswer = this.questionAnswer;\n const newAnswer = this.getQuestionAnsweredValues();\n let isInteracted = false;\n\n // First, check both answers have the same structure or not.\n if (JSON.stringify(newAnswer) !== JSON.stringify(oldAnswer)) {\n isInteracted = true;\n return isInteracted;\n }\n // Check the values.\n Object.keys(newAnswer).forEach(key => {\n if (newAnswer[key] !== oldAnswer[key]) {\n isInteracted = true;\n }\n });\n\n return isInteracted;\n };\n\n /**\n * Handles the start of dragging an item.\n *\n * @param {Event} e the touch start or mouse down event.\n */\n DragDropOntoImageQuestion.prototype.handleDragStart = function(e) {\n var thisQ = this,\n drag = $(e.target).closest('.draghome'),\n currentIndex = this.calculateZIndex(),\n newIndex = currentIndex + 2;\n\n var info = dragDrop.prepare(e);\n if (!info.start || drag.hasClass('beingdragged')) {\n return;\n }\n\n drag.addClass('beingdragged').css('transform', '').css('z-index', newIndex);\n var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');\n if (currentPlace !== null) {\n this.setInputValue(currentPlace, 0);\n drag.removeClass('inplace' + currentPlace);\n var hiddenDrop = thisQ.getDrop(drag, currentPlace);\n if (hiddenDrop.length) {\n hiddenDrop.addClass('active');\n drag.offset(hiddenDrop.offset());\n }\n } else {\n var hiddenDrag = thisQ.getDragClone(drag);\n if (hiddenDrag.length) {\n if (drag.hasClass('infinite')) {\n var noOfDrags = this.noOfDropsInGroup(thisQ.getGroup(drag));\n var cloneDrags = this.getInfiniteDragClones(drag, false);\n if (cloneDrags.length < noOfDrags) {\n var cloneDrag = drag.clone();\n cloneDrag.removeClass('beingdragged');\n cloneDrag.removeAttr('tabindex');\n hiddenDrag.after(cloneDrag);\n questionManager.addEventHandlersToDrag(cloneDrag);\n drag.offset(cloneDrag.offset());\n } else {\n hiddenDrag.addClass('active');\n drag.offset(hiddenDrag.offset());\n }\n } else {\n hiddenDrag.addClass('active');\n drag.offset(hiddenDrag.offset());\n }\n }\n }\n\n dragDrop.start(e, drag, function(x, y, drag) {\n thisQ.dragMove(x, y, drag);\n }, function(x, y, drag) {\n thisQ.dragEnd(x, y, drag);\n });\n };\n\n /**\n * Called whenever the currently dragged items moves.\n *\n * @param {Number} pageX the x position.\n * @param {Number} pageY the y position.\n * @param {jQuery} drag the item being moved.\n */\n DragDropOntoImageQuestion.prototype.dragMove = function(pageX, pageY, drag) {\n var thisQ = this,\n highlighted = false;\n this.getRoot().find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {\n var drop = $(dropNode);\n if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted) {\n highlighted = true;\n drop.addClass('valid-drag-over-drop');\n } else {\n drop.removeClass('valid-drag-over-drop');\n }\n });\n this.getRoot().find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, dropNode) {\n var drop = $(dropNode);\n if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted && !thisQ.isDragSameAsDrop(drag, drop)) {\n highlighted = true;\n drop.addClass('valid-drag-over-drop');\n } else {\n drop.removeClass('valid-drag-over-drop');\n }\n });\n };\n\n /**\n * Called when user drops a drag item.\n *\n * @param {Number} pageX the x position.\n * @param {Number} pageY the y position.\n * @param {jQuery} drag the item being moved.\n */\n DragDropOntoImageQuestion.prototype.dragEnd = function(pageX, pageY, drag) {\n var thisQ = this,\n root = this.getRoot(),\n placed = false;\n\n // Looking for drag that was dropped on a dropzone.\n root.find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {\n var drop = $(dropNode);\n if (!thisQ.isPointInDrop(pageX, pageY, drop)) {\n // Not this drop.\n return true;\n }\n\n // Now put this drag into the drop.\n drop.removeClass('valid-drag-over-drop');\n thisQ.sendDragToDrop(drag, drop);\n placed = true;\n return false; // Stop the each() here.\n });\n\n if (!placed) {\n // Looking for drag that was dropped on a placed drag.\n root.find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, placedNode) {\n var placedDrag = $(placedNode);\n if (!thisQ.isPointInDrop(pageX, pageY, placedDrag) || thisQ.isDragSameAsDrop(drag, placedDrag)) {\n // Not this placed drag.\n return true;\n }\n\n // Now put this drag into the drop.\n placedDrag.removeClass('valid-drag-over-drop');\n var currentPlace = thisQ.getClassnameNumericSuffix(placedDrag, 'inplace');\n var drop = thisQ.getDrop(drag, currentPlace);\n thisQ.sendDragToDrop(drag, drop);\n placed = true;\n return false; // Stop the each() here.\n });\n }\n\n if (!placed) {\n this.sendDragHome(drag);\n }\n };\n\n /**\n * Animate a drag item into a given place (or back home).\n *\n * @param {jQuery|null} drag the item to place. If null, clear the place.\n * @param {jQuery} drop the place to put it.\n */\n DragDropOntoImageQuestion.prototype.sendDragToDrop = function(drag, drop) {\n // Is there already a drag in this drop? if so, evict it.\n var oldDrag = this.getCurrentDragInPlace(this.getPlace(drop));\n if (oldDrag.length !== 0) {\n oldDrag.addClass('beingdragged');\n oldDrag.offset(oldDrag.offset());\n var currentPlace = this.getClassnameNumericSuffix(oldDrag, 'inplace');\n var hiddenDrop = this.getDrop(oldDrag, currentPlace);\n hiddenDrop.addClass('active');\n this.sendDragHome(oldDrag);\n }\n\n if (drag.length === 0) {\n this.setInputValue(this.getPlace(drop), 0);\n if (drop.data('isfocus')) {\n drop.focus();\n }\n } else {\n this.setInputValue(this.getPlace(drop), this.getChoice(drag));\n drag.removeClass('unplaced')\n .addClass('placed inplace' + this.getPlace(drop));\n drag.attr('tabindex', 0);\n this.animateTo(drag, drop);\n }\n };\n\n /**\n * Animate a drag back to its home.\n *\n * @param {jQuery} drag the item being moved.\n */\n DragDropOntoImageQuestion.prototype.sendDragHome = function(drag) {\n var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');\n if (currentPlace !== null) {\n drag.removeClass('inplace' + currentPlace);\n }\n drag.data('unplaced', true);\n\n this.animateTo(drag, this.getDragHome(this.getGroup(drag), this.getChoice(drag)));\n };\n\n /**\n * Handles keyboard events on drops.\n *\n * Drops are focusable. Once focused, right/down/space switches to the next choice, and\n * left/up switches to the previous. Escape clear.\n *\n * @param {KeyboardEvent} e\n */\n DragDropOntoImageQuestion.prototype.handleKeyPress = function(e) {\n var drop = $(e.target).closest('.dropzone');\n if (drop.length === 0) {\n var placedDrag = $(e.target);\n var currentPlace = this.getClassnameNumericSuffix(placedDrag, 'inplace');\n if (currentPlace !== null) {\n drop = this.getDrop(placedDrag, currentPlace);\n }\n }\n var currentDrag = this.getCurrentDragInPlace(this.getPlace(drop)),\n nextDrag = $();\n\n switch (e.keyCode) {\n case keys.space:\n case keys.arrowRight:\n case keys.arrowDown:\n nextDrag = this.getNextDrag(this.getGroup(drop), currentDrag);\n break;\n\n case keys.arrowLeft:\n case keys.arrowUp:\n nextDrag = this.getPreviousDrag(this.getGroup(drop), currentDrag);\n break;\n\n case keys.escape:\n questionManager.isKeyboardNavigation = false;\n break;\n\n default:\n questionManager.isKeyboardNavigation = false;\n return; // To avoid the preventDefault below.\n }\n\n if (nextDrag.length) {\n nextDrag.data('isfocus', true);\n nextDrag.addClass('beingdragged');\n var hiddenDrag = this.getDragClone(nextDrag);\n if (hiddenDrag.length) {\n if (nextDrag.hasClass('infinite')) {\n var noOfDrags = this.noOfDropsInGroup(this.getGroup(nextDrag));\n var cloneDrags = this.getInfiniteDragClones(nextDrag, false);\n if (cloneDrags.length < noOfDrags) {\n var cloneDrag = nextDrag.clone();\n cloneDrag.removeClass('beingdragged');\n cloneDrag.removeAttr('tabindex');\n hiddenDrag.after(cloneDrag);\n questionManager.addEventHandlersToDrag(cloneDrag);\n nextDrag.offset(cloneDrag.offset());\n } else {\n hiddenDrag.addClass('active');\n nextDrag.offset(hiddenDrag.offset());\n }\n } else {\n hiddenDrag.addClass('active');\n nextDrag.offset(hiddenDrag.offset());\n }\n }\n } else {\n drop.data('isfocus', true);\n }\n\n e.preventDefault();\n this.sendDragToDrop(nextDrag, drop);\n };\n\n /**\n * Choose the next drag in a group.\n *\n * @param {int} group which group.\n * @param {jQuery} drag current choice (empty jQuery if there isn't one).\n * @return {jQuery} the next drag in that group, or null if there wasn't one.\n */\n DragDropOntoImageQuestion.prototype.getNextDrag = function(group, drag) {\n var choice,\n numChoices = this.noOfChoicesInGroup(group);\n\n if (drag.length === 0) {\n choice = 1; // Was empty, so we want to select the first choice.\n } else {\n choice = this.getChoice(drag) + 1;\n }\n\n var next = this.getUnplacedChoice(group, choice);\n while (next.length === 0 && choice < numChoices) {\n choice++;\n next = this.getUnplacedChoice(group, choice);\n }\n\n return next;\n };\n\n /**\n * Choose the previous drag in a group.\n *\n * @param {int} group which group.\n * @param {jQuery} drag current choice (empty jQuery if there isn't one).\n * @return {jQuery} the next drag in that group, or null if there wasn't one.\n */\n DragDropOntoImageQuestion.prototype.getPreviousDrag = function(group, drag) {\n var choice;\n\n if (drag.length === 0) {\n choice = this.noOfChoicesInGroup(group);\n } else {\n choice = this.getChoice(drag) - 1;\n }\n\n var previous = this.getUnplacedChoice(group, choice);\n while (previous.length === 0 && choice > 1) {\n choice--;\n previous = this.getUnplacedChoice(group, choice);\n }\n\n // Does this choice exist?\n return previous;\n };\n\n /**\n * Animate an object to the given destination.\n *\n * @param {jQuery} drag the element to be animated.\n * @param {jQuery} target element marking the place to move it to.\n */\n DragDropOntoImageQuestion.prototype.animateTo = function(drag, target) {\n var currentPos = drag.offset(),\n targetPos = target.offset(),\n thisQ = this;\n\n M.util.js_pending('qtype_ddimageortext-animate-' + thisQ.containerId);\n // Animate works in terms of CSS position, whereas locating an object\n // on the page works best with jQuery offset() function. So, to get\n // the right target position, we work out the required change in\n // offset() and then add that to the current CSS position.\n drag.animate(\n {\n left: parseInt(drag.css('left')) + targetPos.left - currentPos.left,\n top: parseInt(drag.css('top')) + targetPos.top - currentPos.top\n },\n {\n duration: 'fast',\n done: function() {\n $('body').trigger('qtype_ddimageortext-dragmoved', [drag, target, thisQ]);\n M.util.js_complete('qtype_ddimageortext-animate-' + thisQ.containerId);\n }\n }\n );\n };\n\n /**\n * Detect if a point is inside a given DOM node.\n *\n * @param {Number} pageX the x position.\n * @param {Number} pageY the y position.\n * @param {jQuery} drop the node to check (typically a drop).\n * @return {boolean} whether the point is inside the node.\n */\n DragDropOntoImageQuestion.prototype.isPointInDrop = function(pageX, pageY, drop) {\n var position = drop.offset();\n if (drop.hasClass('draghome')) {\n return pageX >= position.left && pageX < position.left + drop.outerWidth()\n && pageY >= position.top && pageY < position.top + drop.outerHeight();\n }\n return pageX >= position.left && pageX < position.left + drop.width()\n && pageY >= position.top && pageY < position.top + drop.height();\n };\n\n /**\n * Set the value of the hidden input for a place, to record what is currently there.\n *\n * @param {int} place which place to set the input value for.\n * @param {int} choice the value to set.\n */\n DragDropOntoImageQuestion.prototype.setInputValue = function(place, choice) {\n this.getRoot().find('input.placeinput.place' + place).val(choice);\n };\n\n /**\n * Get the outer div for this question.\n *\n * @returns {jQuery} containing that div.\n */\n DragDropOntoImageQuestion.prototype.getRoot = function() {\n return $(document.getElementById(this.containerId));\n };\n\n /**\n * Get the img that is the background image.\n * @returns {jQuery} containing that img.\n */\n DragDropOntoImageQuestion.prototype.bgImage = function() {\n return this.getRoot().find('img.dropbackground');\n };\n\n /**\n * Get drag home for a given choice.\n *\n * @param {int} group the group.\n * @param {int} choice the choice number.\n * @returns {jQuery} containing that div.\n */\n DragDropOntoImageQuestion.prototype.getDragHome = function(group, choice) {\n if (!this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice).is(':visible')) {\n return this.getRoot().find('.dragitemgroup' + group +\n ' .draghome.infinite' +\n '.choice' + choice +\n '.group' + group);\n }\n return this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice);\n };\n\n /**\n * Get an unplaced choice for a particular group.\n *\n * @param {int} group the group.\n * @param {int} choice the choice number.\n * @returns {jQuery} jQuery wrapping the unplaced choice. If there isn't one, the jQuery will be empty.\n */\n DragDropOntoImageQuestion.prototype.getUnplacedChoice = function(group, choice) {\n return this.getRoot().find('.ddarea .draghome.group' + group + '.choice' + choice + '.unplaced').slice(0, 1);\n };\n\n /**\n * Get the drag that is currently in a given place.\n *\n * @param {int} place the place number.\n * @return {jQuery} the current drag (or an empty jQuery if none).\n */\n DragDropOntoImageQuestion.prototype.getCurrentDragInPlace = function(place) {\n return this.getRoot().find('.ddarea .draghome.inplace' + place);\n };\n\n /**\n * Return the number of blanks in a given group.\n *\n * @param {int} group the group number.\n * @returns {int} the number of drops.\n */\n DragDropOntoImageQuestion.prototype.noOfDropsInGroup = function(group) {\n return this.getRoot().find('.dropzone.group' + group).length;\n };\n\n /**\n * Return the number of choices in a given group.\n *\n * @param {int} group the group number.\n * @returns {int} the number of choices.\n */\n DragDropOntoImageQuestion.prototype.noOfChoicesInGroup = function(group) {\n return this.getRoot().find('.dragitemgroup' + group + ' .draghome').length;\n };\n\n /**\n * Return the number at the end of the CSS class name with the given prefix.\n *\n * @param {jQuery} node\n * @param {String} prefix name prefix\n * @returns {Number|null} the suffix if found, else null.\n */\n DragDropOntoImageQuestion.prototype.getClassnameNumericSuffix = function(node, prefix) {\n var classes = node.attr('class');\n if (classes !== '') {\n var classesArr = classes.split(' ');\n for (var index = 0; index < classesArr.length; index++) {\n var patt1 = new RegExp('^' + prefix + '([0-9])+$');\n if (patt1.test(classesArr[index])) {\n var patt2 = new RegExp('([0-9])+$');\n var match = patt2.exec(classesArr[index]);\n return Number(match[0]);\n }\n }\n }\n return null;\n };\n\n /**\n * Get the choice number of a drag.\n *\n * @param {jQuery} drag the drag.\n * @returns {Number} the choice number.\n */\n DragDropOntoImageQuestion.prototype.getChoice = function(drag) {\n return this.getClassnameNumericSuffix(drag, 'choice');\n };\n\n /**\n * Given a DOM node that is significant to this question\n * (drag, drop, ...) get the group it belongs to.\n *\n * @param {jQuery} node a DOM node.\n * @returns {Number} the group it belongs to.\n */\n DragDropOntoImageQuestion.prototype.getGroup = function(node) {\n return this.getClassnameNumericSuffix(node, 'group');\n };\n\n /**\n * Get the place number of a drop, or its corresponding hidden input.\n *\n * @param {jQuery} node the DOM node.\n * @returns {Number} the place number.\n */\n DragDropOntoImageQuestion.prototype.getPlace = function(node) {\n return this.getClassnameNumericSuffix(node, 'place');\n };\n\n /**\n * Get drag clone for a given drag.\n *\n * @param {jQuery} drag the drag.\n * @returns {jQuery} the drag's clone.\n */\n DragDropOntoImageQuestion.prototype.getDragClone = function(drag) {\n return this.getRoot().find('.dragitemgroup' +\n this.getGroup(drag) +\n ' .draghome' +\n '.choice' + this.getChoice(drag) +\n '.group' + this.getGroup(drag) +\n '.dragplaceholder');\n };\n\n /**\n * Get infinite drag clones for given drag.\n *\n * @param {jQuery} drag the drag.\n * @param {Boolean} inHome in the home area or not.\n * @returns {jQuery} the drag's clones.\n */\n DragDropOntoImageQuestion.prototype.getInfiniteDragClones = function(drag, inHome) {\n if (inHome) {\n return this.getRoot().find('.dragitemgroup' +\n this.getGroup(drag) +\n ' .draghome' +\n '.choice' + this.getChoice(drag) +\n '.group' + this.getGroup(drag) +\n '.infinite').not('.dragplaceholder');\n }\n return this.getRoot().find('.draghome' +\n '.choice' + this.getChoice(drag) +\n '.group' + this.getGroup(drag) +\n '.infinite').not('.dragplaceholder');\n };\n\n /**\n * Get drop for a given drag and place.\n *\n * @param {jQuery} drag the drag.\n * @param {Integer} currentPlace the current place of drag.\n * @returns {jQuery} the drop's clone.\n */\n DragDropOntoImageQuestion.prototype.getDrop = function(drag, currentPlace) {\n return this.getRoot().find('.dropzone.group' + this.getGroup(drag) + '.place' + currentPlace);\n };\n\n /**\n * Handle when the window is resized.\n */\n DragDropOntoImageQuestion.prototype.handleResize = function() {\n var thisQ = this,\n bgRatio = this.bgRatio();\n if (this.isPrinting) {\n bgRatio = 1;\n }\n\n this.getRoot().find('.ddarea .dropzone').each(function(i, dropNode) {\n $(dropNode)\n .css('left', parseInt($(dropNode).data('originX')) * parseFloat(bgRatio))\n .css('top', parseInt($(dropNode).data('originY')) * parseFloat(bgRatio));\n thisQ.handleElementScale(dropNode, 'left top');\n });\n\n this.getRoot().find('div.droparea .draghome').not('.beingdragged').each(function(key, drag) {\n $(drag)\n .css('left', parseFloat($(drag).data('originX')) * parseFloat(bgRatio))\n .css('top', parseFloat($(drag).data('originY')) * parseFloat(bgRatio));\n thisQ.handleElementScale(drag, 'left top');\n });\n };\n\n /**\n * Return the background ratio.\n *\n * @returns {number} Background ratio.\n */\n DragDropOntoImageQuestion.prototype.bgRatio = function() {\n var bgImg = this.bgImage();\n var bgImgNaturalWidth = bgImg.get(0).naturalWidth;\n var bgImgClientWidth = bgImg.width();\n\n return bgImgClientWidth / bgImgNaturalWidth;\n };\n\n /**\n * Scale the drag if needed.\n *\n * @param {jQuery} element the item to place.\n * @param {String} type scaling type\n */\n DragDropOntoImageQuestion.prototype.handleElementScale = function(element, type) {\n var bgRatio = parseFloat(this.bgRatio());\n if (this.isPrinting) {\n bgRatio = 1;\n }\n $(element).css({\n '-webkit-transform': 'scale(' + bgRatio + ')',\n '-moz-transform': 'scale(' + bgRatio + ')',\n '-ms-transform': 'scale(' + bgRatio + ')',\n '-o-transform': 'scale(' + bgRatio + ')',\n 'transform': 'scale(' + bgRatio + ')',\n 'transform-origin': type\n });\n };\n\n /**\n * Calculate z-index value.\n *\n * @returns {number} z-index value\n */\n DragDropOntoImageQuestion.prototype.calculateZIndex = function() {\n var zIndex = 0;\n this.getRoot().find('.ddarea .dropzone, div.droparea .draghome').each(function(i, dropNode) {\n dropNode = $(dropNode);\n // Note that webkit browsers won't return the z-index value from the CSS stylesheet\n // if the element doesn't have a position specified. Instead it'll return \"auto\".\n var itemZIndex = dropNode.css('z-index') ? parseInt(dropNode.css('z-index')) : 0;\n\n if (itemZIndex > zIndex) {\n zIndex = itemZIndex;\n }\n });\n\n return zIndex;\n };\n\n /**\n * Check that the drag is drop to it's clone.\n *\n * @param {jQuery} drag The drag.\n * @param {jQuery} drop The drop.\n * @returns {boolean}\n */\n DragDropOntoImageQuestion.prototype.isDragSameAsDrop = function(drag, drop) {\n return this.getChoice(drag) === this.getChoice(drop) && this.getGroup(drag) === this.getGroup(drop);\n };\n\n /**\n * Singleton object that handles all the DragDropOntoImageQuestions\n * on the page, and deals with event dispatching.\n * @type {Object}\n */\n var questionManager = {\n\n /**\n * {boolean} ensures that the event handlers are only initialised once per page.\n */\n eventHandlersInitialised: false,\n\n /**\n * {Object} ensures that the drag event handlers are only initialised once per question,\n * indexed by containerId (id on the .que div).\n */\n dragEventHandlersInitialised: {},\n\n /**\n * {boolean} is printing or not.\n */\n isPrinting: false,\n\n /**\n * {boolean} is keyboard navigation or not.\n */\n isKeyboardNavigation: false,\n\n /**\n * {Object} all the questions on this page, indexed by containerId (id on the .que div).\n */\n questions: {}, // An object containing all the information about each question on the page.\n\n /**\n * Initialise one question.\n *\n * @method\n * @param {String} containerId the id of the div.que that contains this question.\n * @param {boolean} readOnly whether the question is read-only.\n * @param {Array} places data.\n */\n init: function(containerId, readOnly, places) {\n questionManager.questions[containerId] =\n new DragDropOntoImageQuestion(containerId, readOnly, places);\n if (!questionManager.eventHandlersInitialised) {\n questionManager.setupEventHandlers();\n questionManager.eventHandlersInitialised = true;\n }\n if (!questionManager.dragEventHandlersInitialised.hasOwnProperty(containerId)) {\n questionManager.dragEventHandlersInitialised[containerId] = true;\n // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.\n var questionContainer = document.getElementById(containerId);\n if (questionContainer.classList.contains('ddimageortext') &&\n !questionContainer.classList.contains('qtype_ddimageortext-readonly')) {\n // TODO: Convert all the jQuery selectors and events to native Javascript.\n questionManager.addEventHandlersToDrag($(questionContainer).find('.draghome'));\n }\n }\n },\n\n /**\n * Set up the event handlers that make this question type work. (Done once per page.)\n */\n setupEventHandlers: function() {\n $('body')\n .on('keydown',\n '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone',\n questionManager.handleKeyPress)\n .on('keydown',\n '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)',\n questionManager.handleKeyPress)\n .on('qtype_ddimageortext-dragmoved', questionManager.handleDragMoved);\n $(window).on('resize', function() {\n questionManager.handleWindowResize(false);\n });\n window.addEventListener('beforeprint', function() {\n questionManager.isPrinting = true;\n questionManager.handleWindowResize(questionManager.isPrinting);\n });\n window.addEventListener('afterprint', function() {\n questionManager.isPrinting = false;\n questionManager.handleWindowResize(questionManager.isPrinting);\n });\n setTimeout(function() {\n questionManager.fixLayoutIfThingsMoved();\n }, 100);\n },\n\n /**\n * Binding the drag/touch event again for newly created element.\n *\n * @param {jQuery} element Element to bind the event\n */\n addEventHandlersToDrag: function(element) {\n // Unbind all the mousedown and touchstart events to prevent double binding.\n element.unbind('mousedown touchstart');\n element.on('mousedown touchstart', questionManager.handleDragStart);\n },\n\n /**\n * Handle mouse down / touch start events on drags.\n * @param {Event} e the DOM event.\n */\n handleDragStart: function(e) {\n e.preventDefault();\n var question = questionManager.getQuestionForEvent(e);\n if (question) {\n question.handleDragStart(e);\n }\n },\n\n /**\n * Handle key down / press events on drags.\n * @param {KeyboardEvent} e\n */\n handleKeyPress: function(e) {\n if (questionManager.isKeyboardNavigation) {\n return;\n }\n questionManager.isKeyboardNavigation = true;\n var question = questionManager.getQuestionForEvent(e);\n if (question) {\n question.handleKeyPress(e);\n }\n },\n\n /**\n * Handle when the window is resized.\n * @param {boolean} isPrinting\n */\n handleWindowResize: function(isPrinting) {\n for (var containerId in questionManager.questions) {\n if (questionManager.questions.hasOwnProperty(containerId)) {\n questionManager.questions[containerId].isPrinting = isPrinting;\n questionManager.questions[containerId].handleResize();\n }\n }\n },\n\n /**\n * Sometimes, despite our best efforts, things change in a way that cannot\n * be specifically caught (e.g. dock expanding or collapsing in Boost).\n * Therefore, we need to periodically check everything is in the right position.\n */\n fixLayoutIfThingsMoved: function() {\n this.handleWindowResize(questionManager.isPrinting);\n // We use setTimeout after finishing work, rather than setInterval,\n // in case positioning things is slow. We want 100 ms gap\n // between executions, not what setInterval does.\n setTimeout(function() {\n questionManager.fixLayoutIfThingsMoved(questionManager.isPrinting);\n }, 100);\n },\n\n /**\n * Handle when drag moved.\n *\n * @param {Event} e the event.\n * @param {jQuery} drag the drag\n * @param {jQuery} target the target\n * @param {DragDropOntoImageQuestion} thisQ the question.\n */\n handleDragMoved: function(e, drag, target, thisQ) {\n drag.removeClass('beingdragged').css('z-index', '');\n drag.css('top', target.position().top).css('left', target.position().left);\n target.after(drag);\n target.removeClass('active');\n if (typeof drag.data('unplaced') !== 'undefined' && drag.data('unplaced') === true) {\n drag.removeClass('placed').addClass('unplaced');\n drag.removeAttr('tabindex');\n drag.removeData('unplaced');\n drag.css('top', '')\n .css('left', '')\n .css('transform', '');\n if (drag.hasClass('infinite') && thisQ.getInfiniteDragClones(drag, true).length > 1) {\n thisQ.getInfiniteDragClones(drag, true).first().remove();\n }\n } else {\n drag.data('originX', target.data('originX')).data('originY', target.data('originY'));\n thisQ.handleElementScale(drag, 'left top');\n }\n if (typeof drag.data('isfocus') !== 'undefined' && drag.data('isfocus') === true) {\n drag.focus();\n drag.removeData('isfocus');\n }\n if (typeof target.data('isfocus') !== 'undefined' && target.data('isfocus') === true) {\n target.removeData('isfocus');\n }\n if (questionManager.isKeyboardNavigation) {\n questionManager.isKeyboardNavigation = false;\n }\n if (thisQ.isQuestionInteracted()) {\n // The user has interacted with the draggable items. We need to mark the form as dirty.\n questionManager.handleFormDirty();\n // Save the new answered value.\n thisQ.questionAnswer = thisQ.getQuestionAnsweredValues();\n }\n },\n\n /**\n * Given an event, work out which question it effects.\n * @param {Event} e the event.\n * @returns {DragDropOntoImageQuestion|undefined} The question, or undefined.\n */\n getQuestionForEvent: function(e) {\n var containerId = $(e.currentTarget).closest('.que.ddimageortext').attr('id');\n return questionManager.questions[containerId];\n },\n\n /**\n * Handle when the form is dirty.\n */\n handleFormDirty: function() {\n const responseForm = document.getElementById('responseform');\n FormChangeChecker.markFormAsDirty(responseForm);\n }\n };\n\n /**\n * @alias module:qtype_ddimageortext/question\n */\n return {\n init: questionManager.init\n };\n});\n"],"names":["define","$","dragDrop","keys","FormChangeChecker","filterEvent","DragDropOntoImageQuestion","containerId","readOnly","places","questionAnswer","questionDragDropWidthHeight","M","util","js_pending","this","allImagesLoaded","imageLoadingTimeoutId","isPrinting","getRoot","addClass","thisQ","getNotYetLoadedImages","one","waitForAllImagesToBeLoaded","prototype","changeAllDragsAndDropsToFilteredContent","filteredElement","currentFilteredItem","parentIsDD","parent","closest","hasClass","isDD","find","length","group","getGroup","choice","getChoice","listOfModifiedDragDrop","each","i","node","get","originalClass","attr","originalStyle","filteredDragDropClone","clone","questionManager","addEventHandlersToDrag","before","push","forEach","remove","currentHeight","height","currentWidth","width","offsetWidth","offsetHeight","classList","add","maxWidth","Math","ceil","maxHeight","resizeAllDragsAndDropsInGroup","clearTimeout","setTimeout","setupQuestion","document","addEventListener","eventTypes","filterContentRenderingComplete","elements","detail","nodes","element","not","imgNode","imageIsLoaded","imgElement","complete","naturalHeight","resizeAllDragsAndDrops","cloneDrags","positionDragsAndDrops","js_complete","getClassnameNumericSuffix","root","dragHomes","drag","max","top","floor","css","hasOwnProperty","place","label","text","parseInt","get_string","append","index","dragHome","placeHolder","removeClass","cloneDragsForOneChoice","noOfDrags","noOfDropsInGroup","cloneDrag","offset","bgRatio","dropNode","drop","getPlace","xy","data","handleElementScale","dragNode","currentPlace","removeAttr","inputNode","input","val","unplacedDrag","getUnplacedChoice","hiddenDrag","getDragClone","getInfiniteDragClones","after","sendDragToDrop","getQuestionAnsweredValues","result","id","value","isQuestionInteracted","oldAnswer","newAnswer","isInteracted","JSON","stringify","Object","key","handleDragStart","e","target","newIndex","calculateZIndex","prepare","start","setInputValue","hiddenDrop","getDrop","x","y","dragMove","dragEnd","pageX","pageY","highlighted","isPointInDrop","isDragSameAsDrop","placed","placedNode","placedDrag","sendDragHome","oldDrag","getCurrentDragInPlace","focus","animateTo","getDragHome","handleKeyPress","currentDrag","nextDrag","keyCode","space","arrowRight","arrowDown","getNextDrag","arrowLeft","arrowUp","getPreviousDrag","escape","isKeyboardNavigation","preventDefault","numChoices","noOfChoicesInGroup","next","previous","currentPos","targetPos","animate","left","duration","done","trigger","position","outerWidth","outerHeight","getElementById","bgImage","is","slice","prefix","classes","classesArr","split","RegExp","test","match","exec","Number","inHome","handleResize","parseFloat","bgImg","bgImgNaturalWidth","naturalWidth","type","zIndex","itemZIndex","eventHandlersInitialised","dragEventHandlersInitialised","questions","init","setupEventHandlers","questionContainer","contains","on","handleDragMoved","window","handleWindowResize","fixLayoutIfThingsMoved","unbind","question","getQuestionForEvent","removeData","first","handleFormDirty","currentTarget","responseForm","markFormAsDirty"],"mappings":"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"} \ No newline at end of file diff --git a/question/type/ddimageortext/amd/src/question.js b/question/type/ddimageortext/amd/src/question.js index 05239c3169b..96bcce1341d 100644 --- a/question/type/ddimageortext/amd/src/question.js +++ b/question/type/ddimageortext/amd/src/question.js @@ -248,7 +248,11 @@ define([ // Set each drag home to that size. dragHomes.each(function(i, drag) { - $(drag).width(maxWidth).height(maxHeight).css('lineHeight', maxHeight + 'px'); + const top = Math.floor((maxHeight - drag.offsetHeight) / 2); + // Set top padding so the item is centred. + $(drag).width(maxWidth).height(maxHeight).css({ + 'padding-top': top + 'px', + }); }); // Create the drops and make them the right size. diff --git a/question/type/ddimageortext/styles.css b/question/type/ddimageortext/styles.css index 98ff22e892a..5aa3db72ee8 100644 --- a/question/type/ddimageortext/styles.css +++ b/question/type/ddimageortext/styles.css @@ -85,7 +85,12 @@ form.mform fieldset#id_previewareaheader .droppreview { display: none; } -.que.ddimageortext .MathJax_Display { +/** + * The position of mathjax element in ddimageortext is calculated by javascript in question.js line 254. + * So we remove the default margin of Mathjax. + */ +.que.ddimageortext .MathJax_Display, +.que.ddimageortext .MathJax_SVG_Display { margin: 0; }