widget_prototype_amandeep.html

<link rel="stylesheet" href="http://mathquill.com/lib/mathquill-0.10.0.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--<script src="mathquill.js"></script>-->
<script src="https://gist.githubusercontent.com/hiamandeep/c8a5b2d2586691dee62e/raw/a27cf5888024f1c8aff1dcac62c39c534e44340c/mathquill_custom.js"></script>

<p>Type math here: <span id="math-field"></span></p>
<p>LaTeX of what you typed: <span id="latex"></span></p>
<div class="demo">
<br> <br> 
<input id = "btnSqr" type="submit" value="square"/>
<input id = "btnSqrt" type="submit" value="sqrt"/>
<input id = "btnPow" type="submit" value="power"/>
<input id = "btnInt" type="submit" value="Integration"/>
<br><br>
<input id = "btnDefInt" type="submit" value="Definite Integration"/>
<input id = "btnDiff" type="submit" value="Differentiation"/>
<input id = "btnLim" type="submit" value="Lim"/>
<input id = "btnClr" type="submit" value="c"/>
<br> <br> 
<input id = "btnInf" type="submit" value="oo"/>
<input id = "e" type="submit" value="e"/>
<input id = "btnPi" type="submit" value="pi"/>
<input id = "x" type="submit" value="x"/>
<input id = "y" type="submit" value="y"/>
<input id = "y" type="submit" value="z"/>
<input id = "btnSin" type="submit" value="Sin"/>
<input id = "btnCos" type="submit" value="Cos"/>
<input id = "btnTan" type="submit" value="Tan"/>
<br> <br><br> 
</div>
<input type="button" value="1" id="1" style="width:50px; height:50px; float:left;"/>
<input type="button" value="2" id="2" style="width:50px; height:50px; float:left;"/>
<input type="button" value="3" id="3" style="width:50px; height:50px; float:left;"/>
<input type="button" value="+" id="plus" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<input type="button" value="4" id="4" style="width:50px; height:50px; float:left;"/>
<input type="button" value="5" id="5" style="width:50px; height:50px; float:left;"/>
<input type="button" value="6" id="6" style="width:50px; height:50px; float:left;"/>
<input type="button" value="-" id="sub" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<input type="button" value="7" id="7" style="width:50px; height:50px; float:left;"/>
<input type="button" value="8" id="8" style="width:50px; height:50px; float:left;"/>
<input type="button" value="9" id="9" style="width:50px; height:50px; float:left;"/>
<input type="button" value="/" id="divi" style="width:50px; height:50px; float:left;"/>
<br><br><br>
<input type="button" value="0" id="0" style="width:50px; height:50px; float:left;"/>
<input type="button" value="." id="dot" style="width:50px; height:50px; float:left;"/>
<input type="button" value="(" id="lbrac" style="width:50px; height:50px; float:left;"/>
<input type="button" value=")" id="rbrac" style="width:50px; height:50px; float:left;"/>



<script>

var mathFieldSpan = document.getElementById('math-field');
var latexSpan = document.getElementById('latex');

var MQ = MathQuill.getInterface(2); // for backcompat
var mathField = MQ.MathField(mathFieldSpan, {
  spaceBehavesLikeTab: true, // configurable
  restrictMismatchedBrackets: true,
  handlers: {
    edit: function() { // useful event handlers
      latexSpan.textContent = mathField.latex(); // simple API
      

    }
  }
});

$(document).ready(function() {
    $("#btnSqrt").click(function(){
        mathField.cmd('\\sqrt')
        mathField.focus()
    }); 
    $("#btnSqr").click(function(){
        mathField.write('\\^2')
        mathField.focus()
    }); 
     $("#btnPow").click(function(){
        mathField.write('\\^{}')
        mathField.keystroke('Up') //move the cursor up to fill the power
        mathField.focus()
    });
        $("#btnClr").click(function(){
        mathField.keystroke('Backspace') 
        mathField.focus()
    }); 
    $("#btnInt").click(function(){
        mathField.cmd('\\int')
        mathField.focus()
    });

    $("#btnDefInt").click(function(){
        mathField.write('\\int_{}^{}')
        mathField.focus()
    }); 
    $("#btnDiff").click(function(){
        mathField.write('\\frac{d}{dx} ')
        mathField.focus()
    });
    $("#btnLim").click(function(){
        mathField.write('\\lim_{x\\to\\infty} ')
        mathField.focus()
    });
    $("#btnInf").click(function(){
        mathField.cmd('\\infty')
        mathField.focus()
        
    });
    $("#btnPi").click(function(){
        mathField.cmd('\\pi')
        mathField.focus()
        
    });

    $("#btnSin").click(function(){
        mathField.cmd('\\sin')
        mathField.focus()
        
    });

    $("#btnCos").click(function(){
        mathField.cmd('\\sin')
        mathField.focus()
        
    });

    $("#btnTan").click(function(){
        mathField.cmd('\\sin')
        mathField.focus()
        
    });

 

      	$("#divi").click(function(){
        mathField.cmd('/')
        mathField.focus()
        
    });


    $('#1,#2,#3,#4,#5,#6,#7,#8,#9,#0,#e,#x,#y,#z,#plus,#sub,#dot,#lbrac,#rbrac').click(function(){
		var v = $(this).val();
		mathField.write(v)	
		mathField.focus()
	});



});
</script>