Merge pull request #84 from open-craft/mtyaka/assessment-movable-items

Move items between zones in assessment mode

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -143,6 +143,11 @@
     margin: 0;
     transform: translate(-50%, -50%); /* These blocks are to be centered on their absolute x,y position */
 }
+/* Dragging placed option to a different zone in assessment mode */
+.xblock--drag-and-drop .drag-container .target .option.grabbed-with-mouse {
+    transform: none; /* The transform messes with jQuery UI Draggable positioning, */
+                     /* so remove it while dragging with the mouse. */
+}
 
 /* Placed options in an aligned zone */
 .xblock--drag-and-drop .zone .item-wrapper {
@@ -172,21 +177,24 @@
 }
 
 /* Focused option */
-.xblock--drag-and-drop .drag-container .item-bank .option:focus,
-.xblock--drag-and-drop .drag-container .item-bank .option:hover,
-.xblock--drag-and-drop .drag-container .item-bank .option[aria-grabbed='true'] {
+.xblock--drag-and-drop .drag-container .option[draggable='true']:focus,
+.xblock--drag-and-drop .drag-container .option[draggable='true']:hover,
+.xblock--drag-and-drop .drag-container .option[draggable='true'][aria-grabbed='true'] {
     outline-width: 2px;
     outline-style: solid;
     outline-offset: -4px;
 }
 
-.xblock--drag-and-drop .drag-container .ui-draggable-dragging.option {
+.xblock--drag-and-drop .drag-container .option.grabbed-with-mouse {
     box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.3);
     border: 1px solid #ccc;
     opacity: .65;
     z-index: 20 !important;
     margin: 0; /* Allow the draggable to touch the edges of the target image */
 }
+.xblock--drag-and-drop .drag-container .item-align-center .option.grabbed-with-mouse {
+    margin: 0 auto; /* Revert to auto margin when dragging with mouse to not confuse jQuery UI draggable */
+}
 
 .xblock--drag-and-drop .drag-container .option img {
     display: inline-block;
@@ -254,8 +262,9 @@
 }
 
 /* Focused zone */
+.xblock--drag-and-drop .item-bank:focus,
 .xblock--drag-and-drop .zone:focus {
-    border: 2px solid #a5a5a5;
+    outline: 2px solid #a5a5a5;
 }
 
 .xblock--drag-and-drop .drag-container .target .zone p {

drag_and_drop_v2/translations/en/LC_MESSAGES/text.po

@@ -409,11 +409,15 @@ msgid "ok"
 msgstr ""
 
 #: public/js/drag_and_drop.js
-msgid "Placed in: "
+msgid "Item Bank"
 msgstr ""
 
 #: public/js/drag_and_drop.js
-msgid "Correctly placed in: "
+msgid "Placed in: {zone_title}"
+msgstr ""
+
+#: public/js/drag_and_drop.js
+msgid "Correctly placed in: {zone_title}"
 msgstr ""
 
 #: public/js/drag_and_drop.js

drag_and_drop_v2/translations/eo/LC_MESSAGES/text.po

@@ -494,12 +494,16 @@ msgid "ok"
 msgstr "ök Ⱡ'σя#"
 
 #: public/js/drag_and_drop.js
-msgid "Placed in: "
-msgstr "Pläçéd ïn:  Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+msgid "Item Bank"
+msgstr "Ìtém Bänk Ⱡ'σяєм ιρѕυм ∂σł#"
 
 #: public/js/drag_and_drop.js
-msgid "Correctly placed in: "
-msgstr "Çörréçtlý pläçéd ïn:  Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+msgid "Placed in: {zone_title}"
+msgstr "Pläçéd ïn: {zone_title}  Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+
+#: public/js/drag_and_drop.js
+msgid "Correctly placed in: {zone_title}"
+msgstr "Çörréçtlý pläçéd ïn: {zone_title} Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
 
 #: public/js/drag_and_drop.js
 msgid "Reset problem"

tests/integration/test_render.py

@@ -146,7 +146,6 @@ class TestDragAndDropRender(BaseIntegrationTest):
             self.assertEqual(item.get_attribute('draggable'), 'true')
             self.assertEqual(item.get_attribute('aria-grabbed'), 'false')
             self.assertEqual(item.get_attribute('data-value'), str(index))
-            self.assertIn('ui-draggable', self.get_element_classes(item))
             self._test_item_style(item, color_settings)
             try:
                 background_image = item.find_element_by_css_selector('img')
@@ -160,8 +159,16 @@ class TestDragAndDropRender(BaseIntegrationTest):
 
     def test_drag_container(self):
         self.load_scenario()
-        item_bank = self._page.find_element_by_css_selector('.drag-container')
-        self.assertIsNone(item_bank.get_attribute('role'))
+        drag_container = self._page.find_element_by_css_selector('.drag-container')
+        self.assertIsNone(drag_container.get_attribute('role'))
+
+    def test_item_bank(self):
+        self.load_scenario()
+        item_bank = self._page.find_element_by_css_selector('.item-bank')
+        description = item_bank.find_element_by_css_selector('p.zone-description')
+        self.assertEqual(description.text, 'Item Bank')
+        # Description should only be visible to screen readers:
+        self.assertEqual(description.get_attribute('class'), 'zone-description sr')
 
     def test_zones(self):
         self.load_scenario()

tests/integration/test_sizing.py

@@ -187,6 +187,7 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
         target_img_width = target_img.size["width"]
         item_bank = self._page.find_element_by_css_selector('.item-bank')
         item_bank_width = item_bank.size["width"]
+        item_bank_height = item_bank.size["height"]
 
         if is_desktop:
             # If using a desktop-sized window, we can know the exact dimensions of various containers:
@@ -239,6 +240,10 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
                     *expect.img_pixel_size_exact
                 )
 
+        # Test that the item bank maintains its original size.
+        self.assertEqual(item_bank.size["width"], item_bank_width)
+        self.assertEqual(item_bank.size["height"], item_bank_height)
+
 
 class AlignedSizingTests(SizingTests):
     """