[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.3

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