Add a checkbox to the zone tab to control visibility of zone borders. Render…

Add a checkbox to the zone tab to control visibility of zone borders.  Render the borders accordingly.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -147,6 +147,7 @@ class DragAndDropBlock(XBlock):
         return {
             "zones": self.data.get('zones', []),
             "display_zone_labels": self.data.get('displayLabels', False),
+            "display_zone_borders": self.data.get('displayBorders', False),
             "items": items_without_answers(),
             "title": self.display_name,
             "show_title": self.show_title,

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -209,6 +209,7 @@
 
 .xblock--drag-and-drop .zone {
     position: absolute;
+    border: 1px hidden #f00;
 
     display: -webkit-box;
     display: -moz-box;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -366,6 +366,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             target_img_src: configuration.target_img_expanded_url,
             target_img_description: configuration.target_img_description,
             display_zone_labels: configuration.display_zone_labels,
+            display_zone_borders: configuration.display_zone_borders,
             zones: configuration.zones,
             items: items,
             // state - parts that can change:

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -80,6 +80,10 @@ function DragAndDropEditBlock(runtime, element, params) {
                             $('.display-labels-form input', element).prop('checked', true);
                         }
 
+                        if (_fn.data.displayBorders) {
+                            $('.display-borders-form input', element).prop('checked', true);
+                        }
+
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
 
@@ -149,6 +153,9 @@ function DragAndDropEditBlock(runtime, element, params) {
                         })
                         .on('click', '.display-labels-form input', function(e) {
                             _fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');
+                        })
+                        .on('click', '.display-borders-form input', function(e) {
+                            _fn.data.displayBorders = $('.display-borders-form input', element).is(':checked');
                         });
 
                     $itemTab

drag_and_drop_v2/public/js/view.js

@@ -116,6 +116,7 @@
                     style: {
                         top: zone.y_percent + '%', left: zone.x_percent + "%",
                         width: zone.width_percent + '%', height: zone.height_percent + "%",
+                        borderStyle: ctx.display_zone_borders ? 'dotted' : 'hidden'
                     }
                 },
                 [

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -74,6 +74,11 @@
                     <label for="display-labels">{% trans "Display label names on the image" %}:</label>
                     <input name="display-labels" id="display-labels" type="checkbox" />
                 </form>
+                <form class="display-borders-form">
+                    <h3>{% trans "Zone borders" %}</h3>
+                    <label for="display-borders">{% trans "Display zone borders on the image" %}:</label>
+                    <input name="display-borders" id="display-borders" type="checkbox" />
+                </form>
             </section>
             <section class="tab-content">
                 <div class="zone-editor">