Using MathJax: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 3: Line 3:
</html>
</html>
This example uses MathJax to render mathematical text.  
This example uses MathJax to render mathematical text.  
''[http://mathjax.org 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.''
''[http://mathjax.org 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 [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.net/ Agentyikes]. Thank you very much for this great work.
<jsxgraph>
<jsxgraph>
var brd, k;
var brd, k;
Line 13: Line 16:
     var temp;
     var temp;
     if (k.Value() == 1) {
     if (k.Value() == 1) {
       temp = '<div id="function">'+'\\[f(x) = e^x \\]'+'</div>';  
       temp = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>';  
     } else {
     } else {
       temp = '<div id="function">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
       temp = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
     }
     }
     return temp;
     return temp;
   }], {fontSize:60});
   }], {fontSize:60});
   brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('function'); return '';}]);
   brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
   brd.update();
   brd.update();
</jsxgraph>
</jsxgraph>


===The underlying JavaScript code===
===The underlying JavaScript code===
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):
<source lang="xml">
<source lang="xml">
  <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
</source>
</source>


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.
<source lang="javascript">
<source lang="javascript">
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 temp;
    if (k.Value() == 1) {
      temp = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>';
    } else {
      temp = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
    }
    return temp;
  }], {fontSize:60});
  brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
  brd.update();
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]

Revision as of 14:44, 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 temp;
    if (k.Value() == 1) {
      temp = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>'; 
    } else {
      temp = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
    }
    return temp;
  }], {fontSize:60});
  brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
  brd.update();