Merge pull request #982 from MITx/feature/victor/inputtypes-refactor

Feature/victor/inputtypes refactor
- addressed comments and added a few TODOs.  Merging.

common/lib/capa/capa/capa_problem.py

@@ -38,6 +38,7 @@ import calc
 from correctmap import CorrectMap
 import eia
 import inputtypes
+import customrender
 from util import contextualize_text, convert_files_to_filenames
 import xqueue_interface
 
@@ -47,23 +48,8 @@ import responsetypes
 # dict of tagname, Response Class -- this should come from auto-registering
 response_tag_dict = dict([(x.response_tag, x) for x in responsetypes.__all__])
 
-# Different ways students can input code
-entry_types = ['textline',
-               'schematic',
-               'textbox',
-               'imageinput',
-               'optioninput',
-               'choicegroup',
-               'radiogroup',
-               'checkboxgroup',
-               'filesubmission',
-               'javascriptinput',
-               'crystallography',
-               'chemicalequationinput',
-               'vsepr_input']
-
 # extra things displayed after "show answers" is pressed
-solution_types = ['solution']
+solution_tags = ['solution']
 
 # these get captured as student responses
 response_properties = ["codeparam", "responseparam", "answer"]
@@ -309,7 +295,7 @@ class LoncapaProblem(object):
             answer_map.update(results)
 
         # include solutions from <solution>...</solution> stanzas
-        for entry in self.tree.xpath("//" + "|//".join(solution_types)):
+        for entry in self.tree.xpath("//" + "|//".join(solution_tags)):
             answer = etree.tostring(entry)
             if answer:
                 answer_map[entry.get('id')] = contextualize_text(answer, self.context)
@@ -487,7 +473,7 @@ class LoncapaProblem(object):
 
         problemid = problemtree.get('id')    # my ID
 
-        if problemtree.tag in inputtypes.registered_input_tags():
+        if problemtree.tag in inputtypes.registry.registered_tags():
             # If this is an inputtype subtree, let it render itself.
             status = "unsubmitted"
             msg = ''
@@ -513,7 +499,7 @@ class LoncapaProblem(object):
                                 'hint': hint,
                                 'hintmode': hintmode,}}
 
-            input_type_cls = inputtypes.get_class_for_tag(problemtree.tag)
+            input_type_cls = inputtypes.registry.get_class_for_tag(problemtree.tag)
             the_input = input_type_cls(self.system, problemtree, state)
             return the_input.get_html()
 
@@ -521,9 +507,15 @@ class LoncapaProblem(object):
         if problemtree in self.responders:
             return self.responders[problemtree].render_html(self._extract_html)
 
+        # let each custom renderer render itself:
+        if problemtree.tag in customrender.registry.registered_tags():
+            renderer_class = customrender.registry.get_class_for_tag(problemtree.tag)
+            renderer = renderer_class(self.system, problemtree)
+            return renderer.get_html()
+
+        # otherwise, render children recursively, and copy over attributes
         tree = etree.Element(problemtree.tag)
         for item in problemtree:
-            # render child recursively
             item_xhtml = self._extract_html(item)
             if item_xhtml is not None:
                     tree.append(item_xhtml)
@@ -560,11 +552,12 @@ class LoncapaProblem(object):
             response_id += 1
 
             answer_id = 1
+            input_tags = inputtypes.registry.registered_tags()
             inputfields = tree.xpath("|".join(['//' + response.tag + '[@id=$id]//' + x
-                                               for x in (entry_types + solution_types)]),
+                                               for x in (input_tags + solution_tags)]),
                                     id=response_id_str)
 
-            # assign one answer_id for each entry_type or solution_type
+            # assign one answer_id for each input type or solution type
             for entry in inputfields:
                 entry.attrib['response_id'] = str(response_id)
                 entry.attrib['answer_id'] = str(answer_id)

common/lib/capa/capa/customrender.py

+"""
+This has custom renderers: classes that know how to render certain problem tags (e.g. <math> and
+<solution>) to html.
+
+These tags do not have state, so they just get passed the system (for access to render_template),
+and the xml element.
+"""
+
+from registry import TagRegistry
+
+import logging
+import re
+import shlex  # for splitting quoted strings
+import json
+
+from lxml import etree
+import xml.sax.saxutils as saxutils
+from registry import TagRegistry
+
+log = logging.getLogger('mitx.' + __name__)
+
+registry = TagRegistry()
+
+#-----------------------------------------------------------------------------
+class MathRenderer(object):
+    tags = ['math']
+
+    def __init__(self, system, xml):
+        '''
+        Render math using latex-like formatting.
+
+        Examples:
+
+        <math>$\displaystyle U(r)=4 U_0 $</math>
+        <math>$r_0$</math>
+
+        We convert these to [mathjax]...[/mathjax] and [mathjaxinline]...[/mathjaxinline]
+
+        TODO: use shorter tags (but this will require converting problem XML files!)
+        '''
+        self.system = system
+        self.xml = xml
+
+        mathstr = re.sub('\$(.*)\$', r'[mathjaxinline]\1[/mathjaxinline]', xml.text)
+        mtag = 'mathjax'
+        if not r'\displaystyle' in mathstr:
+            mtag += 'inline'
+        else:
+            mathstr = mathstr.replace(r'\displaystyle', '')
+        self.mathstr = mathstr.replace('mathjaxinline]', '%s]' % mtag)
+
+
+    def get_html(self):
+        """
+        Return the contents of this tag, rendered to html, as an etree element.
+        """
+        # TODO: why are there nested html tags here??  Why are there html tags at all, in fact?
+        html = '<html><html>%s</html><html>%s</html></html>' % (
+            self.mathstr, saxutils.escape(self.xml.tail))
+        try:
+            xhtml = etree.XML(html)
+        except Exception as err:
+            if self.system.DEBUG:
+                msg = '<html><div class="inline-error"><p>Error %s</p>' % (
+                    str(err).replace('<', '&lt;'))
+                msg += ('<p>Failed to construct math expression from <pre>%s</pre></p>' %
+                        html.replace('<', '&lt;'))
+                msg += "</div></html>"
+                log.error(msg)
+                return etree.XML(msg)
+            else:
+                raise
+        return xhtml
+
+
+registry.register(MathRenderer)
+
+#-----------------------------------------------------------------------------
+
+class SolutionRenderer(object):
+    '''
+    A solution is just a <span>...</span> which is given an ID, that is used for displaying an
+    extended answer (a problem "solution") after "show answers" is pressed.
+
+    Note that the solution content is NOT rendered and returned in the HTML. It is obtained by an
+    ajax call.
+    '''
+    tags = ['solution']
+
+    def __init__(self, system, xml):
+        self.system = system
+        self.id = xml.get('id')
+
+    def get_html(self):
+        context = {'id': self.id}
+        html = self.system.render_template("solutionspan.html", context)
+        return etree.XML(html)
+
+registry.register(SolutionRenderer)
+

common/lib/capa/capa/registry.py

+class TagRegistry(object):
+    """
+    A registry mapping tags to handlers.
+
+    (A dictionary with some extra error checking.)
+    """
+    def __init__(self):
+        self._mapping = {}
+
+    def register(self, cls):
+        """
+        Register cls as a supported tag type.  It is expected to define cls.tags as a list of tags
+        that it implements.
+
+        If an already-registered type has registered one of those tags, will raise ValueError.
+
+        If there are no tags in cls.tags, will also raise ValueError.
+        """
+
+        # Do all checks and complain before changing any state.
+        if len(cls.tags) == 0:
+            raise ValueError("No tags specified for class {0}".format(cls.__name__))
+
+        for t in cls.tags:
+            if t in self._mapping:
+                other_cls = self._mapping[t]
+                if cls == other_cls:
+                    # registering the same class multiple times seems silly, but ok
+                    continue
+                raise ValueError("Tag {0} already registered by class {1}."
+                                 " Can't register for class {2}"
+                                     .format(t, other_cls.__name__, cls.__name__))
+
+        # Ok, should be good to change state now.
+        for t in cls.tags:
+            self._mapping[t] = cls
+
+    def registered_tags(self):
+        """
+        Get a list of all the tags that have been registered.
+        """
+        return self._mapping.keys()
+
+    def get_class_for_tag(self, tag):
+        """
+        For any tag in registered_tags(), returns the corresponding class.  Otherwise, will raise
+        KeyError.
+        """
+        return self._mapping[tag]

common/lib/capa/capa/templates/choicegroup.html

 <form class="choicegroup capa_inputtype" id="inputtype_${id}">
   <div class="indicator_container">
-    % if state == 'unsubmitted':
+    % if status == 'unsubmitted':
     <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-    % elif state == 'correct': 
+    % elif status == 'correct': 
     <span class="correct" id="status_${id}"></span>
-    % elif state == 'incorrect':
+    % elif status == 'incorrect':
     <span class="incorrect" id="status_${id}"></span>
-    % elif state == 'incomplete':
+    % elif status == 'incomplete':
     <span class="incorrect" id="status_${id}"></span>
     % endif
   </div>

common/lib/capa/capa/templates/textbox.html → common/lib/capa/capa/templates/codeinput.html

@@ -6,13 +6,13 @@
   >${value|h}</textarea>
 
   <div class="grader-status">
-    % if state == 'unsubmitted':
+    % if status == 'unsubmitted':
       <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
-    % elif state == 'correct':
+    % elif status == 'correct':
       <span class="correct" id="status_${id}">Correct</span>
-    % elif state == 'incorrect':
+    % elif status == 'incorrect':
       <span class="incorrect" id="status_${id}">Incorrect</span>
-    % elif state == 'queued':
+    % elif status == 'queued':
       <span class="processing" id="status_${id}">Queued</span>
       <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
     % endif
@@ -21,7 +21,7 @@
       <div style="display:none;" name="${hidden}" inputid="input_${id}" />
     % endif
 
-    <p class="debug">${state}</p>
+    <p class="debug">${status}</p>
   </div>
 
   <span id="answer_${id}"></span>

common/lib/capa/capa/templates/crystallography.html

-<% doinline = "inline" if inline else "" %>
-
-<section id="textinput_${id}" class="textinput ${doinline}" >
+<section id="inputtype_${id}" class="capa_inputtype" >
      <div id="holder" style="width:${width};height:${height}"></div>
-    <div class="script_placeholder" data-src="/static/js/raphael.js"></div><div class="script_placeholder" data-src="/static/js/sylvester.js"></div><div class="script_placeholder" data-src="/static/js/underscore-min.js"></div>
+    <div class="script_placeholder" data-src="/static/js/raphael.js"></div>
+    <div class="script_placeholder" data-src="/static/js/sylvester.js"></div>
+    <div class="script_placeholder" data-src="/static/js/underscore-min.js"></div>
     <div class="script_placeholder" data-src="/static/js/crystallography.js"></div>
 
 
-    % if state == 'unsubmitted':
-    <div class="unanswered ${doinline}" id="status_${id}">
-    % elif state == 'correct':
-    <div class="correct ${doinline}" id="status_${id}">
-    % elif state == 'incorrect':
-    <div class="incorrect ${doinline}" id="status_${id}">
-    % elif state == 'incomplete':
-    <div class="incorrect ${doinline}" id="status_${id}">
+    % if status == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif status == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif status == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif status == 'incomplete':
+    <div class="incorrect" id="status_${id}">
     % endif
     % if hidden:
       <div style="display:none;" name="${hidden}" inputid="input_${id}" />
@@ -29,13 +29,13 @@
    />
 
       <p class="status">
-        % if state == 'unsubmitted':
+        % if status == 'unsubmitted':
         unanswered
-        % elif state == 'correct':
+        % elif status == 'correct':
         correct
-        % elif state == 'incorrect':
+        % elif status == 'incorrect':
         incorrect
-        % elif state == 'incomplete':
+        % elif status == 'incomplete':
         incomplete
         % endif
       </p>
@@ -45,7 +45,7 @@
   % if msg:
       <span class="message">${msg|n}</span>
   % endif
-% if state in ['unsubmitted', 'correct', 'incorrect', 'incomplete'] or hidden:
+% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
 </div>
 % endif
 </section>

common/lib/capa/capa/templates/filesubmission.html

 <section id="filesubmission_${id}" class="filesubmission">
   <div class="grader-status file">
-    % if state == 'unsubmitted':
+    % if status == 'unsubmitted':
     <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
-    % elif state == 'correct':
+    % elif status == 'correct':
     <span class="correct" id="status_${id}">Correct</span>
-    % elif state == 'incorrect':
+    % elif status == 'incorrect':
     <span class="incorrect" id="status_${id}">Incorrect</span>
-    % elif state == 'queued':
+    % elif status == 'queued':
     <span class="processing" id="status_${id}">Queued</span>
     <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
     % endif
-    <p class="debug">${state}</p>
+    <p class="debug">${status}</p>
 
     <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/>
   </div>

common/lib/capa/capa/templates/imageinput.html

@@ -4,13 +4,13 @@
       <img src="/static/green-pointer.png" id="cross_${id}" style="position: absolute;top: ${gy}px;left: ${gx}px;" />
   </div>
 
-  % if state == 'unsubmitted':
+  % if status == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif status == 'correct': 
   <span class="correct" id="status_${id}"></span>
-  % elif state == 'incorrect':
+  % elif status == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>
-  % elif state == 'incomplete':
+  % elif status == 'incomplete':
   <span class="incorrect" id="status_${id}"></span>
   % endif
 </span>

common/lib/capa/capa/templates/jstextline.html

@@ -18,13 +18,13 @@
     <textarea style="display:none" id="input_${id}_fromjs" name="input_${id}_fromjs"></textarea>
   % endif
 
-  % if state == 'unsubmitted':
+  % if status == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct':
+  % elif status == 'correct':
   <span class="correct" id="status_${id}"></span>
-  % elif state == 'incorrect':
+  % elif status == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>
-  % elif state == 'incomplete':
+  % elif status == 'incomplete':
   <span class="incorrect" id="status_${id}"></span>
   % endif
   % if msg:

common/lib/capa/capa/templates/optioninput.html

@@ -12,13 +12,13 @@
 
   <span id="answer_${id}"></span>
 
-  % if state == 'unsubmitted':
+  % if status == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif status == 'correct': 
   <span class="correct" id="status_${id}"></span>
-  % elif state == 'incorrect':
+  % elif status == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>
-  % elif state == 'incomplete':
+  % elif status == 'incomplete':
   <span class="incorrect" id="status_${id}"></span>
   % endif
 </form>

common/lib/capa/capa/templates/schematicinput.html

@@ -12,13 +12,13 @@
   </script>
 
   <span id="answer_${id}"></span>
-  % if state == 'unsubmitted':
+  % if status == 'unsubmitted':
   <span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif status == 'correct': 
   <span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'incorrect':
+  % elif status == 'incorrect':
   <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'incomplete':
+  % elif status == 'incomplete':
   <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
   % endif
 </span>

common/lib/capa/capa/templates/textinput_dynamath.html

-###
-### version of textline.html which does dynamic math
-###
-<section class="text-input-dynamath capa_inputtype" id="inputtype_${id}">
-
-    % if preprocessor is not None:
-    <div class="text-input-dynamath_data" data-preprocessor="${preprocessor['class_name']}"/>
-    <div class="script_placeholder" data-src="${preprocessor['script_src']}"/>
-    % endif
-
-    % if state == 'unsubmitted':
-    <div class="unanswered" id="status_${id}">
-    % elif state == 'correct':
-    <div class="correct" id="status_${id}">
-    % elif state == 'incorrect':
-    <div class="incorrect" id="status_${id}">
-    % elif state == 'incomplete':
-    <div class="incorrect" id="status_${id}">
-    % endif
-    % if hidden:
-      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
-    % endif
-
-    <input type="text" name="input_${id}" id="input_${id}" value="${value}" class="math" size="${size if size else ''}" 
-    % if hidden:
-        style="display:none;"
-    % endif
-    />
-    <p class="status">
-    % if state == 'unsubmitted':
-    unanswered
-    % elif state == 'correct':
-    correct
-    % elif state == 'incorrect':
-    incorrect
-    % elif state == 'incomplete':
-    incomplete
-    % endif
-    </p>
-
-    <p id="answer_${id}" class="answer"></p>
-
-    <div id="display_${id}" class="equation">`{::}`</div>
-
-    </div>
-    <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath">  </textarea>
-    % if msg:
-    <span class="message">${msg|n}</span>
-    % endif
-</section>

common/lib/capa/capa/templates/textinput.html → common/lib/capa/capa/templates/textline.html

 <% doinline = "inline" if inline else "" %>
 
-<section id="textinput_${id}" class="textinput ${doinline}" >
-    % if state == 'unsubmitted':
+<section id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline}" >
+
+    % if preprocessor is not None:
+    <div class="text-input-dynamath_data" data-preprocessor="${preprocessor['class_name']}"/>
+    <div class="script_placeholder" data-src="${preprocessor['script_src']}"/>
+    % endif
+
+    % if status == 'unsubmitted':
     <div class="unanswered ${doinline}" id="status_${id}">
-    % elif state == 'correct':
+    % elif status == 'correct':
     <div class="correct ${doinline}" id="status_${id}">
-    % elif state == 'incorrect':
+    % elif status == 'incorrect':
     <div class="incorrect ${doinline}" id="status_${id}">
-    % elif state == 'incomplete':
+    % elif status == 'incomplete':
     <div class="incorrect ${doinline}" id="status_${id}">
     % endif
     % if hidden:
@@ -15,32 +21,44 @@
     % endif
 
   <input type="text" name="input_${id}" id="input_${id}" value="${value}"
-   % if size:
-   size="${size}"
-   % endif
-   % if hidden:
-	style="display:none;"
-   % endif
+        % if do_math:
+            class="math"
+        % endif
+        % if size:
+            size="${size}"
+        % endif
+        % if hidden:
+            style="display:none;"
+        % endif
    />
 
       <p class="status">
-        % if state == 'unsubmitted':
+        % if status == 'unsubmitted':
         unanswered
-        % elif state == 'correct':
+        % elif status == 'correct':
         correct
-        % elif state == 'incorrect':
+        % elif status == 'incorrect':
         incorrect
-        % elif state == 'incomplete':
+        % elif status == 'incomplete':
         incomplete
         % endif
       </p>
 
-  <p id="answer_${id}" class="answer"></p>
+      <p id="answer_${id}" class="answer"></p>
+
+      % if do_math:
+      <div id="display_${id}" class="equation">`{::}`</div>
+      <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath">
+      </textarea>
+
+      % endif
+
+% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
+</div>
+% endif
 
   % if msg:
       <span class="message">${msg|n}</span>
   % endif
-% if state in ['unsubmitted', 'correct', 'incorrect', 'incomplete'] or hidden:
-</div>
-% endif
+
 </section>

common/lib/capa/capa/templates/vsepr_input.html

-<% doinline = "inline" if inline else "" %>
-
-<section id="textinput_${id}" class="textinput ${doinline}" >
+<section id="inputtype_${id}" class="capa_inputtype" >
      <table><tr><td height='600'>
     <div id="vsepr_div_${id}" style="position:relative;" data-molecules="${molecules}" data-geometries="${geometries}">
     <canvas id="vsepr_canvas_${id}" width="${width}" height="${height}">
@@ -13,36 +11,28 @@
 
     <div class="script_placeholder" data-src="/static/js/vsepr/vsepr.js"></div>
 
-    % if state == 'unsubmitted':
-    <div class="unanswered ${doinline}" id="status_${id}">
-    % elif state == 'correct':
-    <div class="correct ${doinline}" id="status_${id}">
-    % elif state == 'incorrect':
-    <div class="incorrect ${doinline}" id="status_${id}">
-    % elif state == 'incomplete':
-    <div class="incorrect ${doinline}" id="status_${id}">
-    % endif
-    % if hidden:
-      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
+    % if status == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif status == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif status == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif status == 'incomplete':
+    <div class="incorrect" id="status_${id}">
     % endif
 
   <input type="text" name="input_${id}" id="input_${id}" value="${value}"
-   % if size:
-   size="${size}"
-   % endif
-   % if hidden:
-    style="display:none;"
-   % endif
+      style="display:none;"
    />
 
       <p class="status">
-        % if state == 'unsubmitted':
+        % if status == 'unsubmitted':
         unanswered
-        % elif state == 'correct':
+        % elif status == 'correct':
         correct
-        % elif state == 'incorrect':
+        % elif status == 'incorrect':
         incorrect
-        % elif state == 'incomplete':
+        % elif status == 'incomplete':
         incomplete
         % endif
       </p>
@@ -52,7 +42,7 @@
   % if msg:
       <span class="message">${msg|n}</span>
   % endif
-% if state in ['unsubmitted', 'correct', 'incorrect', 'incomplete'] or hidden:
+% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
 </div>
 % endif
 </section>

common/lib/capa/capa/tests/__init__.py

@@ -4,13 +4,23 @@ import os
 
 from mock import Mock
 
+import xml.sax.saxutils as saxutils
+
 TEST_DIR = os.path.dirname(os.path.realpath(__file__))
 
+def tst_render_template(template, context):
+    """
+    A test version of render to template.  Renders to the repr of the context, completely ignoring
+    the template name.  To make the output valid xml, quotes the content, and wraps it in a <div>
+    """
+    return '<div>{0}</div>'.format(saxutils.escape(repr(context)))
+
+
 test_system = Mock(
     ajax_url='courses/course_id/modx/a_location',
     track_function=Mock(),
     get_module=Mock(),
-    render_template=Mock(),
+    render_template=tst_render_template,
     replace_urls=Mock(),
     user=Mock(),
     filestore=fs.osfs.OSFS(os.path.join(TEST_DIR, "test_files")),

common/lib/capa/capa/tests/test_customrender.py

+from lxml import etree
+import unittest
+import xml.sax.saxutils as saxutils
+
+from . import test_system
+from capa import customrender
+
+# just a handy shortcut
+lookup_tag = customrender.registry.get_class_for_tag
+
+def extract_context(xml):
+    """
+    Given an xml element corresponding to the output of test_system.render_template, get back the
+    original context
+    """
+    return eval(xml.text)
+
+def quote_attr(s):
+    return saxutils.quoteattr(s)[1:-1]  # don't want the outer quotes
+
+class HelperTest(unittest.TestCase):
+    '''
+    Make sure that our helper function works!
+    '''
+    def check(self, d):
+        xml = etree.XML(test_system.render_template('blah', d))
+        self.assertEqual(d, extract_context(xml))
+
+    def test_extract_context(self):
+        self.check({})
+        self.check({1, 2})
+        self.check({'id', 'an id'})
+        self.check({'with"quote', 'also"quote'})
+
+
+class SolutionRenderTest(unittest.TestCase):
+    '''
+    Make sure solutions render properly.
+    '''
+
+    def test_rendering(self):
+        solution = 'To compute unicorns, count them.'
+        xml_str = """<solution id="solution_12">{s}</solution>""".format(s=solution)
+        element = etree.fromstring(xml_str)
+
+        renderer = lookup_tag('solution')(test_system, element)
+
+        self.assertEqual(renderer.id, 'solution_12')
+
+        # our test_system "renders" templates to a div with the repr of the context
+        xml = renderer.get_html()
+        context = extract_context(xml)
+        self.assertEqual(context, {'id' : 'solution_12'})
+
+
+class MathRenderTest(unittest.TestCase):
+    '''
+    Make sure math renders properly.
+    '''
+
+    def check_parse(self, latex_in, mathjax_out):
+        xml_str = """<math>{tex}</math>""".format(tex=latex_in)
+        element = etree.fromstring(xml_str)
+
+        renderer = lookup_tag('math')(test_system, element)
+
+        self.assertEqual(renderer.mathstr, mathjax_out)
+    
+    def test_parsing(self):
+        self.check_parse('$abc$', '[mathjaxinline]abc[/mathjaxinline]')
+        self.check_parse('$abc', '$abc')
+        self.check_parse(r'$\displaystyle 2+2$', '[mathjax] 2+2[/mathjax]')
+        
+
+    # NOTE: not testing get_html yet because I don't understand why it's doing what it's doing.
+