added save and render functionality to annotationinput

common/lib/capa/capa/inputtypes.py

@@ -972,13 +972,14 @@ class AnnotationInput(InputTypeBase):
 
         self.title = xml.findtext('./title', 'Annotation Exercise')
         self.text = xml.findtext('./text')
-        self.comment_prompt = xml.findtext('./comment_prompt')
-        self.tag_prompt = xml.findtext('./tag_prompt')
+        self.comment = xml.findtext('./comment')
+        self.comment_prompt = xml.findtext('./comment_prompt', 'Type a commentary below:')
+        self.tag_prompt = xml.findtext('./tag_prompt', 'Select one or more tags:')
         self.options = self._find_options()
 
         # Need to provide a value that JSON can parse if there is no
         # student-supplied value yet.
-        if self.value == "":
+        if self.value == '':
             self.value = 'null'
 
     def _find_options(self):
@@ -993,12 +994,37 @@ class AnnotationInput(InputTypeBase):
             index += 1
         return options
 
+    def _unpack_value(self):
+        unpacked_value = json.loads(self.value)
+        if type(unpacked_value) != dict:
+            unpacked_value = {}
+
+        comment_value = unpacked_value.get('comment', '')
+        if not isinstance(comment_value, basestring):
+            comment_value = ''
+
+        options_value = unpacked_value.get('options', [])
+        if not isinstance(options_value, list):
+            options_value = []
+
+        return {
+            'options_value': options_value,
+            'comment_value': comment_value
+        }
+
     def _extra_context(self):
-        return {'title': self.title,
+        extra_context = {
+                'title': self.title,
                 'text': self.text,
+                'comment': self.comment,
                 'comment_prompt': self.comment_prompt,
                 'tag_prompt': self.tag_prompt,
-                'options': self.options}
+                'options': self.options,
+         }
+        unpacked_value = self._unpack_value()
+        extra_context.update(unpacked_value)
+
+        return extra_context
 
 registry.register(AnnotationInput)
 

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

@@ -3,20 +3,30 @@
 
 <div class="annotation-header">${title}</div>
 <div class="annotation-body">
-    <div class="prompt prompt-text">${text}</div>
-    <div class="prompt">${comment_prompt}</div>
-    <textarea class="comment" id="input_${id}_comment" name="input_${id}_comment"/>
-    <div class="prompt">${tag_prompt}</div>
+
+    <div class="block block-highlight">${text}</div>
+    <div class="block block-comment">${comment}</div>
+
+    <div class="block">${comment_prompt}</div>
+    <textarea class="comment" id="input_${id}_comment" name="input_${id}_comment">${comment_value|h}</textarea>
+
+    <div class="block">${tag_prompt}</div>
     <ul class="tags">
     % for option in options:
-          <li><span class="tag" data-id="${option['id']}">${option['description']}</span></li>
+        <li><span class="tag
+        % if option['id'] in options_value:
+            selected
+        % endif
+        " data-id="${option['id']}">${option['description']}</span></li>
     % endfor
     </ul>
 
-    <div style="display:block">
-        Value: ${value}
-        <br/><input type="text" class="value" name="input_${id}" id="input_${id}" value="${value}" size="75"/>
-        <br/>TODO: make the textline hidden once it all works
+    <div class="debug-value">
+        Rendered Value: <pre>${value}</pre><br/>
+        Input Value:<br/><input type="text" class="value" name="input_${id}" id="input_${id}" value="${value|h}" size="75"/>
+        <br/><em>Hide this value input box when it's all working!!!</em>
+    </div>
+
     <span id="answer_${id}"></span>
 
     % if status == 'unsubmitted':
@@ -28,7 +38,8 @@
     % elif status == 'incomplete':
     <span class="incorrect" id="status_${id}"></span>
     % endif
-    </div>
+
+
 
     <a class="annotation-return" href="javascript:void(0)">Return to Annotation</a><br/>
 </div>

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -809,6 +809,7 @@ section.problem {
     border: 1px solid #ccc;
     border-radius: 1em;
     margin: 0 0 1em 0;
+
     .annotation-header {
       font-weight: bold;
       border-bottom: 1px solid #ccc;
@@ -817,18 +818,20 @@ section.problem {
     .annotation-body { padding: .5em 1em; }
     .annotation-return { float: right; }
     .annotation-return:after { content: " \2191" }
-    .prompt { font-style: italic; }
-    .prompt.prompt-text {
-      padding: .5em;
-      color:  #333;
-      background-color: $yellow;
-      font-style: normal;
-      border: 1px solid darken($yellow, 10%);
-    }
-    .prompt, ul.tags {
+
+    .block, ul.tags {
       margin: .5em 0;
       padding: 0;
     }
+    .block-highlight {
+      padding: .5em;
+      color:  #333;
+      font-style: normal;
+      background-color: $yellow;
+      border: 1px solid darken($yellow, 10%);
+    }
+    .block-comment { font-style: italic; }
+
     ul.tags {
       display: block;
       list-style-type: none;
@@ -847,6 +850,14 @@ section.problem {
         }
       }
     }
-    textarea { width: 100%; }
+    textarea.comment { width: 100%; }
+    .debug-value {
+        color: #fff;
+        padding: 1em;
+        margin: 1em 0;
+        background-color: #999;
+        border: 1px solid #000;
+        pre { background-color: #CCC; color: #000; }
+    }
   }
 }