show the status mark next to the submitted tag instead of at the bottom of the problem.

common/lib/capa/capa/inputtypes.py

@@ -980,7 +980,7 @@ class AnnotationInput(InputTypeBase):
         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()
-        self.return_to_annotation = True
+        self.return_to_annotation = True # return only works in conjunction with annotatable xmodule
 
         # Need to provide a value that JSON can parse if there is no
         # student-supplied value yet.

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

@@ -19,11 +19,23 @@
     <div class="block">${tag_prompt}</div>
     <ul class="tags">
     % for option in options:
-        <li><span class="tag
-        % if option['id'] in options_value:
-            selected
-        % endif
-        " data-id="${option['id']}">${option['description']}</span></li>
+        <li>
+            % if all([c == 'correct' for c in option['choice'], status]):
+            <span class="status correct" id="status_${id}"></span>
+            % elif all([c == 'partial' for c in option['choice'], status]):
+            <span class="status partially_correct" id="status_${id}">P</span>
+            % elif all([c == 'incorrect' for c in option['choice'], status]):
+            <span class="status incorrect" id="status_${id}"></span>
+            % endif
+
+            <span class="tag
+            % if option['id'] in options_value:
+                selected
+            % endif
+            " data-id="${option['id']}">
+                ${option['description']}
+            </span>
+        </li>
     % endfor
     </ul>
 
@@ -42,12 +54,6 @@
 
     % 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 == 'partial':
-    <span class="partially_correct" id="status_${id}">Partially Correct</span>
-    % elif status == 'incorrect':
-    <span class="incorrect" id="status_${id}"></span>
     % elif status == 'incomplete':
     <span class="incorrect" id="status_${id}"></span>
     % endif

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

@@ -842,16 +842,22 @@ section.problem {
       margin-left: 1em;
       li {
         display: block;
-        margin: 1em 0 0 1.5em;
-        span {
-          cursor: pointer;
+        margin: 1em 0 0 0;
+        position: relative;
+        .tag {
           display: inline-block;
-          padding: .25em .5em;
+          cursor: pointer;
           border: 1px solid rgb(102,102,102);
+          margin-left: 40px;
           &.selected {
             background-color: $yellow;
           }
         }
+        .status {
+          position: absolute;
+          left: 0;
+        }
+        .tag, .status { padding: .25em .5em; }
       }
     }
     textarea.comment { width: 100%; }