hide-zone-labels: Add option to hide the zone labels text (default off)

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -120,6 +120,7 @@
 }
 
 .xblock--drag-and-drop .zone p {
+    visibility: hidden;
     width: 100%;
     font-family: Arial;
     font-size: 16px;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -73,6 +73,11 @@ function DragAndDropBlock(runtime, element) {
                 // Set the target image
                 if (_fn.data.targetImg)
                     _fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
+
+                // Display the zone names if required
+                if (_fn.data.displayLabels) {
+                    $('p', _fn.$zones).css('visibility', 'visible');
+                }
             },
 
             finish: function(final_feedback) {

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -61,6 +61,10 @@ function DragAndDropEditBlock(runtime, element) {
                             _fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
                         }
 
+                        if (_fn.data.displayLabels) {
+                            _fn.data.displayLabels = $('.display-labels-form input', element).prop('checked', true);
+                        }
+
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
 
@@ -110,6 +114,9 @@ function DragAndDropEditBlock(runtime, element) {
 
                             // Placeholder shim for IE9
                             $.placeholder.shim();
+                        })
+                        .on('click', '.display-labels-form input', function(e) {
+                            _fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');
                         });
 
                     $itemTab

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -43,6 +43,10 @@
                     <input type="text">
                     <button class="btn">Change background</button>
                 </section>
+                <section class="tab-content display-labels-form">
+                    <label for="display-labels">Display label names on the image:</label>
+                    <input name="display-labels" id="display-labels" type="checkbox" />
+                </section>
                 <div class="items">
                     <form class="zones-form"></form>
                     <a href="#" class="add-zone add-element"><div class="icon add"></div>Add a zone</a>