Initial template for edit a molecule input

common/lib/capa/capa/inputtypes.py

@@ -829,3 +829,32 @@ class DragAndDropInput(InputTypeBase):
 registry.register(DragAndDropInput)
 
 #--------------------------------------------------------------------------------------------------------------------
+
+
+class EditAMoleculeInput(InputTypeBase):
+    """
+    An input type for edit-a-molecule.  Integrates with the molecule editor java applet.
+
+    Example:
+
+    <editamolecule size="50"/>
+
+    options: size -- width of the textbox.
+    """
+
+    template = "editamolecule.html"
+    tags = ['editamoleculeinput']
+
+    @classmethod
+    def get_attributes(cls):
+        """
+        Can set size of text field.
+        """
+        return [Attribute('file'),]
+
+    def _extra_context(self):
+        """
+        """
+        return {'applet_loader': '/static/js/capa/edit_a_molecule.js',}
+
+registry.register(EditAMoleculeInput)

common/lib/capa/capa/templates/editamolecule.html

@@ -0,0 +1,36 @@
+<section id="editamoleculeinput_${id}" class="editamoleculeinput">
+    <div class="script_placeholder" data-src="${applet_loader}"/>
+
+    % if status == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif status == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif status == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif status == 'incomplete':
+    <div class="incorrect" id="status_${id}">
+    % endif
+
+  <input type="text" name="input_${id}" id="input_${id}" value="${value|h}"/>
+
+      <p class="status">
+        % if status == 'unsubmitted':
+        unanswered
+        % elif status == 'correct':
+        correct
+        % elif status == 'incorrect':
+        incorrect
+        % elif status == 'incomplete':
+        incomplete
+        % endif
+      </p>
+
+      <div id="input_${id}_preview" class="equation">
+      </div>
+      
+  <p id="answer_${id}" class="answer"></p>
+
+% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
+</div>
+% endif
+</section>