Merge pull request #1855 from edx/anton/add-dnd-template

Add additional example of DnD.

CHANGELOG.rst

@@ -5,6 +5,9 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Add template that displays the most up-to-date features of
+drag-and-drop. BLD-479.
+
 Blades: LTI additional Python tests. LTI fix bug e-reader error when popping
 out window. BLD-465.
 

common/lib/xmodule/xmodule/templates/problem/drag_and_drop.yaml

@@ -4,7 +4,7 @@ metadata:
     markdown: !!null
 data: |
     <problem>
-        Here's an example of a "Drag and Drop" question set. Click and drag each word in the scrollbar below, up to the numbered bucket which matches the number of letters in the word. 
+      Here's an example of a "Drag and Drop" question set. Click and drag each word in the scrollbar below, up to the numbered bucket which matches the number of letters in the word.
        <customresponse>
             <drag_and_drop_input img="https://studio.edx.org/c4x/edX/DemoX/asset/L9_buckets.png">
                 <draggable id="1" label="a"/>
@@ -38,4 +38,36 @@ data: |
         correct = ['incorrect']
             </answer>
         </customresponse>
+        <customresponse>
+            <text>
+                <h2>Drag and Drop with Outline</h2>
+                <p>Please label hydrogen  atoms connected with left carbon atom.</p>
+            </text>
+            <drag_and_drop_input img="https://studio.edx.org/c4x/edX/DemoX/asset/ethglycol.jpg" target_outline="true" one_per_target="true" no_labels="true" label_bg_color="rgb(222, 139, 238)">
+                <draggable id="1" label="Hydrogen" />
+                <draggable id="2" label="Hydrogen" />
+
+                <target id="t1_o" x="10" y="67" w="100" h="100"/>
+                <target id="t2" x="133" y="3" w="70" h="70"/>
+                <target id="t3" x="2" y="384" w="70" h="70"/>
+                <target id="t4" x="95" y="386" w="70" h="70"/>
+                <target id="t5_c" x="94" y="293" w="91" h="91"/>
+                <target id="t6_c" x="328" y="294" w="91" h="91"/>
+                <target id="t7" x="393" y="463" w="70" h="70"/>
+                <target id="t8" x="344" y="214" w="70" h="70"/>
+                <target id="t9_o" x="445" y="162" w="100" h="100"/>
+                <target id="t10" x="591" y="132" w="70" h="70"/>
+            </drag_and_drop_input>
+            <answer type="loncapa/python">
+    correct_answer = [{
+        'draggables': ['1', '2'],
+        'targets': ['t2', 't3', 't4' ],
+        'rule':'anyof'
+    }]
+    if draganddrop.grade(submission[0], correct_answer):
+        correct = ['correct']
+    else:
+        correct = ['incorrect']
+            </answer>
+        </customresponse>
     </problem>