From c5b86f3e81fdabd5e24493b893a22dbe8272ac63 Mon Sep 17 00:00:00 2001
From: Victor Shnayder <victor@edx.org>
Date: Mon, 7 Jan 2013 13:40:36 -0500
Subject: [PATCH] Initial template for edit a molecule input

---
 common/lib/capa/capa/inputtypes.py            | 29 +++++++++++++++
 .../capa/capa/templates/editamolecule.html    | 36 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 common/lib/capa/capa/templates/editamolecule.html

diff --git a/common/lib/capa/capa/inputtypes.py b/common/lib/capa/capa/inputtypes.py
index 0b0e86ce66..f0d9cddae5 100644
--- a/common/lib/capa/capa/inputtypes.py
+++ b/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)
diff --git a/common/lib/capa/capa/templates/editamolecule.html b/common/lib/capa/capa/templates/editamolecule.html
new file mode 100644
index 0000000000..75f723f82a
--- /dev/null
+++ b/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>