Clicking "reply to annotation" scrolls to the problem (specified in xml by problem=index).

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

@@ -13,9 +13,8 @@
     % endfor
     </ul>
 
-    <!--
-
-    Value: ${value} <input type="text" style="" name="input_${id}" id="input_${id}"/>
+    <div style="display:none">
+    Value: ${value} <input type="text" name="input_${id}" id="input_${id}"/>
     TODO: make the textline hidden once it all works
     <span id="answer_${id}"></span>
 
@@ -28,8 +27,7 @@
     % elif status == 'incomplete':
     <span class="incorrect" id="status_${id}"></span>
     % endif
-
-    -->
+    </div>
 </div>
 </form>
 

common/lib/xmodule/xmodule/annotatable_module.py

@@ -50,16 +50,17 @@ class AnnotatableModule(XModule):
         }
 
     def _get_annotation_data_attr(self, index, el):
-        """ Returns a dict with the HTML data attributes to set on the annotation
-            and an XML key to delete from the element
+        """ Returns a dict in which the keys are the HTML data attributes
+            to set on the annotation element. Each data attribute has a
+            corresponding 'value' and (optional) '_delete' key to specify
+            an XML attribute to delete.
         """
 
+        data_attrs = {}
         attrs_map = {
             'body': 'data-comment-body',
-            'title': 'data-comment-title'
-        }
-        data_attrs = {
-            'data-span-id': { 'value': str(index) }
+            'title': 'data-comment-title',
+            'problem': 'data-problem-id'
         }
 
         for xml_key in attrs_map.keys():
@@ -68,6 +69,8 @@ class AnnotatableModule(XModule):
                 html_key = attrs_map[xml_key]
                 data_attrs[html_key] = { 'value': value, '_delete': xml_key }
 
+        data_attrs['data-span-id'] = { 'value': str(index) }
+
         return data_attrs
 
     def _render_content(self):
@@ -78,9 +81,7 @@ class AnnotatableModule(XModule):
 
         index = 0
         for el in xmltree.findall('.//annotation'):
-            index += 1
-
-            el.tag = 'div'
+            el.tag = 'span'
 
             attr = {}
             attr.update(self._get_annotation_class_attr(index, el))
@@ -90,6 +91,7 @@ class AnnotatableModule(XModule):
                 if '_delete' in attr[key]:
                     delete_key = attr[key]['_delete']
                     del el.attrib[delete_key]
+            index += 1
 
         return etree.tostring(xmltree, encoding='unicode')
 

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

 class @Annotatable
-    @_debug: true
+    _debug: true
 
     wrapperSelector: '.annotatable-wrapper'
     toggleSelector:  '.annotatable-toggle'
@@ -7,6 +7,7 @@ class @Annotatable
     replySelector:   '.annotatable-reply'
     helpSelector:    '.annotatable-help-icon'
     returnSelector:  '.annotatable-return'
+    problemSelector: 'section.problem'
 
     discussionXModuleSelector: '.xmodule_DiscussionModule'
     discussionSelector:        '.discussion-module'
@@ -76,38 +77,37 @@ class @Annotatable
 
     onClickReply: (e) =>
         e.preventDefault()
-
-        problem_el = @getProblemEl e.currentTarget
-        if problem_el.length == 1
-            @scrollTo(problem_el, @afterScrollToProblem)
-        else
-            console.log 'Problem not found! Event: ', e
+        offset = -20
+        el = @getProblem e.currentTarget
+        @scrollTo(el, @afterScrollToProblem, offset)
 
     onClickReturn: (e) =>
         e.preventDefault()
-
-        el = @getSpan e.currentTarget
         offset = -200
-
+        el = @getSpan e.currentTarget
         @scrollTo(el, @afterScrollToSpan, offset)
 
     getSpan: (el) ->
         span_id = @getSpanId(el)
         @$(@spanSelector).filter("[data-span-id='#{span_id}']")
 
-    getDiscussion: (el) ->
+    getProblem: (el) ->
+        problem_id = parseInt(@getProblemId(el), 10)
+        if isNaN(problem_id)
+            console.log 'invalid problem identifier' if @_debug
+            return $()
+        return $(@problemSelector).eq(problem_id - 1)
+    
+    getDiscussion: () ->
         discussion_id = @getDiscussionId()
         $(@discussionXModuleSelector).find(@discussionSelector).filter("[data-discussion-id='#{discussion_id}']")
 
-    getProblem: (el) ->
-        el # TODO
+    getSpanId: (el) ->
+        $(el).data('span-id')
 
     getProblemId: (el) ->
         $(el).data('problem-id')
         
-    getSpanId: (el) ->
-        $(el).data('span-id')
-        
     getDiscussionId: () ->
         @$(@wrapperSelector).data('discussion-id')
 
@@ -152,7 +152,8 @@ class @Annotatable
         (api) =>
             text = $(el).data('comment-body')
             comment = @createCommentEl(text)
-            reply = @createReplyLink('dummy-problem-id')
+            problem_id = @getProblemId(el)
+            reply = @createReplyLink(problem_id)
             $(comment).add(reply)
 
     makeTipTitle: (el) ->

common/static/js/capa/annotationinput.js

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