Submit a request
Submit a request

Replacing Learnosity's Mathjax With Your Own

This article describes how to load your own MathJax library with custom configuration. Note: Currently we provide both MathJax and MathQuill for rendering - You can find 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 our MathJax loader finds out that MathJax library is already loaded (window.MathJax property exists), it won't load anything, but rely on whatever is already loaded to render Learnosity math content.

Questions API is able to work with an external MathJax library loaded e.g. from CDN (MathJax CDN guide) or from your own server. To fully take advantage of it you should to follow guidelines listed below:

  1. Load and configure MathJax before initializing the Questions API (see the official guide) as we won't be reloading it once we detect that it's already there.

  2. 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 it, make sure all the necessary extensions are listed instead.

    extensions: ["autoload-all.js"]

     

  3. We also use the following workaround to fix an IE8 MathZoom issue. 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;
            };
        }
    })();

     

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

    Macros: {
        /*
        Converting MathQuil's \abs to pipe TeX Command
        http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol
        */
        abs: ["{|#1|}", 1],
        degree: ["{^circ}"],
        longdiv: ["{enclose{longdiv}{#1}}", 1],
        atomic: ["{_{#1}^{#2}}", 2],
        polyatomic: ["{_{#2}{}^{#1}}", 2],
        circledot: ["{odot}"],
        parallelogram: ["unicode{x25B1}"],
        ngtr: ["unicode{x226F}"],
        nless: ["unicode{x226E}"]
    }

     

  5. Since Questions API v2.63.0 we switched off MathJax internal (using JS) font-size boosting. It gave us full control over the font-size and from then on, we could set it using CSS. To switch it off in your MathJax instance do the following:

    "HTML-CSS": {
        availableFonts: ["TeX"],
        minScaleAdjust: 100,
        matchFontHeight: false,
        imageFont: null
    }

     

  6. You should also add our ignore math rendering class to your tex2jax configuration.

    tex2jax: {
        ignoreClass: "lrn_noMath"
    }

     

    If you'd like 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 text2jax configuration should resemble the following:

    tex2jax: {
        ignoreClass: "lrn_noMath",
        processClass: "lrn"
    }

     

  7. Please refer to MathJax configuration sample.

    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
                 */
                abs: ["{|#1|}", 1],
                degree: ["{^circ}"],
                longdiv: ["{enclose{longdiv}{#1}}", 1],
                atomic: ["{_{#1}^{#2}}", 2],
                polyatomic: ["{_{#2}{}^{#1}}", 2],
                circledot: ["{odot}"],
                parallelogram: ["unicode{x25B1}"],
                ngtr: ["unicode{x226F}"],
                nless: ["unicode{x226E}"]
            }
        },
        "HTML-CSS": {
        availableFonts: ["TeX"],
            minScaleAdjust: 100,
            matchFontHeight: false,
            imageFont: null
        }
    });

     

You can check our working example here.

Was this article helpful?
0 out of 0 found this helpful

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.