MathJax-JSXGRAPH

HTML

<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;dummy=.js"></script>
<script src="http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/JSXGraph/src/loadjsxgraph.js"></script>
<script type="text/x-mathjax-config"> MathJax.Hub.Config({   tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); </script>




When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

<hr/>

<div id="boxtext5" style="width:200px; height:200px; margin-left:auto; margin-right:auto;"></div> 
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>

JavaScript

boardtext5 = JXG.JSXGraph.initBoard('boxtext5',{originX:25, originY:175, unitX:25, unitY:25, axis:true, showNavigation:false, showCopyright:false}); theSlider5 = boardtext5.create('slider',[[1,5],[4,5],[0,2,5]],{snapWidth:0.5}); boardtext5.create('functiongraph', [function(t) {return Math.pow(Math.E,t-theSlider5.Value());}]); boardtext5.create('text',[1,6,   function() {      return '$f(x) = e^{x-'+theSlider5.Value()+'}$';   }]);

JXG.Options.text.useMathJax = true;
var board = JXG.JSXGraph.initBoard('box', {boundingbox:
  [-1.5,1.5,1.5,-1.5], axis:false,keepaspectratio:true});

JXG.Options.text.display = 'html';

var i=0;
var rho=1.25;
var pts = new Array();
var pt_labels = new Array();
// Important radian values about the unit circle
var rads = [ 0, Math.PI/6, Math.PI/4, Math.PI/3, Math.PI/2, 2*Math.PI/3,
    3*Math.PI/4, 5*Math.PI/6, Math.PI, 7*Math.PI/6, 5*Math.PI/4,
    4*Math.PI/3, 3*Math.PI/2, 5*Math.PI/3, 7*Math.PI/4, 11*Math.PI/6];

var rad_labels = [ "$0$", "$\\\\frac{\\\\pi}{6}$", "$\\\\frac{\\\\pi}{4}$",
    "$\\\\frac{\\\\pi}{3}$", "$\\\\frac{\\\\pi}{2}$",
    "$\\\\frac{2\\\\pi}{3}$", "$\\\\frac{3\\\\pi}{4}$",
    "$\\\\frac{5\\\\pi}{6}$", "$\\\\pi$", "$\\\\frac{7\\\\pi}{6}$",
    "$\\\\frac{5\\\\pi}{4}$", "$\\\\frac{4\\\\pi}{3}$",
    "$\\\\frac{3\\\\pi}{2}$", "$\\\\frac{5\\\\pi}{3}$",
    "$\\\\frac{7\\\\pi}{4}$", "$\\\\frac{11\\\\pi}{6}$"];


//board.suspendUpdate();
var UnitCircle = board.create('circle', [[0,0],[0,1]]);

for(i=0;i<=16;i++) {

 pts[i] = board.create('point', 
   [Math.cos(rads[i]),
    Math.sin(rads[i])],
    {fillColor:'#000000',strokeColor:'#000000',withLabel:false});

 pt_labels[i] = board.create('text',
   [rho*Math.cos(rads[i]), 
    rho*Math.sin(rads[i]), rad_labels[i]]); 

}

// Uncomment this.
var CircumPoint = board.create('glider', [1,0, UnitCircle], {withLabel:false});

var origin = board.create('point', [0,0], 
  {fillColor:'#000000',strokeColor:'#000000', withLabel:false});
var a = board.create('sector', [origin,...