Make sure droppable zones have unique IDs.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -156,6 +156,8 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
 
         return {
             "zones": self.data.get('zones', []),
+            # SDK doesn't supply url_name.
+            "url_name": getattr(object, 'url_name', ''),
             "display_zone_labels": self.data.get('displayLabels', False),
             "display_zone_borders": self.data.get('displayBorders', False),
             "items": items_without_answers(),

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -171,6 +171,7 @@ 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;
         }
     };
 

tests/integration/test_render.py

@@ -191,12 +191,12 @@ class TestDragAndDropRender(BaseIntegrationTest):
             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))
+            self.assertEqual(zone_name.text, 'Zone {}'.format(zone_number))
             zone_description = zone.find_element_by_css_selector('p.zone-description')
-            self.assertEqual(zone_description.text, 'THIS DESCRIBES ZONE {}'.format(zone_number))
+            self.assertEqual(zone_description.text, 'This describes zone {}'.format(zone_number))
             # Zone description should only be visible to screen readers:
             self.assertEqual(zone_description.get_attribute('class'), 'zone-description sr')
 
@@ -245,7 +245,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')
@@ -254,7 +254,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

@@ -10,6 +10,7 @@
     "initial_feedback": "HTML <strong>Intro</strong> Feed",
     "display_zone_borders": false,
     "display_zone_labels": false,
+    "url_name": "",
 
     "zones": [
         {

tests/unit/data/old/config_out.json

@@ -10,6 +10,7 @@
     "initial_feedback": "Intro Feed",
     "display_zone_borders": false,
     "display_zone_labels": false,
+    "url_name": "",
 
     "zones": [
         {

tests/unit/data/plain/config_out.json

@@ -10,6 +10,7 @@
     "initial_feedback": "This is the initial feedback.",
     "display_zone_borders": false,
     "display_zone_labels": false,
+    "url_name": "",
 
     "zones": [
         {

tests/unit/test_basics.py

@@ -40,6 +40,7 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
             "item_background_color": None,
             "item_text_color": None,
             "initial_feedback": START_FEEDBACK,
+            "url_name": "",
         })
         self.assertEqual(zones, DEFAULT_DATA["zones"])
         # Items should contain no answer data: