Bizzare inconsistence in generation of MathJax elements

SuhasK · March 11, 2025, 7:43pm

I am trying to create a notetype where one can compare the relative positions of items in a list (say the priority order of functional groups in organic chemistry).
Below is my code for the front side. For some absolutely bizzare reason, when MathJax and Chemical Equations/Physical Units both are “enabled”, the items of the list are shown in MathJax in the Items div (as text in buttons) but the items are not shown in MathJax in the curans div (as text). Does anybody have a way to fix this or why this is occurring?
The generation of these elements can be found at the end of the section and in fcset respectively.

Front

<script>
if(void 0===window.Persistence){var e="github.com/SimonLammer/anki-persistence/",t="_default";if(window.Persistence_sessionStorage=function(){var i=!1;try{"object"==typeof window.sessionStorage&&(i=!0,this.clear=function(){for(var t=0;t<sessionStorage.length;t++){var i=sessionStorage.key(t);0==i.indexOf(e)&&(sessionStorage.removeItem(i),t--)}},this.setItem=function(i,n){void 0==n&&(n=i,i=t),sessionStorage.setItem(e+i,JSON.stringify(n))},this.getItem=function(i){return void 0==i&&(i=t),JSON.parse(sessionStorage.getItem(e+i))},this.removeItem=function(i){void 0==i&&(i=t),sessionStorage.removeItem(e+i)},this.getAllKeys=function(){for(var t=[],i=Object.keys(sessionStorage),n=0;n<i.length;n++){var s=i[n];0==s.indexOf(e)&&t.push(s.substring(e.length,s.length))}return t.sort()})}catch(n){}this.isAvailable=function(){return i}},window.Persistence_windowKey=function(i){var n=window[i],s=!1;"object"==typeof n&&(s=!0,this.clear=function(){n[e]={}},this.setItem=function(i,s){void 0==s&&(s=i,i=t),n[e][i]=s},this.getItem=function(i){return void 0==i&&(i=t),void 0==n[e][i]?null:n[e][i]},this.removeItem=function(i){void 0==i&&(i=t),delete n[e][i]},this.getAllKeys=function(){return Object.keys(n[e])},void 0==n[e]&&this.clear()),this.isAvailable=function(){return s}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var i=window.location.toString().indexOf("title"),n=window.location.toString().indexOf("main",i);i>0&&n>0&&n-i<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>

Rearrange the following to get the correct order<br>for <b>{{Description}}</b><br><br>
<div id="Reset"></div><br>
<div id="Items"></div><br>
<div id="curans"></div>
<div id="Submit"></div>
<script>
oli = `{{List}}`.split(`{{Separator}}`).map(s => s.trim())
sli = oli.join().replaceAll("/",",").split(",").map(value => ({ value, sort: Math.random() })).sort((a, b) => a.sort - b.sort).map(({ value }) => value)
t = 0
f = 1
mf = `{{MathJax}}`
cf = `{{Chemical Equations}}`
pf = `{{Physical Units}}`
if (mf)
{
    if ((cf) && (pf))
    {
        window.Reset.appendChild(document.createTextNode("You have enabled both Chemical Equations and Physical Units, only one can be enabled at a time."))
        f = 0
    }
    else if (cf)
    {
        sli = sli.map(s => "\\(\\ce{" + s + "}\\)")
    }
    else if (pf)
    {
        sli = sli.map(s => "\\(\\pu{" + s + "}\\)")
    }
    else
    {
        sli = sli.map(s => "\\(" + s + "\\)")
    }
}
else
{
    if ((cf) && (pf))
    {
        window.Reset.appendChild(document.createTextNode("You have enabled both Chemical Equations and Physical Units without enabling MathJax, select only one of the two and enable MathJax"))
        f = 0
    }
    else if (cf)
    {
        window.Reset.appendChild(document.createTextNode("You have enabled Chemical Equations without enabling MathJax"))
        f = 0
    }
    else if (pf)
    {
        window.Reset.appendChild(document.createTextNode("You have enabled Physical Units without enabling MathJax"))
        f = 0
    }
}
if (f)
{
    sli = sli.map(s => [s, 1])
    obs = new MutationObserver((ml, obs) => {
        for (m of ml)
        {
            if (m.type == "childList")
                if (m.target.id == "qa")
                    if (m.removedNodes[0].nodeName == "STYLE")
                    {
                        fsub()
                    }
        }
    })
    obs.observe(document.getElementById("qa"), {attributes: true, childList: true, subtree: true})
    document.getElementById("curans").innerHTML = "Your current answer (in Descending Order) is"
    rbtn = document.createElement("button")
    rbtn.style.cssText = "font-family: inherit; font-size: inherit"
    rbtn.appendChild(document.createTextNode("Reset"))
    rbtn.addEventListener("click", freset)
    window.Reset.appendChild(rbtn)
    abtn = document.createElement("button")
    abtn.style.cssText = "font-family: inherit; font-size: inherit"
    abtn.appendChild(document.createTextNode("Switch to Evaluation in Ascending Order"))
    abtn.addEventListener("click", fsw)
    window.Reset.appendChild(abtn)
    ubtn = document.createElement("button")
    ubtn.style.cssText = "font-family: inherit; font-size: inherit"
    ubtn.appendChild(document.createTextNode("Undo"))
    ubtn.addEventListener("click", fundo)
    window.Reset.appendChild(ubtn)
    sbtn = document.createElement("button")
    sbtn.style.cssText = "font-family: inherit; font-size: inherit"
    sbtn.appendChild(document.createTextNode("Submit Answer"))
    sbtn.addEventListener("click", fsub)
    window.Submit.appendChild(sbtn)
    l2 = []
    clen1 = 6
    clen2 = 3
    function fiset()
    {
        console.log(sli)
        el = document.getElementById("Items")
        j = 0
        while(j<el.children.length)
        {
            ci = el.children[j]
            if (ci.tagName == "BR")
            {
                ci.remove()
                continue
            }
            else
                j++
        }
        c = 0
        i = 0
        while(i<el.children.length)
        {
            ci = el.children[i]
            if ((ci.id.includes("btn")) && (sli[ci.id.slice(3)][1]))
                {
                    el.children[i].style.display = "initial"
                    c++
                    if ((c%clen1 == 0) && (i != el.children.length-1))
                        Items.insertBefore(document.createElement("br"), el.children[i+1])
                }
            i++
        }
    }
    function fcset(li)
    {
        crans = document.getElementById("curans")
        crans.innerHTML = "Your current answer (in" + (t? " Ascending ":" Descending ") + "Order) is<br><br>"
        for (i = 0; i<li.length; i++)
        {
            crans.appendChild(document.createTextNode(sli[li[i]][0]))
            crans.appendChild(document.createTextNode((((i == li.length-1)?(""):(", ")))))
            if (((i+1)%clen2==0) && (i != li.length-1))
                crans.appendChild(document.createElement("br"))
        }
    }
    function fsw(f)
    {
        n = f.currentTarget.innerText
        if (t)
        {
            f.currentTarget.innerText = f.currentTarget.innerText.replace("Descending", "Ascending")
            document.getElementById("curans").innerText = document.getElementById("curans").innerText.replace("Ascending","Descending")
            t = 0
        }
        else
        {
            f.currentTarget.innerText = f.currentTarget.innerText.replace("Ascending", "Descending")
            document.getElementById("curans").innerText = document.getElementById("curans").innerText.replace("Descending","Ascending")
            t = 1
        }
        freset()
    }
    function fch(f)
    {
        f.currentTarget.style.display = "none"
        cid = f.currentTarget.id.slice(3)
        l2.push(cid)
        sli[cid][1] = 0
        fiset()
        fcset(l2)
    }
    function fundo(f)
    {
        if (l2.length)
        {
            p = l2.pop()
            document.getElementById("btn" + p).style.display = "initial"
            sli[p][1] = 1
            fiset()
            fcset(l2)
        }
    }
    function freset(f)
    {
        sli = sli.map(s => [s[0], 1])
        l2 = []
        fiset()
        fcset(l2)
    }
    function fsub(f)
    {
        if (Persistence.isAvailable())
        {
            Persistence.setItem("t", t)
            Persistence.setItem("ianso", l2)
            Persistence.setItem("iansl", sli)
        }
        if (typeof pycmd !== "undefined")
            pycmd("ans")
        else if (typeof study !== "undefined")
            study.drawAnswer()
        else if (typeof AnkiDroidJS !== "undefined")
            ItemsAnswer()
        else if (window.anki && window.sendMessage2)
            window.sendMessage2("ankitap", "midCenter")
    }
    for (i = 0; i<sli.length; i++)
    {
        btn = document.createElement("button")
        btn.appendChild(document.createTextNode(sli[i][0]))
        btn.id = "btn" + i.toString()
        btn.style.cssText = "font-family: inherit; font-size: inherit"
        window.Items.appendChild(btn)
        document.getElementById("btn" + i.toString()).addEventListener("click", fch)
    }
    fiset()
}
</script>

Back

<script>
if(void 0===window.Persistence){var e="github.com/SimonLammer/anki-persistence/",t="_default";if(window.Persistence_sessionStorage=function(){var i=!1;try{"object"==typeof window.sessionStorage&&(i=!0,this.clear=function(){for(var t=0;t<sessionStorage.length;t++){var i=sessionStorage.key(t);0==i.indexOf(e)&&(sessionStorage.removeItem(i),t--)}},this.setItem=function(i,n){void 0==n&&(n=i,i=t),sessionStorage.setItem(e+i,JSON.stringify(n))},this.getItem=function(i){return void 0==i&&(i=t),JSON.parse(sessionStorage.getItem(e+i))},this.removeItem=function(i){void 0==i&&(i=t),sessionStorage.removeItem(e+i)},this.getAllKeys=function(){for(var t=[],i=Object.keys(sessionStorage),n=0;n<i.length;n++){var s=i[n];0==s.indexOf(e)&&t.push(s.substring(e.length,s.length))}return t.sort()})}catch(n){}this.isAvailable=function(){return i}},window.Persistence_windowKey=function(i){var n=window[i],s=!1;"object"==typeof n&&(s=!0,this.clear=function(){n[e]={}},this.setItem=function(i,s){void 0==s&&(s=i,i=t),n[e][i]=s},this.getItem=function(i){return void 0==i&&(i=t),void 0==n[e][i]?null:n[e][i]},this.removeItem=function(i){void 0==i&&(i=t),delete n[e][i]},this.getAllKeys=function(){return Object.keys(n[e])},void 0==n[e]&&this.clear()),this.isAvailable=function(){return s}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var i=window.location.toString().indexOf("title"),n=window.location.toString().indexOf("main",i);i>0&&n>0&&n-i<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>
The Correct Descending Order for <b>{{Description}}</b> is<br><br>
<div id="cans"></div><br>
<div id="ians"></div>

<script>
cans = `{{List}}`.split(`{{Separator}}`).map(s => s.trim())
cansp = []
c1 = -1
for (i = 0; i<cans.length; i++)
{
    l1 = cans[i].split("/").length
    c1 += l1
    cansp.push([c1-l1+1, c1])
}
cans2 = cans.join().replaceAll("/",",").split(",")
ianso = []
iansl = []
t = 0
if (Persistence.isAvailable())
{
    ianso = Persistence.getItem("ians")
    iansl = Persistence.getItem("iansl")
    t = Persistence.getItem("t")
}
if (t)
    ians.reverse()
$("#cans").html("<span class = 'typeGood'>" + cans2.join(", ") + "</span>")
cansp2 = []
for (m1 = 0; m1<cansp.length; m1++)
    for (m2 = 0; m2+cansp[m1][0]<=cansp[m1][1]; m2++)
        cansp2.push(cansp[m1])
f = 1
if (cans2.length == ians.length)
{
    for (i = 0; i<cans2.length; i++)
    {
        a = cans2[i]
        b = iansl[ianso[i]][0]
        if (a != b)
        {
            if (!cans2.slice(cansp2[i][0],cansp2[i][1]+1).includes(b))
            {
                f = 0
                document.getElementById("ians").innerHTML = "<span class = 'typeGood'>" + ians.slice(0,i).join(", ") + (i?", ":"") + "</span>" + "<span class = 'typeBad'>" + ians[i] + "</span>" + "<span class = 'typeMissed'>, " + ians.slice(i+1).join(", ") + "</span>"
                break
            }
        }
    }
    if (f)
        $("#ians").html("<span class = 'typeGood'>" + ians.join(", ") + "</span>")
}
else
    $("#ians").html("<span class = 'typeBad'>" + ians.join(", ") + "</span>")
Persistence.clear()
</script>

SuhasK · March 14, 2025, 5:06am

I thought of asking an LLM of what my issue is and DeepSeek thinks that the issue is that MathJax doesn’t get rendered once the card is shown. It suggests that I create some function to force MathJax to be rendered on the entire card by adding classes. Is there some alternate way to call MathJax other than the classes method?

Here’s what DeepSeek told me

DeepSeek's Suggestion

Yes, exactly—that’s the core issue. MathJax only renders content during its initial processing pass unless explicitly told to reprocess new/changed elements. Here’s the concise breakdown and solution:

Why It Fails

Initial Render: MathJax processes static content on page load.
Dynamic Content: Elements added/moved later are invisible to MathJax unless manually triggered.

The Fix

Modify your button click handler to explicitly reprocess moved content:

function handleClick(index) {
    // ... your existing code to move the element to `curans` ...

    // After appending to `curans`, run:
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('curans')]);
}

Key Additions

Targeted Reprocessing
Instead of re-rendering the entire document (MathJax.Hub.Queue(["Typeset", MathJax.Hub]), target only the curans container to avoid performance issues.
Preserve MathJax Metadata
When moving elements, ensure you’re transferring the actual DOM nodes (not just their HTML/text content). Use cloneNode(true) instead of rebuilding from strings.
Async Safety Net
Wrap in setTimeout if elements are added after animations or other async operations:
```
setTimeout(() => {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, curansElement]);
}, 0);
```

Full Working Example

// Initialize buttons
const sli = ["First: $E=mc^2$", "Second: $A=\pi r^2$"];
const buttons = sli.map((text, index) => {
    const btn = document.createElement('button');
    btn.innerHTML = text;
    btn.onclick = () => moveToCurans(btn);
    return btn;
});

// Append buttons to DOM
buttons.forEach(btn => document.body.appendChild(btn));

// Move function
function moveToCurans(button) {
    // Clone the ENTIRE node (preserves MathJax state)
    const clone = button.cloneNode(true); 
    
    // Remove original button
    button.remove();
    
    // Append to curans
    const curans = document.getElementById('curans');
    curans.appendChild(clone);
    
    // Critical: Reprocess only the new content
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, clone]);
}

Why This Works

cloneNode(true): Copies the entire DOM subtree, including MathJax’s internal markup.
Targeted Typeset: Forces MathJax to reprocess only the moved element.
No Global Re-render: Maintains performance for complex cards.

Common Pitfalls

Rebuilding from HTML strings:
curans.innerHTML += ...
Always move/clone existing nodes.
Async timing:
Ensure DOM updates complete before calling Typeset.

This directly addresses the “works initially but breaks on interaction” behavior. Let me know if you need adjustments for your specific code structure!

SuhasK · March 14, 2025, 5:47am

Following on this, I switched to ChatGPT (I don’t know why I switched, felt bored I guess) and then continued seeing what I can do. Turns out DeepSeek was entirely right and I was able to fix it by adding the following bit of code to the end of fcset

        if (mf)
            MathJax.typesetPromise([curans])

I never thought that the LLMs would be able to help me find the issue, the only reason why I got to here is because I explained the entire issue to DeepSeek and then it hinted that this might be the root cause. I guess using LLMs to debug really requires the ability to give good prompts.

Here’s the entire code for the front if anybody wishes to use it for their cards.