[BACK]Return to test.html CVS log [TXT] [DIR] Up to [LON-CAPA] / loncom / html / adm / LC_math_editor

Annotation of loncom/html/adm/LC_math_editor/test.html, revision 1.2

1.1       damieng     1: <!DOCTYPE html>
                      2: <html>
                      3: <head>
                      4:     <meta charset="utf-8">
                      5:     <title>Math editor test</title>
                      6:     <style>
                      7:         div.eqnbox { margin: 1em }
                      8:         textarea.math { font-family: monospace; height: 3em; width: 100%; }
                      9:         span.math-error { border: solid 1px red; min-width: 1px; }
                     10:     </style>
1.2     ! damieng    11:     <script>
        !            12:       function addField() {
        !            13:         var div = document.createElement('div');
        !            14:         div.classList.add('eqnbox');
        !            15:         var input = document.createElement('input');
        !            16:         input.classList.add('math');
        !            17:         input.setAttribute('data-implicit_operators', 'true');
        !            18:         input.setAttribute('data-unit_mode', 'true');
        !            19:         input.setAttribute('data-constants', 'c, pi, e, hbar, amu');
        !            20:         input.setAttribute('spellcheck', 'false');
        !            21:         div.appendChild(input);
        !            22:         var removeb = document.createElement('button');
        !            23:         removeb.appendChild(document.createTextNode('remove'));
        !            24:         removeb.addEventListener('click', function(e) {
        !            25:             div.parentNode.removeChild(div);
        !            26:             initEditors();
        !            27:         }, false);
        !            28:         div.appendChild(removeb);
        !            29:         var modeb = document.createElement('button');
        !            30:         modeb.appendChild(document.createTextNode('switch mode'));
        !            31:         modeb.addEventListener('click', function(e) {
        !            32:             if (input.getAttribute('data-unit_mode') == 'true')
        !            33:                 input.setAttribute('data-unit_mode', 'false');
        !            34:             else
        !            35:                 input.setAttribute('data-unit_mode', 'true');
        !            36:             initEditors();
        !            37:         }, false);
        !            38:         div.appendChild(modeb);
        !            39:         document.body.appendChild(div);
        !            40:         initEditors();
        !            41:       }
        !            42:     </script>
1.1       damieng    43: </head>
                     44: <body>
                     45:     <p>Strict syntax, symbolic mode:</p>
                     46:     <div class="eqnbox">
                     47:         <textarea class="math" spellcheck="false" autofocus="autofocus"></textarea>
                     48:     </div>
                     49:     <p>Strict syntax, unit mode (no variable):</p>
                     50:     <div class="eqnbox">
                     51:         <textarea class="math" data-unit_mode="true" data-constants="c, pi, e, hbar, amu" spellcheck="false" autofocus="autofocus"></textarea>
                     52:     </div>
                     53:     <p>Lax syntax, symbolic mode:</p>
                     54:     <div class="eqnbox">
                     55:         <textarea class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"></textarea>
                     56:     </div>
                     57:     <p>Lax syntax, unit mode:</p>
                     58:     <div class="eqnbox">
                     59:         <textarea class="math" data-implicit_operators="true" data-unit_mode="true" data-constants="c, pi, e, hbar, amu" spellcheck="false" autofocus="autofocus"></textarea>
                     60:     </div>
                     61:     <div class="eqnbox">
1.2     ! damieng    62:         Test in a field <input class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"> with text around (Lax syntax, symbolic mode)
        !            63:     </div>
        !            64:     <div style="position: absolute; left: 500px; top: 400px; background: rgba(200, 255, 200, 0.7)">
        !            65:         inside an absolute position div (lax symbolic)<br>
        !            66:         <textarea class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"></textarea>
1.1       damieng    67:     </div>
1.2     ! damieng    68:     <p><button onclick="addField();">click to add a field</button></p>
        !            69:     <p>static math on a line: <span class="math" data-implicit_operators="true">2x/(3y)</span></p>
        !            70:     <p>static math as a block:</p>
        !            71:     <div class="math" data-implicit_operators="true">2x/(3y)</div>
1.1       damieng    72:     <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML"></script>
                     73:     <script src="src/definitions.js"></script>
                     74:     <script src="src/enode.js"></script>
                     75:     <script src="src/operator.js"></script>
                     76:     <script src="src/parse_exception.js"></script>
                     77:     <script src="src/parser.js"></script>
                     78:     <script src="src/token.js"></script>
                     79:     <script src="src/tokenizer.js"></script>
                     80:     <script src="src/ui.js"></script>
                     81:     <script>
                     82:         window.addEventListener('load', function(e) {
1.2     ! damieng    83:             initEditors(); // will be LCMATH.initEditors() with the minimized version
        !            84:             updateMathSpanAndDiv(); // will be LCMATH.updateMathSpanAndDiv()
1.1       damieng    85:         }, false);
                     86:     </script>
                     87: </body>
                     88: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>