The main reason to switch are performance gains. MathQuill is a much lighter library allowing not only rendering, but also typing. We use it to allow typing the math content (using LaTex) by authors and students. MathJax on the other hand, while supporting much more, allows rendering of static content only. Using those two libraries created two issues:

1. Differences in the presentation as both libraries use different HTML element structure and CSS behind it
2. Content authored using MathJax could sometimes have different LaTex from the one used in MathQuill, which is not ideal, especially when copying LaTex across.

We decided that to resolve both issues we could allow customers to choose between those two. Of course there's no way to use MathJax to input math, but we could use MathQuill to render static math content. Below we included few informations worth to know when making the switch, and also some brief examples.

Mathematical formulas are defined by inserting a LaTex within special delimiters. There are two:

1. Regular brackets based. It allows you to insert math formulas as inline elements.

   Opening delimiter: \(, closing delimiter: \)

2. Squared brackets based. It allows you to insert math formulas as block elements.

   Opening delimiter: \[, closing delimiter: \]

There are two ways to enable MathQuill rendering:

1. Activity level - it will render all mathematical formulas wrapped within any .lrn class. Check the example below:

    

   {
       "consumer_key": "your consumer key goes here",
       "timestamp": "timestamp goes here",
       "signature": "your signature goes here",
       "user_id": "user id goes here",
       "type": "local",
       "state": "initial",
       "id": "math-renderer-test",
       "name": "Math renderer test",
       "math_renderer": "mathquill",
       "questions": [
           {
               "is_math": true,
               "stimulus": "(x+\\frac{2}{3})",
               "text_blocks": [],
               "type": "formulaV2",
               "ui_style": {
                   "type": "floating-keyboard"
               },
               "validation": {
                   "scoring_type": "exactMatch",
                   "valid_response": {
                       "score": 1,
                       "value": [{
                           "method": "equivSymbolic",
                           "options": {
                               "allowDecimal": false,
                               "inverseResult": false
                           },
                           "value": ""
                       }]
                   }
               }
           }
       ]

    

2. Question level - it will render all mathematical formulas wrapped within a question (more specifically within .lrn_widget class). Look at the question JSON example below:

    

   {
       "is_math": true,
       "math_renderer": "mathquill",
       "stimulus": "(x+\\frac{2}{3})",
       "text_blocks": [],
       "type": "formulaV2",
       "ui_style": {
           "type": "floating-keyboard"
       },
       "validation": {
           "scoring_type": "exactMatch",
           "valid_response": {
               "score": 1,
               "value": [{
                   "method": "equivSymbolic",
                   "options": {
                       "allowDecimal": false,
                       "inverseResult": false
                   },
                   "value": ""
               }]
           }
       }
   }

    

   When you're creating your question via Question Editor, you can find math_renderer attribute (Math renderer) in Advanced panel. This flag requires is_math (Has Mathematical Formulas) to be set to true.

You can set this flag when initializing Items API or Assess API as well.