latexmathjaxvirtual-keyboardkhan-academymathquill

Virtual Latex math keyboard with MathJax or similar

I'm trying to create a virtual math keyboard like the one in khanacademy.org or mathspace.co or similar websites, where you can insert math symbols and write over them to answer a question if you're a student, how can I achieve something like that? In khanacademy.org they're using MathJax, and I tried to read through the documentation with no luck.

enter image description here

enter image description here

Solution

  • It seems 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.

    Keyboard is separate control which is quite simple to implement, for instance using bootstrap below. Keyboard is feeding input commands to MathQuill field with .cmd(str) (not forgetting to return focus .focus()) - see function input(). Note, to use bootstrap you will need to include bootstrap.css as described on 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>