Added styling to the annotationinput capa problem.

common/lib/capa/capa/inputtypes.py

@@ -970,6 +970,7 @@ class AnnotationInput(InputTypeBase):
     def setup(self):
         xml = self.xml
 
+        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')
@@ -981,15 +982,15 @@ class AnnotationInput(InputTypeBase):
         for option in self.xml.findall('./options/option'):
             options.append({
                 'id': index,
-                'tag': option.text,
-                'description': option.get('description', ''),
+                'description': option.text,
                 'score': option.get('score', 0)
             })
             index += 1
         return options
 
     def _extra_context(self):
-        return {'text': self.text,
+        return {'title': self.title,
+                'text': self.text,
                 'comment_prompt': self.comment_prompt,
                 'tag_prompt': self.tag_prompt,
                 'options': self.options}

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 in options:
-          <p>${option['id']}, ${option['tag']}, ${option['description']}, ${option['score']}</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
+<div class="header">${title}</div>
+<div class="body">
+    <div class="prompt prompt-text">${text}</div>
+    <div class="prompt">${comment_prompt}</div>
+    <textarea id="input_${id}_comment" name="input_${id}_comment"/>
+    <div class="prompt">${tag_prompt}</div>
+    <ul class="tags">
+    % for option in options:
+          <li data-id="${option['id']}"><span>${option['description']}</span></li>
+    % endfor
+    </ul>
+
+    <!--
+
+    Value: ${value} <input type="text" style="" name="input_${id}" id="input_${id}"/>
+    TODO: make the textline hidden once it all works
+    <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
+
+    -->
+</div>
 </form>
 
 % if msg:

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

@@ -66,56 +66,57 @@
     .annotatable-discussion {
         display: none;
     }
-}
-.annotatable-problem {
+  .annotatable-problem {
     border: 1px solid #ccc;
     border-radius: 1em;
     margin: 0 0 1em 0;
-}
-.annotatable-problem-header {
+  }
+  .annotatable-problem-header {
     font-weight: bold;
     border-bottom: 1px solid #ccc;
     .annotatable-problem-index { font-weight: normal; }
-}
-.annotatable-problem-body {
+  }
+  .annotatable-problem-body {
     position: relative;
     textarea {
-        display: inline-block;
-        width: 55%;
-    } 
+      display: inline-block;
+      width: 55%;
+    }
     .annotatable-problem-prompt {
-        font-style: italic;
+      font-style: italic;
     }
     ul.annotatable-problem-tags {
-        display: block;
-        list-style-type: none;
-        margin: 1em 0;
-        padding: 0;
-        li {
-            cursor: pointer;
-            display: inline;
-            padding: .5em;
-            margin: 0 .5em 0 0;
-            background-color: #ccc;
-            border: 1px solid #000;
-            &.selected {
-              background-color: rgba(255,255,10,0.3);
-            }
+      display: block;
+      list-style-type: none;
+      margin: 1em 0;
+      padding: 0;
+      li {
+        cursor: pointer;
+        display: inline;
+        padding: .5em;
+        margin: 0 .5em 0 0;
+        background-color: #ccc;
+        border: 1px solid #000;
+        &.selected {
+          background-color: rgba(255,255,10,0.3);
         }
+      }
     }
-    .annotatable-problem-controls { 
-        display: inline-block;
-        margin: 0 4px 0 8px; 
+    .annotatable-problem-controls {
+      display: inline-block;
+      margin: 0 4px 0 8px;
     }
-}
-.annotatable-problem-footer {}
+  }
+  .annotatable-problem-footer {}
 
-.annotatable-problem-header, 
-.annotatable-problem-body,
-.annotatable-problem-footer {
+  .annotatable-problem-header,
+  .annotatable-problem-body,
+  .annotatable-problem-footer {
     padding: .5em 1em;
+  }
 }
 
+
 .ui-tooltip.qtip.ui-tooltip {
   font-size: $body-font-size;
   border: 1px solid #333;

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

@@ -802,4 +802,49 @@ section.problem {
         display: none; 
       }
   }
+
+  .annotation-input {
+    $yellow: rgba(255,255,10,0.3);
+
+    border: 1px solid #ccc;
+    border-radius: 1em;
+    margin: 0 0 1em 0;
+    .header {
+      font-weight: bold;
+      border-bottom: 1px solid #ccc;
+      padding: .5em 1em;
+    }
+    .body { padding: .5em 1em; }
+    .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 {
+      margin: .5em 0;
+      padding: 0;
+    }
+    ul.tags {
+      display: block;
+      list-style-type: none;
+      margin-left: 1em;
+      li {
+        display: block;
+        margin: 1em 0 0 1.5em;
+        span {
+          cursor: pointer;
+          display: inline-block;
+          padding: .25em .5em;
+          border: 1px solid rgb(102,102,102);
+          &.selected {
+            background-color: $yellow;
+          }
+        }
+      }
+    }
+    textarea { width: 100%; }
+  }
 }

common/static/js/capa/annotationinput.js

 (function () {
+    console.log('annotation input loaded: ', this);
     var update = function() {
              alert("o hi");
     };