Support incremental editing in the Studio view

drag_and_drop_v2/drag_and_drop_v2.py

@@ -7,6 +7,7 @@ import logging
 import json
 import webob
 import copy
+import urllib
 
 from xblock.core import XBlock
 from xblock.fields import Scope, String, Dict, Float
@@ -111,6 +112,8 @@ class DragAndDropBlock(XBlock):
         js_templates = load_resource('/templates/html/js_templates.html')
         context = {
             'js_templates': js_templates,
+            'self': self,
+            'data': urllib.quote(json.dumps(self.data)),
         }
 
         fragment = Fragment()

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -174,8 +174,6 @@
 }
 
 .xblock--drag-and-drop .drag-builder .zone {
-    width: 200px;
-    height: 100px;
     border: 1px dotted #666;
 }
 

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -3,25 +3,32 @@
 <div class="xblock--drag-and-drop editor-with-buttons">
     {{ js_templates|safe }}
 
-    <section class="drag-builder">
+    <script type="text/javascript">
+        var DragAndDropV2BlockPreviousData = JSON.parse(decodeURIComponent('{{ data|safe }}'));
+    </script>
 
+    <section class="drag-builder">
         <div class="tab feedback-tab">
+            <p class="tab-content">
+                Note: don't edit the question if students already answered it! Delete it and create a new one.
+            </p>
+
             <section class="tab-content">
                 <form class="feedback-form">
                     <h3>Question title</h3>
-                    <input class="display-name" />
+                    <input class="display-name" value="{{ self.display_name }}" />
 
                     <h3>Maximum score</h3>
-                    <input class="weight" value="1"/>
+                    <input class="weight" value="1" value="{{ self.weight }}"/>
 
                     <h3>Question text</h3>
-                    <textarea class="question-text"></textarea>
+                    <textarea class="question-text">{{ self.question_text }}</textarea>
 
                     <h3>Introduction Feedback</h3>
-                    <textarea class="intro-feedback"></textarea>
+                    <textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea>
 
                     <h3>Final Feedback</h3>
-                    <textarea class="final-feedback"></textarea>
+                    <textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea>
                 </form>
             </section>
         </div>

drag_and_drop_v2/templates/html/js_templates.html

@@ -23,35 +23,35 @@
 </script>
 
 <script id="zone-input-tpl" type="text/html">
-    <div class="zone-row {{ name }}">
+    <div class="zone-row {{ id }}">
        <label>Text</label>
-       <input type="text" class="title" placeholder="{{ title }}" />
+       <input type="text" class="title" value="{{ title }}" />
        <a href="#" class="remove-zone hidden">
            <div class="icon remove"></div>
        </a>
        <div class="layout">
            <label>width</label>
-           <input type="text" class="size width" value="200" />
+           <input type="text" class="size width" value="{{ width }}" />
            <label>height</label>
-           <input type="text" class="size height" value="100" />
+           <input type="text" class="size height" value="{{ height }}" />
            <br />
            <label>x</label>
-           <input type="text" class="coord x" value="0" />
+           <input type="text" class="coord x" value="{{ x }}" />
            <label>y</label>
-           <input type="text" class="coord y" value="0" />
+           <input type="text" class="coord y" value="{{ y }}" />
        </div>
     </div>
 </script>
 
 <script id="zone-dropdown-tpl" type="text/html">
-    <option value="{{ value }}">{{ value }}</option>
+    <option value="{{ value }}" {{ selected }}>{{ value }}</option>
 </script>
 
 <script id="item-input-tpl" type="text/html">
     <div class="item">
         <div class="row">
             <label>Text</label>
-            <input type="text" class="item-text"></input>
+            <input type="text" class="item-text" value="{{ displayName }}"/>
             <label>Zone</label>
             <select class="zone-select">{{ dropdown }}</select>
             <a href="#" class="remove-item hidden">
@@ -60,21 +60,21 @@
         </div>
         <div class="row">
             <label>Background image URL (alternative to the text)</label>
-            <textarea class="background-image"></textarea>
+            <textarea class="background-image">{{ backgroundImage }}</textarea>
         </div>
         <div class="row">
             <label>Success Feedback</label>
-            <textarea class="success-feedback"></textarea>
+            <textarea class="success-feedback">{{ feedback.correct }}</textarea>
         </div>
         <div class="row">
             <label>Error Feedback</label>
-            <textarea class="error-feedback"></textarea>
+            <textarea class="error-feedback">{{ feedback.incorrect }}</textarea>
         </div>
         <div class="row">
             <label>Width (px - 0 for auto)</label>
-            <input type="text" class="item-width" value="190"></input>
+            <input type="text" class="item-width" value="{{ width }}"></input>
             <label>Height (px - 0 for auto)</label>
-            <input type="text" class="item-height" value="0"></input>
+            <input type="text" class="item-height" value="{{ height }}"></input>
         </div>
     </div>
 </script>

tests/test_data.json

@@ -5,7 +5,6 @@
       "width": 200,
       "title": "Zone A",
       "height": 100,
-      "active": true,
       "y": "200",
       "x": "100",
       "id": "zone-1"
@@ -15,7 +14,6 @@
       "width": 200,
       "title": "Zone B",
       "height": 100,
-      "active": true,
       "y": 0,
       "x": 0,
       "id": "zone-2"

tests/test_drag_and_drop_v2.py

@@ -45,8 +45,7 @@ def test_templates_contents():
     student_fragment = block.render('student_view', Mock())
     assert_in('<section class="xblock--drag-and-drop">',
         student_fragment.content)
-    assert_in('<option value="{{ value }}">{{ value }}</option>',
-        student_fragment.content)
+    assert_in('{{ value }}', student_fragment.content)
     assert_in("Test Drag &amp; Drop", student_fragment.content)
     assert_in("Question Drag &amp; Drop", student_fragment.content)
     assert_in("(5 Points Possible)", student_fragment.content)
@@ -54,8 +53,7 @@ def test_templates_contents():
     studio_fragment = block.render('studio_view', Mock())
     assert_in('<div class="xblock--drag-and-drop editor-with-buttons">',
         studio_fragment.content)
-    assert_in('<option value="{{ value }}">{{ value }}</option>',
-        studio_fragment.content)
+    assert_in('{{ value }}', studio_fragment.content)
 
 def test_studio_submit():
     block = make_block()

tests/test_get_data.json

@@ -6,7 +6,6 @@
       "id": "zone-1",
       "height": 100,
       "y": "200",
-      "active": true,
       "x": "100",
       "width": 200
     },
@@ -16,7 +15,6 @@
       "id": "zone-2",
       "height": 100,
       "y": 0,
-      "active": true,
       "x": 0,
       "width": 200
     }