# Difference between revisions of "Using MathJax"

A WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||

Line 35: | Line 35: | ||

returns HTML code containing a div-tag together with an ID. Here, this ID is ''mathjax_div''. In our example this text element is displayed at position (-4,15). | returns HTML code containing a div-tag together with an ID. Here, this ID is ''mathjax_div''. In our example this text element is displayed at position (-4,15). | ||

− | Then, we need a second, invisible text | + | Then, we need a second, invisible text put to (-3,15). The function connected to this second text calls the MathJaX function |

''MathJax.Hub.Typeset('mathjax_div');'', whenever the board is updated. | ''MathJax.Hub.Typeset('mathjax_div');'', whenever the board is updated. | ||

Thus, the text in the division ''mathjax_div'' is rendered again by MathJax. | Thus, the text in the division ''mathjax_div'' is rendered again by MathJax. |

## Revision as of 15:47, 9 August 2010

This example uses MathJax to render mathematical text.

*MathJax is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.*

The solution how to use MathJax in texts inside of a JSXGraph construction has been worked out by Carol Fisher and Agentyikes. Thank you very much for this great work.

### The underlying JavaScript code

The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):

```
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
```

To enable MathJax inside of JSXGraph, the function that is linked to (dynamic) text which will be rendered by MathJax
returns HTML code containing a div-tag together with an ID. Here, this ID is *mathjax_div*. In our example this text element is displayed at position (-4,15).

Then, we need a second, invisible text put to (-3,15). The function connected to this second text calls the MathJaX function
*MathJax.Hub.Typeset('mathjax_div');*, whenever the board is updated.
Thus, the text in the division *mathjax_div* is rendered again by MathJax.

```
var brd, k;
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});
brd.create('functiongraph', [function(t) {return brd.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,15,
function() {
var txt;
if (k.Value() == 1) {
txt = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>';
} else {
txt = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
}
return txt;
}]);
brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
brd.update();
```