Thinkific Footer code to enable LaTeX rendering (using KaTeX) and Code Syntax Highlighting (using Highlight.js) on Quiz Sections

thinkific_quiz_render_patches.html

<!-- PATCH TO ENABLE KATEX & HIGHLIGHT.JS FOR THINKIFIC QUIZ SECTIONS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-t5CR+zwDAROtph0PXGte6ia8heboACF9R5l/DiY+WZ3P2lxNgvJkQk5n7GPvLMYw" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-FaFLTlohFghEIZkw6VGwmf9ISTubWAVYW8tG8+w2LAIftJEULZABrF9PPFv+tVkH" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-bHBqxz8fokvgoJ/sc17HODNxa42TlaEhB+w8ZJXTc2nZf1VgEaFZeZvT4Mznfz0v" crossorigin="anonymous"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>

<script>
    // Auto-Render any KaTeX after the Quiz section is loaded
    const quizHtmlIdentifier = ".course-player__quiz";
    
    function runAfterElementExists(jquery_selector, max_attempts, callback) {
        // Src: https://stackoverflow.com/a/46054581
        var num_attempts = 0;
        var checker = window.setInterval(function() {
            //if one or more elements have been yielded by jquery
            //using this selector
            if ($(jquery_selector).length) {
        
                //stop checking for the existence of this element
                clearInterval(checker);
        
                //call the passed in function via the parameter above
                callback();
            }
            
            if (num_attempts >= max_attempts) {
                 clearInterval(checker);
             } else {
                 num_attempts++;
             }
                
        }, 500); //Check 2 times per second
    }
    
    // As the content in the section changes dynamically, we have to re-render
    // So we have to create an observer for such mutations first
    var observeMutations = true;
    var mutationObserver = new MutationObserver(function(mutations) {
        if (!observeMutations) {
            // The changes we're making below is itself capable
            // of triggering a mutation event. So `obeserveMutations`
            // hopefully manages that by toggling as required.
            observeMutations = true;
            return;
        }
        if (document.querySelectorAll("pre code").length > 0) {
            observeMutations = false;
            hljs.highlightAll();
        }
        console.log('Rerunning KaTeX Renderer');
        renderMathInElement(document.querySelector(quizHtmlIdentifier));
    });
    var mutationObserverConfig = { childList: true, subtree: true };
    
    function renderQuizKaTeX() {
        if (!window.location.pathname.includes("/quizzes/")) {
	        return;       
	    }
	    
	    // After the quiz section is loaded, try to render KaTeX
        runAfterElementExists(quizHtmlIdentifier, 30, function() {
            renderMathInElement(document.querySelector(quizHtmlIdentifier));
            hljs.highlightAll();
            console.log("Hopefully KaTeX is rendered if any...");
            
            // If new content is added to quiz section, re-render KaTeX
            mutationObserver.disconnect();
            mutationObserver.observe(document.querySelector(quizHtmlIdentifier), mutationObserverConfig);
        });
    }

    window.addEventListener("load",  function() {
        renderQuizKaTeX();
        
        // When going from lesson to quiz, the content changes
        // without reloading window. So we have to re-render KaTeX
        // for any new quiz sections possibly containing KaTeX
        window.addEventListener('locationchange', function() {
            renderQuizKaTeX();
        });
    });
    
    // Patches to enable 'locationchange' event to work properly as of 2021
    // Src: https://stackoverflow.com/a/52809105
    history.pushState = ( f => function pushState(){
        var ret = f.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    })(history.pushState);
    
    history.replaceState = ( f => function replaceState(){
        var ret = f.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    })(history.replaceState);
    
    window.addEventListener('popstate',()=>{
        window.dispatchEvent(new Event('locationchange'))
    });
</script>

Hi Gokul!

I hope you are doing well!

Thank you so much for writing this amazing LaTeX functionality for the Thinkific Quizzes which is much needed. Can you please tell me how one can utilize this code?

Please let me know

Thank you so much!

Hi @srinjoyganguly

You can just put this code in Thinkific's Footer Code section as described here:
https://support.thinkific.com/hc/en-us/articles/360030724953-Site-Footer-Code

Hi Gokul!

Thanks a lot for the humble reply. I did as you mentioned. How can I type LaTeX in my Quizzes now? Can you please convey me the steps as I cannot type LaTeX still in my Quizzes section.

Thanks a lot!

You cannot directly type LaTeX. You'll have to go to the HTML section of each question/answer_option/explanation, and paste the LaTeX code.
You can use this to test and understand the formatting: https://onefourthlabs.github.io/KaTeX-Demo-Editor/

Absolutely! Thanks a lot! I checked for that simple equation and it is indeed rendering well! I tried matrices but they are not working currently. Are they supported?

I tried matrices, but they are not working. Can you please convey me the format for matrices? Are they supported?

Never mind, got it working! Thanks a lot!

Hi Gokul!

We're using your code in our Thinkific website, and it works perfectly with quizzes! A big thanks for your work.

At this time, we have only been using LaTeX with quizzes, but more and more, we are as well writing with other sections. Could you please let me know if there is a way, that other sections are included in the code?

Thanks in advance 😄

We just tried to add a Matrix latex code to a question in a quiz, such as:
\begin{equation} R^2 = \left({\begin{array}{cc} c & s \end{array}}\right) \left(\begin{array}{ccc} 1 &0&-1 \ 0&-1&1 \ 4&5&6 \end{array}\right) \left(\begin{array}{c} c \ s \end{array}\right) = c^2 + s^2 \end{equation}

It worked on the KaTex Demo Editor site but, inside thinkific, the page kept hanging... Is there any workaround for Matrix latex code? thank you!