Address review comments.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -26,28 +26,28 @@ class DragAndDropBlock(XBlock):
         display_name="Title",
         help="The title of the Drag and Drop that is displayed to the user",
         scope=Scope.settings,
-        default="Drag and Drop"
+        default="Drag and Drop",
     )
 
     show_title = Boolean(
         display_name="Show title",
         help="Display the title to the user?",
         scope=Scope.settings,
-        default=True
+        default=True,
     )
 
     question_text = String(
         display_name="Question text",
         help="The question text that is displayed to the user",
         scope=Scope.settings,
-        default=""
+        default="",
     )
 
     weight = Float(
         display_name="Weight",
         help="This is the maximum score that the user receives when he/she successfully completes the problem",
         scope=Scope.settings,
-        default=1
+        default=1,
     )
 
     item_background_color = String(
@@ -57,36 +57,36 @@ class DragAndDropBlock(XBlock):
             "Defaults to color specified by current theme, or blue if no theme is set."
         ),
         scope=Scope.settings,
-        default=""
+        default="",
     )
 
     item_text_color = String(
         display_name="Item text color",
         help=(
             "Text color to use for draggable items. "
-            "Defaults to color specified by current theme, or blue if no theme is set."
+            "Defaults to color specified by current theme, or white if no theme is set."
         ),
         scope=Scope.settings,
-        default=""
+        default="",
     )
 
     data = Dict(
         display_name="Drag and Drop",
         help="JSON spec as generated by the builder",
         scope=Scope.content,
-        default=DEFAULT_DATA
+        default=DEFAULT_DATA,
     )
 
     item_state = Dict(
         help="How the student has interacted with the problem",
         scope=Scope.user_state,
-        default={}
+        default={},
     )
 
     completed = Boolean(
         help="The student has completed the problem at least once",
         scope=Scope.user_state,
-        default=False
+        default=False,
     )
 
     has_score = True

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -183,6 +183,12 @@
     margin-bottom: 30px;
 }
 
+.xblock--drag-and-drop .item-styles-form .item-styles-form-help {
+    margin-top: 5px;
+    font-size: small;
+}
+
+.xblock--drag-and-drop .item-styles-form,
 .xblock--drag-and-drop .items-form {
     margin-bottom: 30px;
 }

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -64,18 +64,32 @@
                 <h3>Items</h3>
             </header>
             <section class="tab-content">
-                <section class="tab-content item-background-color-form">
-                    <label>
-                        Background color for items:
-                        <input class="item-background-color" type="text" value="{{ self.item_background_color}}">
-                    </label>
-                </section>
-                <section class="tab-content item-text-color-form">
-                    <label>
-                        Text color for items:
-                        <input class="item-text-color" type="text" value="{{ self.item_text_color}}">
-                    </label>
-                </section>
+                <form class="item-styles-form">
+                    <h3 id="item-background-color-label">
+                        {% trans "Background color" %}
+                    </h3>
+                    <input class="item-background-color"
+                           placeholder="e.g. red or #ff0000"
+                           value="{{ self.item_background_color}}"
+                           aria-labelledby="item-background-color-label"
+                           aria-describedby="item-background-color-description">
+                    <div id="item-background-color-description" class="item-styles-form-help">
+                      {{ self.fields.item_background_color.help }}
+                    </div>
+                    <h3 id="item-text-color-label">
+                        {% trans "Text color" %}
+                    </h3>
+                    <input class="item-text-color"
+                           placeholder="e.g. red or #ff0000"
+                           value="{{ self.item_text_color}}"
+                           aria-labelledby="item-text-color-label"
+                           aria-describedby="item-text-color-description">
+                    <div id="item-text-color-description" class="item-styles-form-help">
+                      {{ self.fields.item_text_color.help }}
+                    </div>
+                </form>
+            </section>
+            <section class="tab-content">
                 <form class="items-form"></form>
             </section>
             <footer class="tab-footer">

tests/integration/test_render.py

@@ -4,13 +4,15 @@ from tests.integration.test_base import BaseIntegrationTest
 
 
 class Colors(object):
+    WHITE = 'rgb(255, 255, 255)'
+    BLUE = 'rgb(46, 131, 205)'
     GREY = 'rgb(237, 237, 237)'
     CORAL = '#ff7f50'
     CORNFLOWERBLUE = 'cornflowerblue'
 
     @classmethod
     def rgb(cls, color):
-        if color == cls.GREY:
+        if color in (cls.WHITE, cls.BLUE, cls.GREY):
             return color
         elif color == cls.CORAL:
             return 'rgb(255, 127, 80)'
@@ -24,6 +26,11 @@ class TestDragAndDropRender(BaseIntegrationTest):
     """
     PAGE_TITLE = 'Drag and Drop v2'
     PAGE_ID = 'drag_and_drop_v2'
+    ITEM_PROPERTIES = [
+        {'text': '1', 'style_settings': {'width': '190px', 'height': 'auto'}},
+        {'text': '2', 'style_settings': {'width': '190px', 'height': 'auto'}},
+        {'text': 'X', 'style_settings': {'width': '100px', 'height': '100px'}},
+    ]
 
     def load_scenario(self, item_background_color="", item_text_color=""):
         scenario_xml = """
@@ -36,6 +43,11 @@ class TestDragAndDropRender(BaseIntegrationTest):
         self.browser.get(self.live_server_url)
         self._page = self.go_to_page(self.PAGE_TITLE)
 
+    def _get_style(self, selector, style):
+        return self.browser.execute_script(
+            'return getComputedStyle($("{selector}").get(0)).{style}'.format(selector=selector, style=style)
+        )
+
     def _test_style(self, element, style_settings, element_type):
         style = element.get_attribute('style')
         for style_prop, expected_value in style_settings.items():
@@ -47,13 +59,26 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self._test_item_style(element, style_settings, style)
 
     def _test_item_style(self, item, style_settings, style):
+        # Check background color
         background_color_property = 'background-color'
         if background_color_property not in style_settings:
             self.assertNotIn(background_color_property, style)
+            expected_background_color = Colors.BLUE
+        else:
+            expected_background_color = Colors.rgb(style_settings['background-color'])
+        background_color = self._get_style('.items .option', 'backgroundColor')
+        self.assertEquals(background_color, expected_background_color)
+
+        # Check text color
         color_property = 'color'
         if color_property not in style_settings:
             self.assertNotIn(' ' + color_property, style) # Leading space makes sure that
                                                           # test does not find "color" in "background-color"
+            expected_color = Colors.WHITE
+        else:
+            expected_color = Colors.rgb(style_settings['color'])
+        color = self._get_style('.items .option', 'color')
+        self.assertEquals(color, expected_color)
 
     def test_items(self):
         self.load_scenario()
@@ -62,20 +87,11 @@ class TestDragAndDropRender(BaseIntegrationTest):
 
         self.assertEqual(len(items), 3)
 
-        self.assertEqual(items[0].get_attribute('data-value'), '0')
-        self.assertEqual(items[0].text, '1')
-        self.assertIn('ui-draggable', self.get_element_classes(items[0]))
-        self._test_style(items[0], {'width': '190px', 'height': 'auto'}, element_type='item')
-
-        self.assertEqual(items[1].get_attribute('data-value'), '1')
-        self.assertEqual(items[1].text, '2')
-        self.assertIn('ui-draggable', self.get_element_classes(items[1]))
-        self._test_style(items[1], {'width': '190px', 'height': 'auto'}, element_type='item')
-
-        self.assertEqual(items[2].get_attribute('data-value'), '2')
-        self.assertEqual(items[2].text, 'X')
-        self.assertIn('ui-draggable', self.get_element_classes(items[2]))
-        self._test_style(items[2], {'width': '100px', 'height': '100px'}, element_type='item')
+        for index, item in enumerate(items):
+            self.assertEqual(item.get_attribute('data-value'), str(index))
+            self.assertEqual(item.text, self.ITEM_PROPERTIES[index]['text'])
+            self.assertIn('ui-draggable', self.get_element_classes(item))
+            self._test_style(item, self.ITEM_PROPERTIES[index]['style_settings'], element_type='item')
 
     @unpack
     @data(
@@ -85,37 +101,24 @@ class TestDragAndDropRender(BaseIntegrationTest):
     )
     def test_items_custom_colors(self, item_background_color, item_text_color):
         self.load_scenario(item_background_color, item_text_color)
-        color_settings = {}
-        if item_background_color:
-            color_settings['background-color'] = item_background_color
-        if item_text_color:
-            color_settings['color'] = item_text_color
-        print(color_settings)
 
         items = self._get_items()
 
         self.assertEqual(len(items), 3)
 
-        self.assertEqual(items[0].get_attribute('data-value'), '0')
-        self.assertEqual(items[0].text, '1')
-        self.assertIn('ui-draggable', self.get_element_classes(items[0]))
-        self._test_style(
-            items[0], dict({'width': '190px', 'height': 'auto'}, **color_settings), element_type='item'
-        )
-
-        self.assertEqual(items[1].get_attribute('data-value'), '1')
-        self.assertEqual(items[1].text, '2')
-        self.assertIn('ui-draggable', self.get_element_classes(items[1]))
-        self._test_style(
-            items[1], dict({'width': '190px', 'height': 'auto'}, **color_settings), element_type='item'
-        )
+        color_settings = {}
+        if item_background_color:
+            color_settings['background-color'] = item_background_color
+        if item_text_color:
+            color_settings['color'] = item_text_color
 
-        self.assertEqual(items[2].get_attribute('data-value'), '2')
-        self.assertEqual(items[2].text, 'X')
-        self.assertIn('ui-draggable', self.get_element_classes(items[2]))
-        self._test_style(
-            items[2], dict({'width': '100px', 'height': '100px'}, **color_settings), element_type='item'
-        )
+        for index, item in enumerate(items):
+            self.assertEqual(item.get_attribute('data-value'), str(index))
+            self.assertEqual(item.text, self.ITEM_PROPERTIES[index]['text'])
+            self.assertIn('ui-draggable', self.get_element_classes(item))
+            self._test_style(
+                item, dict(self.ITEM_PROPERTIES[index]['style_settings'], **color_settings), element_type='item'
+            )
 
     def test_zones(self):
         self.load_scenario()