Difference between revisions of "Use the MediaWiki extension for JSXGraph"

From JSXGraph Wiki
Jump to navigationJump to search
 
(19 intermediate revisions by one other user not shown)
Line 1: Line 1:
An extension to include JSXgraph in MediaWiki is under development, see also [http://www.mediawiki.org/wiki/Extension:JSXGraph http://www.mediawiki.org/wiki/Extension:JSXGraph].
+
Download the MediaWiki extension [http://www.mediawiki.org/wiki/Extension:JSXGraph http://www.mediawiki.org/wiki/Extension:JSXGraph here].
You an see it in action here:
 
  
 
===Include a GEONExT file===
 
===Include a GEONExT file===
Line 13: Line 12:
  
 
===Include JavaScript source code===
 
===Include JavaScript source code===
<jsxgraph height="500" width="600" box="jxgbox2">
+
<jsxgraph height="500" width="600" board="board" box="mybox">
board = JXG.JSXGraph.initBoard('jxgbox2', {originX: 250, originY: 250, unitX: 25, unitY: 25});
+
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});
var a = board.createElement('slider', [[1,-1],[5,-1],[0,1,4]]);
+
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);
var b = board.createElement('slider', [[1,-2],[5,-2],[0,0.25,4]]);
+
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);
var c = board.createElement('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0],'phi',0, 8*Math.PI],
+
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],
 
             {curveType:'polar', strokewidth:4});       
 
             {curveType:'polar', strokewidth:4});       
 
</jsxgraph>
 
</jsxgraph>
Since it is already the second example on this page, we have to overwrite the default name
 
of the division that will contain the construction. We do this by supplying the attribut ''box=jxgbox2''.
 
 
<source lang="xml">
 
<source lang="xml">
<jsxgraph height="500" width="600" box="jxgbox2">
+
<script type="text/javascript" src="/distrib/GeonextReader.js"></script>
board = JXG.JSXGraph.initBoard('jxgbox2', {originX: 250, originY: 250, unitX: 25, unitY: 25});
+
<jsxgraph height="500" width="600" board="board"  box="jxgbox2">
var a = board.createElement('slider', [[1,-1],[5,-1],[0,1,4]]);
+
board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-10, 10, 14, -10]});
var b = board.createElement('slider', [[1,-2],[5,-2],[0,0.25,4]]);
+
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);
var c = board.createElement('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0],'phi',0, 8*Math.PI],
+
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);
 +
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],
 
{curveType:'polar', strokewidth:4});       
 
{curveType:'polar', strokewidth:4});       
 
</jsxgraph>
 
</jsxgraph>
Line 35: Line 33:
 
Include a GEONExT construction as string:
 
Include a GEONExT construction as string:
 
The attribut ''filestring'' contains the content of a GEONExT file.
 
The attribut ''filestring'' contains the content of a GEONExT file.
<jsxgraph height="500" width="600" box="jxgbox3" filestring="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" />
+
<jsxgraph height="500" width="600" filestring="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" />
  
 +
<source lang="xml">
 +
<jsxgraph height="500" width="600" filestring="eNrtnXtv2zgSwP+2P4WAAE ... F/VMRG8q5ofzj6fn11fuv8Hn24cYA==" />
 +
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 15:39, 8 June 2011

Download the MediaWiki extension http://www.mediawiki.org/wiki/Extension:JSXGraph here.

Include a GEONExT file

To display the above example, a GEONExT file has to be uploaded and the following code has to be included in a MediWiki page:

<jsxgraph height="500" width="600" filename="Wuerfel_drehbar_dreieck.gxt" />


Include JavaScript source code

<script type="text/javascript" src="/distrib/GeonextReader.js"></script>
<jsxgraph height="500" width="600" board="board"  box="jxgbox2">
board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-10, 10, 14, -10]});
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],
{curveType:'polar', strokewidth:4});      
</jsxgraph>

Include GEONExT string

Include a GEONExT construction as string: The attribut filestring contains the content of a GEONExT file.

<jsxgraph height="500" width="600" filestring="eNrtnXtv2zgSwP+2P4WAAE ... F/VMRG8q5ofzj6fn11fuv8Hn24cYA==" />