[BACK]Return to test.html CVS log [TXT] [DIR] Up to [LON-CAPA] / loncom / html / adm / LC_math_editor
File:  [LON-CAPA] / loncom / html / adm / LC_math_editor / test.html
Revision 1.3: download - view: text, annotated - select for diffs
Wed Feb 25 20:53:59 2015 UTC (9 years, 2 months ago) by damieng
Branches: MAIN
CVS tags: version_2_12_X, HEAD
math editor: hardcoded CSS to avoid naming convention conflicts with nextgen LON-CAPA, and hiding preview on mouseenter only if there was no error

    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>
   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>
   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">
   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>
   66:     </div>
   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>
   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) {
   82:             initEditors(); // will be LCMATH.initEditors() with the minimized version
   83:             updateMathSpanAndDiv(); // will be LCMATH.updateMathSpanAndDiv()
   84:         }, false);
   85:     </script>
   86: </body>
   87: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>