more refactoring and work on annotationinput (should be working now).

common/lib/capa/capa/inputtypes.py

@@ -949,7 +949,9 @@ class AnnotationInput(InputTypeBase):
     Example:
 
     <annotationinput>
+    <title>Annotation Exercise</title>
     <text>Dr Seuss uses colors!  How?</text>
+    <comment>Why does Dr Seuss use colors!?</comment>
     <comment_prompt>Write down some notes:</comment_prompt>
     <tag_prompt>Now pick the right color</tag_prompt>
     <options>
@@ -970,6 +972,8 @@ class AnnotationInput(InputTypeBase):
     def setup(self):
         xml = self.xml
 
+        self.debug = False # set to True to display extra debug info with input
+
         self.title = xml.findtext('./title', 'Annotation Exercise')
         self.text = xml.findtext('./text')
         self.comment = xml.findtext('./comment')
@@ -1020,6 +1024,7 @@ class AnnotationInput(InputTypeBase):
                 'comment_prompt': self.comment_prompt,
                 'tag_prompt': self.tag_prompt,
                 'options': self.options,
+                'debug': self.debug
          }
         unpacked_value = self._unpack_value()
         extra_context.update(unpacked_value)

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

@@ -21,11 +21,16 @@
     % endfor
     </ul>
 
+    % if debug:
     <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>
+        Rendered with value:<br/>
+        <pre>${value}</pre>
+        Current input value:<br/>
+        <input type="text" class="value" name="input_${id}" id="input_${id}" value="${value|h}" />
     </div>
+    % else:
+        <input type="hidden" class="value" name="input_${id}" id="input_${id}" value="${value|h}" />
+    % endif
 
     <span id="answer_${id}"></span>
 
@@ -39,8 +44,6 @@
     <span class="incorrect" id="status_${id}"></span>
     % endif
 
-
-
     <a class="annotation-return" href="javascript:void(0)">Return to Annotation</a><br/>
 </div>
 </form>

common/lib/xmodule/xmodule/annotatable_module.py

@@ -1,7 +1,4 @@
-import pprint
-import json
 import logging
-import re
 
 from lxml import etree
 from pkg_resources import resource_string, resource_listdir
@@ -12,9 +9,6 @@ from xmodule.modulestore.mongo import MongoModuleStore
 from xmodule.modulestore.django import modulestore
 from xmodule.contentstore.content import StaticContent
 
-import datetime
-import time
-
 log = logging.getLogger(__name__)
 
 class AnnotatableModule(XModule):
@@ -99,7 +93,6 @@ class AnnotatableModule(XModule):
             'display_name': self.display_name,
             'element_id': self.element_id,
             'discussion_id': self.discussion_id,
-            'help_text': self.help_text,
             'content_html': self._render_content()
         }
 
@@ -111,18 +104,13 @@ class AnnotatableModule(XModule):
                          instance_state, shared_state, **kwargs)
 
         xmltree = etree.fromstring(self.definition['data'])
-        root_attr = {}
-        for key in ('discussion', 'help_text'):
-            if key in xmltree.attrib:
-                root_attr[key] = xmltree.get(key)
-                del xmltree.attrib[key]
-
+        self.discussion_id = xmltree.get('discussion', '')
+        del xmltree.attrib['discussion']
         self.content = etree.tostring(xmltree, encoding='unicode')
         self.element_id = self.location.html_id()
-        self.discussion_id = root_attr['discussion']
-        self.help_text = root_attr['help_text']
 
 class AnnotatableDescriptor(RawDescriptor):
     module_class = AnnotatableModule
     stores_state = True
-    template_dir_name = "annotatable"
+    template_dir_name = "annotatable"
+

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

@@ -13,18 +13,7 @@
     border-radius: 3px;
     .annotatable-toggle {
       position: absolute;
-      right: 30px;
-    }
-    .annotatable-help-icon {
-      display: block;
-      position: absolute;
-      top: 0;
       right: 0;
-      width: 17px;
-      height: 17px;
-      background: url(../images/info-icon.png) no-repeat;
-    }
-    .annotatable-toggle, .annotatable-help-icon {
       margin: 2px 7px 2px 0;
     }
   }

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

@@ -857,7 +857,15 @@ section.problem {
         margin: 1em 0;
         background-color: #999;
         border: 1px solid #000;
+        input[type="text"] { width: 100%; }
         pre { background-color: #CCC; color: #000; }
+        &:before {
+          display: block;
+          content: "debug input value";
+          text-transform: uppercase;
+          font-weight: bold;
+          font-size: 1.5em;
+        }
     }
   }
 }

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

@@ -5,7 +5,6 @@ class @Annotatable
     toggleSelector:  '.annotatable-toggle'
     spanSelector:    '.annotatable-span'
     replySelector:   '.annotatable-reply'
-    helpSelector:    '.annotatable-help-icon'
 
     problemXModuleSelector: '.xmodule_CapaModule'
     problemSelector: 'section.problem'
@@ -48,20 +47,9 @@ class @Annotatable
   
     initTips: () ->
         @savedTips = []
-
-        # Adds a tooltip to each annotation span to display the instructor prompt
         @$(@spanSelector).each (index, el) =>
             $(el).qtip(@getTipOptions el)
 
-        @$(@helpSelector).qtip
-            position:
-                my: 'right top'
-                at: 'bottom left'
-                container: @$(@wrapperSelector)
-            content:
-                title: 'Instructions'
-                text: true # use title attribute of this element
-
     getTipOptions: (el) ->
         content:
             title:

lms/templates/annotatable.html

@@ -1,13 +1,12 @@
 <div class="annotatable-wrapper" data-discussion-id="${discussion_id}">
 	<div class="annotatable-header">
 		% if display_name is not UNDEFINED and display_name is not None:
-		  <div class="annotatable-title">${display_name} </div>
+		  <div class="annotatable-title">${display_name}</div>
 		% endif
 		<div class="annotatable-description">
-                Guided Discussion
-				<a class="annotatable-toggle" href="javascript:void(0)">Hide Annotations</a>
-                <div class="annotatable-help-icon" title="${help_text}"></div>
+            Guided Discussion 
+            <a class="annotatable-toggle" href="javascript:void(0)">Hide Annotations</a>
         </div>
 	</div>
 	<div class="annotatable-content">${content_html}</div>
-</div>
+</div>

lms/templates/annotatable_problem.html

@@ -1,23 +0,0 @@
-<%def name="render_problem(problem,index,total)">
-<div class="annotatable-problem" data-problem-id="${problem['problem_id']}">
-    <div class="annotatable-problem-header">
-        Classification Exercise: <span class="annotatable-problem-index">(${index + 1} / ${total}) </span>
-    </div>
-    <div class="annotatable-problem-body">
-        <div class="annotatable-problem-prompt">${problem['prompt']}</div>
-        <ul class="annotatable-problem-tags">
-            % for tag in problem['tags']:
-            <li>${tag['name']}</li>
-            % endfor
-        </ul>
-        Explain the rationale for your tag selections:<br/>
-        <textarea></textarea>
-        <div class="annotatable-problem-controls">
-            <button class="button annotatable-problem-save">Save</button>
-            <button class="button annotatable-problem-submit">Submit</button>
-        </div>
-    </div>
-    <div class="annotatable-problem-footer">
-    </div>
-</div>
-</%def>