Embed raw HTML into MathJax output?

[Lea Hayes]

I am looking to render equations with blank fields that the user can fill in.

I am using a react wrapper for MathJax v3 and am able to easily provide an options object which finds its way into MathJax.

What is the simplest way to achieve this?

Many thanks

[Lea Hayes]

I may have found something that could work but I am sure that it's not the best solution so I am still interested in how this should be solved.

However, I can amend the following to the start of the MathJax input:

$\newcommand{\field}[1]{\class{field field--#1}{}}$

And then use as follows:

$y = x + \field{1} + 2x$.

With a script that substitutes fields with whatever has been configured for those fields:

document.querySelectorAll(".field")...

Best regards,

[Davide Cervone]

MathJax does not currently allow for embedded HTML, but there is an old hack using MathML's <semantics> element to make it possible to put HTML into an expression.  This was discussed in issue 2210:

https://github.com/mathjax/MathJax/issues/2210

The FilterUtil bug that was discussed there was fixed, so the patch in the example code is no longer needed.  So you could use

MathJax = {
  tex: {packages: {'[+]': ['input']}},
  startup: {
    ready() {
      const Configuration = MathJax._.input.tex.Configuration.Configuration;
      const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
      const TEXCLASS = MathJax._.core.MmlTree.MmlNode.TEXCLASS;
      
      new CommandMap('input', {input: 'Input'}, {
        Input(parser, name) {
          const xml = parser.create('node', 'XML');
          const id = parser.GetBrackets(name, '');
          const w = parser.GetBrackets(name, '5em');
          const value = parser.GetArgument(name);
          xml.setXML(MathJax.startup.adaptor.node('input', {
            id: id, value: value, style: {width: w}, xmlns: 'http://www.w3.org/1999/xhtml'
          }), MathJax.startup.adaptor);
          xml.getSerializedXML = function () {
            return this.adaptor.outerHTML(this.xml) + '</input>';
          }
          parser.Push(
            parser.create('node', 'TeXAtom', [
              parser.create('node', 'semantics', [
                parser.create('node', 'annotation-xml', [
                  xml
                ], {encoding: 'application/xhtml+xml'})
              ])
            ], {texClass: TEXCLASS.ORD})
          );
        }
      });
      Configuration.create('input', {handler: {macro: ['input']}});

      MathJax.startup.defaultReady();
    }
  }
};

to define a `\input` macro that creates an input field.  There are optional argument for an id to use for the input field, and for the width of the field, and a required argument for the initial contents of the field.  So you could use something like

$$ \int_{\input[sub][1em]{0}}^{\input[sup][1em]{1}} \input[integrand][10em]{}\, dx$$

to set up an integral with input fields for the limits (initially showing 0 and 1) and the integrand (blank).

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/78a912d6-55c1-4b9b-b51d-d3765ed3d17en%40googlegroups.com.

[Lea Hayes]

Thank you Davide, this is very helpful :)

You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/Udj9oD9uyU8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/F95E359D-741B-496B-AB7D-3B6F4C19FD31%40mathjax.org.