latex - MathJax または類似の仮想ラテックス数学キーボード

Question

khanacademy.org や mathspace.co、または同様の Web サイトにあるような仮想数学キーボードを作成しようとしています。ここでは、数学記号を挿入して上書きして、学生の場合は質問に答えることができます。どうすれば達成できますかそんな感じ？khanacademy.org では、彼らは MathJax を使用しています。ドキュメントを読み通そうとしましたが、うまくいきませんでした。

Answer 1

MathQuillは、必要なものを達成するのに役立つようです。必要な入力機能はすべて備えていますが、デフォルトではキーボードは表示されません。以下はホームページのデモ コードで、スニペットでうまく動作します。MathQuill docsのオプションを使用して構成することをお勧めします。

キーボードは独立したコントロールであり、実装が非常に簡単です。たとえば、以下のブートストラップを使用します。キーボードは .cmd(str) を使用して MathQuill フィールドに入力コマンドを供給しています (フォーカス .focus() を返すことを忘れないでください) - function input()を参照してください。ブートストラップを使用するには、ブートストラップ サイトで説明されているように、bootstrap.css を含める必要があることに注意してください。

var mathFieldSpan = document.getElementById('math-field');
var MQ = MathQuill.getInterface(2);
var mathField = MQ.MathField(mathFieldSpan, {
  spaceBehavesLikeTab: true,
  handlers: {
    edit: function() {
      mathField.focus()
    }
  }
});

function input(str) {
  mathField.cmd(str)
  mathField.focus()
}

<link rel="stylesheet" href="http://mathquill.com/lib/mathquill.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://mathquill.com/lib/mathquill.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<p>Type math here: <span id="math-field"></span>
</p>
<div id="keyboard">
  <div class="btn-group" role="group" aria-label="math functions">
    <button type="button" class="btn btn-default" onClick='input("\\sqrt")'>√&lt;/button>
    <button type="button" class="btn btn-default" onClick= 'input("\\sin")'>sin</button>
    <button type="button" class="btn btn-default" onClick='input("\\cos")'>cos</button>
    <button type="button" class="btn btn-default" onClick='input("\\tan")'>tan</button>
  </div>
</div>