Include JSXGraph - Revision history

A WASSERMANN at 13:03, 3 March 2021

2021-03-03T13:03:27Z

← Older revision		Revision as of 13:03, 3 March 2021
Line 40:		Line 40:
	<jsxgraph width="500" height="500" id="jxgbox">		<jsxgraph width="500" height="500" id="jxgbox">
	board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
	g1 = board.~~createElement~~('point', [1, -1], {style:6});		g1 = board.create('point', [1, -1], {style:6});
	g2 = board.~~createElement~~('point', [2.5, -2], {style:6});		g2 = board.create('point', [2.5, -2], {style:6});
	g3 = board.~~createElement~~('point', [1, -3], {style:5});		g3 = board.create('point', [1, -3], {style:5});
	g4 = board.~~createElement~~('point', [2.5, -4], {style:5});		g4 = board.create('point', [2.5, -4], {style:5});
	g5 = board.~~createElement~~('point', [-4, 1], {style:5,name:''});		g5 = board.create('point', [-4, 1], {style:5,name:''});

	c1 = board.~~createElement~~('curve', [		c1 = board.create('curve', [
	function(t){ return (g1.X()-g2.X())Math.cos(t)+g3.X()Math.cos(t*(g1.X()-g2.X())/g2.X()); },		function(t){ return (g1.X()-g2.X())Math.cos(t)+g3.X()Math.cos(t*(g1.X()-g2.X())/g2.X()); },
	function(t){ return (g1.X()-g2.X())Math.sin(t)+g3.X()Math.sin(t*(g1.X()-g2.X())/g2.X()); },		function(t){ return (g1.X()-g2.X())Math.sin(t)+g3.X()Math.sin(t*(g1.X()-g2.X())/g2.X()); },
Line 61:		Line 61:
	<script language="JavaScript">		<script language="JavaScript">
	board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
	g1 = board.~~createElement~~('point', [1, -1], {style:6});		g1 = board.create('point', [1, -1], {style:6});
	g2 = board.~~createElement~~('point', [2.5, -2], {style:6});		g2 = board.create('point', [2.5, -2], {style:6});
	g3 = board.~~createElement~~('point', [1, -3], {style:5});		g3 = board.create('point', [1, -3], {style:5});
	g4 = board.~~createElement~~('point', [2.5, -4], {style:5});		g4 = board.create('point', [2.5, -4], {style:5});
	g5 = board.~~createElement~~('point', [-4, 1], {style:5, name:''});		g5 = board.create('point', [-4, 1], {style:5, name:''});

	c1 = board.~~createElement~~('curve', [		c1 = board.create('curve', [
	function(t){ return (g1.X()-g2.X())Math.cos(t)+g3.X()Math.cos(t*(g1.X()-g2.X())/g2.X()); },		function(t){ return (g1.X()-g2.X())Math.cos(t)+g3.X()Math.cos(t*(g1.X()-g2.X())/g2.X()); },
	function(t){ return (g1.X()-g2.X())Math.sin(t)+g3.X()Math.sin(t*(g1.X()-g2.X())/g2.X()); },		function(t){ return (g1.X()-g2.X())Math.sin(t)+g3.X()Math.sin(t*(g1.X()-g2.X())/g2.X()); },

A WASSERMANN: A WASSERMANN moved page Include JSXGraph together with jQuery to Include JSXGraph

2020-06-23T12:28:31Z

A WASSERMANN moved page Include JSXGraph together with jQuery to Include JSXGraph

← Older revision	Revision as of 12:28, 23 June 2020
(No difference)

A WASSERMANN: /* Further examples */

2020-06-23T12:27:43Z

Further examples

← Older revision		Revision as of 12:27, 23 June 2020
Line 78:		Line 78:

	===Further examples===		===Further examples===
	[[Circles on circles]] contains an advanced example ~~using the excellent package of widgets [http://jqueryui.com jQuery UI]~~.		[[Circles on circles]] contains an advanced example.

	[[Category:Austragungsstueberl]]		[[Category:Austragungsstueberl]]

A WASSERMANN: /* Example */

2020-06-23T12:27:05Z

Example

← Older revision		Revision as of 12:27, 23 June 2020
Line 56:		Line 56:

	<source lang="xml">		<source lang="xml">
	<link rel="stylesheet" type="text/css" href="~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
	<div id="~~jsxgbox~~" class="jxgbox" style="width:500px; height:500px;"></div>		<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
	<script language="JavaScript">		<script language="JavaScript">
	board = JXG.JSXGraph.initBoard('~~jsxgbox~~', {boundingbox: [-5, 5, 5, -5]});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
	g1 = board.createElement('point', [1, -1], {style:6});		g1 = board.createElement('point', [1, -1], {style:6});
	g2 = board.createElement('point', [2.5, -2], {style:6});		g2 = board.createElement('point', [2.5, -2], {style:6});
	g3 = board.createElement('point', [1, -3], {style:5});		g3 = board.createElement('point', [1, -3], {style:5});
	g4 = board.createElement('point', [2.5, -4], {style:5});		g4 = board.createElement('point', [2.5, -4], {style:5});
	g5 = board.createElement('point', [-4, 1], {style:5,name:''});		g5 = board.createElement('point', [-4, 1], {style:5, name:''});

	c1 = board.createElement('curve', [		c1 = board.createElement('curve', [
Line 71:		Line 71:
	function(t){ return (g1.X()-g2.X())Math.sin(t)+g3.X()Math.sin(t*(g1.X()-g2.X())/g2.X()); },		function(t){ return (g1.X()-g2.X())Math.sin(t)+g3.X()Math.sin(t*(g1.X()-g2.X())/g2.X()); },
	0,function(){ return Math.PI7Math.abs(g4.X());}],{		0,function(){ return Math.PI7Math.abs(g4.X());}],{
	strokeWidth:function(){return g5.Y()*3;},		strokeWidth: function() { return g5.Y()*3; },
	strokeOpacity:function(){return g5.Y()*0.6;}		strokeOpacity: function() { return g5.Y()*0.6; }
	});		});
	</script>		</script>

A WASSERMANN at 12:25, 23 June 2020

2020-06-23T12:25:42Z

← Older revision		Revision as of 12:25, 23 June 2020
Line 38:		Line 38:

	===Example===		===Example===
	<~~html>~~		<jsxgraph width="500" height="500" id="jxgbox">
	~~<link rel="stylesheet" type="text/css" href="http://~~jsxgraph~~.uni-bayreuth.de/distrib/jsxgraph.css" />~~		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
	~~<script type~~="~~text/javascript~~" ~~src~~="~~http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js~~"~~></script>~~
	~~<div~~ id~~="jsxgbox" class~~="jxgbox~~" style="width:500px; height:500px;"></div>~~
	~~<script language="JavaScript~~">
	board = JXG.JSXGraph.initBoard('~~jsxgbox~~', {boundingbox: [-5, 5, 5, -5]});
	g1 = board.createElement('point', [1, -1], {style:6});		g1 = board.createElement('point', [1, -1], {style:6});
	g2 = board.createElement('point', [2.5, -2], {style:6});		g2 = board.createElement('point', [2.5, -2], {style:6});
Line 57:		Line 53:
	strokeOpacity:function(){return g5.Y()*0.6;}		strokeOpacity:function(){return g5.Y()*0.6;}
	});		});
	</~~script~~>		</jsxgraph>
	~~</html>~~
	<source lang="xml">		<source lang="xml">
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />

A WASSERMANN at 12:24, 23 June 2020

2020-06-23T12:24:14Z

← Older revision		Revision as of 12:24, 23 June 2020
Line 2:		Line 2:

	For including JSXGraph into HTML, two files are necessary:		For including JSXGraph into HTML, two files are necessary:
	* jsxgraphcore.js from [~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js ~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js]		* jsxgraphcore.js from [https://jsxgraph.org/distrib/jsxgraphcore.js https://jsxgraph.org/distrib/jsxgraphcore.js]
	* jsxgraph.css from [~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraph.css ~~http~~://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]		* jsxgraph.css from [https://jsxgraph.org/distrib/jsxgraph.css https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
	You can either download these three files and use the local copy or you can use the online version.		You can either download these three files and use the local copy or you can use the online version.

Line 19:		Line 19:
	<source lang="xml">		<source lang="xml">
	<head>		<head>
	<link rel="stylesheet" type="text/css" href="~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
	</head>		</head>
	</source>		</source>

Michael at 11:36, 31 January 2013

2013-01-31T11:36:39Z

← Older revision		Revision as of 11:36, 31 January 2013
Line 32:		Line 32:
	<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 board = JXG.JSXGraph.initBoard('box', {~~originX~~: ~~250~~, ~~originY: 250~~, ~~unitX: 50~~, ~~unitY: 50~~});		var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5]});
	</script>		</script>
	</source>		</source>
Line 43:		Line 43:
	<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>		<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
	<script language="JavaScript">		<script language="JavaScript">
	board = JXG.JSXGraph.initBoard('jsxgbox', {~~originX~~: ~~250~~, ~~originY: 250~~, ~~unitX: 50~~, ~~unitY: 50~~});		board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
	g1 = board.createElement('point', [1, -1], {style:6});		g1 = board.createElement('point', [1, -1], {style:6});
	g2 = board.createElement('point', [2.5, -2], {style:6});		g2 = board.createElement('point', [2.5, -2], {style:6});
Line 64:		Line 64:
	<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>		<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
	<script language="JavaScript">		<script language="JavaScript">
	board = JXG.JSXGraph.initBoard('jsxgbox', {~~originX~~: ~~250~~, ~~originY: 250~~, ~~unitX: 50~~, ~~unitY: 50~~});		board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});
	g1 = board.createElement('point', [1, -1], {style:6});		g1 = board.createElement('point', [1, -1], {style:6});
	g2 = board.createElement('point', [2.5, -2], {style:6});		g2 = board.createElement('point', [2.5, -2], {style:6});

Michael at 07:35, 8 June 2011

2011-06-08T07:35:19Z

← Older revision		Revision as of 07:35, 8 June 2011
Line 84:		Line 84:
	[[Circles on circles]] contains an advanced example using the excellent package of widgets [http://jqueryui.com jQuery UI].		[[Circles on circles]] contains an advanced example using the excellent package of widgets [http://jqueryui.com jQuery UI].

	[[Category:~~Examples~~]]		[[Category:Austragungsstueberl]]

A WASSERMANN at 14:34, 29 October 2009

2009-10-29T14:34:40Z

← Older revision		Revision as of 14:34, 29 October 2009
Line 1:		Line 1:
	== Including JSXGraph into HTML ==		== Including JSXGraph into HTML ==

	For including JSXGraph into HTML, ~~three~~ files are necessary:		For including JSXGraph into HTML, two files are necessary:
	* jquery.min.js from [http://jquery.com http://jquery.com] or [http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js local copy]
	* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]		* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]
	* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]		* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]

A WASSERMANN at 14:34, 29 October 2009

2009-10-29T14:34:20Z

← Older revision		Revision as of 14:34, 29 October 2009
Line 12:		Line 12:
	<head>		<head>
	<link rel="stylesheet" type="text/css" href="jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="jsxgraph.css" />
	~~<script type="text/javascript" src="jquery.min.js"></script>~~
	<script type="text/javascript" src="jsxgraphcore.js"></script>		<script type="text/javascript" src="jsxgraphcore.js"></script>
	</head>		</head>
Line 22:		Line 21:
	<head>		<head>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<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/jquery.min.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	</head>		</head>
Line 43:		Line 41:
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<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/jquery.min.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>		<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
Line 65:		Line 62:
	<source lang="xml">		<source lang="xml">
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<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/jquery.min.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>		<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>