Displaying GEONExT constructions: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 8: Line 8:
</script>
</script>
</source>
</source>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</html>


=== Loading a GEONExT construction from a string ===
=== Loading a GEONExT construction from a string ===
Line 13: Line 18:
This string can be written directly into the HTML file. Here is an example:
This string can be written directly into the HTML file. Here is an example:
<source lang="xml">
<source lang="xml">
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
<script type="text/javascript">
   var brd = JXG.JSXGraph.loadBoardFromString('box', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
   var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
</script>
</script>
</source>
</source>
<html>
<div id="jxgbox2" class="jxgbox" style="width:600px; height:300px;"></div>
<script language="JavaScript">
<script type="text/javascript">
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');
</script>

Revision as of 12:00, 17 September 2008

Loading a GEONExT construction from a file

Here, we load the content of the GEONExT file "pythagoras.gxt" into JSXGraph, i.e. into the division with the id "box".

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  var brd = JXG.JSXGraph.loadBoardFromFile('box', 'pythagoras.gxt', 'Geonext');
</script>

Loading a GEONExT construction from a string

The content of a GEONExT file is a string which contains the GEONExT XML description of the construction compressed by gzip and encoded with base64. This string can be written directly into the HTML file. Here is an example:

<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
</script>

<html>

<script language="JavaScript"> <script type="text/javascript"> var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext'); </script>