diff --git a/question/type/ddmarker/amd/build/form.min.js b/question/type/ddmarker/amd/build/form.min.js
index 4f5c5e71a7a..4843ef708f7 100644
--- a/question/type/ddmarker/amd/build/form.min.js
+++ b/question/type/ddmarker/amd/build/form.min.js
@@ -1 +1 @@
-define(["jquery","core/dragdrop","qtype_ddmarker/shapes"],function(a,b,c){"use strict";function d(a){this.dropzoneNo=a,this.svgEl=null,this.shape=c.make(this.getShapeType(),this.getLabel()),this.updateCoordinatesFromForm()}d.prototype.updateCoordinatesFromForm=function(){var a=this.getCoordinates();this.shape.getCoordinates()!==a&&this.shape.parse(a)&&this.updateSvgEl()},d.prototype.updateLabel=function(){var a=this.getLabel();this.shape.label!==a&&(this.shape.label=a,this.updateSvgEl())},d.prototype.changeShape=function(a){var b=this.getShapeType(),d=this.isActive();b!==this.shape.getType()&&(this.removeFromSvg(),this.shape=c.getSimilar(b,this.shape),a&&(this.addToSvg(a),d&&this.setActive()),this.setCoordinatesInForm())},d.prototype.addToSvg=function(a){if(null!==this.svgEl)throw new Error("this.svgEl already set");if(this.svgEl=this.shape.makeSvg(a),this.svgEl){this.svgEl.setAttribute("class","dropzone"),this.svgEl.setAttribute("data-dropzone-no",this.dropzoneNo);var b=this.shape.getHandlePositions();if(null!==b){var d=c.createSvgElement(this.svgEl,"circle");d.setAttribute("cx",b.moveHandle.x),d.setAttribute("cy",b.moveHandle.y),d.setAttribute("r",7),d.setAttribute("class","handle move");for(var e=0;e<b.editHandles.length;++e)this.makeEditHandle(e,b.editHandles[e])}}},d.prototype.makeEditHandle=function(a,b){var d=c.createSvgElement(this.svgEl,"rect");d.setAttribute("x",b.x-6),d.setAttribute("y",b.y-6),d.setAttribute("width",11),d.setAttribute("height",11),d.setAttribute("class","handle edit"),d.setAttribute("data-edit-handle-no",a)},d.prototype.removeFromSvg=function(){null!==this.svgEl&&(this.svgEl.parentNode.removeChild(this.svgEl),this.svgEl=null)},d.prototype.updateSvgEl=function(){if(null!==this.svgEl){this.shape.updateSvg(this.svgEl);var a=this.shape.getHandlePositions();if(null!==a){this.svgEl.childNodes[2].setAttribute("cx",a.moveHandle.x),this.svgEl.childNodes[2].setAttribute("cy",a.moveHandle.y);for(var b=0;b<a.editHandles.length;++b)this.svgEl.childNodes[3+b].setAttribute("x",a.editHandles[b].x-6),this.svgEl.childNodes[3+b].setAttribute("y",a.editHandles[b].y-6)}}},d.prototype.isActive=function(){return null!==this.svgEl&&this.svgEl.getAttribute("class").match(/\bactive\b/)},d.prototype.setActive=function(){this.svgEl.setAttribute("class",this.svgEl.getAttribute("class")+" active")},d.prototype.setCoordinatesInForm=function(){e.form.setFormValue("drops",[this.dropzoneNo,"coords"],this.shape.getCoordinates())},d.prototype.getCoordinates=function(){return e.form.getFormValue("drops",[this.dropzoneNo,"coords"]).replace(/\s*/g,"")},d.prototype.getChoiceNo=function(){return e.form.getFormValue("drops",[this.dropzoneNo,"choice"])},d.prototype.getLabel=function(){return e.form.getMarkerText(this.getChoiceNo())},d.prototype.getShapeType=function(){return e.form.getFormValue("drops",[this.dropzoneNo,"shape"])},d.prototype.handleMove=function(c){var d=b.prepare(c);if(d.start){var e=this,f=d.x,g=d.y,h=this.makeDragProxy(d.x,d.y);b.start(c,a(h),function(a,b){e.shape.move(a-f,b-g),f=a,g=b,e.updateSvgEl(),e.setCoordinatesInForm()},function(){document.body.removeChild(h)})}},d.prototype.handleEdit=function(c,d,e){var f=b.prepare(c);if(f.start){"polygon"===this.shape.getType()&&c.ctrlKey&&(this.shape.addNewPointAfter(d),this.removeFromSvg(),this.addToSvg(e),this.setActive());var g=this,h=f.x,i=f.y,j=this.makeDragProxy(f.x,f.y);b.start(c,a(j),function(a,b){g.shape.edit(d,a-h,b-i),h=a,i=b,g.updateSvgEl(),g.setCoordinatesInForm()},function(){document.body.removeChild(j),g.shape.normalizeShape(),g.updateSvgEl(),g.setCoordinatesInForm()})}},d.prototype.makeDragProxy=function(a,b){var c=document.createElement("div");return c.style.position="absolute",c.style.top=b+"px",c.style.left=a+"px",c.style.width="1px",c.style.height="1px",document.body.appendChild(c),c};var e={maxSizes:null,fp:null,noDropZones:null,dropZones:[],init:function(a){e.maxSizes=a,e.fp=e.filePickers(),e.noDropZones=e.form.getFormValue("nodropzone",[]),e.setupPreviewArea(),e.setOptionsForDragItemSelectors(),e.createShapes(),e.setupEventHandlers(),e.waitForFilePickerToInitialise()},setupPreviewArea:function(){a("fieldset#id_previewareaheader div.fcontainer").append('<div class="ddarea que ddmarker">   <div id="ddm-droparea" class="droparea">       <img class="dropbackground" />       <div id="ddm-dropzone" class="dropzones">       </div>   </div></div>')},setOptionsForDragItemSelectors:function(){var b,c,d,f={0:""},g=e.form.getFormValue("noitems",[]),h=[];for(c=1;c<=g;c++)d=e.form.getMarkerText(c),""!==d&&(f[c]=a("<div/>").text(d).html());for(c=0;c<e.noDropZones;c++)b=a("#id_drops_"+c+"_choice"),h[c]=Number(b.val());for(c=0;c<e.noDropZones;c++){b=a("#id_drops_"+c+"_choice"),b.find("option").remove();for(var i in f){i=Number(i);var j='<option value="'+i+'">'+f[i]+"</option>";b.append(j);var k=b.find('option[value="'+i+'"]');if(0!==i)if(i!==h[c]){var l=e.form.getFormValue("drags",[i-1,"noofdrags"]);if(0!==Number(l))for(var m in h)if(Number(h[m])===i){if(1===Number(l)){k.attr("disabled",!0);break}l--}}else k.attr("selected",!0)}e.dropZones.length>0&&e.dropZones[c].updateLabel()}},createShapes:function(){for(var a=0;a<e.noDropZones;a++)e.dropZones[a]=new d(a)},setupEventHandlers:function(){a("fieldset#id_draggableitemheader").on("change input","input, select",function(){e.setOptionsForDragItemSelectors()}),a("fieldset#id_dropzoneheader").on("change input","input, select",function(a){var b=a.currentTarget.name.match(/^drops\[(\d+)]\[([a-z]*)]$/);if(b){var c=b[1],d=b[2],f=e.dropZones[c];switch(d){case"shape":f.changeShape(e.form.getSvg());break;case"coords":f.updateCoordinatesFromForm();break;case"choice":f.updateLabel()}}});var b=a("fieldset#id_previewareaheader");b.on("click","g.dropzone",function(b){var c=a(b.currentTarget).data("dropzone-no"),d=e.dropZones[c].isActive();a(e.form.getSvg()).find(".dropzone.active").removeClass("active"),d||e.dropZones[c].setActive()}),b.on("mousedown touchstart",".dropzone .handle.move",function(b){var c=a(b.currentTarget).closest("g").data("dropzoneNo");e.dropZones[c].handleMove(b)}),b.on("mousedown touchstart",".dropzone .handle.edit",function(b){var c=a(b.currentTarget).closest("g").data("dropzoneNo"),d=b.currentTarget.getAttribute("data-edit-handle-no");e.dropZones[c].handleEdit(b,d,e.form.getSvg())})},waitForFilePickerToInitialise:function(){return null===e.fp.file("bgimage").href?void setTimeout(e.waitForFilePickerToInitialise,1e3):(a("form.mform").on("change","#id_bgimage",e.loadPreviewImage),void e.loadPreviewImage())},loadPreviewImage:function(){a("fieldset#id_previewareaheader .dropbackground").one("load",e.afterPreviewImageLoaded).attr("src",e.fp.file("bgimage").href)},afterPreviewImageLoaded:function(){var b=a("fieldset#id_previewareaheader .dropbackground");e.constrainImageSize(),a("#ddm-dropzone").css("position","relative").css("top",(b.height()+1)*-1),a("#ddm-droparea").css("height",b.height()+20),e.updateSvgDisplay()},constrainImageSize:function(){var b=a("fieldset#id_previewareaheader .dropbackground"),c=Math.max(b.width()/e.maxSizes.width,b.height()/e.maxSizes.height);c>1&&b.css("width",Math.floor(b.width()/c)),b.addClass("constrained")},updateSvgDisplay:function(){var b,c=a("fieldset#id_previewareaheader .dropbackground");if(e.form.getSvg())for(b=0;b<e.noDropZones;b++)e.dropZones[b].updateSvgEl();else for(a("#ddm-dropzone").html('<svg xmlns="http://www.w3.org/2000/svg" class="dropzones" width="'+c.outerWidth()+'" height="'+c.outerHeight()+'"></svg>'),b=0;b<e.noDropZones;b++)e.dropZones[b].addToSvg(e.form.getSvg())},form:{getMarkerText:function(a){if(0!==Number(a)){var b=e.form.getFormValue("drags",[a-1,"label"]);return b.replace(new RegExp("^\\s*(.*)\\s*$"),"$1")}return""},getSvg:function(){var b=a("fieldset#id_previewareaheader svg");return 0===b.length?null:b[0]},toNameWithIndex:function(a,b){for(var c=a,d=0;d<b.length;d++)c=c+"["+b[d]+"]";return c},getEl:function(a,b){var c=document.getElementById("mform1");return c.elements[this.toNameWithIndex(a,b)]},getFormValue:function(a,b){var c=this.getEl(a,b);return"checkbox"===c.type?c.checked:c.value},setFormValue:function(a,b,c){var d=this.getEl(a,b);"checkbox"===d.type?d.checked=c:d.value=c}},filePickers:function(){var b,c;return void 0===b&&(b={},c={},a("form.mform input.filepickerhidden").each(function(a,d){b[d.value]=d.name,c[d.name]=d.parentNode})),{file:function(b){var d=a(c[b]).find("div.filepicker-filelist a");return d.length?{href:d.get(0).href,name:d.get(0).innerHTML}:{href:null,name:null}},name:function(a){return b[a]}}}};return{init:e.init}});
\ No newline at end of file
+define(["jquery","core/dragdrop","qtype_ddmarker/shapes"],function(a,b,c){"use strict";function d(a){this.dropzoneNo=a,this.svgEl=null,this.shape=c.make(this.getShapeType(),this.getLabel()),this.updateCoordinatesFromForm()}d.prototype.updateCoordinatesFromForm=function(a){var b=this.getCoordinates(),c="polygon"===this.shape.getType()&&this.shape.points.length;if(this.shape.getCoordinates()!==b&&this.shape.parse(b))if("polygon"===this.shape.getType()&&c!==this.shape.points.length){var d=this.isActive();this.removeFromSvg(),a&&(this.addToSvg(a),d&&this.setActive())}else this.updateSvgEl()},d.prototype.updateLabel=function(){var a=this.getLabel();this.shape.label!==a&&(this.shape.label=a,this.updateSvgEl())},d.prototype.changeShape=function(a){var b=this.getShapeType(),d=this.isActive();b!==this.shape.getType()&&(this.removeFromSvg(),this.shape=c.getSimilar(b,this.shape),a&&(this.addToSvg(a),d&&this.setActive()),this.setCoordinatesInForm())},d.prototype.addToSvg=function(a){if(null!==this.svgEl)throw new Error("this.svgEl already set");if(this.svgEl=this.shape.makeSvg(a),this.svgEl){this.svgEl.setAttribute("class","dropzone"),this.svgEl.setAttribute("data-dropzone-no",this.dropzoneNo);var b=this.shape.getHandlePositions();if(null!==b){var d=c.createSvgElement(this.svgEl,"circle");d.setAttribute("cx",b.moveHandle.x),d.setAttribute("cy",b.moveHandle.y),d.setAttribute("r",7),d.setAttribute("class","handle move");for(var e=0;e<b.editHandles.length;++e)this.makeEditHandle(e,b.editHandles[e])}}},d.prototype.makeEditHandle=function(a,b){var d=c.createSvgElement(this.svgEl,"rect");d.setAttribute("x",b.x-6),d.setAttribute("y",b.y-6),d.setAttribute("width",11),d.setAttribute("height",11),d.setAttribute("class","handle edit"),d.setAttribute("data-edit-handle-no",a)},d.prototype.removeFromSvg=function(){null!==this.svgEl&&(this.svgEl.parentNode.removeChild(this.svgEl),this.svgEl=null)},d.prototype.updateSvgEl=function(){if(null!==this.svgEl){this.shape.updateSvg(this.svgEl);var a=this.shape.getHandlePositions();if(null!==a){this.svgEl.childNodes[2].setAttribute("cx",a.moveHandle.x),this.svgEl.childNodes[2].setAttribute("cy",a.moveHandle.y);for(var b=0;b<a.editHandles.length;++b)this.svgEl.childNodes[3+b].setAttribute("x",a.editHandles[b].x-6),this.svgEl.childNodes[3+b].setAttribute("y",a.editHandles[b].y-6)}}},d.prototype.isActive=function(){return null!==this.svgEl&&this.svgEl.getAttribute("class").match(/\bactive\b/)},d.prototype.setActive=function(){var a=this.svgEl.parentNode;a.removeChild(this.svgEl),a.appendChild(this.svgEl),this.svgEl.setAttribute("class",this.svgEl.getAttribute("class")+" active")},d.prototype.setCoordinatesInForm=function(){e.form.setFormValue("drops",[this.dropzoneNo,"coords"],this.shape.getCoordinates())},d.prototype.getCoordinates=function(){return e.form.getFormValue("drops",[this.dropzoneNo,"coords"]).replace(/\s*/g,"")},d.prototype.getChoiceNo=function(){return e.form.getFormValue("drops",[this.dropzoneNo,"choice"])},d.prototype.getLabel=function(){return e.form.getMarkerText(this.getChoiceNo())},d.prototype.getShapeType=function(){return e.form.getFormValue("drops",[this.dropzoneNo,"shape"])},d.prototype.handleMove=function(c){var d=b.prepare(c);if(d.start){var e=this,f=d.x,g=d.y,h=this.makeDragProxy(d.x,d.y),i=a("fieldset#id_previewareaheader .dropbackground"),j=i.width(),k=i.height();b.start(c,a(h),function(a,b){e.shape.move(a-f,b-g,j,k),f=a,g=b,e.updateSvgEl(),e.setCoordinatesInForm()},function(){document.body.removeChild(h)})}},d.prototype.handleEdit=function(c,d,e){var f=b.prepare(c);if(f.start){"polygon"===this.shape.getType()&&(c.ctrlKey||c.metaKey)&&(this.shape.addNewPointAfter(d),this.removeFromSvg(),this.addToSvg(e),this.setActive());var g=this,h=f.x,i=f.y,j=this.makeDragProxy(f.x,f.y),k=a("fieldset#id_previewareaheader .dropbackground"),l=k.width(),m=k.height();b.start(c,a(j),function(a,b){g.shape.edit(d,a-h,b-i,l,m),h=a,i=b,g.updateSvgEl(),g.setCoordinatesInForm()},function(){document.body.removeChild(j),g.shape.normalizeShape(),g.updateSvgEl(),g.setCoordinatesInForm()})}},d.prototype.makeDragProxy=function(a,b){var c=document.createElement("div");return c.style.position="absolute",c.style.top=b+"px",c.style.left=a+"px",c.style.width="1px",c.style.height="1px",document.body.appendChild(c),c};var e={maxSizes:null,fp:null,noDropZones:null,dropZones:[],init:function(a){e.maxSizes=a,e.fp=e.filePickers(),e.noDropZones=e.form.getFormValue("nodropzone",[]),e.setupPreviewArea(),e.setOptionsForDragItemSelectors(),e.createShapes(),e.setupEventHandlers(),e.waitForFilePickerToInitialise()},setupPreviewArea:function(){a("fieldset#id_previewareaheader div.fcontainer").append('<div class="ddarea que ddmarker">   <div id="ddm-droparea" class="droparea">       <img class="dropbackground" />       <div id="ddm-dropzone" class="dropzones">       </div>   </div></div>')},setOptionsForDragItemSelectors:function(){var b,c,d,f={0:""},g=e.form.getFormValue("noitems",[]),h=[];for(c=1;c<=g;c++)d=e.form.getMarkerText(c),""!==d&&(f[c]=a("<div/>").text(d).html());for(c=0;c<e.noDropZones;c++)b=a("#id_drops_"+c+"_choice"),h[c]=Number(b.val());for(c=0;c<e.noDropZones;c++){b=a("#id_drops_"+c+"_choice"),b.find("option").remove();for(var i in f){i=Number(i);var j='<option value="'+i+'">'+f[i]+"</option>";b.append(j);var k=b.find('option[value="'+i+'"]');if(0!==i)if(i!==h[c]){var l=e.form.getFormValue("drags",[i-1,"noofdrags"]);if(0!==Number(l))for(var m in h)if(Number(h[m])===i){if(1===Number(l)){k.attr("disabled",!0);break}l--}}else k.attr("selected",!0)}e.dropZones.length>0&&e.dropZones[c].updateLabel()}},createShapes:function(){for(var a=0;a<e.noDropZones;a++)e.dropZones[a]=new d(a)},setupEventHandlers:function(){a("fieldset#id_draggableitemheader").on("change input","input, select",function(){e.setOptionsForDragItemSelectors()}),a("fieldset#id_dropzoneheader").on("change input","input, select",function(a){var b=a.currentTarget.name.match(/^drops\[(\d+)]\[([a-z]*)]$/);if(b){var c=b[1],d=b[2],f=e.dropZones[c];switch(d){case"shape":f.changeShape(e.form.getSvg());break;case"coords":f.updateCoordinatesFromForm(e.form.getSvg());break;case"choice":f.updateLabel()}}});var b=a("fieldset#id_previewareaheader");b.on("click","g.dropzone",function(b){var c=a(b.currentTarget).data("dropzone-no"),d=e.dropZones[c].isActive();a(e.form.getSvg()).find(".dropzone.active").removeClass("active"),d||e.dropZones[c].setActive()}),b.on("mousedown touchstart",".dropzone .handle.move",function(b){var c=a(b.currentTarget).closest("g").data("dropzoneNo");e.dropZones[c].handleMove(b)}),b.on("mousedown touchstart",".dropzone .handle.edit",function(b){var c=a(b.currentTarget).closest("g").data("dropzoneNo"),d=b.currentTarget.getAttribute("data-edit-handle-no");e.dropZones[c].handleEdit(b,d,e.form.getSvg())})},waitForFilePickerToInitialise:function(){return null===e.fp.file("bgimage").href?void setTimeout(e.waitForFilePickerToInitialise,1e3):(a("form.mform").on("change","#id_bgimage",e.loadPreviewImage),void e.loadPreviewImage())},loadPreviewImage:function(){a("fieldset#id_previewareaheader .dropbackground").one("load",e.afterPreviewImageLoaded).attr("src",e.fp.file("bgimage").href)},afterPreviewImageLoaded:function(){var b=a("fieldset#id_previewareaheader .dropbackground");e.constrainImageSize(),a("#ddm-dropzone").css("position","relative").css("top",(b.height()+1)*-1),a("#ddm-droparea").css("height",b.height()+20),e.updateSvgDisplay()},constrainImageSize:function(){var b=a("fieldset#id_previewareaheader .dropbackground"),c=Math.max(b.width()/e.maxSizes.width,b.height()/e.maxSizes.height);c>1&&b.css("width",Math.floor(b.width()/c)),b.addClass("constrained")},updateSvgDisplay:function(){var b,c=a("fieldset#id_previewareaheader .dropbackground");if(e.form.getSvg())for(b=0;b<e.noDropZones;b++)e.dropZones[b].updateSvgEl();else for(a("#ddm-dropzone").html('<svg xmlns="http://www.w3.org/2000/svg" class="dropzones" width="'+c.outerWidth()+'" height="'+c.outerHeight()+'"></svg>'),b=0;b<e.noDropZones;b++)e.dropZones[b].addToSvg(e.form.getSvg())},form:{getMarkerText:function(a){if(0!==Number(a)){var b=e.form.getFormValue("drags",[a-1,"label"]);return b.replace(new RegExp("^\\s*(.*)\\s*$"),"$1")}return""},getSvg:function(){var b=a("fieldset#id_previewareaheader svg");return 0===b.length?null:b[0]},toNameWithIndex:function(a,b){for(var c=a,d=0;d<b.length;d++)c=c+"["+b[d]+"]";return c},getEl:function(a,b){var c=document.getElementById("mform1");return c.elements[this.toNameWithIndex(a,b)]},getFormValue:function(a,b){var c=this.getEl(a,b);return"checkbox"===c.type?c.checked:c.value},setFormValue:function(a,b,c){var d=this.getEl(a,b);"checkbox"===d.type?d.checked=c:d.value=c}},filePickers:function(){var b,c;return void 0===b&&(b={},c={},a("form.mform input.filepickerhidden").each(function(a,d){b[d.value]=d.name,c[d.name]=d.parentNode})),{file:function(b){var d=a(c[b]).find("div.filepicker-filelist a");return d.length?{href:d.get(0).href,name:d.get(0).innerHTML}:{href:null,name:null}},name:function(a){return b[a]}}}};return{init:e.init}});
\ No newline at end of file
diff --git a/question/type/ddmarker/amd/build/shapes.min.js b/question/type/ddmarker/amd/build/shapes.min.js
index a3f9ff513eb..e6978c0d642 100644
--- a/question/type/ddmarker/amd/build/shapes.min.js
+++ b/question/type/ddmarker/amd/build/shapes.min.js
@@ -1 +1 @@
-define(function(){"use strict";function a(a,b){this.x=a,this.y=b}function b(b,c,d){this.label=b,this.centre=new a(c||0,d||0)}function c(a,c,d,e){b.call(this,a,c,d),this.radius=e||15}function d(a,c,d,e,f){b.call(this,a,c,d),this.width=e||30,this.height=f||30}function e(c,d){b.call(this,c,0,0),this.points=d?Array.from(d):[new a(10,10),new a(40,10),new a(10,40)],this.normalizeShape()}function f(a){b.call(this,a)}function g(a,b){var c=a.ownerDocument.createElementNS("http://www.w3.org/2000/svg",b);return a.appendChild(c),c}function h(a,b){var c=g(a,"g");return g(c,b).setAttribute("class","shape"),g(c,"text").setAttribute("class","shapeLabel"),c}return a.prototype.toString=function(){return this.x+","+this.y},a.prototype.move=function(a,b){this.x+=a,this.y+=b},a.prototype.offset=function(b,c){return b instanceof a&&(c=b.y,b=b.x),new a(this.x+b,this.y+c)},a.parse=function(b){var c=b.split(",");if(2!==c.length)throw new Error(b+" is not a valid point");return new a(Math.round(c[0]),Math.round(c[1]))},b.prototype.getType=function(){throw new Error("Not implemented.")},b.prototype.getCoordinates=function(){throw new Error("Not implemented.")},b.prototype.parse=function(a){throw new Error("Not implemented.")},b.prototype.move=function(a,b){this.centre.move(a,b)},b.prototype.edit=function(a,b,c){},b.prototype.normalizeShape=function(){},b.prototype.makeSvg=function(a){throw new Error("Not implemented.")},b.prototype.updateSvg=function(a){},b.prototype.makeSimilarCircle=function(){throw new Error("Not implemented.")},b.prototype.makeSimilarRectangle=function(){throw new Error("Not implemented.")},b.prototype.makeSimilarPolygon=function(){throw new Error("Not implemented.")},b.prototype.getHandlePositions=function(){return null},c.prototype=new b,c.prototype.getType=function(){return"circle"},c.prototype.getCoordinates=function(){return this.centre+";"+Math.abs(this.radius)},c.prototype.makeSvg=function(a){var b=h(a,"circle");return this.updateSvg(b),b},c.prototype.updateSvg=function(a){a.childNodes[0].setAttribute("cx",this.centre.x),a.childNodes[0].setAttribute("cy",this.centre.y),a.childNodes[0].setAttribute("r",Math.abs(this.radius)),a.childNodes[1].setAttribute("x",this.centre.x),a.childNodes[1].setAttribute("y",this.centre.y+15),a.childNodes[1].textContent=this.label},c.prototype.parse=function(b){if(!b.match(/\d+,\d+;\d+/))return!1;var c=b.split(";");return this.centre=a.parse(c[0]),this.radius=Math.round(c[1]),!0},c.prototype.edit=function(a,b,c){this.radius+=b},c.prototype.normalizeShape=function(){this.radius=Math.abs(this.radius)},c.prototype.makeSimilarRectangle=function(){return new d(this.label,this.centre.x-this.radius,this.centre.y-this.radius,2*this.radius,2*this.radius)},c.prototype.makeSimilarPolygon=function(){return new e(this.label,[this.centre.offset(-this.radius,-this.radius),this.centre.offset(-this.radius,this.radius),this.centre.offset(this.radius,this.radius),this.centre.offset(this.radius,-this.radius)])},c.prototype.getHandlePositions=function(){return{moveHandle:this.centre,editHandles:[this.centre.offset(this.radius,0)]}},d.prototype=new b,d.prototype.getType=function(){return"rectangle"},d.prototype.getCoordinates=function(){return this.centre+";"+this.width+","+this.height},d.prototype.makeSvg=function(a){var b=h(a,"rect");return this.updateSvg(b),b},d.prototype.updateSvg=function(a){this.width>=0?(a.childNodes[0].setAttribute("x",this.centre.x),a.childNodes[0].setAttribute("width",this.width)):(a.childNodes[0].setAttribute("x",this.centre.x+this.width),a.childNodes[0].setAttribute("width",-this.width)),this.height>=0?(a.childNodes[0].setAttribute("y",this.centre.y),a.childNodes[0].setAttribute("height",this.height)):(a.childNodes[0].setAttribute("y",this.centre.y+this.height),a.childNodes[0].setAttribute("height",-this.height)),a.childNodes[1].setAttribute("x",this.centre.x+this.width/2),a.childNodes[1].setAttribute("y",this.centre.y+this.height/2+15),a.childNodes[1].textContent=this.label},d.prototype.parse=function(b){if(!b.match(/\d+,\d+;\d+,\d+/))return!1;var c=b.split(";");this.centre=a.parse(c[0]);var d=a.parse(c[1]);return this.width=d.x,this.height=d.y,!0},d.prototype.edit=function(a,b,c){this.width+=b,this.height+=c},d.prototype.normalizeShape=function(){this.width<0&&(this.centre.x+=this.width,this.width=-this.width),this.height<0&&(this.centre.y+=this.height,this.height=-this.height)},d.prototype.makeSimilarCircle=function(){return new c(this.label,Math.round(this.centre.x+this.width/2),Math.round(this.centre.y+this.height/2),Math.round((this.width+this.height)/4))},d.prototype.makeSimilarPolygon=function(){return new e(this.label,[this.centre,this.centre.offset(0,this.height),this.centre.offset(this.width,this.height),this.centre.offset(this.width,0)])},d.prototype.getHandlePositions=function(){return{moveHandle:this.centre.offset(this.width/2,this.height/2),editHandles:[this.centre.offset(this.width,this.height)]}},e.prototype=new b,e.prototype.getType=function(){return"polygon"},e.prototype.getCoordinates=function(){for(var a="",b=0;b<this.points.length;b++)a+=this.centre.offset(this.points[b])+";";return a.slice(0,a.length-1)},e.prototype.makeSvg=function(a){var b=h(a,"polygon");return this.updateSvg(b),b},e.prototype.updateSvg=function(a){a.childNodes[0].setAttribute("points",this.getCoordinates().replace(/[,;]/g," ")),a.childNodes[1].setAttribute("x",this.centre.x),a.childNodes[1].setAttribute("y",this.centre.y+15),a.childNodes[1].textContent=this.label},e.prototype.parse=function(b){if(!b.match(/(?:\d+,\d+)?(?:;\d+,\d+)*/))return!1;for(var c=b.split(";"),d=[],e=0;e<c.length;e++)d.push(a.parse(c[e]));return this.points=d,this.centre.x=0,this.centre.y=0,this.normalizeShape(),!0},e.prototype.edit=function(a,b,c){this.points[a].move(b,c)},e.prototype.addNewPointAfter=function(b){this.points.splice(b,0,new a(this.points[b].x,this.points[b].y))},e.prototype.normalizeShape=function(){var a,b=0,c=0;if(0!==this.points.length){for(a=0;a<this.points.length;a++)b+=this.points[a].x,c+=this.points[a].y;if(b=Math.round(b/this.points.length),c=Math.round(c/this.points.length),0!==b||0!==c){for(a=0;a<this.points.length;a++)this.points[a].move(-b,-c);this.centre.move(b,c)}}},e.prototype.makeSimilarCircle=function(){return this.makeSimilarRectangle().makeSimilarCircle()},e.prototype.makeSimilarRectangle=function(){for(var a,b=0,c=0,e=0,f=0,g=0;g<this.points.length;g++)a=this.points[g],b=Math.min(b,a.x),c=Math.max(c,a.x),e=Math.min(e,a.y),f=Math.max(f,a.y);return new d(this.label,this.centre.x+b,this.centre.y+e,Math.max(c-b,10),Math.max(f-e,10))},e.prototype.getHandlePositions=function(){for(var a=[],b=0;b<this.points.length;b++)a.push(this.points[b].offset(this.centre.x,this.centre.y));return{moveHandle:this.centre,editHandles:a}},f.prototype=new b,f.prototype.getType=function(){return"null"},f.prototype.getCoordinates=function(){return""},f.prototype.makeSvg=function(a){return null},f.prototype.updateSvg=function(a){},f.prototype.parse=function(a){return!1},f.prototype.makeSimilarCircle=function(){return new c(this.label)},f.prototype.makeSimilarRectangle=function(){return new d(this.label)},f.prototype.makeSimilarPolygon=function(){return new e(this.label)},{Point:a,Shape:b,Circle:c,Rectangle:d,Polygon:e,NullShape:f,createSvgElement:g,make:function(a,b){switch(a){case"circle":return new c(b);case"rectangle":return new d(b);case"polygon":return new e(b);default:return new f(b)}},getSimilar:function(a,b){if(a===b.getType())return b;switch(a){case"circle":return b.makeSimilarCircle();case"rectangle":return b.makeSimilarRectangle();case"polygon":return b.makeSimilarPolygon();default:return new f(b.label)}}}});
\ No newline at end of file
+define(function(){"use strict";function a(a,b){this.x=a,this.y=b}function b(b,c,d){this.label=b,this.centre=new a(c||0,d||0)}function c(a,c,d,e){b.call(this,a,c,d),this.radius=e||15}function d(a,c,d,e,f){b.call(this,a,c,d),this.width=e||30,this.height=f||30}function e(c,d){b.call(this,c,0,0),this.points=d?Array.from(d):[new a(10,10),new a(40,10),new a(10,40)],this.normalizeShape()}function f(a){b.call(this,a)}function g(a,b){var c=a.ownerDocument.createElementNS("http://www.w3.org/2000/svg",b);return a.appendChild(c),c}function h(a,b){var c=g(a,"g");return g(c,b).setAttribute("class","shape"),g(c,"text").setAttribute("class","shapeLabel"),c}return a.prototype.toString=function(){return this.x+","+this.y},a.prototype.move=function(a,b){this.x+=a,this.y+=b},a.prototype.offset=function(b,c){return b instanceof a&&(c=b.y,b=b.x),new a(this.x+b,this.y+c)},a.parse=function(b){var c=b.split(",");if(2!==c.length)throw new Error(b+" is not a valid point");return new a(Math.round(c[0]),Math.round(c[1]))},b.prototype.getType=function(){throw new Error("Not implemented.")},b.prototype.getCoordinates=function(){throw new Error("Not implemented.")},b.prototype.parse=function(a){throw new Error("Not implemented.")},b.prototype.move=function(a,b,c,d){},b.prototype.edit=function(a,b,c,d,e){},b.prototype.normalizeShape=function(){},b.prototype.makeSvg=function(a){throw new Error("Not implemented.")},b.prototype.updateSvg=function(a){},b.prototype.makeSimilarCircle=function(){throw new Error("Not implemented.")},b.prototype.makeSimilarRectangle=function(){throw new Error("Not implemented.")},b.prototype.makeSimilarPolygon=function(){throw new Error("Not implemented.")},b.prototype.getHandlePositions=function(){return null},c.prototype=new b,c.prototype.getType=function(){return"circle"},c.prototype.getCoordinates=function(){return this.centre+";"+Math.abs(this.radius)},c.prototype.makeSvg=function(a){var b=h(a,"circle");return this.updateSvg(b),b},c.prototype.updateSvg=function(a){a.childNodes[0].setAttribute("cx",this.centre.x),a.childNodes[0].setAttribute("cy",this.centre.y),a.childNodes[0].setAttribute("r",Math.abs(this.radius)),a.childNodes[1].setAttribute("x",this.centre.x),a.childNodes[1].setAttribute("y",this.centre.y+15),a.childNodes[1].textContent=this.label},c.prototype.parse=function(b){if(!b.match(/^\d+,\d+;\d+$/))return!1;var c=b.split(";");return this.centre=a.parse(c[0]),this.radius=Math.round(c[1]),!0},c.prototype.move=function(a,b,c,d){this.centre.move(a,b),this.centre.x<this.radius&&(this.centre.x=this.radius),this.centre.x>c-this.radius&&(this.centre.x=c-this.radius),this.centre.y<this.radius&&(this.centre.y=this.radius),this.centre.y>d-this.radius&&(this.centre.y=d-this.radius)},c.prototype.edit=function(a,b,c,d,e){this.radius+=b;var f=Math.min(this.centre.x,this.centre.y,d-this.centre.x,e-this.centre.y);this.radius>f&&(this.radius=f),this.radius<-f&&(this.radius=-f)},c.prototype.normalizeShape=function(){this.radius=Math.abs(this.radius)},c.prototype.makeSimilarRectangle=function(){return new d(this.label,this.centre.x-this.radius,this.centre.y-this.radius,2*this.radius,2*this.radius)},c.prototype.makeSimilarPolygon=function(){return new e(this.label,[this.centre.offset(-this.radius,-this.radius),this.centre.offset(-this.radius,this.radius),this.centre.offset(this.radius,this.radius),this.centre.offset(this.radius,-this.radius)])},c.prototype.getHandlePositions=function(){return{moveHandle:this.centre,editHandles:[this.centre.offset(this.radius,0)]}},d.prototype=new b,d.prototype.getType=function(){return"rectangle"},d.prototype.getCoordinates=function(){return this.centre+";"+this.width+","+this.height},d.prototype.makeSvg=function(a){var b=h(a,"rect");return this.updateSvg(b),b},d.prototype.updateSvg=function(a){this.width>=0?(a.childNodes[0].setAttribute("x",this.centre.x),a.childNodes[0].setAttribute("width",this.width)):(a.childNodes[0].setAttribute("x",this.centre.x+this.width),a.childNodes[0].setAttribute("width",-this.width)),this.height>=0?(a.childNodes[0].setAttribute("y",this.centre.y),a.childNodes[0].setAttribute("height",this.height)):(a.childNodes[0].setAttribute("y",this.centre.y+this.height),a.childNodes[0].setAttribute("height",-this.height)),a.childNodes[1].setAttribute("x",this.centre.x+this.width/2),a.childNodes[1].setAttribute("y",this.centre.y+this.height/2+15),a.childNodes[1].textContent=this.label},d.prototype.parse=function(b){if(!b.match(/^\d+,\d+;\d+,\d+$/))return!1;var c=b.split(";");this.centre=a.parse(c[0]);var d=a.parse(c[1]);return this.width=d.x,this.height=d.y,!0},d.prototype.move=function(a,b,c,d){this.centre.move(a,b),this.centre.x<0&&(this.centre.x=0),this.centre.x>c-this.width&&(this.centre.x=c-this.width),this.centre.y<0&&(this.centre.y=0),this.centre.y>d-this.height&&(this.centre.y=d-this.height)},d.prototype.edit=function(a,b,c,d,e){this.width+=b,this.height+=c,this.width<-this.centre.x&&(this.width=-this.centre.x),this.width>d-this.centre.x&&(this.width=d-this.centre.x),this.height<-this.centre.y&&(this.height=-this.centre.y),this.height>e-this.centre.y&&(this.height=e-this.centre.y)},d.prototype.normalizeShape=function(){this.width<0&&(this.centre.x+=this.width,this.width=-this.width),this.height<0&&(this.centre.y+=this.height,this.height=-this.height)},d.prototype.makeSimilarCircle=function(){return new c(this.label,Math.round(this.centre.x+this.width/2),Math.round(this.centre.y+this.height/2),Math.round((this.width+this.height)/4))},d.prototype.makeSimilarPolygon=function(){return new e(this.label,[this.centre,this.centre.offset(0,this.height),this.centre.offset(this.width,this.height),this.centre.offset(this.width,0)])},d.prototype.getHandlePositions=function(){return{moveHandle:this.centre.offset(this.width/2,this.height/2),editHandles:[this.centre.offset(this.width,this.height)]}},e.prototype=new b,e.prototype.getType=function(){return"polygon"},e.prototype.getCoordinates=function(){for(var a="",b=0;b<this.points.length;b++)a+=this.centre.offset(this.points[b])+";";return a.slice(0,a.length-1)},e.prototype.makeSvg=function(a){var b=h(a,"polygon");return this.updateSvg(b),b},e.prototype.updateSvg=function(a){a.childNodes[0].setAttribute("points",this.getCoordinates().replace(/[,;]/g," ")),a.childNodes[1].setAttribute("x",this.centre.x),a.childNodes[1].setAttribute("y",this.centre.y+15),a.childNodes[1].textContent=this.label},e.prototype.parse=function(b){if(!b.match(/^\d+,\d+(?:;\d+,\d+)*$/))return!1;for(var c=b.split(";"),d=[],e=0;e<c.length;e++)d.push(a.parse(c[e]));return this.points=d,this.centre.x=0,this.centre.y=0,this.normalizeShape(),!0},e.prototype.move=function(a,b,c,d){this.centre.move(a,b);for(var e=c,f=0,g=d,h=0,i=0;i<this.points.length;i++)e=Math.min(e,this.points[i].x),f=Math.max(f,this.points[i].x),g=Math.min(g,this.points[i].y),h=Math.max(h,this.points[i].y);this.centre.x<-e&&(this.centre.x=-e),this.centre.x>c-f&&(this.centre.x=c-f),this.centre.y<-g&&(this.centre.y=-g),this.centre.y>d-h&&(this.centre.y=d-h)},e.prototype.edit=function(a,b,c,d,e){this.points[a].move(b,c),this.points[a].x<-this.centre.x&&(this.points[a].x=-this.centre.x),this.points[a].x>d-this.centre.x&&(this.points[a].x=d-this.centre.x),this.points[a].y<-this.centre.y&&(this.points[a].y=-this.centre.y),this.points[a].y>e-this.centre.y&&(this.points[a].y=e-this.centre.y)},e.prototype.addNewPointAfter=function(b){this.points.splice(b,0,new a(this.points[b].x,this.points[b].y))},e.prototype.normalizeShape=function(){var a,b=0,c=0;if(0!==this.points.length){for(a=0;a<this.points.length;a++)b+=this.points[a].x,c+=this.points[a].y;if(b=Math.round(b/this.points.length),c=Math.round(c/this.points.length),0!==b||0!==c){for(a=0;a<this.points.length;a++)this.points[a].move(-b,-c);this.centre.move(b,c)}}},e.prototype.makeSimilarCircle=function(){return this.makeSimilarRectangle().makeSimilarCircle()},e.prototype.makeSimilarRectangle=function(){for(var a,b=0,c=0,e=0,f=0,g=0;g<this.points.length;g++)a=this.points[g],b=Math.min(b,a.x),c=Math.max(c,a.x),e=Math.min(e,a.y),f=Math.max(f,a.y);return new d(this.label,this.centre.x+b,this.centre.y+e,Math.max(c-b,10),Math.max(f-e,10))},e.prototype.getHandlePositions=function(){for(var a=[],b=0;b<this.points.length;b++)a.push(this.points[b].offset(this.centre.x,this.centre.y));return{moveHandle:this.centre,editHandles:a}},f.prototype=new b,f.prototype.getType=function(){return"null"},f.prototype.getCoordinates=function(){return""},f.prototype.makeSvg=function(a){return null},f.prototype.updateSvg=function(a){},f.prototype.parse=function(a){return!1},f.prototype.makeSimilarCircle=function(){return new c(this.label)},f.prototype.makeSimilarRectangle=function(){return new d(this.label)},f.prototype.makeSimilarPolygon=function(){return new e(this.label)},{Point:a,Shape:b,Circle:c,Rectangle:d,Polygon:e,NullShape:f,createSvgElement:g,make:function(a,b){switch(a){case"circle":return new c(b);case"rectangle":return new d(b);case"polygon":return new e(b);default:return new f(b)}},getSimilar:function(a,b){if(a===b.getType())return b;switch(a){case"circle":return b.makeSimilarCircle();case"rectangle":return b.makeSimilarRectangle();case"polygon":return b.makeSimilarPolygon();default:return new f(b.label)}}}});
\ No newline at end of file
diff --git a/question/type/ddmarker/amd/src/form.js b/question/type/ddmarker/amd/src/form.js
index eb1d6cd8e61..a6ef0bdea58 100644
--- a/question/type/ddmarker/amd/src/form.js
+++ b/question/type/ddmarker/amd/src/form.js
@@ -42,13 +42,32 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
 
     /**
      * Update the coordinates from a particular string.
+     *
+     * @param {SVGElement} [svg] the SVG element that is the preview.
      */
-    DropZoneManager.prototype.updateCoordinatesFromForm = function() {
-        var coordinates = this.getCoordinates();
+    DropZoneManager.prototype.updateCoordinatesFromForm = function(svg) {
+        var coordinates = this.getCoordinates(),
+            currentNumPoints = this.shape.getType() === 'polygon' && this.shape.points.length;
         if (this.shape.getCoordinates() === coordinates) {
             return;
         }
-        if (this.shape.parse(coordinates)) {
+        if (!this.shape.parse(coordinates)) {
+            // Invalid coordinates. Don't update the preview.
+            return;
+        }
+
+        if (this.shape.getType() === 'polygon' && currentNumPoints !== this.shape.points.length) {
+            // Polygon, and size has changed.
+            var currentyActive = this.isActive();
+            this.removeFromSvg();
+            if (svg) {
+                this.addToSvg(svg);
+                if (currentyActive) {
+                    this.setActive();
+                }
+            }
+        } else {
+            // Simple update.
             this.updateSvgEl();
         }
     };
@@ -165,6 +184,8 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
         }
 
         // Move handle.
+        // The shape + its label are the first two children of svgEl.
+        // Then come the move handle followed by the edit handles.
         this.svgEl.childNodes[2].setAttribute('cx', handles.moveHandle.x);
         this.svgEl.childNodes[2].setAttribute('cy', handles.moveHandle.y);
 
@@ -188,6 +209,11 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
      * Set this drop zone as being edited.
      */
     DropZoneManager.prototype.setActive = function() {
+        // Move this one to last, so that it is always on top.
+        // (Otherwise the handles may not be able to receive events.)
+        var parent = this.svgEl.parentNode;
+        parent.removeChild(this.svgEl);
+        parent.appendChild(this.svgEl);
         this.svgEl.setAttribute('class', this.svgEl.getAttribute('class') + ' active');
     };
 
@@ -244,9 +270,13 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
         var movingDropZone = this,
                 lastX = info.x,
                 lastY = info.y,
-                dragProxy = this.makeDragProxy(info.x, info.y);
+                dragProxy = this.makeDragProxy(info.x, info.y),
+                bgImg = $('fieldset#id_previewareaheader .dropbackground'),
+                maxX = bgImg.width(),
+                maxY = bgImg.height();
+
         dragDrop.start(e, $(dragProxy), function(pageX, pageY) {
-            movingDropZone.shape.move(pageX - lastX, pageY - lastY);
+            movingDropZone.shape.move(pageX - lastX, pageY - lastY, maxX, maxY);
             lastX = pageX;
             lastY = pageY;
             movingDropZone.updateSvgEl();
@@ -269,7 +299,7 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
         }
 
         // For polygons, CTRL + drag adds a new point.
-        if (this.shape.getType() === 'polygon' && e.ctrlKey) {
+        if (this.shape.getType() === 'polygon' && (e.ctrlKey || e.metaKey)) {
             this.shape.addNewPointAfter(handleIndex);
             this.removeFromSvg();
             this.addToSvg(svg);
@@ -279,9 +309,13 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
         var changingDropZone = this,
             lastX = info.x,
             lastY = info.y,
-            dragProxy = this.makeDragProxy(info.x, info.y);
+            dragProxy = this.makeDragProxy(info.x, info.y),
+            bgImg = $('fieldset#id_previewareaheader .dropbackground'),
+            maxX = bgImg.width(),
+            maxY = bgImg.height();
+
         dragDrop.start(e, $(dragProxy), function(pageX, pageY) {
-            changingDropZone.shape.edit(handleIndex, pageX - lastX, pageY - lastY);
+            changingDropZone.shape.edit(handleIndex, pageX - lastX, pageY - lastY, maxX, maxY);
             lastX = pageX;
             lastY = pageY;
             changingDropZone.updateSvgEl();
@@ -473,7 +507,7 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
                         break;
 
                     case 'coords':
-                        dropZone.updateCoordinatesFromForm();
+                        dropZone.updateCoordinatesFromForm(dragDropForm.form.getSvg());
                         break;
 
                     case 'choice':
diff --git a/question/type/ddmarker/amd/src/shapes.js b/question/type/ddmarker/amd/src/shapes.js
index 2759145a4dd..ec2878f58b5 100644
--- a/question/type/ddmarker/amd/src/shapes.js
+++ b/question/type/ddmarker/amd/src/shapes.js
@@ -138,9 +138,11 @@ define(function() {
      *
      * @param {int} dx x offset.
      * @param {int} dy y offset.
+     * @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
+     * @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
      */
-    Shape.prototype.move = function(dx, dy) {
-        this.centre.move(dx, dy);
+    Shape.prototype.move = function(dx, dy, maxX, maxY) {
+        void (maxY);
     };
 
     /**
@@ -149,9 +151,11 @@ define(function() {
      * @param {int} handleIndex which handle was moved.
      * @param {int} dx x offset.
      * @param {int} dy y offset.
+     * @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
+     * @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
      */
-    Shape.prototype.edit = function(handleIndex, dx, dy) {
-        void (dy);
+    Shape.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
+        void (maxY);
     };
 
     /**
@@ -259,7 +263,7 @@ define(function() {
     };
 
     Circle.prototype.parse = function(coordinates) {
-        if (!coordinates.match(/\d+,\d+;\d+/)) {
+        if (!coordinates.match(/^\d+,\d+;\d+$/)) {
             return false;
         }
 
@@ -269,9 +273,31 @@ define(function() {
         return true;
     };
 
-    Circle.prototype.edit = function(handleIndex, dx, dy) {
+    Circle.prototype.move = function(dx, dy, maxX, maxY) {
+        this.centre.move(dx, dy);
+        if (this.centre.x < this.radius) {
+            this.centre.x = this.radius;
+        }
+        if (this.centre.x > maxX - this.radius) {
+            this.centre.x = maxX - this.radius;
+        }
+        if (this.centre.y < this.radius) {
+            this.centre.y = this.radius;
+        }
+        if (this.centre.y > maxY - this.radius) {
+            this.centre.y = maxY - this.radius;
+        }
+    };
+
+    Circle.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
         this.radius += dx;
-        void (dy);
+        var limit = Math.min(this.centre.x, this.centre.y, maxX - this.centre.x, maxY - this.centre.y);
+        if (this.radius > limit) {
+            this.radius = limit;
+        }
+        if (this.radius < -limit) {
+            this.radius = -limit;
+        }
     };
 
     /**
@@ -357,7 +383,7 @@ define(function() {
     };
 
     Rectangle.prototype.parse = function(coordinates) {
-        if (!coordinates.match(/\d+,\d+;\d+,\d+/)) {
+        if (!coordinates.match(/^\d+,\d+;\d+,\d+$/)) {
             return false;
         }
 
@@ -369,9 +395,37 @@ define(function() {
         return true;
     };
 
-    Rectangle.prototype.edit = function(handleIndex, dx, dy) {
+    Rectangle.prototype.move = function(dx, dy, maxX, maxY) {
+        this.centre.move(dx, dy);
+        if (this.centre.x < 0) {
+            this.centre.x = 0;
+        }
+        if (this.centre.x > maxX - this.width) {
+            this.centre.x = maxX - this.width;
+        }
+        if (this.centre.y < 0) {
+            this.centre.y = 0;
+        }
+        if (this.centre.y > maxY - this.height) {
+            this.centre.y = maxY - this.height;
+        }
+    };
+
+    Rectangle.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
         this.width += dx;
         this.height += dy;
+        if (this.width < -this.centre.x) {
+            this.width = -this.centre.x;
+        }
+        if (this.width > maxX - this.centre.x) {
+            this.width = maxX - this.centre.x;
+        }
+        if (this.height < -this.centre.y) {
+            this.height = -this.centre.y;
+        }
+        if (this.height > maxY - this.centre.y) {
+            this.height = maxY - this.centre.y;
+        }
     };
 
     /**
@@ -452,7 +506,7 @@ define(function() {
     };
 
     Polygon.prototype.parse = function(coordinates) {
-        if (!coordinates.match(/(?:\d+,\d+)?(?:;\d+,\d+)*/)) {
+        if (!coordinates.match(/^\d+,\d+(?:;\d+,\d+)*$/)) {
             return false;
         }
 
@@ -470,8 +524,47 @@ define(function() {
         return true;
     };
 
-    Polygon.prototype.edit = function(handleIndex, dx, dy) {
+    Polygon.prototype.move = function(dx, dy, maxX, maxY) {
+        this.centre.move(dx, dy);
+        var bbXMin = maxX,
+            bbXMax = 0,
+            bbYMin = maxY,
+            bbYMax = 0;
+        // Computer centre.
+        for (var i = 0; i < this.points.length; i++) {
+            bbXMin = Math.min(bbXMin, this.points[i].x);
+            bbXMax = Math.max(bbXMax, this.points[i].x);
+            bbYMin = Math.min(bbYMin, this.points[i].y);
+            bbYMax = Math.max(bbYMax, this.points[i].y);
+        }
+        if (this.centre.x < -bbXMin) {
+            this.centre.x = -bbXMin;
+        }
+        if (this.centre.x > maxX - bbXMax) {
+            this.centre.x = maxX - bbXMax;
+        }
+        if (this.centre.y < -bbYMin) {
+            this.centre.y = -bbYMin;
+        }
+        if (this.centre.y > maxY - bbYMax) {
+            this.centre.y = maxY - bbYMax;
+        }
+    };
+
+    Polygon.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
         this.points[handleIndex].move(dx, dy);
+        if (this.points[handleIndex].x < -this.centre.x) {
+            this.points[handleIndex].x = -this.centre.x;
+        }
+        if (this.points[handleIndex].x > maxX - this.centre.x) {
+            this.points[handleIndex].x = maxX - this.centre.x;
+        }
+        if (this.points[handleIndex].y < -this.centre.y) {
+            this.points[handleIndex].y = -this.centre.y;
+        }
+        if (this.points[handleIndex].y > maxY - this.centre.y) {
+            this.points[handleIndex].y = maxY - this.centre.y;
+        }
     };
 
     /**
diff --git a/question/type/ddmarker/lang/en/qtype_ddmarker.php b/question/type/ddmarker/lang/en/qtype_ddmarker.php
index b5fb062d3f5..41188596eac 100644
--- a/question/type/ddmarker/lang/en/qtype_ddmarker.php
+++ b/question/type/ddmarker/lang/en/qtype_ddmarker.php
@@ -42,7 +42,7 @@ First selecting a shape (circle, rectangle or polygon) will add a new drop zone
 
 Editing a shape starts with a click on the shape in the preview to show the editing handles. You can move the shape using the center handle, or adjust the shape\'s dimensions with the vertex handles.
 
-For polygons only, holding the control button while clicking on a vertex handle will add a new vertex to the polygon. Please keep a polygon shape as simple as possible, without crossing lines.
+For polygons only, holding the control button (command button on a Mac) while clicking on a vertex handle will add a new vertex to the polygon. Please keep a polygon shape as simple as possible, without crossing lines.
 
 For information the three shapes use coordinates in this way:<br />
 * Circle: centre_x, centre_y; radius<br />for example: <code>80,100;50</code><br />
diff --git a/question/type/ddmarker/shapes.php b/question/type/ddmarker/shapes.php
index e268d45bd1a..6be52a80dd8 100644
--- a/question/type/ddmarker/shapes.php
+++ b/question/type/ddmarker/shapes.php
@@ -42,7 +42,8 @@ abstract class qtype_ddmarker_shape {
     }
     public function inside_width_height($widthheight) {
         foreach ($this->outlying_coords_to_test() as $coordsxy) {
-            if ($coordsxy[0] > $widthheight[0] || $coordsxy[1] > $widthheight[1]) {
+            if ($coordsxy[0] < 0 || $coordsxy[0] > $widthheight[0] ||
+                    $coordsxy[1] < 0 || $coordsxy[1] > $widthheight[1]) {
                 return false;
             }
         }
@@ -236,7 +237,7 @@ class qtype_ddmarker_shape_rectangle extends qtype_ddmarker_shape {
 
     }
     protected function outlying_coords_to_test() {
-        return array($this->xleft + $this->width, $this->ytop + $this->height);
+        return [[$this->xleft, $this->ytop], [$this->xleft + $this->width, $this->ytop + $this->height]];
     }
     public function is_point_in_shape($xy) {
         return $this->is_point_in_bounding_box($xy, array($this->xleft, $this->ytop),
@@ -296,7 +297,8 @@ class qtype_ddmarker_shape_circle extends qtype_ddmarker_shape {
     }
 
     protected function outlying_coords_to_test() {
-        return array($this->xcentre + $this->radius, $this->ycentre + $this->radius);
+        return [[$this->xcentre - $this->radius, $this->ycentre - $this->radius],
+                [$this->xcentre + $this->radius, $this->ycentre + $this->radius]];
     }
 
     public function is_point_in_shape($xy) {