Virtual Latex math keyboard with MathJax or similar [closed]

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.

Aloe

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? – Dato

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. – Aloe

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, calculator – Dato

Thank you @Dato for your effort, It's highly appreciated, but that's quite what I was looking for though. – Aloe

Yeah, it was a long shot. All the best. – Dato

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 of editors, does it help? – Bitner

@mickliddy, Yes that's very useful, thank you :) – Aloe

Answer 1

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>

Valueless

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? – Aloe

With jQuery you can use 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. – Valueless

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. – Valueless

Wow, That's exactly what I was looking for, I kept searching for so long for this answer. Thank you man. – Aloe