Created
March 29, 2019 20:35
-
-
Save AlabasterAxe/bae62dc453295e3c872d689ec72ce625 to your computer and use it in GitHub Desktop.
MathJax Double Buffering Thing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>MathJax Dynamic Math Test Page with ASCIIMath Input</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script> | |
| <style> | |
| input {margin-top: .7em} | |
| .box {position: relative} | |
| .container { | |
| border: 1px solid black; | |
| padding: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| Messages about mathematics: | |
| <pre id="MathMessages" class="output"> | |
| </pre> | |
| </p> | |
| <script> | |
| // | |
| // Use a closure to hide the local variables from the | |
| // global namespace | |
| // | |
| (function () { | |
| var slides = 1; // number of slides | |
| var QUEUE = MathJax.Hub.queue; // shorthand for the queue | |
| var maths = [], box = [], hidden = []; | |
| // | |
| // Hide and show the box (so it doesn't flicker as much) | |
| // | |
| var SWAP = function (i) { | |
| console.log("Hidden element in swap:" + hidden[i]); | |
| const hiddenThing = box[i][hidden[i]]; | |
| hiddenThing.style.display = "block"; | |
| let newHidden = "b"; | |
| if (hidden[i] === "b") { | |
| newHidden = "a"; | |
| } | |
| box[i][newHidden].style.display = "none"; | |
| hidden[i] = newHidden; | |
| } | |
| // | |
| // Get the element jax when MathJax has produced it. | |
| // | |
| QUEUE.Push(function () { | |
| for (var i = 0; i < slides; i++) { | |
| maths[i] = []; | |
| maths[i]["a"] = MathJax.Hub.getAllJax("MathOutput" + i + "a")[0]; | |
| maths[i]["b"] = MathJax.Hub.getAllJax("MathOutput" + i + "b")[0]; | |
| box[i] = []; | |
| box[i]["a"] = document.getElementById("box" + i + "a"); | |
| box[i]["b"] = document.getElementById("box" + i + "b"); | |
| hidden[i] = "0"; | |
| SWAP(i); // box is initially hidden so the braces don't show | |
| } | |
| }); | |
| // | |
| // The onchange event handler that typesets the math entered | |
| // by the user. Hide the box, then typeset, then show it again | |
| // so we don't see a flash as the math is cleared and replaced. | |
| // | |
| window.UpdateMath = function (i,amath) { | |
| console.log("Amath in updatemath:" + amath); | |
| console.log("Hidden Element in updatemath:" + hidden[i]); | |
| QUEUE.Push(["Text",maths[i][hidden[i]],amath],[SWAP, i]); | |
| } | |
| // var math = document.getElementById("MathMessages"); | |
| // MathJax.Hub.Register.MessageHook("New Math",function (message) { | |
| // var script = MathJax.Hub.getJaxFor(message[1]).SourceElement(); | |
| // for (const i of [1, 2]) { | |
| // for (const j of ["a","b"]) { | |
| // if (script === maths[i][j]) { | |
| // SHOW(i, j); | |
| // } | |
| // } | |
| // } | |
| // MathJax.HTML.addText(math,message.join(" ")+": '"+script.text+"'"); | |
| // MathJax.HTML.addElement(math,"br"); | |
| // }); | |
| })(); | |
| </script> | |
| <p> | |
| The page can include \(\rm\TeX\) code as well as ASCIIMath: `root(3)(x+1)`. | |
| </p> | |
| <div class="container"> | |
| <p> | |
| Type some ASCIIMath code:<br /> | |
| <input id="MathInput0" size="80" oninput="UpdateMath(0,this.value)" /> | |
| </p> | |
| <p>You typed:</p> | |
| <div class="box" id="box0a" style="display:none"> | |
| <div id="MathOutput0a" class="output">` `</div> | |
| </div> | |
| <div class="box" id="box0b" style="display:none"> | |
| <div id="MathOutput0b" class="output">` `</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment