Merge pull request #404 from edx/lyla/templates

Adding a template for drag-and-drop.

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

@@ -0,0 +1,41 @@
+---
+metadata:
+    display_name: Drag and Drop
+    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. 
+       <customresponse>
+            <drag_and_drop_input img="https://studio.edx.org/c4x/edX/DemoX/asset/L9_buckets.png">
+                <draggable id="1" label="a"/>
+                <draggable id="2" label="cat"/>
+                <draggable id="3" label="there"/>
+                <draggable id="4" label="pear"/>
+                <draggable id="5" label="kitty"/>
+                <draggable id="6" label="in"/>
+                <draggable id="7" label="them"/>
+                <draggable id="8" label="za"/>
+                <draggable id="9" label="dog"/>
+                <draggable id="10" label="slate"/>
+                <draggable id="11" label="few"/>
+            </drag_and_drop_input>
+            <answer type="loncapa/python">
+            correct_answer = {
+                    '1':      [[70, 150], 121],
+                    '6':      [[190, 150], 121],
+                    '8':      [[190, 150], 121],
+                    '2':      [[310, 150], 121],
+                    '9':      [[310, 150], 121],
+                    '11':     [[310, 150], 121],
+                    '4':      [[420, 150], 121],
+                    '7':      [[420, 150], 121],
+                    '3':      [[550, 150], 121],
+                    '5':      [[550, 150], 121],
+                    '10':     [[550, 150], 121]}
+            if draganddrop.grade(submission[0], correct_answer):
+                correct = ['correct']
+            else:
+                correct = ['incorrect']
+            </answer>
+        </customresponse>
+    </problem>

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

@@ -4,19 +4,19 @@ metadata:
     markdown: !!null
 data: |
   <problem>
-  <p>
-  An image mapped input problem presents an image for the student.  Input is
-  given by the location of mouse clicks on the image. Correctness of input can be evaluated based on expected dimensions of a rectangle.
-  </p>
-
-  <p>Which object in this image is required by the fire code?</p>
-      <imageresponse>
-        <imageinput src="/static/images/firecode.jpg" width="640" height="480" rectangle="(365,42)-(423,66)" />
-      </imageresponse>
-      <solution>
-          <div class="detailed-solution">
-              <p>Explanation</p>
-              <p>The fire code requires that all exits be clearly marked, so the red exit sign is the correct answer.</p>
-          </div>
-      </solution>
+    <p>
+      An image mapped input problem presents an image for the student.
+      Input is given by the location of mouse clicks on the image.
+      Correctness of input can be evaluated based on expected dimensions of a rectangle.
+    </p>
+    <p>Which animal shown below is a kitten?</p>
+    <imageresponse>
+      <imageinput src="https://studio.edx.org/c4x/edX/DemoX/asset/Dog-and-Cat.jpg" width="640" height="400" rectangle="(385,98)-(600,337)"/>
+    </imageresponse>
+    <solution>
+      <div class="detailed-solution">
+        <p>Explanation</p>
+        <p>The animal on the right is a kitten. The animal on the left is a puppy, not a kitten.</p>
+      </div>
+    </solution>
   </problem>