Putting [[input]]s into TeX

[anst-i]

It is currently not possible to use [[input]] boxes within TeX environments. It would be very useful to have this, though! (I tried looking for an open issue on that, but I didn't find any? If there is one, we can move over there.)

MathJax originally was not able to do this, but example scripts for MathJax 3 have been written.

I'm currently vibe coding my way through this. As a proof of concept, the following code works when added to "Appearance > Additional HTML > Within HEAD" by the Moodle admin for basic input boxes:

<style>
    /* Layout rules to make native Moodle inputs fit cleanly inside an equation */
    .mjx-math-input {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 4px !important;
        padding: 0.1rem 0.4rem !important;
        height: 2.2em !important;
        min-height: 2.2em !important;
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    }
    .custom-validation-wrapper {
        margin-top: 5px;
        font-size: 0.9em;
        display: inline-block;
    }
</style>

<script>
(function() {
    var realMathJax = window.MathJax || {};

    Object.defineProperty(window, 'MathJax', {
        get: function() { return realMathJax; },
        set: function(newConfig) {
            if (newConfig && newConfig.startup) {
                
                newConfig.tex = newConfig.tex || {};
                newConfig.tex.packages = newConfig.tex.packages || {};
                if (Array.isArray(newConfig.tex.packages)) {
                    newConfig.tex.packages.push('custom-input-pkg');
                } else {
                    newConfig.tex.packages['[+]'] = newConfig.tex.packages['[+]'] || [];
                    newConfig.tex.packages['[+]'].push('custom-input-pkg');
                }

                var originalReady = newConfig.startup.ready || function() { MathJax.startup.defaultReady(); };
                
                newConfig.startup.ready = function() {
                    try {
                        const stackInputs = document.querySelectorAll('input[type="text"]');
                        
                        stackInputs.forEach(input => {
                            if (input.id && input.id.includes('ans')) {
                                
                                let target = input;
                                if (input.parentElement && input.parentElement.tagName === 'SPAN' && input.parentElement.className.includes('stack_input')) {
                                    target = input.parentElement;
                                }

                                let block = target.closest('p, div, td, li') || document.body;
                                let range = document.createRange();
                                range.setStart(block, 0);
                                range.setEndBefore(target);
                                let textBefore = range.toString();

                                let lastOpen = Math.max(textBefore.lastIndexOf('\\('), textBefore.lastIndexOf('\\['));
                                let lastClose = Math.max(textBefore.lastIndexOf('\\)'), textBefore.lastIndexOf('\\]'));

                                let isMath = lastOpen > lastClose;

                                if (isMath) {
                                    // THE FIX: Find the actual Moodle form and put the vault inside it!
                                    const parentForm = input.closest('form') || document.body;
                                    let vault = parentForm.querySelector('.stack-input-vault');
                                    if (!vault) {
                                        vault = document.createElement('div');
                                        vault.className = 'stack-input-vault';
                                        vault.style.display = 'none'; // Keep it safely hidden inside the form
                                        parentForm.appendChild(vault);
                                    }

                                    const id = input.id;
                                    const size = input.getAttribute('size') || '10';
                                    const width = size + 'ch'; 
                                    
                                    const macroText = ` \\input[${id}][${width}]{} `;
                                    const parent = target.parentNode;
                                    
                                    parent.insertBefore(document.createTextNode(macroText), target);
                                    vault.appendChild(input); 
                                    
                                    if (target !== input) target.remove(); 
                                    parent.normalize(); 
                                }
                            }
                        });
                    } catch(e) {
                        console.error("MathJax Pre-processor Error:", e);
                    }

                    try {
                        const {Configuration} = MathJax._.input.tex.Configuration;
                        const {CommandMap} = MathJax._.input.tex.SymbolMap;
                        
                        const InputMacro = function(parser, name) {
                            const id = parser.GetBrackets(name, '');
                            const w = parser.GetBrackets(name, '5em');
                            
                            const mtext = parser.create('node', 'mtext', [ parser.create('text', '') ], {
                                "class": "mjx-stack-input-placeholder",
                                "data-id": id,
                                "data-width": w
                            });
                            parser.Push(mtext);
                        };

                        new CommandMap('custom-input-pkg', { input: 'InputMacro' }, {InputMacro});
                        Configuration.create('custom-input-pkg', { handler: {macro: ['custom-input-pkg']} });
                    } catch(e) {
                        console.error("MathJax Package Error:", e);
                    }
                    
                    originalReady();
                };
            }
            realMathJax = newConfig;
        }
    });

    function swapPlaceholders() {
        const placeholders = document.querySelectorAll('.mjx-stack-input-placeholder:not(.processed)');
        
        placeholders.forEach(function(el) {
            el.classList.add('processed');
            
            const id = el.getAttribute('data-id') || '';
            const w = el.getAttribute('data-width') || '5em';
            
            // THE FIX: Prevent Moodle from throwing errors on empty macro passes
            if (!id) return; 
            
            const input = document.createElement('input');
            input.type = 'text';
            
            let realStackInput = document.getElementById(id); 

            if (realStackInput) {
                input.className = realStackInput.className;
                input.classList.add('mjx-math-input');
                input.style.width = w; 
                input.value = realStackInput.value;

                const syncAndTrigger = function(e) {
                    realStackInput.value = e.target.value;
                    realStackInput.dispatchEvent(new Event('input', { bubbles: true }));
                    realStackInput.dispatchEvent(new Event('change', { bubbles: true }));
                    
                    if (e.type === 'keyup') {
                        const keyEvent = new KeyboardEvent('keyup', {
                            bubbles: true, cancelable: true,
                            key: e.key, code: e.code, keyCode: e.keyCode
                        });
                        realStackInput.dispatchEvent(keyEvent);
                    }
                    if (typeof window.jQuery !== 'undefined') {
                        window.jQuery(realStackInput).trigger('change').trigger('keyup');
                    }
                };

                input.addEventListener('keyup', syncAndTrigger);
                input.addEventListener('input', syncAndTrigger);
                input.addEventListener('blur', function(e) {
                    realStackInput.value = e.target.value;
                    realStackInput.dispatchEvent(new Event('blur', { bubbles: true }));
                    if (typeof window.jQuery !== 'undefined') {
                        window.jQuery(realStackInput).trigger('blur');
                    }
                });
            }

            el.innerHTML = '';
            el.appendChild(input);
        });
    }

    const observer = new MutationObserver(swapPlaceholders);
    document.addEventListener("DOMContentLoaded", function() {
        observer.observe(document.body, { childList: true, subtree: true });
        swapPlaceholders(); 
    });

})();
</script>

Here's a sample question you can use:

questions-Dev Sandbox Course-Mathjax Input-20260317-1042.xml

There are currently three known issues to me with the code above:

• The styling isn't exactly the same (but that's of minor importance to me right now)
• It would be much nicer to have it shipped as part of the actual STACK code, instead of having to rely on a the Moodle admin adding this
• This code only works for "basic" input boxes, in the sense that trying it within subscripts as in \(\displaystyle \int_{[[input:ans3]]}^{[[input:ans4]]} [[input:ans5]]\ \mathrm{d}x\) breaks the question.

I am working on both these issues and create a proper branch (off dev) when I'm ready for that.

[anst-i]

Oh well, that was quick: Gemini Pro thinks it is not possible to modify the PHP code in an upgrade-safe and reliable way. If someone wants more information about this, please reach out to me and I'm happy to show you more.

[aharjula]

Ohh well... I guess this will stay on the wish list, it has only been there for 12 years... You were not the first trying to do this, but maybe the first with GenAI.

Over the years, the general issues where this has failed have been mostly related to:

1. Injecting the logic into the Moodle JS environment and through it to MathJax.
2. Dealing with MathJax redraws, but I guess you had already thought about that.
3. Working with the various MathJax render modes.
4. Accessibility...
5. Premature planning for expansion to other input types, e.g. matrices and dropdowns... Also, those subscripts/superscripts would be nice.

Personally, I have already lost faith, as we simply cannot have everything for everyone at the same time. But it's good that people still try...

[sangwinc]

Thanks for looking into this @anst-i. Honestly, I think so many other MathJax users would like this feature, that it should ship with MathJax itself. If we patch this, and don't get the feature into MathJax we will pick up a perpetual technical maintenance issue! I think it would be great if we could solve this, but rather than shipping it with STACK we should send MathJax the pull request.

I wonder if anyone else has solved this, e.g. @christianp have you looked at this issue?

[christianp]

MathJax v4 added support for embedding arbitrary HTML: see https://docs.mathjax.org/en/latest/upgrading/whats-new-4.0/embedded-html.html#html-in-tex.

When it came out, I made a little test page at https://mathjax-v4.think.somethingorotherwhatever.com/index.html, showing an input box inside maths notation. We're a bit limited on what we can put inside the <tex-html> tag, and it gets remade from scratch each time MathJax re-renders, so there's a bit of work to make it robust.

[anst-i]

@sangwinc I am not sure MathJax is really the problem and that they could do much. Putting input fields into TeX formulas is not the problem, but rather hooking up everything with the machinery STACK and Moodle need.

Some problems Gemini Pro mentioned:

• If we try changing how [[input]] works on the core PHP side, STACK's renderer needs to find out if [[input]] is used within TeX delimiters or not, and rewrite the question text accordingly. The suggestion was to use regular expressions, but it is difficult ensure it works and survives future code changes.
• One idea to circumvent this problem is to have a second input block type (or a flag) to mark math mode from the question editor side (e.g. [[mathinput:ansN]] or [[input:ansN,math]]). A custom MathJax macro (like \stackinput) can be used to put the box, but this input box also needs to have the same functionality that STACK's input boxes have, i.e. validation and making them available for marking. But that seems not possible within TeX delimiters, since heavy filtering is happening, so that STACK's internal tokens are gone.

Here's what the LLM wrote, refering to line 135 of renderer.php, because I did run into that exception:

The Anatomy of the Line 135 Crash

When STACK compiles text, it doesn't immediately output HTML. Instead, it replaces your STACK tags with temporary internal tokens, like {!{12345}!}.

It then hands the entire text string over to Moodle’s core text filters (MathJax, Multi-lang, etc.) via format_text().

The crash happens because Moodle's text filters see that {!{12345}!} token sitting inside your LaTeX math delimiters (\( ... \)). The filters assume it's invalid math syntax and they aggressively mangle, strip, or alter the token.

When Moodle hands the text back to STACK, STACK looks for {!{12345}!} so it can finally inject the real HTML <input>. But the token is gone. STACK panics because the counts don't match, and it throws that exact "Inconsistent placeholders" (Line 135) error.
Why [[mathinput]] Fails the Architecture Test

If we wrote a custom PHP block class for [[mathinput:ans1]], we would have to decide what its internal render() method outputs. We only have two choices, and neither works:

Scenario A: It outputs both the macro and the hidden HTML token
If we program the tag to output \stackinput{ans1} <span style="display:none;">{!{token}!}</span>, that hidden token is still physically sitting inside the LaTeX equation when Moodle parses it. Moodle will strip it, and we get the Line 135 crash.

Scenario B: It outputs ONLY the macro
If we program the tag to only output \stackinput{ans1}, Moodle's filters won't crash! However, because the real input token was never generated, the actual HTML <input> box will never be added to the page. The only way to get the real input box on the page would be for you, the author, to manually write [[input:ans1]] at the bottom of the question text anyway.
If you have to manually write the real inputs at the bottom anyway, [[mathinput:ans1]] is literally just a synonym for typing \stackinput{ans1}, so it doesn't save you any authoring effort.

The LLM then proposed to stick with \stackinput and the HTML extension, where users would have to write like

<p>Euler's identity: \( e^{ i \pi} + \stackinput{ans1} = 0 \)</p>
[[validation:ans1]]

<p>Within an integral: \(\displaystyle \int_{\stackinput{ans3}}^{\stackinput{ans4}} \stackinput{ans5}\ \mathrm{d}x\)</p>
<div>[[validation:ans3]] [[validation:ans4]] [[validation:ans5]]</div>

<span style="display:none;">
    [[input:ans1]][[input:ans3]][[input:ans4]][[input:ans5]]
</span>

If someone has more insights into how it might still work, I'd be happy for pointers. I'm really far from an expert on how Moodle and STACK render their HTML and JS output!

[aharjula]

Well, realistically, what the LLM proposes is the way to go. The price of having inputs inside TeX is that one needs to confirm that this is what one wants by using \stackinput{ans1} and having the matching [[input:ans1]] somewhere. Either hidden by style or by the hidden extra option.

The real inputs need to stay outside the TeX that may get re-rendered at any point. What we need is for the logic that turns \stackinput{ans1} into an input field inside the TeX presentation to go and fetch the current value from the real-input field, e.g., using STACK-JS with that key "ans1", which would work if the rendering would happen in the DOM inside the question, however as this is most likely done somewhere outside the DOM tree the STACK-JS logic of identifying the correct "ans1" for this question from among multiple questions would not work, so some [[quid/]] style logic may need to be added, and once it has fetched the correct one also create a listener for the TeX side input to transmit any input-events targetting it to the real input. And all that needs to happen every time the TeX gets re-rendered, and that attachment needs to be redone.

The outside DOM issue related to STACK-JS logic is probably something that one could solve by having a new block. As you or your AI said, but [[mathinput:ans1]] (instead of generating some HTML) might generate something like \stackinput{ans1}{QUID} which would be much less sensitive to filtering and which would then identify the correct input when one would have multiple questions with "ans1".

Basically, being able to place elements inside MathJax is nice. But we also need to generate and evaluate logic when we generate those elements. Thus, the placement and binding of those elements should happen on the MathJax side, i.e., make MathJax render the \stackinput{}{} macro.

The problem with pushing any of this to MathJax is that the sensible solutions to the issue at hand require logic to execute on the MathJax side, and if that logic is tightly tied to STACK, what is the point for MathJax to carry it? It would make mich more sense to have a MathJax plugin that we load in that then declares that \stackinput{}{} macro and contains the logic to interpret the metadata available from the real input, to generate the input, fill it with the existing value and add the listeners to bind its value to the real one, and to do that every time MathJax re-renders.