带有 MathJax 或类似软件的虚拟 Latex 数学键盘

Question

我正在尝试创建一个虚拟数学键盘，就像 khanacademy.org 或 mathspace.co 或类似网站中的那样，您可以在其中插入数学符号并覆盖它们以回答问题，如果您我是一名学生，我怎样才能取得这样的成就？在 khanacademy.org 他们正在使用 MathJax，我试图通读文档但没有成功。

Answer 1

好像MathQuill might help you to achieve what you need. It does not display keyboard by default, though it has all the required input capabilities. Below is their demo code from home page, which works nicely in the snippet. You might want to configure with options from MathQuill docs.

键盘是单独的控件，实现起来非常简单，例如使用下面的 bootstrap。键盘正在使用 .cmd(str) 向 MathQuill 字段提供输入命令（不要忘记 return focus .focus()）——参见函数 input()。请注意，要使用 bootstrap，您需要包含 bootstrap.css，如 bootstrap site 中所述：

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")'>√</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>

带有 MathJax 或类似软件的虚拟 Latex 数学键盘

Virtual Latex math keyboard with MathJax or similar

latex

virtual-keyboard

mathjax

khan-academy

mathquill