Identify zones by UID, not by title.

Fixes bugs when zones had numeric titles. Backwards compatible.

drag_and_drop_v2/default_data.py

@@ -6,6 +6,10 @@ TARGET_IMG_DESCRIPTION = _(
     "and the narrowest layer is located at the top."
 )
 
+TOP_ZONE_ID = "top"
+MIDDLE_ZONE_ID = "middle"
+BOTTOM_ZONE_ID = "bottom"
+
 TOP_ZONE_TITLE = _("The Top Zone")
 MIDDLE_ZONE_TITLE = _("The Middle Zone")
 BOTTOM_ZONE_TITLE = _("The Bottom Zone")
@@ -25,8 +29,7 @@ DEFAULT_DATA = {
   "targetImgDescription": TARGET_IMG_DESCRIPTION,
   "zones": [
     {
-      "index": 1,
-      "id": "zone-1",
+      "uid": TOP_ZONE_ID,
       "title": TOP_ZONE_TITLE,
       "description": TOP_ZONE_DESCRIPTION,
       "x": 160,
@@ -35,8 +38,7 @@ DEFAULT_DATA = {
       "height": 178,
     },
     {
-      "index": 2,
-      "id": "zone-2",
+      "uid": MIDDLE_ZONE_ID,
       "title": MIDDLE_ZONE_TITLE,
       "description": MIDDLE_ZONE_DESCRIPTION,
       "x": 86,
@@ -45,8 +47,7 @@ DEFAULT_DATA = {
       "height": 138,
     },
     {
-      "index": 3,
-      "id": "zone-3",
+      "uid": BOTTOM_ZONE_ID,
       "title": BOTTOM_ZONE_TITLE,
       "description": BOTTOM_ZONE_DESCRIPTION,
       "x": 15,
@@ -62,7 +63,7 @@ DEFAULT_DATA = {
         "incorrect": ITEM_INCORRECT_FEEDBACK,
         "correct": ITEM_CORRECT_FEEDBACK.format(zone=TOP_ZONE_TITLE)
       },
-      "zone": TOP_ZONE_TITLE,
+      "zone": TOP_ZONE_ID,
       "imageURL": "",
       "id": 0,
     },
@@ -72,7 +73,7 @@ DEFAULT_DATA = {
         "incorrect": ITEM_INCORRECT_FEEDBACK,
         "correct": ITEM_CORRECT_FEEDBACK.format(zone=MIDDLE_ZONE_TITLE)
       },
-      "zone": MIDDLE_ZONE_TITLE,
+      "zone": MIDDLE_ZONE_ID,
       "imageURL": "",
       "id": 1,
     },
@@ -82,7 +83,7 @@ DEFAULT_DATA = {
         "incorrect": ITEM_INCORRECT_FEEDBACK,
         "correct": ITEM_CORRECT_FEEDBACK.format(zone=BOTTOM_ZONE_TITLE)
       },
-      "zone": BOTTOM_ZONE_TITLE,
+      "zone": BOTTOM_ZONE_ID,
       "imageURL": "",
       "id": 2,
     },

drag_and_drop_v2/drag_and_drop_v2.py

@@ -9,6 +9,7 @@ import copy
 import urllib
 
 from xblock.core import XBlock
+from xblock.exceptions import JsonHandlerError
 from xblock.fields import Scope, String, Dict, Float, Boolean
 from xblock.fragment import Fragment
 from xblockutils.resources import ResourceLoader
@@ -154,7 +155,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
             return items
 
         return {
-            "zones": self.data.get('zones', []),
+            "zones": self._get_zones(),
             # SDK doesn't supply url_name.
             "url_name": getattr(self, 'url_name', ''),
             "display_zone_labels": self.data.get('displayLabels', False),
@@ -234,6 +235,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
         item = self._get_item_definition(attempt['val'])
 
         state = None
+        zone = None
         feedback = item['feedback']['incorrect']
         overall_feedback = None
         is_correct = False
@@ -268,6 +270,11 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
 
         if state:
             self.item_state[str(item['id'])] = state
+            zone = self._get_zone_by_uid(state['zone'])
+        else:
+            zone = self._get_zone_by_uid(attempt['zone'])
+        if not zone:
+            raise JsonHandlerError(400, "Item zone data invalid.")
 
         if self._is_finished():
             overall_feedback = self.data['feedback']['finish']
@@ -288,7 +295,8 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
 
         self.runtime.publish(self, 'edx.drag_and_drop_v2.item.dropped', {
             'item_id': item['id'],
-            'location': attempt.get('zone'),
+            'location': zone.get("title"),
+            'location_id': zone.get("uid"),
             'input': attempt.get('input'),
             'is_correct_location': is_correct_location,
             'is_correct': is_correct,
@@ -395,6 +403,30 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
         """
         return next(i for i in self.data['items'] if i['id'] == item_id)
 
+    def _get_zones(self):
+        """
+        Get drop zone data, defined by the author.
+        """
+        # Convert zone data from old to new format if necessary
+        zones = []
+        for zone in self.data.get('zones', []):
+            zone = zone.copy()
+            if "uid" not in zone:
+                zone["uid"] = zone.get("title")  # Older versions used title as the zone UID
+            # Remove old, now-unused zone attributes, if present:
+            zone.pop("id", None)
+            zone.pop("index", None)
+            zones.append(zone)
+        return zones
+
+    def _get_zone_by_uid(self, uid):
+        """
+        Given a zone UID, return that zone, or None.
+        """
+        for zone in self._get_zones():
+            if zone["uid"] == uid:
+                return zone
+
     def _get_grade(self):
         """
         Returns the student's grade for this block.

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -52,6 +52,16 @@ function DragNDropTemplates(url_name) {
         );
     };
 
+    var getZoneTitle = function(zoneUID, ctx) {
+        // Given the context and a zone UID, return the zone's title
+        for (var i = 0; i < ctx.zones.length; i++) {
+            if (ctx.zones[i].uid === zoneUID) {
+                return ctx.zones[i].title;
+            }
+        }
+        return "Unknown Zone";  // This title should never be seen, so does not need i18n
+    }
+
     var itemTemplate = function(item, ctx) {
         // Define properties
         var className = (item.class_name) ? item.class_name : "";
@@ -119,7 +129,7 @@ function DragNDropTemplates(url_name) {
             var item_description = h(
                 'div',
                 { id: item_description_id, className: 'sr' },
-                gettext('Correctly placed in: ') + item.zone
+                gettext('Correctly placed in: ') + getZoneTitle(item.zone, ctx)
             );
             children.splice(1, 0, item_description);
         }
@@ -147,12 +157,12 @@ function DragNDropTemplates(url_name) {
             h(
                 selector,
                 {
-                    id: zone.id,
+                    id: zone.prefixed_uid,
                     attributes: {
                         'tabindex': 0,
                         'dropzone': 'move',
                         'aria-dropeffect': 'move',
-                        'data-zone': zone.title,
+                        'data-uid': zone.uid,
                         'role': 'button',
                     },
                     style: {
@@ -449,7 +459,8 @@ function DragAndDropBlock(runtime, element, configuration) {
             delete zone.width;
             zone.height_percent = (+zone.height) / bg_image_height * 100;
             delete zone.height;
-            zone.id = configuration.url_name + '-' + zone.id;
+            // Generate an HTML ID value that's unique within the DOM and not containing spaces etc:
+            zone.prefixed_uid = configuration.url_name + '-' + zone.uid.replace(/([^\w\-])/g, "_");
         }
     };
 
@@ -582,7 +593,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             // so use relevant properties of *zone* when calculating new position below.
             $anchor = $zone;
         }
-        var zone = $zone.data('zone');
+        var zone = String($zone.data('uid'));
         var $target_img = $root.find('.target-img');
 
         // Calculate the position of the item to place relative to the image.

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -205,34 +205,28 @@ function DragAndDropEditBlock(runtime, element, params) {
                 },
                 form: {
                     zone: {
-                        count: 0,
-                        formCount: 0,
+                        totalZonesCreated: 0, // This counter is used for HTML IDs. Never decremented.
                         zoneObjects: [],
-                        getObjByIndex: function(num) {
+                        getZoneObjByUID: function(uid) {
                             for (var i = 0; i < _fn.build.form.zone.zoneObjects.length; i++) {
-                                if (_fn.build.form.zone.zoneObjects[i].index == num)
+                                if (_fn.build.form.zone.zoneObjects[i].uid == uid) {
                                     return _fn.build.form.zone.zoneObjects[i];
                                 }
+                            }
                         },
                         add: function(oldZone) {
-                            var inputTemplate = _fn.tpl.zoneInput,
-                                name = 'zone-',
-                                $elements = _fn.build.$el,
-                                num;
-
                             if (!oldZone) oldZone = {};
-
-                            _fn.build.form.zone.count++;
-                            _fn.build.form.zone.formCount++;
-                            num = _fn.build.form.zone.count;
-                            name += num;
+                            var num = _fn.build.form.zone.zoneObjects.length + 1;
 
                             // Update zone obj
                             var zoneObj = {
                                 title: oldZone.title || 'Zone ' + num,
                                 description: oldZone.description,
-                                id: name,
-                                index: num,
+                                // uid: unique ID for this zone. For backwards compatibility,
+                                // this field cannot be called "id" and must inherit the "title"
+                                // property if no 'uid' value is present, since old versions of
+                                // this block used the title as the primary identifier.
+                                uid: oldZone.uid || oldZone.title || _fn.build.form.zone.generateUID(),
                                 width: oldZone.width || 200,
                                 height: oldZone.height || 100,
                                 x: oldZone.x || 0,
@@ -241,45 +235,55 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                             _fn.build.form.zone.zoneObjects.push(zoneObj);
 
-                            // Add fields to zone position form
-                            $zoneNode = $(inputTemplate(zoneObj));
-                            $zoneNode.data('index', num);
-                            $elements.zones.form.append($zoneNode);
+                            // Add fields to zone form
+                            $zoneNode = $(_fn.tpl.zoneInput({
+                                zone: zoneObj,
+                                index: _fn.build.form.zone.totalZonesCreated++,
+                            }));
+                            _fn.build.$el.zones.form.append($zoneNode);
                             _fn.build.form.zone.enableDelete();
 
                             // Add zone div to target
                             _fn.build.form.zone.renderZonesPreview();
 
                         },
+                        generateUID: function() {
+                            // Generate a unique ID for a new zone.
+                            for (var i = 1; true; i++) {
+                                var uid = "zone-" + i;
+                                if (!_fn.build.form.zone.getZoneObjByUID(uid)) {
+                                    return uid;
+                                }
+                            }
+                        },
                         remove: function(e) {
                             var $el = $(e.currentTarget).closest('.zone-row'),
                                 classes = $el.attr('class'),
                                 id = classes.slice(classes.indexOf('zone-row') + 9),
-                                index = $el.data('index'),
+                                uid = String($el.data('uid')),  // cast to string since UID must be string but .data() converts data-uid="5" to 5
                                 array_index;
 
                             e.preventDefault();
                             $el.detach();
 
-                            // Find the index of the zone in the array and remove it.
+                            // Find the uid of the zone in the array and remove it.
                             for (array_index = 0; array_index < _fn.build.form.zone.zoneObjects.length;
                                  array_index++) {
-                                if (_fn.build.form.zone.zoneObjects[array_index].index == index) break;
+                                if (_fn.build.form.zone.zoneObjects[array_index].uid == uid) break;
                             }
                             _fn.build.form.zone.zoneObjects.splice(array_index, 1);
                             _fn.build.form.zone.renderZonesPreview();
 
-                            _fn.build.form.zone.formCount--;
                             _fn.build.form.zone.disableDelete();
 
                         },
                         enableDelete: function() {
-                            if (_fn.build.form.zone.formCount > 1) {
+                            if (_fn.build.form.zone.zoneObjects.length > 1) {
                                 _fn.build.$el.zones.form.find('.remove-zone').removeClass('hidden');
                             }
                         },
                         disableDelete: function() {
-                            if (_fn.build.form.zone.formCount === 1) {
+                            if (_fn.build.form.zone.zoneObjects.length === 1) {
                                 _fn.build.$el.zones.form.find('.remove-zone').addClass('hidden');
                             }
                         },
@@ -296,7 +300,7 @@ function DragAndDropEditBlock(runtime, element, params) {
                             this.zoneObjects.forEach(function(zoneObj) {
                                 _fn.build.$el.zonesPreview.append(
                                     _fn.tpl.zoneElement({
-                                        id: zoneObj.id,
+                                        uid: zoneObj.uid,
                                         title: zoneObj.title,
                                         description: zoneObj.description,
                                         x_percent: (+zoneObj.x) / imgWidth * 100,
@@ -307,23 +311,11 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 );
                             });
                         },
-                        getZoneNames: function() {
-                            var zoneNames = [];
-                            var $form = _fn.build.$el.zones.form.find('.title');
-
-                            $form.each(function(i, el) {
-                                var val = $(el).val();
-                                if (val.length > 0) {
-                                    zoneNames.push(val);
-                                }
-                            });
-                            return zoneNames;
-                        },
                         changedInputHandler: function(ev) {
                             // Called when any of the inputs have changed.
                             var $changedInput = $(ev.currentTarget);
                             var $row = $changedInput.closest('.zone-row');
-                            var record = _fn.build.form.zone.getObjByIndex($row.data('index'));
+                            var record = _fn.build.form.zone.getZoneObjByUID(String($row.data('uid')));
                             if ($changedInput.hasClass('title')) {
                                 record.title = $changedInput.val();
                             } else if ($changedInput.hasClass('width')) {
@@ -344,18 +336,26 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.zone.renderZonesPreview();
                         },
                     },
-                    createDropdown: function(selected) {
-                        var tpl = _fn.tpl.zoneDropdown,
-                            dropdown = [],
-                            html,
-                            dropdown_items = _fn.build.form.zone.getZoneNames().concat('none');
+                    createDropdown: function(selectedUID) {
+                        var template = _fn.tpl.zoneDropdown;
+                        var dropdown = [];
+                        var zoneObjects = _fn.build.form.zone.zoneObjects;
+
+                        zoneObjects.forEach(function(zoneObj) {
+                            dropdown.push(template({
+                                uid: zoneObj.uid,
+                                title: zoneObj.title,
+                                selected: (zoneObj.uid == selectedUID) ? 'selected' : '',
+                            }));
+                        });
 
-                        for (var i=0; i<dropdown_items.length; i++) {
-                            var is_sel = (dropdown_items[i] == selected) ? 'selected' : '';
-                            dropdown.push(tpl({ value: dropdown_items[i], selected: is_sel }));
-                        }
+                        dropdown.push(template({
+                            uid: "none",
+                            title: window.gettext("None"),
+                            selected: (selectedUID === "none") ? 'selected' : '',
+                        }));
 
-                        html = dropdown.join('');
+                        var html = dropdown.join('');
                         return new Handlebars.SafeString(html);
                     },
                     feedback: function($form) {

drag_and_drop_v2/templates/html/js_templates.html

 <script id="zone-element-tpl" type="text/html">
-    <div id="{{ id }}" class="zone" data-zone="{{ title }}" style="
+    <div class="zone" data-zone="{{ uid }}" style="
         top:{{ y_percent }}%;
         left:{{ x_percent }}%;
         width:{{ width_percent }}%;
@@ -10,12 +10,13 @@
 </script>
 
 <script id="zone-input-tpl" type="text/html">
-    <div class="zone-row {{ id }}" data-index="{{index}}">
+    <div class="zone-row" data-uid="{{zone.uid}}">
+        <!-- uid values from old versions of the block may contain spaces and other characters, so we use 'index' as an alternate unique ID here. -->
         <label for="zone-{{index}}-title">{{i18n "Text"}}</label>
         <input type="text"
                id="zone-{{index}}-title"
                class="title"
-               value="{{ title }}"
+               value="{{ zone.title }}"
                required />
         <a href="#" class="remove-zone hidden">
             <div class="icon remove"></div>
@@ -24,7 +25,7 @@
         <input type="text"
                id="zone-{{index}}-description"
                class="description"
-               value="{{ description }}"
+               value="{{ zone.description }}"
                placeholder="{{i18n 'Describe this zone to non-visual users'}}"
                required />
         <div class="layout">
@@ -32,29 +33,29 @@
             <input type="text"
                    id="zone-{{index}}-width"
                    class="size width"
-                   value="{{ width }}" />
+                   value="{{ zone.width }}" />
             <label for="zone-{{index}}-height">{{i18n "height"}}</label>
             <input type="text"
                    id="zone-{{index}}-height"
                    class="size height"
-                   value="{{ height }}" />
+                   value="{{ zone.height }}" />
             <br />
             <label for="zone-{{index}}-x">x</label>
             <input type="text"
                    id="zone-{{index}}-x"
                    class="coord x"
-                   value="{{ x }}" />
+                   value="{{ zone.x }}" />
             <label for="zone-{{index}}-y">y</label>
             <input type="text"
                    id="zone-{{index}}-y"
                    class="coord y"
-                   value="{{ y }}" />
+                   value="{{ zone.y }}" />
         </div>
     </div>
 </script>
 
 <script id="zone-dropdown-tpl" type="text/html">
-    <option value="{{ value }}" {{ selected }}>{{ value }}</option>
+    <option value="{{ uid }}" {{ selected }}>{{ title }}</option>
 </script>
 
 <script id="item-input-tpl" type="text/html">

pylintrc

@@ -11,6 +11,7 @@ disable=
     missing-docstring,
     too-many-ancestors,
     too-many-arguments,
+    too-many-branches,
     too-many-instance-attributes,
     too-few-public-methods,
     too-many-public-methods,

tests/integration/data/test_data.json

 {
   "zones": [
     {
-      "index": 1,
       "width": 200,
       "title": "Zone 1",
       "height": 100,
       "y": "200",
       "x": "100",
-      "id": "zone-1"
+      "uid": "zone-1"
     },
     {
-      "index": 2,
       "width": 200,
       "title": "Zone 2",
       "height": 100,
       "y": 0,
       "x": 0,
-      "id": "zone-2"
+      "uid": "zone-2"
     }
   ],
   "items": [
@@ -26,7 +24,7 @@
         "incorrect": "No 1",
         "correct": "Yes 1"
       },
-      "zone": "Zone 1",
+      "zone": "zone-1",
       "imageURL": "",
       "id": 0
     },
@@ -36,7 +34,7 @@
         "incorrect": "No 2",
         "correct": "Yes 2"
       },
-      "zone": "Zone 2",
+      "zone": "zone-2",
       "imageURL": "",
       "id": 1,
       "inputOptions": {

tests/integration/data/test_data_a11y.json

 {
   "zones": [
     {
-      "index": 1,
       "title": "Zone 1",
       "description": "This describes zone 1",
       "height": 178,
       "width": 196,
       "y": "30",
       "x": "160",
-      "id": "zone-1"
+      "id": "the deprecated id attribute is ignored."
     },
     {
-      "index": 2,
       "title": "Zone 2",
       "description": "This describes zone 2",
       "height": 140,
       "width": 340,
       "y": "210",
       "x": "86",
-      "id": "zone-2"
     }
   ],
   "items": [

tests/integration/data/test_data_other.json

 {
   "zones": [
     {
-      "index": 1,
       "width": 200,
       "title": "Zone 51",
       "height": 100,
       "y": "400",
       "x": "200",
-      "id": "zone-51"
+      "uid": "zone-51"
     },
     {
-      "index": 2,
       "width": 200,
       "title": "Zone 52",
       "height": 100,
       "y": "200",
       "x": "100",
-      "id": "zone-52"
+      "uid": "zone-52"
     }
   ],
   "items": [
@@ -26,7 +24,7 @@
         "incorrect": "Incorrect 1",
         "correct": "Correct 1"
       },
-      "zone": "Zone 51",
+      "zone": "zone-51",
       "imageURL": "",
       "id": 10
     },
@@ -36,7 +34,7 @@
         "incorrect": "Incorrect 2",
         "correct": "Correct 2"
       },
-      "zone": "Zone 52",
+      "zone": "zone-52",
       "imageURL": "",
       "id": 20,
       "inputOptions": {

tests/integration/data/test_html_data.json

 {
   "zones": [
     {
-      "index": 1,
       "width": 200,
       "title": "Zone <i>1</i>",
       "height": 100,
       "y": 200,
       "x": 100,
-      "id": "zone-1"
+      "uid": "zone-1"
     },
     {
-      "index": 2,
       "width": 200,
       "title": "Zone <b>2</b>",
       "height": 100,
       "y": 0,
       "x": 0,
-      "id": "zone-2"
+      "uid": "zone-2"
     }
   ],
   "items": [
@@ -26,7 +24,7 @@
         "incorrect": "No <b>1</b>",
         "correct": "Yes <b>1</b>"
       },
-      "zone": "Zone <i>1</i>",
+      "zone": "zone-1",
       "imageURL": "",
       "id": 0
     },
@@ -36,7 +34,7 @@
         "incorrect": "No <i>2</i>",
         "correct": "Yes <i>2</i>"
       },
-      "zone": "Zone <b>2</b>",
+      "zone": "zone-2",
       "imageURL": "",
       "id": 1,
       "inputOptions": {

tests/integration/data/test_sizing_template.json

@@ -2,16 +2,16 @@
   {% if img == "wide" %}
     "targetImg": "{{img_wide_url}}",
     "zones": [
-      {"index": 1, "title": "Zone 1/3", "width": 533, "height": 200, "x": "0", "y": "0", "id": "zone-1"},
-      {"index": 2, "title": "Zone 50%", "width": 800, "height": 200, "x": "0", "y": "350", "id": "zone-2"},
-      {"index": 3, "title": "Zone 75%", "width": 1200, "height": 200, "x": "0", "y": "700", "id": "zone-3"}
+      {"title": "Zone 1/3", "width": 533, "height": 200, "x": "0", "y": "0"},
+      {"title": "Zone 50%", "width": 800, "height": 200, "x": "0", "y": "350"},
+      {"title": "Zone 75%", "width": 1200, "height": 200, "x": "0", "y": "700"}
     ],
   {% else %}
     "targetImg": "{{img_square_url}}",
     "zones": [
-      {"index": 1, "title": "Zone 1/3", "width": 166, "height": 100, "x": "0", "y": "0", "id": "zone-1"},
-      {"index": 2, "title": "Zone 50%", "width": 250, "height": 100, "x": "0", "y": "200", "id": "zone-2"},
-      {"index": 3, "title": "Zone 75%", "width": 375, "height": 100, "x": "0", "y": "400", "id": "zone-3"}
+      {"title": "Zone 1/3", "width": 166, "height": 100, "x": "0", "y": "0"},
+      {"title": "Zone 50%", "width": 250, "height": 100, "x": "0", "y": "200"},
+      {"title": "Zone 75%", "width": 375, "height": 100, "x": "0", "y": "400"}
     ],
   {% endif %}
   "displayBorders": true,

tests/integration/test_interaction.py

@@ -11,6 +11,7 @@ from workbench.runtime import WorkbenchRuntime
 from xblockutils.resources import ResourceLoader
 
 from drag_and_drop_v2.default_data import (
+    TOP_ZONE_ID, MIDDLE_ZONE_ID, BOTTOM_ZONE_ID,
     TOP_ZONE_TITLE, MIDDLE_ZONE_TITLE, BOTTOM_ZONE_TITLE,
     ITEM_CORRECT_FEEDBACK, ITEM_INCORRECT_FEEDBACK, ITEM_NO_ZONE_FEEDBACK,
     START_FEEDBACK, FINISH_FEEDBACK
@@ -26,10 +27,11 @@ loader = ResourceLoader(__name__)
 # Classes ###########################################################
 
 class ItemDefinition(object):
-    def __init__(self, item_id, zone_id, feedback_positive, feedback_negative, input_value=None):
+    def __init__(self, item_id, zone_id, zone_title, feedback_positive, feedback_negative, input_value=None):
         self.feedback_negative = feedback_negative
         self.feedback_positive = feedback_positive
         self.zone_id = zone_id
+        self.zone_title = zone_title
         self.item_id = item_id
         self.input = input_value
 
@@ -73,7 +75,7 @@ class InteractionTestBase(object):
 
     def _get_zone_by_id(self, zone_id):
         zones_container = self._page.find_element_by_css_selector('.target')
-        return zones_container.find_elements_by_xpath(".//div[@data-zone='{zone_id}']".format(zone_id=zone_id))[0]
+        return zones_container.find_elements_by_xpath(".//div[@data-uid='{zone_id}']".format(zone_id=zone_id))[0]
 
     def _get_input_div_by_value(self, item_value):
         element = self._get_item_by_value(item_value)
@@ -89,7 +91,7 @@ class InteractionTestBase(object):
 
     def _get_zone_position(self, zone_id):
         return self.browser.execute_script(
-            'return $("div[data-zone=\'{zone_id}\']").prevAll(".zone").length'.format(zone_id=zone_id)
+            'return $("div[data-uid=\'{zone_id}\']").prevAll(".zone").length'.format(zone_id=zone_id)
         )
 
     def place_item(self, item_value, zone_id, action_key=None):
@@ -126,7 +128,7 @@ class InteractionTestBase(object):
     def assert_grabbed_item(self, item):
         self.assertEqual(item.get_attribute('aria-grabbed'), 'true')
 
-    def assert_placed_item(self, item_value, zone_id):
+    def assert_placed_item(self, item_value, zone_title):
         item = self._get_placed_item_by_value(item_value)
         self.wait_until_visible(item)
         item_content = item.find_element_by_css_selector('.item-content')
@@ -138,7 +140,7 @@ class InteractionTestBase(object):
         self.assertEqual(item.get_attribute('data-drag-disabled'), 'true')
         self.assertEqual(item_content.get_attribute('aria-describedby'), item_description_id)
         self.assertEqual(item_description.get_attribute('id'), item_description_id)
-        self.assertEqual(item_description.text, 'Correctly placed in: {}'.format(zone_id))
+        self.assertEqual(item_description.text, 'Correctly placed in: {}'.format(zone_title))
 
     def assert_reverted_item(self, item_value):
         item = self._get_item_by_value(item_value)
@@ -180,7 +182,7 @@ class InteractionTestBase(object):
                 self.place_item(definition.item_id, definition.zone_id, action_key)
                 self.wait_until_html_in(definition.feedback_positive, feedback_popup_content)
                 self.assertEqual(popup.get_attribute('class'), 'popup')
-                self.assert_placed_item(definition.item_id, definition.zone_id)
+                self.assert_placed_item(definition.item_id, definition.zone_title)
 
     def parameterized_item_positive_feedback_on_good_input(self, items_map, scroll_down=100, action_key=None):
         popup = self._get_popup()
@@ -195,7 +197,7 @@ class InteractionTestBase(object):
                 self.send_input(definition.item_id, definition.input)
                 self.wait_until_html_in(definition.feedback_positive, feedback_popup_content)
                 self.assertEqual(popup.get_attribute('class'), 'popup')
-                self.assert_placed_item(definition.item_id, definition.zone_id)
+                self.assert_placed_item(definition.item_id, definition.zone_title)
                 input_div = self._get_input_div_by_value(definition.item_id)
                 self.wait_until_has_class('correct', input_div)
 
@@ -228,7 +230,7 @@ class InteractionTestBase(object):
                 self.send_input(definition.item_id, '1999999')
                 self.wait_until_html_in(definition.feedback_negative, feedback_popup_content)
                 self.assertEqual(popup.get_attribute('class'), 'popup popup-incorrect')
-                self.assert_placed_item(definition.item_id, definition.zone_id)
+                self.assert_placed_item(definition.item_id, definition.zone_title)
                 input_div = self._get_input_div_by_value(definition.item_id)
                 self.wait_until_has_class('incorrect', input_div)
 
@@ -252,7 +254,7 @@ class InteractionTestBase(object):
                 self.send_input(item_key, definition.input)
                 input_div = self._get_input_div_by_value(item_key)
                 self.wait_until_has_class('correct', input_div)
-            self.assert_placed_item(definition.item_id, definition.zone_id)
+            self.assert_placed_item(definition.item_id, definition.zone_title)
 
         self.wait_until_html_in(feedback['final'], self._get_feedback_message())
 
@@ -326,18 +328,21 @@ class DefaultDataTestMixin(object):
 
     items_map = {
         0: ItemDefinition(
-            0, TOP_ZONE_TITLE, ITEM_CORRECT_FEEDBACK.format(zone=TOP_ZONE_TITLE), ITEM_INCORRECT_FEEDBACK
+            0, TOP_ZONE_ID, TOP_ZONE_TITLE,
+            ITEM_CORRECT_FEEDBACK.format(zone=TOP_ZONE_TITLE), ITEM_INCORRECT_FEEDBACK
         ),
         1: ItemDefinition(
-            1, MIDDLE_ZONE_TITLE, ITEM_CORRECT_FEEDBACK.format(zone=MIDDLE_ZONE_TITLE), ITEM_INCORRECT_FEEDBACK
+            1, MIDDLE_ZONE_ID, MIDDLE_ZONE_TITLE,
+            ITEM_CORRECT_FEEDBACK.format(zone=MIDDLE_ZONE_TITLE), ITEM_INCORRECT_FEEDBACK
         ),
         2: ItemDefinition(
-            2, BOTTOM_ZONE_TITLE, ITEM_CORRECT_FEEDBACK.format(zone=BOTTOM_ZONE_TITLE), ITEM_INCORRECT_FEEDBACK
+            2, BOTTOM_ZONE_ID, BOTTOM_ZONE_TITLE,
+            ITEM_CORRECT_FEEDBACK.format(zone=BOTTOM_ZONE_TITLE), ITEM_INCORRECT_FEEDBACK
         ),
-        3: ItemDefinition(3, None, "", ITEM_NO_ZONE_FEEDBACK),
+        3: ItemDefinition(3, None, None, "", ITEM_NO_ZONE_FEEDBACK),
     }
 
-    all_zones = [TOP_ZONE_TITLE, MIDDLE_ZONE_TITLE, BOTTOM_ZONE_TITLE]
+    all_zones = [TOP_ZONE_ID, MIDDLE_ZONE_ID, BOTTOM_ZONE_ID]
 
     feedback = {
         "intro": START_FEEDBACK,
@@ -398,6 +403,7 @@ class EventsFiredTest(DefaultDataTestMixin, InteractionTestBase, BaseIntegration
                 'is_correct_location': True,
                 'item_id': 0,
                 'location': TOP_ZONE_TITLE,
+                'location_id': TOP_ZONE_ID,
             },
         },
         {
@@ -467,12 +473,12 @@ class KeyboardInteractionTest(BasicInteractionTest, BaseIntegrationTest):
 
 class CustomDataInteractionTest(BasicInteractionTest, BaseIntegrationTest):
     items_map = {
-        0: ItemDefinition(0, 'Zone 1', "Yes 1", "No 1"),
-        1: ItemDefinition(1, 'Zone 2', "Yes 2", "No 2", "102"),
-        2: ItemDefinition(2, None, "", "No Zone for this")
+        0: ItemDefinition(0, 'zone-1', "Zone 1", "Yes 1", "No 1"),
+        1: ItemDefinition(1, 'zone-2', "Zone 2", "Yes 2", "No 2", "102"),
+        2: ItemDefinition(2, None, None, "", "No Zone for this")
     }
 
-    all_zones = ['Zone 1', 'Zone 2']
+    all_zones = ['zone-1', 'zone-2']
 
     feedback = {
         "intro": "Some Intro Feed",
@@ -485,12 +491,12 @@ class CustomDataInteractionTest(BasicInteractionTest, BaseIntegrationTest):
 
 class CustomHtmlDataInteractionTest(BasicInteractionTest, BaseIntegrationTest):
     items_map = {
-        0: ItemDefinition(0, 'Zone <i>1</i>', "Yes <b>1</b>", "No <b>1</b>"),
-        1: ItemDefinition(1, 'Zone <b>2</b>', "Yes <i>2</i>", "No <i>2</i>", "95"),
-        2: ItemDefinition(2, None, "", "No Zone for <i>X</i>")
+        0: ItemDefinition(0, 'zone-1', 'Zone <i>1</i>', "Yes <b>1</b>", "No <b>1</b>"),
+        1: ItemDefinition(1, 'zone-2', 'Zone <b>2</b>', "Yes <i>2</i>", "No <i>2</i>", "95"),
+        2: ItemDefinition(2, None, None, "", "No Zone for <i>X</i>")
     }
 
-    all_zones = ['Zone <i>1</i>', 'Zone <b>2</b>']
+    all_zones = ['zone-1', 'zone-2']
 
     feedback = {
         "intro": "Intro <i>Feed</i>",
@@ -510,20 +516,20 @@ class MultipleBlocksDataInteraction(InteractionTestBase, BaseIntegrationTest):
 
     item_maps = {
         'block1': {
-            0: ItemDefinition(0, 'Zone 1', "Yes 1", "No 1"),
-            1: ItemDefinition(1, 'Zone 2', "Yes 2", "No 2", "102"),
-            2: ItemDefinition(2, None, "", "No Zone for this")
+            0: ItemDefinition(0, 'zone-1', 'Zone 1', "Yes 1", "No 1"),
+            1: ItemDefinition(1, 'zone-2', 'Zone 2', "Yes 2", "No 2", "102"),
+            2: ItemDefinition(2, None, None, "", "No Zone for this")
         },
         'block2': {
-            10: ItemDefinition(10, 'Zone 51', "Correct 1", "Incorrect 1"),
-            20: ItemDefinition(20, 'Zone 52', "Correct 2", "Incorrect 2", "102"),
-            30: ItemDefinition(30, None, "", "No Zone for this")
+            10: ItemDefinition(10, 'zone-51', 'Zone 51', "Correct 1", "Incorrect 1"),
+            20: ItemDefinition(20, 'zone-52', 'Zone 52', "Correct 2", "Incorrect 2", "102"),
+            30: ItemDefinition(30, None, None, "", "No Zone for this")
         },
     }
 
     all_zones = {
-        'block1': ['Zone 1', 'Zone 2'],
-        'block2': ['Zone 51', 'Zone 52']
+        'block1': ['zone-1', 'zone-2'],
+        'block2': ['zone-51', 'zone-52']
     }
 
     feedback = {

tests/integration/test_render.py

@@ -187,11 +187,11 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self.assertEqual(zone.get_attribute('tabindex'), '0')
             self.assertEqual(zone.get_attribute('dropzone'), 'move')
             self.assertEqual(zone.get_attribute('aria-dropeffect'), 'move')
-            self.assertEqual(zone.get_attribute('data-zone'), 'Zone {}'.format(zone_number))
+            self.assertEqual(zone.get_attribute('data-uid'), 'Zone {}'.format(zone_number))
             self.assertIn('ui-droppable', self.get_element_classes(zone))
             zone_box_percentages = box_percentages[index]
             self._assert_box_percentages(  # pylint: disable=star-args
-                '#-zone-{}'.format(zone_number), **zone_box_percentages
+                '#-Zone_{}'.format(zone_number), **zone_box_percentages
             )
             zone_name = zone.find_element_by_css_selector('p.zone-name')
             self.assertEqual(zone_name.text, 'Zone {}'.format(zone_number))
@@ -244,7 +244,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
         self.load_scenario()
         zones = self._get_zones()
         for index, dummy in enumerate(zones, start=1):
-            zone = '#-zone-{}'.format(index)
+            zone = '#-Zone_{}'.format(index)
             for side in self.SIDES:
                 self.assertEqual(self._get_style(zone, 'border{}Width'.format(side), True), '0px')
                 self.assertEqual(self._get_style(zone, 'border{}Style'.format(side), True), 'none')
@@ -253,7 +253,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
         self.load_scenario(zone_borders=True)
         zones = self._get_zones()
         for index, dummy in enumerate(zones, start=1):
-            zone = '#-zone-{}'.format(index)
+            zone = '#-Zone_{}'.format(index)
             for side in self.SIDES:
                 self.assertEqual(self._get_style(zone, 'border{}Width'.format(side), True), '1px')
                 self.assertEqual(self._get_style(zone, 'border{}Style'.format(side), True), 'dotted')

tests/unit/data/html/config_out.json

@@ -14,22 +14,20 @@
 
     "zones": [
         {
-          "index": 1,
           "title": "Zone <i>1</i>",
           "x": 100,
           "y": 200,
           "width": 200,
           "height": 100,
-          "id": "zone-1"
+          "uid": "Zone <i>1</i>"
         },
         {
-          "index": 2,
           "title": "Zone <b>2</b>",
           "x": 0,
           "y": 0,
           "width": 200,
           "height": 100,
-          "id": "zone-2"
+          "uid": "Zone <b>2</b>"
         }
     ],
 

tests/unit/data/old/config_out.json

@@ -14,22 +14,20 @@
 
     "zones": [
         {
-          "index": 1,
           "title": "Zone 1",
           "x": "100",
           "y": "200",
           "width": 200,
           "height": 100,
-          "id": "zone-1"
+          "uid": "Zone 1"
         },
         {
-          "index": 2,
           "title": "Zone 2",
           "x": 0,
           "y": 0,
           "width": 200,
           "height": 100,
-          "id": "zone-2"
+          "uid": "Zone 2"
         }
     ],
 

tests/unit/data/plain/config_out.json

@@ -14,22 +14,20 @@
 
     "zones": [
         {
-          "index": 1,
           "title": "Zone 1",
           "y": 123,
           "x": 234,
           "width": 345,
           "height": 456,
-          "id": "zone-1"
+          "uid": "zone-1"
         },
         {
-          "index": 2,
           "title": "Zone 2",
           "y": 20,
           "x": 10,
           "width": 30,
           "height": 40,
-          "id": "zone-2"
+          "uid": "zone-2"
         }
     ],
 

tests/unit/data/plain/data.json

 {
   "zones": [
     {
-      "index": 1,
       "title": "Zone 1",
       "y": 123,
       "x": 234,
       "width": 345,
       "height": 456,
-      "id": "zone-1"
+      "uid": "zone-1"
     },
     {
-      "index": 2,
       "title": "Zone 2",
       "y": 20,
       "x": 10,
       "width": 30,
       "height": 40,
-      "id": "zone-2"
+      "uid": "zone-2"
     }
   ],
 
@@ -28,7 +26,7 @@
         "incorrect": "No 1",
         "correct": "Yes 1"
       },
-      "zone": "Zone 1",
+      "zone": "zone-1",
       "imageURL": "",
       "id": 0
     },
@@ -38,7 +36,7 @@
         "incorrect": "No 2",
         "correct": "Yes 2"
       },
-      "zone": "Zone 2",
+      "zone": "zone-2",
       "imageURL": "",
       "id": 1,
       "inputOptions": {

tests/unit/test_advanced.py

@@ -248,8 +248,8 @@ class TestDragAndDropHtmlData(BaseDragAndDropAjaxFixture, unittest.TestCase):
 class TestDragAndDropPlainData(BaseDragAndDropAjaxFixture, unittest.TestCase):
     FOLDER = "plain"
 
-    ZONE_1 = "Zone 1"
-    ZONE_2 = "Zone 2"
+    ZONE_1 = "zone-1"
+    ZONE_2 = "zone-2"
 
     FEEDBACK = {
         0: {"correct": "Yes 1", "incorrect": "No 1"},
@@ -266,3 +266,6 @@ class TestOldDataFormat(TestDragAndDropPlainData):
     """
     FOLDER = "old"
     FINAL_FEEDBACK = "Final Feed"
+
+    ZONE_1 = "Zone 1"
+    ZONE_2 = "Zone 2"

tests/unit/test_basics.py

 import unittest
 
 from drag_and_drop_v2.default_data import (
-    TARGET_IMG_DESCRIPTION, TOP_ZONE_TITLE, MIDDLE_ZONE_TITLE, BOTTOM_ZONE_TITLE,
+    TARGET_IMG_DESCRIPTION, TOP_ZONE_ID, MIDDLE_ZONE_ID, BOTTOM_ZONE_ID,
     START_FEEDBACK, FINISH_FEEDBACK, DEFAULT_DATA
 )
 from ..utils import make_block, TestCaseMixin
@@ -65,25 +65,25 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
         assert_user_state_empty()
 
         # Drag three items into the correct spot:
-        data = {"val": 0, "zone": TOP_ZONE_TITLE, "x_percent": "33%", "y_percent": "11%"}
+        data = {"val": 0, "zone": TOP_ZONE_ID, "x_percent": "33%", "y_percent": "11%"}
         self.call_handler('do_attempt', data)
-        data = {"val": 1, "zone": MIDDLE_ZONE_TITLE, "x_percent": "67%", "y_percent": "80%"}
+        data = {"val": 1, "zone": MIDDLE_ZONE_ID, "x_percent": "67%", "y_percent": "80%"}
         self.call_handler('do_attempt', data)
-        data = {"val": 2, "zone": BOTTOM_ZONE_TITLE, "x_percent": "99%", "y_percent": "95%"}
+        data = {"val": 2, "zone": BOTTOM_ZONE_ID, "x_percent": "99%", "y_percent": "95%"}
         self.call_handler('do_attempt', data)
 
         # Check the result:
         self.assertTrue(self.block.completed)
         self.assertEqual(self.block.item_state, {
-            '0': {'x_percent': '33%', 'y_percent': '11%', 'zone': TOP_ZONE_TITLE},
-            '1': {'x_percent': '67%', 'y_percent': '80%', 'zone': MIDDLE_ZONE_TITLE},
-            '2': {'x_percent': '99%', 'y_percent': '95%', 'zone': BOTTOM_ZONE_TITLE},
+            '0': {'x_percent': '33%', 'y_percent': '11%', 'zone': TOP_ZONE_ID},
+            '1': {'x_percent': '67%', 'y_percent': '80%', 'zone': MIDDLE_ZONE_ID},
+            '2': {'x_percent': '99%', 'y_percent': '95%', 'zone': BOTTOM_ZONE_ID},
         })
         self.assertEqual(self.call_handler('get_user_state'), {
             'items': {
-                '0': {'x_percent': '33%', 'y_percent': '11%', 'correct_input': True, 'zone': TOP_ZONE_TITLE},
-                '1': {'x_percent': '67%', 'y_percent': '80%', 'correct_input': True, 'zone': MIDDLE_ZONE_TITLE},
-                '2': {'x_percent': '99%', 'y_percent': '95%', 'correct_input': True, 'zone': BOTTOM_ZONE_TITLE},
+                '0': {'x_percent': '33%', 'y_percent': '11%', 'correct_input': True, 'zone': TOP_ZONE_ID},
+                '1': {'x_percent': '67%', 'y_percent': '80%', 'correct_input': True, 'zone': MIDDLE_ZONE_ID},
+                '2': {'x_percent': '99%', 'y_percent': '95%', 'correct_input': True, 'zone': BOTTOM_ZONE_ID},
             },
             'finished': True,
             'overall_feedback': FINISH_FEEDBACK,