updated drag and drop files

common/lib/capa/capa/inputtypes.py

@@ -13,6 +13,9 @@ Module containing the problem elements which render into input objects
 - imageinput  (for clickable image)
 - optioninput (for option list)
 - filesubmission (upload a file)
+- crystallography
+- vsepr_input
+- drag_and_drop
 
 These are matched by *.html files templates/*.html which are mako templates with the
 actual html.
@@ -782,4 +785,29 @@ class OpenEndedInput(InputTypeBase):
 
 registry.register(OpenEndedInput)
 
-#-----------------------------------------------------------------------------
+# -------------------------------------------------------------------------
+
+
+class DragAndDropInput(InputTypeBase):
+    """
+    Input for molecular geometry--show possible structures, let student
+    pick structure and label positions with atoms or electron pairs.
+    """
+
+    template = 'drag_and_drop.html'
+    tags = ['drag_and_drop_input']
+
+    @classmethod
+    def get_attributes(cls):
+        """
+        Note: height, width are required.
+        """
+        return [Attribute('height'),
+                Attribute('width'),
+                Attribute('template'),
+                Attribute('images'),
+                ]
+
+registry.register(DragAndDropInput)
+
+#--------------------------------------------------------------------------------------------------------------------

common/lib/capa/capa/templates/drag_and_drop_input.html

@@ -1,6 +1,7 @@
 <section id="inputtype_${id}" class="capa_inputtype" >
     <div class="drag_and_drop_problem" id="drag_and_drop_div_${id}"
-    style="width:${width};height:${height}"></div>
+    style="width:${width};height:${height}"
+    data-template="${template}" data-images="${images}"></div>
 
     <div class="script_placeholder" data-src="/static/js/raphael.js"></div>
 
@@ -15,7 +16,8 @@
     % endif
 
 
-    <input type="text" name="input_${id}" id="input_${id}" value="${value|h}" style="display:none;"/>
+    <input type="text" name="input_${id}" id="input_${id}" value="${value|h}"
+    style="display:none;"/>
 
     <p class="status">
         % if status == 'unsubmitted':

common/lib/capa/capa/tests/test_inputtypes.py

@@ -9,7 +9,7 @@ TODO:
 - check rendering -- e.g. msg should appear in the rendered output.  If possible, test that
   templates are escaping things properly.
 
-  
+
 - test unicode in values, parameters, etc.
 - test various html escapes
 - test funny xml chars -- should never get xml parse error if things are escaped properly.
@@ -501,3 +501,43 @@ class ChemicalEquationTest(unittest.TestCase):
                     }
         self.assertEqual(context, expected)
 
+
+class DragAndDropTest(unittest.TestCase):
+    '''
+    Check that drag and drop inputs work
+    '''
+
+    def test_rendering(self):
+        height = '12'
+        width = '33'
+        template = "path to template"
+        images = "path to images"
+
+        xml_str = """<drag_and_drop id="prob_1_2"
+        height="{h}"
+        width="{w}"
+        template="{t}"
+        images="{i}"
+        />""".format(h=height, w=width, t=template, i=images)
+
+        element = etree.fromstring(xml_str)
+
+        value = 'abc'
+        state = {'value': value,
+                 'status': 'unsubmitted'}
+
+        the_input = lookup_tag('drag_and_drop')(test_system, element, state)
+
+        context = the_input._get_render_context()
+
+        expected = {'id': 'prob_1_2',
+                    'value': value,
+                    'status': 'unsubmitted',
+                    'msg': '',
+                    'width': width,
+                    'height': height,
+                    'template': template,
+                    'images': images,
+                   }
+
+        self.assertEqual(context, expected)