Address review comments.

- i18n: Use "example" instead of "e.g."
- No need to "preventDefault" for clickable elements that are now <button>s

drag_and_drop_v2/drag_and_drop_v2.py

@@ -115,14 +115,14 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
 
     item_background_color = String(
         display_name=_("Item background color"),
-        help=_("The background color of draggable items in the problem (e.g. 'blue' or '#0000ff')."),
+        help=_("The background color of draggable items in the problem (example: 'blue' or '#0000ff')."),
         scope=Scope.settings,
         default="",
     )
 
     item_text_color = String(
         display_name=_("Item text color"),
-        help=_("Text color to use for draggable items (e.g. 'white' or '#ffffff')."),
+        help=_("Text color to use for draggable items (example: 'white' or '#ffffff')."),
         scope=Scope.settings,
         default="",
     )

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -184,7 +184,6 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                     $zoneTab
                         .on('click', '.add-zone', function(e) {
-                            e.preventDefault();
                             _fn.build.form.zone.add();
                             // Set focus to first field of the new zone.
                             $('.zones-form .zone-row:last input[type=text]:first', element).select();
@@ -193,8 +192,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                         .on('input', '.zone-row input', _fn.build.form.zone.changedInputHandler)
                         .on('change', '.align-select', _fn.build.form.zone.changedInputHandler)
                         .on('click', '.target-image-form button', function(e) {
-                            e.preventDefault();
-
                             var new_img_url = $.trim($('.target-image-form .background-url', element).val());
                             if (new_img_url) {
                                 // We may need to 'expand' the URL before it will be valid.
@@ -225,7 +222,6 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                     $itemTab
                         .on('click', '.add-item', function(e) {
-                            e.preventDefault();
                             _fn.build.form.item.add();
                             // Set focus to first field of the new item.
                             $('.items-form .item:last input[type=text]:first', element).select();
@@ -308,7 +304,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 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 uid of the zone in the array and remove it.
@@ -447,7 +442,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                         remove: function(e) {
                             var $el = $(e.currentTarget).closest('.item');
 
-                            e.preventDefault();
                             $el.detach();
 
                             _fn.build.form.item.count--;
@@ -471,7 +465,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             }
                         },
                         showAdvancedSettings: function(e) {
-                            e.preventDefault();
                             var $el = $(e.currentTarget).closest('.item');
                             $el.find('.row.advanced').show();
                             $el.find('.row.advanced-link').hide();

drag_and_drop_v2/translations/en/LC_MESSAGES/text.po

@@ -171,7 +171,7 @@ msgid "Item background color"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "The background color of draggable items in the problem."
+msgid "The background color of draggable items in the problem (example: 'blue' or '#0000ff')."
 msgstr ""
 
 #: drag_and_drop_v2.py
@@ -179,7 +179,7 @@ msgid "Item text color"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "Text color to use for draggable items."
+msgid "Text color to use for draggable items (example: 'white' or '#ffffff')."
 msgstr ""
 
 #: drag_and_drop_v2.py

drag_and_drop_v2/translations/eo/LC_MESSAGES/text.po

@@ -209,20 +209,20 @@ msgid "Item background color"
 msgstr "Ìtém ßäçkgröünd çölör Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
 
 #: drag_and_drop_v2.py
-msgid "The background color of draggable items in the problem."
+msgid "The background color of draggable items in the problem (example: 'blue' or '#0000ff')."
 msgstr ""
-"Thé ßäçkgröünd çölör öf dräggäßlé ïtéms ïn thé prößlém. Ⱡ'σяєм ιρѕυм ∂σłσя "
-"ѕιт αмєт, ¢σηѕє¢тєтυя α#"
+"Thé ßäçkgröünd çölör öf dräggäßlé ïtéms ïn thé prößlém (éxämplé: 'ßlüé' ör '#0000ff'). "
+"Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢#"
 
 #: drag_and_drop_v2.py
 msgid "Item text color"
 msgstr "Ìtém téxt çölör Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт α#"
 
 #: drag_and_drop_v2.py
-msgid "Text color to use for draggable items."
+msgid "Text color to use for draggable items (example: 'white' or '#ffffff')."
 msgstr ""
-"Téxt çölör tö üsé för dräggäßlé ïtéms. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
-"¢σηѕє¢тєтυя#"
+"Téxt çölör tö üsé för dräggäßlé ïtéms (éxämplé: 'whïté' ör '#ffffff'). "
+"Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєтυя #"
 
 #: drag_and_drop_v2.py
 msgid "Problem data"