Merge pull request #656 from MITx/kimth/fix-dynamath-6002x

Kimth/fix dynamath 6002x

common/lib/capa/capa/capa_problem.py

@@ -382,10 +382,10 @@ class LoncapaProblem(object):
         original_path = sys.path
 
         for script in scripts:
-
             sys.path = original_path + self._extract_system_path(script)
 
             stype = script.get('type')
+            
             if stype:
                 if 'javascript' in stype:
                     continue    # skip javascript

common/lib/capa/capa/inputtypes.py

@@ -326,8 +326,16 @@ def textline_dynamath(element, value, status, render_template, msg=''):
     count = int(eid.split('_')[-2]) - 1  # HACK
     size = element.get('size')
     hidden = element.get('hidden', '')	 # if specified, then textline is hidden and id is stored in div of name given by hidden
+
+    # Preprocessor to insert between raw input and Mathjax
+    preprocessor = {'class_name': element.get('preprocessorClassName',''),
+                    'script_src': element.get('preprocessorSrc','')}
+    if '' in preprocessor.values():
+        preprocessor = None
+
     context = {'id': eid, 'value': value, 'state': status, 'count': count, 'size': size,
                'msg': msg, 'hidden': hidden,
+               'preprocessor': preprocessor,
                }
     html = render_template("textinput_dynamath.html", context)
     return etree.XML(html)

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

 ###
-### version of textline.html which does dynammic math
+### version of textline.html which does dynamic math
 ###
-<section class="text-input-dynamath">
+<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':
@@ -15,27 +21,26 @@
       <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>
+    <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>
+    <p id="answer_${id}" class="answer"></p>
 
-      <div id="display_${id}" class="equation">`{::}`</div>
+    <div id="display_${id}" class="equation">`{::}`</div>
 
     </div>
     <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath">  </textarea>

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

@@ -11,7 +11,9 @@ class @Problem
     $(selector, @el)
 
   bind: =>
-    MathJax.Hub.Queue ["Typeset", MathJax.Hub]
+    @el.find('.problem > div').each (index, element) =>
+      MathJax.Hub.Queue ["Typeset", MathJax.Hub, element]
+
     window.update_schematics()
 
     problem_prefix = @element_id.replace(/problem_/,'')
@@ -23,7 +25,11 @@ class @Problem
     @$('section.action input.reset').click @reset
     @$('section.action input.show').click @show
     @$('section.action input.save').click @save
-    @$('input.math').keyup(@refreshMath).each(@refreshMath)
+
+    # Dynamath
+    @$('input.math').keyup(@refreshMath)
+    @$('input.math').each (index, element) =>
+      MathJax.Hub.Queue [@refreshMath, null, element]
 
   updateProgress: (response) =>
     if response.progress_changed
@@ -262,7 +268,9 @@ class @Problem
               showMethod = @inputtypeShowAnswerMethods[cls]
               showMethod(inputtype, display, answers) if showMethod?
 
-        MathJax.Hub.Queue ["Typeset", MathJax.Hub]
+        @el.find('.problem > div').each (index, element) =>
+          MathJax.Hub.Queue ["Typeset", MathJax.Hub, element]
+
         @$('.show').val 'Hide Answer'
         @el.addClass 'showed'
         @updateProgress response
@@ -296,12 +304,21 @@ class @Problem
 
   refreshMath: (event, element) =>
     element = event.target unless element
-    target = "display_#{element.id.replace(/^input_/, '')}"
+    elid = element.id.replace(/^input_/,'')
+    target = "display_" + elid
+
+    # MathJax preprocessor is loaded by 'setupInputTypes'
+    preprocessor_tag = "inputtype_" + elid
+    mathjax_preprocessor = @inputtypeDisplays[preprocessor_tag]
 
     if jax = MathJax.Hub.getAllJax(target)[0]
-      MathJax.Hub.Queue ['Text', jax, $(element).val()],
-        [@updateMathML, jax, element]
+      eqn = $(element).val()
+      if mathjax_preprocessor
+        eqn = mathjax_preprocessor(eqn)
+      MathJax.Hub.Queue(['Text', jax, eqn], [@updateMathML, jax, element])
 
+    return # Explicit return for CoffeeScript
+    
   updateMathML: (jax, element) =>
     try
       $("##{element.id}_dynamath").val(jax.root.toMathML '')
@@ -317,6 +334,22 @@ class @Problem
     @answers = @inputs.serialize()
 
   inputtypeSetupMethods:
+
+    'text-input-dynamath': (element) =>
+      ###
+      Return: function (eqn) -> eqn that preprocesses the user formula input before
+                it is fed into MathJax. Return 'false' if no preprocessor specified
+      ###
+      data = $(element).find('.text-input-dynamath_data')
+
+      preprocessorClassName = data.data('preprocessor')
+      preprocessorClass = window[preprocessorClassName]
+      if not preprocessorClass?
+        return false
+      else
+        preprocessor = new preprocessorClass()
+        return preprocessor.fn
+
     javascriptinput: (element) =>
 
       data = $(element).find(".javascriptinput_data")