question/type/ddimageortext/amd/src/question.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   3 // Moodle is free software: you can redistribute it and/or modify
   4 // it under the terms of the GNU General Public License as published by
   5 // the Free Software Foundation, either version 3 of the License, or
   6 // (at your option) any later version.
   7 //
   8 // Moodle is distributed in the hope that it will be useful,
   9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11 // GNU General Public License for more details.
  12 //
  13 // You should have received a copy of the GNU General Public License
  14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15
  16 /*
  17  * JavaScript to allow dragging options to slots (using mouse down or touch) or tab through slots using keyboard.
  18  *
  19  * @module     qtype_ddimageortext/question
  20  * @package    qtype_ddimageortext
  21  * @copyright  2018 The Open University
  22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  23  */
  24 define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys) {
  25
  26     "use strict";
  27
  28     /**
  29      * Initialise one drag-drop onto image question.
  30      *
  31      * @param {String} containerId id of the outer div for this question.
  32      * @param {boolean} readOnly whether the question is being displayed read-only.
  33      * @param {Array} places Information about the drop places.
  34      * @constructor
  35      */
  36     function DragDropOntoImageQuestion(containerId, readOnly, places) {
  37         this.containerId = containerId;
  38         M.util.js_pending('qtype_ddimageortext-init-' + this.containerId);
  39         this.places = places;
  40         this.allImagesLoaded = false;
  41         this.imageLoadingTimeoutId = null;
  42         this.isPrinting = false;
  43         if (readOnly) {
  44             this.getRoot().addClass('qtype_ddimageortext-readonly');
  45         }
  46
  47         var thisQ = this;
  48         this.getNotYetLoadedImages().one('load', function() {
  49             thisQ.waitForAllImagesToBeLoaded();
  50         });
  51         this.waitForAllImagesToBeLoaded();
  52     }
  53
  54     /**
  55      * Waits until all images are loaded before calling setupQuestion().
  56      *
  57      * This function is called from the onLoad of each image, and also polls with
  58      * a time-out, because image on-loads are allegedly unreliable.
  59      */
  60     DragDropOntoImageQuestion.prototype.waitForAllImagesToBeLoaded = function() {
  61         var thisQ = this;
  62
  63         // This method may get called multiple times (via image on-loads or timeouts.
  64         // If we are already done, don't do it again.
  65         if (this.allImagesLoaded) {
  66             return;
  67         }
  68
  69         // Clear any current timeout, if set.
  70         if (this.imageLoadingTimeoutId !== null) {
  71             clearTimeout(this.imageLoadingTimeoutId);
  72         }
  73
  74         // If we have not yet loaded all images, set a timeout to
  75         // call ourselves again, since apparently images on-load
  76         // events are flakey.
  77         if (this.getNotYetLoadedImages().length > 0) {
  78             this.imageLoadingTimeoutId = setTimeout(function() {
  79                 thisQ.waitForAllImagesToBeLoaded();
  80             }, 100);
  81             return;
  82         }
  83
  84         // We now have all images. Carry on, but only after giving the layout a chance to settle down.
  85         this.allImagesLoaded = true;
  86         thisQ.setupQuestion();
  87     };
  88
  89     /**
  90      * Get any of the images in the drag-drop area that are not yet fully loaded.
  91      *
  92      * @returns {jQuery} those images.
  93      */
  94     DragDropOntoImageQuestion.prototype.getNotYetLoadedImages = function() {
  95         var thisQ = this;
  96         return this.getRoot().find('.ddarea img').not(function(i, imgNode) {
  97             return thisQ.imageIsLoaded(imgNode);
  98         });
  99     };
 100
 101     /**
 102      * Check if an image has loaded without errors.
 103      *
 104      * @param {HTMLImageElement} imgElement an image.
 105      * @returns {boolean} true if this image has loaded without errors.
 106      */
 107     DragDropOntoImageQuestion.prototype.imageIsLoaded = function(imgElement) {
 108         return imgElement.complete && imgElement.naturalHeight !== 0;
 109     };
 110
 111     /**
 112      * Set up the question, once all images have been loaded.
 113      */
 114     DragDropOntoImageQuestion.prototype.setupQuestion = function() {
 115         this.resizeAllDragsAndDrops();
 116         this.cloneDrags();
 117         this.positionDragsAndDrops();
 118         M.util.js_complete('qtype_ddimageortext-init-' + this.containerId);
 119     };
 120
 121     /**
 122      * In each group, resize all the items to be the same size.
 123      */
 124     DragDropOntoImageQuestion.prototype.resizeAllDragsAndDrops = function() {
 125         var thisQ = this;
 126         this.getRoot().find('.draghomes > div').each(function(i, node) {
 127             thisQ.resizeAllDragsAndDropsInGroup(
 128                     thisQ.getClassnameNumericSuffix($(node), 'dragitemgroup'));
 129         });
 130     };
 131
 132     /**
 133      * In a given group, set all the drags and drops to be the same size.
 134      *
 135      * @param {int} group the group number.
 136      */
 137     DragDropOntoImageQuestion.prototype.resizeAllDragsAndDropsInGroup = function(group) {
 138         var root = this.getRoot(),
 139             dragHomes = root.find('.dragitemgroup' + group + ' .draghome'),
 140             maxWidth = 0,
 141             maxHeight = 0;
 142
 143         // Find the maximum size of any drag in this groups.
 144         dragHomes.each(function(i, drag) {
 145             maxWidth = Math.max(maxWidth, Math.ceil(drag.offsetWidth));
 146             maxHeight = Math.max(maxHeight, Math.ceil(drag.offsetHeight));
 147         });
 148
 149         // The size we will want to set is a bit bigger than this.
 150         maxWidth += 10;
 151         maxHeight += 10;
 152
 153         // Set each drag home to that size.
 154         dragHomes.each(function(i, drag) {
 155             var left = Math.round((maxWidth - drag.offsetWidth) / 2),
 156                 top = Math.floor((maxHeight - drag.offsetHeight) / 2);
 157             // Set top and left padding so the item is centred.
 158             $(drag).css({
 159                 'padding-left': left + 'px',
 160                 'padding-right': (maxWidth - drag.offsetWidth - left) + 'px',
 161                 'padding-top': top + 'px',
 162                 'padding-bottom': (maxHeight - drag.offsetHeight - top) + 'px'
 163             });
 164         });
 165
 166         // Create the drops and make them the right size.
 167         for (var i in this.places) {
 168             if (!this.places.hasOwnProperty((i))) {
 169                 continue;
 170             }
 171             var place = this.places[i],
 172                 label = place.text;
 173             if (parseInt(place.group) !== group) {
 174                 continue;
 175             }
 176             if (label === '') {
 177                 label = M.util.get_string('blank', 'qtype_ddimageortext');
 178             }
 179             root.find('.dropzones').append('<div class="dropzone active group' + place.group +
 180                             ' place' + i + '" tabindex="0">' +
 181                     '<span class="accesshide">' + label + '</span>&nbsp;</div>');
 182             root.find('.dropzone.place' + i).width(maxWidth - 2).height(maxHeight - 2);
 183         }
 184     };
 185
 186     /**
 187      * Invisible 'drag homes' are output by the renderer. These have the same properties
 188      * as the drag items but are invisible. We clone these invisible elements to make the
 189      * actual drag items.
 190      */
 191     DragDropOntoImageQuestion.prototype.cloneDrags = function() {
 192         var thisQ = this;
 193         thisQ.getRoot().find('.draghome').each(function(index, dragHome) {
 194             var drag = $(dragHome);
 195             var placeHolder = drag.clone();
 196             placeHolder.removeClass();
 197             placeHolder.addClass('draghome choice' +
 198                 thisQ.getChoice(drag) + ' group' +
 199                 thisQ.getGroup(drag) + ' dragplaceholder');
 200             drag.before(placeHolder);
 201         });
 202     };
 203
 204     /**
 205      * Clone drag item for one choice.
 206      *
 207      * @param {jQuery} dragHome the drag home to clone.
 208      */
 209     DragDropOntoImageQuestion.prototype.cloneDragsForOneChoice = function(dragHome) {
 210         if (dragHome.hasClass('infinite')) {
 211             var noOfDrags = this.noOfDropsInGroup(this.getGroup(dragHome));
 212             for (var i = 0; i < noOfDrags; i++) {
 213                 this.cloneDrag(dragHome);
 214             }
 215         } else {
 216             this.cloneDrag(dragHome);
 217         }
 218     };
 219
 220     /**
 221      * Clone drag item.
 222      *
 223      * @param {jQuery} dragHome
 224      */
 225     DragDropOntoImageQuestion.prototype.cloneDrag = function(dragHome) {
 226         var drag = dragHome.clone();
 227         drag.removeClass('draghome')
 228             .addClass('drag unplaced moodle-has-zindex')
 229             .offset(dragHome.offset());
 230         this.getRoot().find('.dragitems').append(drag);
 231     };
 232
 233     /**
 234      * Update the position of drags.
 235      */
 236     DragDropOntoImageQuestion.prototype.positionDragsAndDrops = function() {
 237         var thisQ = this,
 238             root = this.getRoot(),
 239             bgRatio = this.bgRatio();
 240
 241         // Move the drops into position.
 242         root.find('.ddarea .dropzone').each(function(i, dropNode) {
 243             var drop = $(dropNode),
 244                 place = thisQ.places[thisQ.getPlace(drop)];
 245             // The xy values come from PHP as strings, so we need parseInt to stop JS doing string concatenation.
 246             drop.css('left', parseInt(place.xy[0]) * bgRatio)
 247                 .css('top', parseInt(place.xy[1]) * bgRatio);
 248             drop.data('originX', parseInt(place.xy[0]))
 249                 .data('originY', parseInt(place.xy[1]));
 250             thisQ.handleElementScale(drop, 'left top');
 251         });
 252
 253         // First move all items back home.
 254         root.find('.draghome').not('.dragplaceholder').each(function(i, dragNode) {
 255             var drag = $(dragNode),
 256                 currentPlace = thisQ.getClassnameNumericSuffix(drag, 'inplace');
 257             drag.addClass('unplaced')
 258                 .removeClass('placed');
 259             drag.removeAttr('tabindex');
 260             if (currentPlace !== null) {
 261                 drag.removeClass('inplace' + currentPlace);
 262             }
 263         });
 264
 265         // Then place the ones that should be placed.
 266         root.find('input.placeinput').each(function(i, inputNode) {
 267             var input = $(inputNode),
 268                 choice = input.val();
 269             if (choice.length === 0 || (choice.length > 0 && choice === '0')) {
 270                 // No item in this place.
 271                 return;
 272             }
 273
 274             var place = thisQ.getPlace(input);
 275             // Get the unplaced drag.
 276             var unplacedDrag = thisQ.getUnplacedChoice(thisQ.getGroup(input), choice);
 277             // Get the clone of the drag.
 278             var hiddenDrag = thisQ.getDragClone(unplacedDrag);
 279             if (hiddenDrag.length) {
 280                 if (unplacedDrag.hasClass('infinite')) {
 281                     var noOfDrags = thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));
 282                     var cloneDrags = thisQ.getInfiniteDragClones(unplacedDrag, false);
 283                     if (cloneDrags.length < noOfDrags) {
 284                         var cloneDrag = unplacedDrag.clone();
 285                         cloneDrag.removeClass('beingdragged');
 286                         cloneDrag.removeAttr('tabindex');
 287                         hiddenDrag.after(cloneDrag);
 288                     } else {
 289                         hiddenDrag.addClass('active');
 290                     }
 291                 } else {
 292                     hiddenDrag.addClass('active');
 293                 }
 294             }
 295
 296             // Send the drag to drop.
 297             var drop = root.find('.dropzone.place' + place);
 298             thisQ.sendDragToDrop(unplacedDrag, drop);
 299         });
 300     };
 301
 302     /**
 303      * Handles the start of dragging an item.
 304      *
 305      * @param {Event} e the touch start or mouse down event.
 306      */
 307     DragDropOntoImageQuestion.prototype.handleDragStart = function(e) {
 308         var thisQ = this,
 309             drag = $(e.target).closest('.draghome'),
 310             currentIndex = this.calculateZIndex(),
 311             newIndex = currentIndex + 2;
 312
 313         var info = dragDrop.prepare(e);
 314         if (!info.start) {
 315             return;
 316         }
 317
 318         drag.addClass('beingdragged').css('transform', '').css('z-index', newIndex);
 319         var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');
 320         if (currentPlace !== null) {
 321             this.setInputValue(currentPlace, 0);
 322             drag.removeClass('inplace' + currentPlace);
 323             var hiddenDrop = thisQ.getDrop(drag, currentPlace);
 324             if (hiddenDrop.length) {
 325                 hiddenDrop.addClass('active');
 326                 drag.offset(hiddenDrop.offset());
 327             }
 328         } else {
 329             var hiddenDrag = thisQ.getDragClone(drag);
 330             if (hiddenDrag.length) {
 331                 if (drag.hasClass('infinite')) {
 332                     var noOfDrags = this.noOfDropsInGroup(thisQ.getGroup(drag));
 333                     var cloneDrags = this.getInfiniteDragClones(drag, false);
 334                     if (cloneDrags.length < noOfDrags) {
 335                         var cloneDrag = drag.clone();
 336                         cloneDrag.removeClass('beingdragged');
 337                         cloneDrag.removeAttr('tabindex');
 338                         hiddenDrag.after(cloneDrag);
 339                         questionManager.addEventHandlersToDrag(cloneDrag);
 340                         drag.offset(cloneDrag.offset());
 341                     } else {
 342                         hiddenDrag.addClass('active');
 343                         drag.offset(hiddenDrag.offset());
 344                     }
 345                 } else {
 346                     hiddenDrag.addClass('active');
 347                     drag.offset(hiddenDrag.offset());
 348                 }
 349             }
 350         }
 351
 352         dragDrop.start(e, drag, function(x, y, drag) {
 353             thisQ.dragMove(x, y, drag);
 354         }, function(x, y, drag) {
 355             thisQ.dragEnd(x, y, drag);
 356         });
 357     };
 358
 359     /**
 360      * Called whenever the currently dragged items moves.
 361      *
 362      * @param {Number} pageX the x position.
 363      * @param {Number} pageY the y position.
 364      * @param {jQuery} drag the item being moved.
 365      */
 366     DragDropOntoImageQuestion.prototype.dragMove = function(pageX, pageY, drag) {
 367         var thisQ = this,
 368             highlighted = false;
 369         this.getRoot().find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {
 370             var drop = $(dropNode);
 371             if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted) {
 372                 highlighted = true;
 373                 drop.addClass('valid-drag-over-drop');
 374             } else {
 375                 drop.removeClass('valid-drag-over-drop');
 376             }
 377         });
 378         this.getRoot().find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, dropNode) {
 379             var drop = $(dropNode);
 380             if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted && !thisQ.isDragSameAsDrop(drag, drop)) {
 381                 highlighted = true;
 382                 drop.addClass('valid-drag-over-drop');
 383             } else {
 384                 drop.removeClass('valid-drag-over-drop');
 385             }
 386         });
 387     };
 388
 389     /**
 390      * Called when user drops a drag item.
 391      *
 392      * @param {Number} pageX the x position.
 393      * @param {Number} pageY the y position.
 394      * @param {jQuery} drag the item being moved.
 395      */
 396     DragDropOntoImageQuestion.prototype.dragEnd = function(pageX, pageY, drag) {
 397         var thisQ = this,
 398             root = this.getRoot(),
 399             placed = false;
 400
 401         // Looking for drag that was dropped on a dropzone.
 402         root.find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {
 403             var drop = $(dropNode);
 404             if (!thisQ.isPointInDrop(pageX, pageY, drop)) {
 405                 // Not this drop.
 406                 return true;
 407             }
 408
 409             // Now put this drag into the drop.
 410             drop.removeClass('valid-drag-over-drop');
 411             thisQ.sendDragToDrop(drag, drop);
 412             placed = true;
 413             return false; // Stop the each() here.
 414         });
 415
 416         if (!placed) {
 417             // Looking for drag that was dropped on a placed drag.
 418             root.find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, placedNode) {
 419                 var placedDrag = $(placedNode);
 420                 if (!thisQ.isPointInDrop(pageX, pageY, placedDrag) || thisQ.isDragSameAsDrop(drag, placedDrag)) {
 421                     // Not this placed drag.
 422                     return true;
 423                 }
 424
 425                 // Now put this drag into the drop.
 426                 placedDrag.removeClass('valid-drag-over-drop');
 427                 var currentPlace = thisQ.getClassnameNumericSuffix(placedDrag, 'inplace');
 428                 var drop = thisQ.getDrop(drag, currentPlace);
 429                 thisQ.sendDragToDrop(drag, drop);
 430                 placed = true;
 431                 return false; // Stop the each() here.
 432             });
 433         }
 434
 435         if (!placed) {
 436             this.sendDragHome(drag);
 437         }
 438     };
 439
 440     /**
 441      * Animate a drag item into a given place (or back home).
 442      *
 443      * @param {jQuery|null} drag the item to place. If null, clear the place.
 444      * @param {jQuery} drop the place to put it.
 445      */
 446     DragDropOntoImageQuestion.prototype.sendDragToDrop = function(drag, drop) {
 447         // Is there already a drag in this drop? if so, evict it.
 448         var oldDrag = this.getCurrentDragInPlace(this.getPlace(drop));
 449         if (oldDrag.length !== 0) {
 450             oldDrag.addClass('beingdragged');
 451             oldDrag.offset(oldDrag.offset());
 452             var currentPlace = this.getClassnameNumericSuffix(oldDrag, 'inplace');
 453             var hiddenDrop = this.getDrop(oldDrag, currentPlace);
 454             hiddenDrop.addClass('active');
 455             this.sendDragHome(oldDrag);
 456         }
 457
 458         if (drag.length === 0) {
 459             this.setInputValue(this.getPlace(drop), 0);
 460             if (drop.data('isfocus')) {
 461                 drop.focus();
 462             }
 463         } else {
 464             this.setInputValue(this.getPlace(drop), this.getChoice(drag));
 465             drag.removeClass('unplaced')
 466                 .addClass('placed inplace' + this.getPlace(drop));
 467             drag.attr('tabindex', 0);
 468             this.animateTo(drag, drop);
 469         }
 470     };
 471
 472     /**
 473      * Animate a drag back to its home.
 474      *
 475      * @param {jQuery} drag the item being moved.
 476      */
 477     DragDropOntoImageQuestion.prototype.sendDragHome = function(drag) {
 478         var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');
 479         if (currentPlace !== null) {
 480             drag.removeClass('inplace' + currentPlace);
 481         }
 482         drag.data('unplaced', true);
 483
 484         this.animateTo(drag, this.getDragHome(this.getGroup(drag), this.getChoice(drag)));
 485     };
 486
 487     /**
 488      * Handles keyboard events on drops.
 489      *
 490      * Drops are focusable. Once focused, right/down/space switches to the next choice, and
 491      * left/up switches to the previous. Escape clear.
 492      *
 493      * @param {KeyboardEvent} e
 494      */
 495     DragDropOntoImageQuestion.prototype.handleKeyPress = function(e) {
 496         var drop = $(e.target).closest('.dropzone');
 497         if (drop.length === 0) {
 498             var placedDrag = $(e.target);
 499             var currentPlace = this.getClassnameNumericSuffix(placedDrag, 'inplace');
 500             if (currentPlace !== null) {
 501                 drop = this.getDrop(placedDrag, currentPlace);
 502             }
 503         }
 504         var currentDrag = this.getCurrentDragInPlace(this.getPlace(drop)),
 505             nextDrag = $();
 506
 507         switch (e.keyCode) {
 508             case keys.space:
 509             case keys.arrowRight:
 510             case keys.arrowDown:
 511                 nextDrag = this.getNextDrag(this.getGroup(drop), currentDrag);
 512                 break;
 513
 514             case keys.arrowLeft:
 515             case keys.arrowUp:
 516                 nextDrag = this.getPreviousDrag(this.getGroup(drop), currentDrag);
 517                 break;
 518
 519             case keys.escape:
 520                 questionManager.isKeyboardNavigation = false;
 521                 break;
 522
 523             default:
 524                 questionManager.isKeyboardNavigation = false;
 525                 return; // To avoid the preventDefault below.
 526         }
 527
 528         if (nextDrag.length) {
 529             nextDrag.data('isfocus', true);
 530             nextDrag.addClass('beingdragged');
 531             var hiddenDrag = this.getDragClone(nextDrag);
 532             if (hiddenDrag.length) {
 533                 if (nextDrag.hasClass('infinite')) {
 534                     var noOfDrags = this.noOfDropsInGroup(this.getGroup(nextDrag));
 535                     var cloneDrags = this.getInfiniteDragClones(nextDrag, false);
 536                     if (cloneDrags.length < noOfDrags) {
 537                         var cloneDrag = nextDrag.clone();
 538                         cloneDrag.removeClass('beingdragged');
 539                         cloneDrag.removeAttr('tabindex');
 540                         hiddenDrag.after(cloneDrag);
 541                         questionManager.addEventHandlersToDrag(cloneDrag);
 542                         nextDrag.offset(cloneDrag.offset());
 543                     } else {
 544                         hiddenDrag.addClass('active');
 545                         nextDrag.offset(hiddenDrag.offset());
 546                     }
 547                 } else {
 548                     hiddenDrag.addClass('active');
 549                     nextDrag.offset(hiddenDrag.offset());
 550                 }
 551             }
 552         } else {
 553             drop.data('isfocus', true);
 554         }
 555
 556         e.preventDefault();
 557         this.sendDragToDrop(nextDrag, drop);
 558     };
 559
 560     /**
 561      * Choose the next drag in a group.
 562      *
 563      * @param {int} group which group.
 564      * @param {jQuery} drag current choice (empty jQuery if there isn't one).
 565      * @return {jQuery} the next drag in that group, or null if there wasn't one.
 566      */
 567     DragDropOntoImageQuestion.prototype.getNextDrag = function(group, drag) {
 568         var choice,
 569             numChoices = this.noOfChoicesInGroup(group);
 570
 571         if (drag.length === 0) {
 572             choice = 1; // Was empty, so we want to select the first choice.
 573         } else {
 574             choice = this.getChoice(drag) + 1;
 575         }
 576
 577         var next = this.getUnplacedChoice(group, choice);
 578         while (next.length === 0 && choice < numChoices) {
 579             choice++;
 580             next = this.getUnplacedChoice(group, choice);
 581         }
 582
 583         return next;
 584     };
 585
 586     /**
 587      * Choose the previous drag in a group.
 588      *
 589      * @param {int} group which group.
 590      * @param {jQuery} drag current choice (empty jQuery if there isn't one).
 591      * @return {jQuery} the next drag in that group, or null if there wasn't one.
 592      */
 593     DragDropOntoImageQuestion.prototype.getPreviousDrag = function(group, drag) {
 594         var choice;
 595
 596         if (drag.length === 0) {
 597             choice = this.noOfChoicesInGroup(group);
 598         } else {
 599             choice = this.getChoice(drag) - 1;
 600         }
 601
 602         var previous = this.getUnplacedChoice(group, choice);
 603         while (previous.length === 0 && choice > 1) {
 604             choice--;
 605             previous = this.getUnplacedChoice(group, choice);
 606         }
 607
 608         // Does this choice exist?
 609         return previous;
 610     };
 611
 612     /**
 613      * Animate an object to the given destination.
 614      *
 615      * @param {jQuery} drag the element to be animated.
 616      * @param {jQuery} target element marking the place to move it to.
 617      */
 618     DragDropOntoImageQuestion.prototype.animateTo = function(drag, target) {
 619         var currentPos = drag.offset(),
 620             targetPos = target.offset(),
 621             thisQ = this;
 622
 623         M.util.js_pending('qtype_ddimageortext-animate-' + thisQ.containerId);
 624         // Animate works in terms of CSS position, whereas locating an object
 625         // on the page works best with jQuery offset() function. So, to get
 626         // the right target position, we work out the required change in
 627         // offset() and then add that to the current CSS position.
 628         drag.animate(
 629             {
 630                 left: parseInt(drag.css('left')) + targetPos.left - currentPos.left,
 631                 top: parseInt(drag.css('top')) + targetPos.top - currentPos.top
 632             },
 633             {
 634                 duration: 'fast',
 635                 done: function() {
 636                     $('body').trigger('qtype_ddimageortext-dragmoved', [drag, target, thisQ]);
 637                     M.util.js_complete('qtype_ddimageortext-animate-' + thisQ.containerId);
 638                 }
 639             }
 640         );
 641     };
 642
 643     /**
 644      * Detect if a point is inside a given DOM node.
 645      *
 646      * @param {Number} pageX the x position.
 647      * @param {Number} pageY the y position.
 648      * @param {jQuery} drop the node to check (typically a drop).
 649      * @return {boolean} whether the point is inside the node.
 650      */
 651     DragDropOntoImageQuestion.prototype.isPointInDrop = function(pageX, pageY, drop) {
 652         var position = drop.offset();
 653         if (drop.hasClass('draghome')) {
 654             return pageX >= position.left && pageX < position.left + drop.outerWidth()
 655                 && pageY >= position.top && pageY < position.top + drop.outerHeight();
 656         }
 657         return pageX >= position.left && pageX < position.left + drop.width()
 658             && pageY >= position.top && pageY < position.top + drop.height();
 659     };
 660
 661     /**
 662      * Set the value of the hidden input for a place, to record what is currently there.
 663      *
 664      * @param {int} place which place to set the input value for.
 665      * @param {int} choice the value to set.
 666      */
 667     DragDropOntoImageQuestion.prototype.setInputValue = function(place, choice) {
 668         this.getRoot().find('input.placeinput.place' + place).val(choice);
 669     };
 670
 671     /**
 672      * Get the outer div for this question.
 673      *
 674      * @returns {jQuery} containing that div.
 675      */
 676     DragDropOntoImageQuestion.prototype.getRoot = function() {
 677         return $(document.getElementById(this.containerId));
 678     };
 679
 680     /**
 681      * Get the img that is the background image.
 682      * @returns {jQuery} containing that img.
 683      */
 684     DragDropOntoImageQuestion.prototype.bgImage = function() {
 685         return this.getRoot().find('img.dropbackground');
 686     };
 687
 688     /**
 689      * Get drag home for a given choice.
 690      *
 691      * @param {int} group the group.
 692      * @param {int} choice the choice number.
 693      * @returns {jQuery} containing that div.
 694      */
 695     DragDropOntoImageQuestion.prototype.getDragHome = function(group, choice) {
 696         if (!this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice).is(':visible')) {
 697             return this.getRoot().find('.dragitemgroup' + group +
 698                 ' .draghome.infinite' +
 699                 '.choice' + choice +
 700                 '.group' + group);
 701         }
 702         return this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice);
 703     };
 704
 705     /**
 706      * Get an unplaced choice for a particular group.
 707      *
 708      * @param {int} group the group.
 709      * @param {int} choice the choice number.
 710      * @returns {jQuery} jQuery wrapping the unplaced choice. If there isn't one, the jQuery will be empty.
 711      */
 712     DragDropOntoImageQuestion.prototype.getUnplacedChoice = function(group, choice) {
 713         return this.getRoot().find('.ddarea .draghome.group' + group + '.choice' + choice + '.unplaced').slice(0, 1);
 714     };
 715
 716     /**
 717      * Get the drag that is currently in a given place.
 718      *
 719      * @param {int} place the place number.
 720      * @return {jQuery} the current drag (or an empty jQuery if none).
 721      */
 722     DragDropOntoImageQuestion.prototype.getCurrentDragInPlace = function(place) {
 723         return this.getRoot().find('.ddarea .draghome.inplace' + place);
 724     };
 725
 726     /**
 727      * Return the number of blanks in a given group.
 728      *
 729      * @param {int} group the group number.
 730      * @returns {int} the number of drops.
 731      */
 732     DragDropOntoImageQuestion.prototype.noOfDropsInGroup = function(group) {
 733         return this.getRoot().find('.dropzone.group' + group).length;
 734     };
 735
 736     /**
 737      * Return the number of choices in a given group.
 738      *
 739      * @param {int} group the group number.
 740      * @returns {int} the number of choices.
 741      */
 742     DragDropOntoImageQuestion.prototype.noOfChoicesInGroup = function(group) {
 743         return this.getRoot().find('.dragitemgroup' + group + ' .draghome').length;
 744     };
 745
 746     /**
 747      * Return the number at the end of the CSS class name with the given prefix.
 748      *
 749      * @param {jQuery} node
 750      * @param {String} prefix name prefix
 751      * @returns {Number|null} the suffix if found, else null.
 752      */
 753     DragDropOntoImageQuestion.prototype.getClassnameNumericSuffix = function(node, prefix) {
 754         var classes = node.attr('class');
 755         if (classes !== '') {
 756             var classesArr = classes.split(' ');
 757             for (var index = 0; index < classesArr.length; index++) {
 758                 var patt1 = new RegExp('^' + prefix + '([0-9])+$');
 759                 if (patt1.test(classesArr[index])) {
 760                     var patt2 = new RegExp('([0-9])+$');
 761                     var match = patt2.exec(classesArr[index]);
 762                     return Number(match[0]);
 763                 }
 764             }
 765         }
 766         return null;
 767     };
 768
 769     /**
 770      * Get the choice number of a drag.
 771      *
 772      * @param {jQuery} drag the drag.
 773      * @returns {Number} the choice number.
 774      */
 775     DragDropOntoImageQuestion.prototype.getChoice = function(drag) {
 776         return this.getClassnameNumericSuffix(drag, 'choice');
 777     };
 778
 779     /**
 780      * Given a DOM node that is significant to this question
 781      * (drag, drop, ...) get the group it belongs to.
 782      *
 783      * @param {jQuery} node a DOM node.
 784      * @returns {Number} the group it belongs to.
 785      */
 786     DragDropOntoImageQuestion.prototype.getGroup = function(node) {
 787         return this.getClassnameNumericSuffix(node, 'group');
 788     };
 789
 790     /**
 791      * Get the place number of a drop, or its corresponding hidden input.
 792      *
 793      * @param {jQuery} node the DOM node.
 794      * @returns {Number} the place number.
 795      */
 796     DragDropOntoImageQuestion.prototype.getPlace = function(node) {
 797         return this.getClassnameNumericSuffix(node, 'place');
 798     };
 799
 800     /**
 801      * Get drag clone for a given drag.
 802      *
 803      * @param {jQuery} drag the drag.
 804      * @returns {jQuery} the drag's clone.
 805      */
 806     DragDropOntoImageQuestion.prototype.getDragClone = function(drag) {
 807         return this.getRoot().find('.dragitemgroup' +
 808             this.getGroup(drag) +
 809             ' .draghome' +
 810             '.choice' + this.getChoice(drag) +
 811             '.group' + this.getGroup(drag) +
 812             '.dragplaceholder');
 813     };
 814
 815     /**
 816      * Get infinite drag clones for given drag.
 817      *
 818      * @param {jQuery} drag the drag.
 819      * @param {Boolean} inHome in the home area or not.
 820      * @returns {jQuery} the drag's clones.
 821      */
 822     DragDropOntoImageQuestion.prototype.getInfiniteDragClones = function(drag, inHome) {
 823         if (inHome) {
 824             return this.getRoot().find('.dragitemgroup' +
 825                 this.getGroup(drag) +
 826                 ' .draghome' +
 827                 '.choice' + this.getChoice(drag) +
 828                 '.group' + this.getGroup(drag) +
 829                 '.infinite').not('.dragplaceholder');
 830         }
 831         return this.getRoot().find('.draghome' +
 832             '.choice' + this.getChoice(drag) +
 833             '.group' + this.getGroup(drag) +
 834             '.infinite').not('.dragplaceholder');
 835     };
 836
 837     /**
 838      * Get drop for a given drag and place.
 839      *
 840      * @param {jQuery} drag the drag.
 841      * @param {Integer} currentPlace the current place of drag.
 842      * @returns {jQuery} the drop's clone.
 843      */
 844     DragDropOntoImageQuestion.prototype.getDrop = function(drag, currentPlace) {
 845         return this.getRoot().find('.dropzone.group' + this.getGroup(drag) + '.place' + currentPlace);
 846     };
 847
 848     /**
 849      * Handle when the window is resized.
 850      */
 851     DragDropOntoImageQuestion.prototype.handleResize = function() {
 852         var thisQ = this,
 853             bgRatio = this.bgRatio();
 854         if (this.isPrinting) {
 855             bgRatio = 1;
 856         }
 857
 858         this.getRoot().find('.ddarea .dropzone').each(function(i, dropNode) {
 859             $(dropNode)
 860                 .css('left', parseInt($(dropNode).data('originX')) * parseFloat(bgRatio))
 861                 .css('top', parseInt($(dropNode).data('originY')) * parseFloat(bgRatio));
 862             thisQ.handleElementScale(dropNode, 'left top');
 863         });
 864
 865         this.getRoot().find('div.droparea .draghome').not('.beingdragged').each(function(key, drag) {
 866             $(drag)
 867                 .css('left', parseFloat($(drag).data('originX')) * parseFloat(bgRatio))
 868                 .css('top', parseFloat($(drag).data('originY')) * parseFloat(bgRatio));
 869             thisQ.handleElementScale(drag, 'left top');
 870         });
 871     };
 872
 873     /**
 874      * Return the background ratio.
 875      *
 876      * @returns {number} Background ratio.
 877      */
 878     DragDropOntoImageQuestion.prototype.bgRatio = function() {
 879         var bgImg = this.bgImage();
 880         var bgImgNaturalWidth = bgImg.get(0).naturalWidth;
 881         var bgImgClientWidth = bgImg.width();
 882
 883         return bgImgClientWidth / bgImgNaturalWidth;
 884     };
 885
 886     /**
 887      * Scale the drag if needed.
 888      *
 889      * @param {jQuery} element the item to place.
 890      * @param {String} type scaling type
 891      */
 892     DragDropOntoImageQuestion.prototype.handleElementScale = function(element, type) {
 893         var bgRatio = parseFloat(this.bgRatio());
 894         if (this.isPrinting) {
 895             bgRatio = 1;
 896         }
 897         $(element).css({
 898             '-webkit-transform': 'scale(' + bgRatio + ')',
 899             '-moz-transform': 'scale(' + bgRatio + ')',
 900             '-ms-transform': 'scale(' + bgRatio + ')',
 901             '-o-transform': 'scale(' + bgRatio + ')',
 902             'transform': 'scale(' + bgRatio + ')',
 903             'transform-origin': type
 904         });
 905     };
 906
 907     /**
 908      * Calculate z-index value.
 909      *
 910      * @returns {number} z-index value
 911      */
 912     DragDropOntoImageQuestion.prototype.calculateZIndex = function() {
 913         var zIndex = 0;
 914         this.getRoot().find('.ddarea .dropzone, div.droparea .draghome').each(function(i, dropNode) {
 915             dropNode = $(dropNode);
 916             // Note that webkit browsers won't return the z-index value from the CSS stylesheet
 917             // if the element doesn't have a position specified. Instead it'll return "auto".
 918             var itemZIndex = dropNode.css('z-index') ? parseInt(dropNode.css('z-index')) : 0;
 919
 920             if (itemZIndex > zIndex) {
 921                 zIndex = itemZIndex;
 922             }
 923         });
 924
 925         return zIndex;
 926     };
 927
 928     /**
 929      * Check that the drag is drop to it's clone.
 930      *
 931      * @param {jQuery} drag The drag.
 932      * @param {jQuery} drop The drop.
 933      * @returns {boolean}
 934      */
 935     DragDropOntoImageQuestion.prototype.isDragSameAsDrop = function(drag, drop) {
 936         return this.getChoice(drag) === this.getChoice(drop) && this.getGroup(drag) === this.getGroup(drop);
 937     };
 938
 939     /**
 940      * Singleton object that handles all the DragDropOntoImageQuestions
 941      * on the page, and deals with event dispatching.
 942      * @type {Object}
 943      */
 944     var questionManager = {
 945
 946         /**
 947          * {boolean} ensures that the event handlers are only initialised once per page.
 948          */
 949         eventHandlersInitialised: false,
 950
 951         /**
 952          * {boolean} is printing or not.
 953          */
 954         isPrinting: false,
 955
 956         /**
 957          * {boolean} is keyboard navigation or not.
 958          */
 959         isKeyboardNavigation: false,
 960
 961         /**
 962          * {Object} all the questions on this page, indexed by containerId (id on the .que div).
 963          */
 964         questions: {}, // An object containing all the information about each question on the page.
 965
 966         /**
 967          * Initialise one question.
 968          *
 969          * @param {String} containerId the id of the div.que that contains this question.
 970          * @param {boolean} readOnly whether the question is read-only.
 971          * @param {Array} places data.
 972          */
 973         init: function(containerId, readOnly, places) {
 974             questionManager.questions[containerId] =
 975                 new DragDropOntoImageQuestion(containerId, readOnly, places);
 976             if (!questionManager.eventHandlersInitialised) {
 977                 questionManager.setupEventHandlers();
 978                 questionManager.eventHandlersInitialised = true;
 979             }
 980         },
 981
 982         /**
 983          * Set up the event handlers that make this question type work. (Done once per page.)
 984          */
 985         setupEventHandlers: function() {
 986             // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.
 987             questionManager.addEventHandlersToDrag($('.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome'));
 988             $('body')
 989                 .on('keydown',
 990                     '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone',
 991                     questionManager.handleKeyPress)
 992                 .on('keydown',
 993                     '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)',
 994                     questionManager.handleKeyPress)
 995                 .on('qtype_ddimageortext-dragmoved', questionManager.handleDragMoved);
 996             $(window).on('resize', function() {
 997                 questionManager.handleWindowResize(false);
 998             });
 999             window.addEventListener('beforeprint', function() {
1000                 questionManager.isPrinting = true;
1001                 questionManager.handleWindowResize(questionManager.isPrinting);
1002             });
1003             window.addEventListener('afterprint', function() {
1004                 questionManager.isPrinting = false;
1005                 questionManager.handleWindowResize(questionManager.isPrinting);
1006             });
1007             setTimeout(function() {
1008                 questionManager.fixLayoutIfThingsMoved();
1009             }, 100);
1010         },
1011
1012         /**
1013          * Binding the drag/touch event again for newly created element.
1014          *
1015          * @param {jQuery} element Element to bind the event
1016          */
1017         addEventHandlersToDrag: function(element) {
1018             // Unbind all the mousedown and touchstart events to prevent double binding.
1019             element.unbind('mousedown touchstart');
1020             element.on('mousedown touchstart', questionManager.handleDragStart);
1021         },
1022
1023         /**
1024          * Handle mouse down / touch start events on drags.
1025          * @param {Event} e the DOM event.
1026          */
1027         handleDragStart: function(e) {
1028             e.preventDefault();
1029             var question = questionManager.getQuestionForEvent(e);
1030             if (question) {
1031                 question.handleDragStart(e);
1032             }
1033         },
1034
1035         /**
1036          * Handle key down / press events on drags.
1037          * @param {KeyboardEvent} e
1038          */
1039         handleKeyPress: function(e) {
1040             if (questionManager.isKeyboardNavigation) {
1041                 return;
1042             }
1043             questionManager.isKeyboardNavigation = true;
1044             var question = questionManager.getQuestionForEvent(e);
1045             if (question) {
1046                 question.handleKeyPress(e);
1047             }
1048         },
1049
1050         /**
1051          * Handle when the window is resized.
1052          * @param {boolean} isPrinting
1053          */
1054         handleWindowResize: function(isPrinting) {
1055             for (var containerId in questionManager.questions) {
1056                 if (questionManager.questions.hasOwnProperty(containerId)) {
1057                     questionManager.questions[containerId].isPrinting = isPrinting;
1058                     questionManager.questions[containerId].handleResize();
1059                 }
1060             }
1061         },
1062
1063         /**
1064          * Sometimes, despite our best efforts, things change in a way that cannot
1065          * be specifically caught (e.g. dock expanding or collapsing in Boost).
1066          * Therefore, we need to periodically check everything is in the right position.
1067          */
1068         fixLayoutIfThingsMoved: function() {
1069             this.handleWindowResize(questionManager.isPrinting);
1070             // We use setTimeout after finishing work, rather than setInterval,
1071             // in case positioning things is slow. We want 100 ms gap
1072             // between executions, not what setInterval does.
1073             setTimeout(function() {
1074                 questionManager.fixLayoutIfThingsMoved(questionManager.isPrinting);
1075             }, 100);
1076         },
1077
1078         /**
1079          * Handle when drag moved.
1080          *
1081          * @param {Event} e the event.
1082          * @param {jQuery} drag the drag
1083          * @param {jQuery} target the target
1084          * @param {DragDropOntoImageQuestion} thisQ the question.
1085          */
1086         handleDragMoved: function(e, drag, target, thisQ) {
1087             drag.removeClass('beingdragged').css('z-index', '');
1088             drag.css('top', target.position().top).css('left', target.position().left);
1089             target.after(drag);
1090             target.removeClass('active');
1091             if (typeof drag.data('unplaced') !== 'undefined' && drag.data('unplaced') === true) {
1092                 drag.removeClass('placed').addClass('unplaced');
1093                 drag.removeAttr('tabindex');
1094                 drag.removeData('unplaced');
1095                 drag.css('top', '')
1096                     .css('left', '')
1097                     .css('transform', '');
1098                 if (drag.hasClass('infinite') && thisQ.getInfiniteDragClones(drag, true).length > 1) {
1099                     thisQ.getInfiniteDragClones(drag, true).first().remove();
1100                 }
1101             } else {
1102                 drag.data('originX', target.data('originX')).data('originY', target.data('originY'));
1103                 thisQ.handleElementScale(drag, 'left top');
1104             }
1105             if (typeof drag.data('isfocus') !== 'undefined' && drag.data('isfocus') === true) {
1106                 drag.focus();
1107                 drag.removeData('isfocus');
1108             }
1109             if (typeof target.data('isfocus') !== 'undefined' && target.data('isfocus') === true) {
1110                 target.removeData('isfocus');
1111             }
1112             if (questionManager.isKeyboardNavigation) {
1113                 questionManager.isKeyboardNavigation = false;
1114             }
1115         },
1116
1117         /**
1118          * Given an event, work out which question it effects.
1119          * @param {Event} e the event.
1120          * @returns {DragDropOntoImageQuestion|undefined} The question, or undefined.
1121          */
1122         getQuestionForEvent: function(e) {
1123             var containerId = $(e.currentTarget).closest('.que.ddimageortext').attr('id');
1124             return questionManager.questions[containerId];
1125         }
1126     };
1127
1128     /**
1129      * @alias module:qtype_ddimageortext/question
1130      */
1131     return {
1132         /**
1133          * Initialise one drag-drop onto image question.
1134          *
1135          * @param {String} containerId id of the outer div for this question.
1136          * @param {boolean} readOnly whether the question is being displayed read-only.
1137          * @param {Array} Information about the drop places.
1138          */
1139         init: questionManager.init
1140     };
1141 });