Problem mode field and edit capabilities

README.md

@@ -97,8 +97,8 @@ 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)
 
 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
-above the background image, the introductory feedback (shown
+such as the title, problem mode (Standard vs. Assessment), the maximum score, 
+the problem text to render above the background image, the introductory feedback (shown
 initially), and the final feedback (shown after the learner
 successfully completes the drag and drop problem). 
 

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?"),
@@ -185,9 +202,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)),
         }
@@ -220,6 +242,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

@@ -491,6 +491,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 }}" />
 

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)