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

+---
+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

@@ -5,18 +5,18 @@ metadata:
 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.
+      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>
+    <p>Which animal shown below is a kitten?</p>
     <imageresponse>
-        <imageinput src="/static/images/firecode.jpg" width="640" height="480" rectangle="(365,42)-(423,66)" />
+      <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 fire code requires that all exits be clearly marked, so the red exit sign is the correct answer.</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>