Merge branch 'feature/victor/annotation-input' into feature/abarrett/annotatable_xmodule

common/lib/capa/capa/inputtypes.py

@@ -909,15 +909,15 @@ registry.register(DesignProtein2dInput)
 class EditAGeneInput(InputTypeBase):
     """
         An input type for editing a gene. Integrates with the genex java applet.
-        
+
         Example:
-        
+
         <editagene width="800" hight="500" dna_sequence="ETAAGGCTATAACCGA" />
         """
-    
+
     template = "editageneinput.html"
     tags = ['editageneinput']
-    
+
     @classmethod
     def get_attributes(cls):
         """
@@ -927,15 +927,58 @@ class EditAGeneInput(InputTypeBase):
                 Attribute('height'),
                 Attribute('dna_sequence')
                 ]
-    
+
     def _extra_context(self):
         """
             """
         context = {
             'applet_loader': '/static/js/capa/edit-a-gene.js',
         }
-        
+
         return context
 
 registry.register(EditAGeneInput)
 
+#---------------------------------------------------------------------
+
+class AnnotationInput(InputTypeBase):
+    """
+    Input type for annotations / tags: students can enter some notes or other text
+    (currently ungraded), and then choose from a set of tags, which are graded.
+
+    Example:
+
+    <annotationinput>
+    <text>Dr Seuss uses colors!  How?</text>
+    <comment_prompt>Write down some notes:</comment_prompt>
+    <tag_prompt>Now pick the right color</tag_prompt>
+    <options>
+      <option score="0">blue -- color of grass</option>
+      <option score="1">ham -- color of grass</option>
+      <option score="2">green -- color of grass</option>
+    </options>
+    </annotationinput>
+
+    <text>The location of the sky</text>
+
+    # TODO: allow ordering to be randomized
+    """
+
+    template = "annotationinput.html"
+    tags = ['annotationinput']
+
+    def setup(self):
+        # Pull out all the things from the xml
+        self.text = 'text'
+        self.comment_prompt = 'comment_prompt'
+        self.tag_prompt = 'tag_prompt'
+        self.options = [(0, 'blue'), (1, 'green'), (2, 'red')]
+
+    def _extra_context(self):
+        return {'text': self.text,
+                'comment_prompt': self.comment_prompt,
+                'tag_prompt': self.tag_prompt,
+                'options': self.options}
+
+registry.register(AnnotationInput)
+

common/lib/capa/capa/responsetypes.py

@@ -882,7 +882,8 @@ def sympy_check2():
     allowed_inputfields = ['textline', 'textbox', 'crystallography',
                             'chemicalequationinput', 'vsepr_input',
                             'drag_and_drop_input', 'editamoleculeinput',
-                            'designprotein2dinput', 'editageneinput']
+                            'designprotein2dinput', 'editageneinput',
+                            'annotationinput']
 
     def setup_response(self):
         xml = self.xml

common/lib/capa/capa/templates/annotationinput.html

+<form class="annotation-input">
+TODO: make the textline hidden once it all works
+<div class="script_placeholder" data-src="/static/js/capa/annotationinput.js"/>
+
+<p>Text: ${text}</p>
+
+<p>Comment prompt: ${comment_prompt}</p>
+
+<textarea id="input_${id}_comment" name="input_${id}_comment"/>
+
+<p>Tag prompt: ${tag_prompt}</p>
+
+<input type="text" style="" name="input_${id}" id="input_${id}"/>
+
+Value: ${value}
+
+      % for option_id, option_description in options:
+          <p>${option_id}, ${option_description}</p>
+      % endfor
+
+  <span id="answer_${id}"></span>
+
+  % if status == 'unsubmitted':
+  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+  % elif status == 'correct': 
+  <span class="correct" id="status_${id}"></span>
+  % elif status == 'incorrect':
+  <span class="incorrect" id="status_${id}"></span>
+  % elif status == 'incomplete':
+  <span class="incorrect" id="status_${id}"></span>
+  % endif
+</form>
+
+% if msg:
+<span class="message">${msg|n}</span>
+% endif
+

common/static/js/capa/annotationinput.js

+(function () {
+    var update = function() {
+             alert("o hi");
+    };
+
+    var inputs = $('.annotation-input input');
+    // update on load
+    inputs.each(update); 
+    // and on every change
+    inputs.bind("input", update);
+}).call(this);