Virtual Latex math keyboard with MathJax or similar

Question

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.

When you say, "I tried to read through the documentation with no luck", do you mean that you didn't understand the documentation or is there some specific part of the example code from the documentation that did not work for you? I'm having trouble understanding what specifically your question is? Do you not understand MathJax or are you asking us to tell you how to create the keyboard? Can you show some code that you have tried that isn't working for you? — quarterpi, Dec 12 '16 at 19:15
I couldn't find something specific in the documentation about how to do that, but I tried to look for other options other than MathJax. I'm trying to find a helpful code reference about how to do this, it doesn't have to be MathJax. — Ruby, Dec 13 '16 at 08:02
Okay, so this may not be exactly what you are looking for, but I thought I would share it in the hopes that it might help give you some ideas for how to implement your project. The first link is to a math keyboard and the second is a calculator. Both can be found on GitHub. [keyboard](https://github.com/MrCoffey/MathKeyboard), [calculator](https://github.com/bluepichu/dimensional-calculator) — quarterpi, Dec 14 '16 at 04:45
Thank you @quarterpi for your effort, It's highly appreciated, but that's quite what I was looking for though. — Ruby, Dec 16 '16 at 10:49
I've been using MathJax in a project of my own, but I don't think it is able to create a keyboard alone. AFAIK, the only thing MathJax does is render a math string (in whichever format) as MML/HTML/etc. However, MathJax github wiki has [this list](https://github.com/mathjax/MathJax-docs/wiki/List-of-web-based-math-editors) of editors, does it help? — Micheal Hill, Dec 30 '16 at 01:58

Max Vorobjev · Accepted Answer · 2016-12-31T13:09:40.190

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>

That's very useful @MaxVorobjev. It's pretty much what I was looking for. However I'm not familiar with React, is there's a way to do this without React or Angular, just a plain JS and jQuery? — Ruby, Dec 31 '16 at 10:22
With jQuery you can use https://mottie.github.io/Keyboard/ which is quite configurable keyboard, see keypad example, you can keep input function same, just bind it to onClick event with jQuery keyboard. — Max Vorobjev, Dec 31 '16 at 11:01
Actually even simpler than that, you can just use bootstrap CSS which will allow you to implement beautiful keyboard with less footprint. Edited answer, see now it uses only bootstrap, jQuery and Mathquill. — Max Vorobjev, Dec 31 '16 at 13:11
Wow, That's exactly what I was looking for, I kept searching for so long for this answer. Thank you man. — Ruby, Dec 31 '16 at 15:12

Virtual Latex math keyboard with MathJax or similar

1 Answers1