[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, 10 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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Math editor test</title>
    <style>
        div.eqnbox { margin: 1em }
        textarea.math { font-family: monospace; height: 3em; width: 100%; }
    </style>
    <script>
      function addField() {
        var div = document.createElement('div');
        div.classList.add('eqnbox');
        var input = document.createElement('input');
        input.classList.add('math');
        input.setAttribute('data-implicit_operators', 'true');
        input.setAttribute('data-unit_mode', 'true');
        input.setAttribute('data-constants', 'c, pi, e, hbar, amu');
        input.setAttribute('spellcheck', 'false');
        div.appendChild(input);
        var removeb = document.createElement('button');
        removeb.appendChild(document.createTextNode('remove'));
        removeb.addEventListener('click', function(e) {
            div.parentNode.removeChild(div);
            initEditors();
        }, false);
        div.appendChild(removeb);
        var modeb = document.createElement('button');
        modeb.appendChild(document.createTextNode('switch mode'));
        modeb.addEventListener('click', function(e) {
            if (input.getAttribute('data-unit_mode') == 'true')
                input.setAttribute('data-unit_mode', 'false');
            else
                input.setAttribute('data-unit_mode', 'true');
            initEditors();
        }, false);
        div.appendChild(modeb);
        document.body.appendChild(div);
        initEditors();
      }
    </script>
</head>
<body>
    <p>Strict syntax, symbolic mode:</p>
    <div class="eqnbox">
        <textarea class="math" spellcheck="false" autofocus="autofocus"></textarea>
    </div>
    <p>Strict syntax, unit mode (no variable):</p>
    <div class="eqnbox">
        <textarea class="math" data-unit_mode="true" data-constants="c, pi, e, hbar, amu" spellcheck="false" autofocus="autofocus"></textarea>
    </div>
    <p>Lax syntax, symbolic mode:</p>
    <div class="eqnbox">
        <textarea class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"></textarea>
    </div>
    <p>Lax syntax, unit mode:</p>
    <div class="eqnbox">
        <textarea class="math" data-implicit_operators="true" data-unit_mode="true" data-constants="c, pi, e, hbar, amu" spellcheck="false" autofocus="autofocus"></textarea>
    </div>
    <div class="eqnbox">
        Test in a field <input class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"> with text around (Lax syntax, symbolic mode)
    </div>
    <div style="position: absolute; left: 500px; top: 400px; background: rgba(200, 255, 200, 0.7)">
        inside an absolute position div (lax symbolic)<br>
        <textarea class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"></textarea>
    </div>
    <p><button onclick="addField();">click to add a field</button></p>
    <p>static math on a line: <span class="math" data-implicit_operators="true">2x/(3y)</span></p>
    <p>static math as a block:</p>
    <div class="math" data-implicit_operators="true">2x/(3y)</div>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML"></script>
    <script src="src/definitions.js"></script>
    <script src="src/enode.js"></script>
    <script src="src/operator.js"></script>
    <script src="src/parse_exception.js"></script>
    <script src="src/parser.js"></script>
    <script src="src/token.js"></script>
    <script src="src/tokenizer.js"></script>
    <script src="src/ui.js"></script>
    <script>
        window.addEventListener('load', function(e) {
            initEditors(); // will be LCMATH.initEditors() with the minimized version
            updateMathSpanAndDiv(); // will be LCMATH.updateMathSpanAndDiv()
        }, false);
    </script>
</body>
</html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>