Replacing Learnosity's MathJax With Your Own – Learnosity Product & Developer Help

This article describes how to load your own MathJax library with custom configuration. This might be required if you are already using MathJax in your app. Note that Learnosity currently provides both MathJax and MathQuill for rendering (more information here).

When using math questions, MathJax 2.7.0 is bundled with and configured by the Questions API. If you must define MathJax yourself, e.g. when rendering math on non-Learnosity elements with some special configuration or rules; you should follow this integration guide, and double check that compatibility with Learnosity elements is ensured.

When the Learnosity MathJax loader finds out that the MathJax library is already loaded (if the window.MathJax property exists), it won't load anything, but instead rely on whatever is already loaded to render Learnosity math content.

Questions API is able to work with an external MathJax library, for example, one loaded from a Content Distribution Network CDN (see the MathJax CDN guide) or from your own server. To fully take advantage of this, you should follow the guidelines listed below:

Loading order. Load and configure MathJax before initializing the Questions API (see the official guide) as Learnosity won't reload Questions API if a running instance of it is detected.
Auto-loading. We use the 'autoload-all' extension. MathJax has a smart way to autoload needed extensions when first used. You can read more about it here. If you don't want to use the MathJax autoloader, make sure you list all the necessary extensions, instead.
```
extensions: ["autoload-all.js"]
```

IE8 workarounds. We also use the following workaround to fix an issue with MathZoom on Internet Explorer 8 (IE8). If you plan to fully support IE8, consider adding this code as well.

(function () {
    if (MathJax.Extension.MathZoom.msieSizeBug) {
        var originalZoom = MathJax.Extension.MathZoom.Zoom;
        MathJax.Extension.MathZoom.Zoom = function () {
            var functionReturn = originalZoom.apply(MathJax.Extension.MathZoom, arguments);
            var zoomElm = document.getElementById("MathJax_Zoom");
            // Need to set height and width back to "auto" AFTER zoom calculates position for
            // IE8 as this way the height of the span is properly set.
            zoomElm.style.height = "auto";
            zoomElm.style.width = "auto";
            return functionReturn;
        };
    }
})();

Mandatory macros. Make sure you include these macros in the TeX config, to be fully compatible with the Learnosity MathQuill input engine.

Macros: {
    /*
    Converting MathQuil's \abs to pipe TeX Command
    http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol
    For more information about Macros go to
    https://docs.mathjax.org/en/v2.7-latest/tex.html#defining-tex-macros
    */
    abs: ['{|#1|}', 1],
    degree: ['°'],    
    longdiv: ['{\\enclose{longdiv}{#1}}', 1],    
    atomic: ['{_{#1}^{#2}}', 2],    
    polyatomic: ['{_{#2}{}^{#1}}', 2],   
    circledot: ['{\\odot}'],    
    parallelogram: ['\\unicode{x25B1}'],    
    ngtr: ['\\unicode{x226F}'],    
    nless: ['\\unicode{x226E}'],   
    MathQuillVarField: ['#1', 1]]
}

Font-size boosting. Since Questions API v2.63.0, MathJax internal font-size boosting (using JS) has been switched off. This enabled full control over the font-size, and configuration using cascading style sheets (CSS). To switch off MathJax internal font-size boosting (using JS) in your MathJax instance, do the following in your MathJax configuration:
```
"HTML-CSS": {
    availableFonts: ["TeX"],
    minScaleAdjust: 100,
    matchFontHeight: false,
    imageFont: null
}
```
Control math rendering. You should also add our "ignore math rendering" class to your tex2jax configuration.
```
tex2jax: {
    ignoreClass: "lrn_noMath"
}
```
Alternatively, if you need to scope LaTex rendering to Learnosity elements only, you will need to first add the class lrn_noMath to the body tag on your page, then have lrn as one of the process classes, i.e. your tex2jax configuration should resemble the following:
```
tex2jax: {
    ignoreClass: "lrn_noMath",
    processClass: "lrn"
}
```

Complete configuration example. Read the complete MathJax configuration code below.

MathJax.Hub.Config({
    messageStyle: "none",
    showMathMenu: false,
    tex2jax: {
        ignoreClass: "lrn_noMath"
    },
    jax: ["output/HTML-CSS"],
    TeX: {
        Macros: {
            /*
            Converting MathQuil's \abs to pipe TeX Command
            http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol
            For more information about Macros go to
            https://docs.mathjax.org/en/v2.7-latest/tex.html#defining-tex-macros
            */
            abs: ['{|#1|}', 1],            
            degree: ['°'],            
            longdiv: ['{\\enclose{longdiv}{#1}}', 1],            
            atomic: ['{_{#1}^{#2}}', 2],            
            polyatomic: ['{_{#2}{}^{#1}}', 2],            
            circledot: ['{\\odot}'],           
            parallelogram: ['\\unicode{x25B1}'],           
            ngtr: ['\\unicode{x226F}'],            
            nless: ['\\unicode{x226E}'],            
            MathQuillVarField: ['#1', 1]]
        }
    },
    "HTML-CSS": {
    availableFonts: ["TeX"],
        minScaleAdjust: 100,
        matchFontHeight: false,
        imageFont: null
    }
});

Demo. You can check our working example here.

Related articles