带有MathJax或类似功能的Virtual Latex数学键盘

Question

我正在尝试创建一个像khanacademy.org或mathspace.co或类似网站中的虚拟数学键盘,在那里你可以插入数学符号并写下来回答问题,如果你是学生,我怎样才能实现这样的事情？在khanacademy.org,他们使用MathJax,我试着通过文档阅读没有运气.

Answer 1

MathQuill似乎可以帮助您实现所需。默认情况下它不显示键盘，尽管它具有所有必需的输入功能。下面是他们来自主页的演示代码，它在代码段中运行良好。您可能希望使用MathQuill 文档中的选项进行配置。

键盘是单独的控件，实现起来非常简单，例如使用下面的引导程序。键盘正在使用 .cmd(str) 向 MathQuill 字段提供输入命令（不要忘记返回焦点 .focus()） - 请参阅函数input()。请注意，要使用 bootstrap，您需要按照bootstrap 站点中的描述包含 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")'>?</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>