Merge pull request #77 from open-craft/ekolpakov/mode_field

Problem mode field and edit capabilities

README.md

@@ -24,12 +24,12 @@ refreshes. All checking and record keeping is done on the server side.
 The following screenshot shows the Drag and Drop XBlock rendered
 inside the edX LMS before the user starts solving the problem:
 
-![Student view start](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/student-view-start.png)
+![Student view start](/doc/img/student-view-start.png)
 
 This screenshot shows the XBlock after the learner successfully
 completed the Drag and Drop problem:
 
-![Student view finish](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/student-view-finish.png)
+![Student view finish](/doc/img/student-view-finish.png)
 
 Installation
 ------------
@@ -95,7 +95,7 @@ Usage
 The Drag and Drop XBlock features an interactive editor. Add the Drag
 and Drop component to a lesson, then click the `EDIT` button.
 
-![Edit view](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view.png)
+![Edit view](/doc/img/edit-view.png)
 
 In the first step, you can set some basic properties of the component,
 such as the title, the maximum score, the problem text to render
@@ -103,7 +103,7 @@ above the background image, the introductory feedback (shown
 initially), and the final feedback (shown after the learner
 successfully completes the drag and drop problem).
 
-![Drop zone edit](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/ebd0b52d971bbf93b9c3873f310bd72d336d865b/doc/img/edit-view-zones.png)
+![Drop zone edit](/doc/img/edit-view-zones.png)
 
 In the next step, you set the URL and description for the background
 image and define the properties of the drop zones. For each zone you
@@ -125,7 +125,7 @@ items dropped in a zone will not overlap, but if the zone is not made large
 enough for all its items, they will overflow the bottom of the zone, and
 potentially, overlap the zones below.
 
-![Drag item edit](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view-items.png)
+![Drag item edit](/doc/img/edit-view-items.png)
 
 In the final step, you define the background and text color for drag
 items, as well as the drag items themselves. A drag item can contain
@@ -144,7 +144,7 @@ margin, the value entered by the learner will be considered correct if
 it does not differ from the expected value by more than that margin
 (and incorrect otherwise).
 
-![Zone dropdown](https://raw.githubusercontent.com/edx-solutions/xblock-drag-and-drop-v2/c955a38dc3a1aaf609c586d293ce19b282e11ffd/doc/img/edit-view-zone-dropdown.png)
+![Zone dropdown](/doc/img/edit-view-zone-dropdown.png)
 
 The zone that an item belongs to is selected from a dropdown that
 includes all drop zones defined in the previous step and a `none`

drag_and_drop_v2/drag_and_drop_v2.py

@@ -32,6 +32,9 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
     """
     XBlock that implements a friendly Drag-and-Drop problem
     """
+    STANDARD_MODE = "standard"
+    ASSESSMENT_MODE = "assessment"
+
     display_name = String(
         display_name=_("Title"),
         help=_("The title of the drag and drop problem. The title is displayed to learners."),
@@ -39,6 +42,20 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
         default=_("Drag and Drop"),
     )
 
+    mode = String(
+        display_name=_("Mode"),
+        help=_(
+            "Standard mode: feedback is provided to learner right after an item is dropped to a zone. "
+            "Assessment mode: learner must place all the items to zones to see the feedback."
+        ),
+        scope=Scope.settings,
+        values=[
+            {"display_name": _("Standard"), "value": STANDARD_MODE},
+            {"display_name": _("Assessment"), "value": ASSESSMENT_MODE},
+        ],
+        default=STANDARD_MODE
+    )
+
     show_title = Boolean(
         display_name=_("Show title"),
         help=_("Display the title to the learner?"),
@@ -186,9 +203,14 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
             field_name: self.ugettext(field.help)
             for field_name, field in self.fields.viewitems() if hasattr(field, "help")
         }
+        field_values = {
+            field_name: field.values
+            for field_name, field in self.fields.viewitems() if hasattr(field, "values")
+        }
         context = {
             'js_templates': js_templates,
             'help_texts': help_texts,
+            'field_values': field_values,
             'self': self,
             'data': urllib.quote(json.dumps(self.data)),
         }
@@ -221,6 +243,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
     @XBlock.json_handler
     def studio_submit(self, submissions, suffix=''):
         self.display_name = submissions['display_name']
+        self.mode = submissions['mode']
         self.show_title = submissions['show_title']
         self.question_text = submissions['problem_text']
         self.show_question_header = submissions['show_problem_header']

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -504,6 +504,7 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                         var data = {
                             'display_name': $element.find('#display-name').val(),
+                            'mode': $element.find("#problem-mode").val(),
                             'show_title': $element.find('.show-title').is(':checked'),
                             'weight': $element.find('#weight').val(),
                             'problem_text': $element.find('#problem-text').val(),

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -21,6 +21,16 @@
                       <span class="sr">{{ help_texts.show_title }}</span>
                     </label>
 
+                    <label class="h3" for="problem-mode" title="{{ help_texts.mode }}">{% trans "Problem mode" %}</label>
+                    <select id="problem-mode">
+                        {% for field_value in field_values.mode %}
+                            <option value="{{ field_value.value }}" {% if self.mode == field_value.value %}selected{% endif %}>
+                                {{ field_value.display_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                    <span class="sr">{{ help_texts.mode }}</span>
+
                     <label class="h3" for="weight">{% trans "Maximum score" %}</label>
                     <input id="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" />
 

pylintrc

@@ -20,4 +20,4 @@ disable=
     no-member
 
 [SIMILARITIES]
-min-similarity-lines=8
+min-similarity-lines=4

tests/unit/test_basics.py

 import unittest
 
+from drag_and_drop_v2.drag_and_drop_v2 import DragAndDropBlock
 from drag_and_drop_v2.default_data import (
     TARGET_IMG_DESCRIPTION, TOP_ZONE_ID, MIDDLE_ZONE_ID, BOTTOM_ZONE_ID,
     START_FEEDBACK, FINISH_FEEDBACK, DEFAULT_DATA
@@ -97,6 +98,7 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
     def test_studio_submit(self):
         body = {
             'display_name': "Test Drag & Drop",
+            'mode': DragAndDropBlock.ASSESSMENT_MODE,
             'show_title': False,
             'problem_text': "Problem Drag & Drop",
             'show_problem_header': False,
@@ -111,6 +113,7 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
         self.assertEqual(res, {'result': 'success'})
 
         self.assertEqual(self.block.show_title, False)
+        self.assertEqual(self.block.mode, DragAndDropBlock.ASSESSMENT_MODE)
         self.assertEqual(self.block.display_name, "Test Drag & Drop")
         self.assertEqual(self.block.question_text, "Problem Drag & Drop")
         self.assertEqual(self.block.show_question_header, False)