Skip to content

X
xblock-drag-and-drop-v2
Commit 2a36adad by Tim Krones
Options

Address review comments.

parent a5858aaf
Showing with 82 additions and 59 deletions
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>
<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,36 +101,23 @@ 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]))
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(
items[2], dict({'width': '100px', 'height': '100px'}, **color_settings), element_type='item'
item, dict(self.ITEM_PROPERTIES[index]['style_settings'], **color_settings), element_type='item'
)
def test_zones(self):
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment