Displaying GEONExT constructions: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(18 intermediate revisions by 2 users not shown)
Line 3: Line 3:
into the division with the id "box".
into the division with the id "box".
<source lang="xml">
<source lang="xml">
<link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="//jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="//jsxgraph.org/distrib/geonext.min.js"></script>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
<script type="text/javascript">
   var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');
   var b2 = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');
</script>
</script>
</source>
</source>
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="//jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="//jsxgraph.org/distrib/geonext.min.js"></script>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
<script type="text/javascript">
   var brd = JXG.JSXGraph.loadBoardFromFile('box', 'http://jsxgraph.uni-bayreuth.de/geonext/Unendlich.gxt', 'Geonext');
   JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');
</script>
</script>
</html>
</html>


Another example:
=== [[Another example for displaying GEONExT]] ===
<source lang="xml">
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');
</script>
</source>
 
<html>
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  JXG.JSXGraph.loadBoardFromFile('box2', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');
</script>
</html>


=== Loading a GEONExT construction from a string ===
=== Loading a GEONExT construction from a string ===
Line 39: Line 30:
Here is an example:
Here is an example:
<source lang="xml">
<source lang="xml">
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="http://jsxgraph.org/distrib/geonext.min.js"></script>
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
<script type="text/javascript">
   var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
   var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
</script>
</script>
</source>
</source>


<html>
<html>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript">
<script language="JavaScript">
var brd = JXG.JSXGraph.loadBoardFromString('jxgbox2', "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", 'Geonext');
var brd = JXG.JSXGraph.loadBoardFromString('box3', "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", 'Geonext');
</script>
</script>
</html>
</html>
[[Category:Examples]]
[[Category:Geometry]]

Latest revision as of 16:51, 24 June 2020

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".

<link rel="stylesheet" type="text/css" href="//jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="//jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="//jsxgraph.org/distrib/geonext.min.js"></script>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  var b2 = JXG.JSXGraph.loadBoardFromFile('box', '/geonext/viereck_gleiter_seiten.gxt', 'Geonext');
</script>

Another example for displaying GEONExT

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. This has the advantage that the HTML file is complete. Here is an example:

<link rel="stylesheet" type="text/css" href="http://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="http://jsxgraph.org/distrib/geonext.min.js"></script>
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  var brd = JXG.JSXGraph.loadBoardFromString('box3', 'eNrtXOtv48YR/2z9FQv...+A+Ve+/sNQRlkZsVVddkvk/CpkHvA==', 'Geonext');
</script>