Create your own constructions/visualizations using JavaScript - Revision history

Michael at 07:45, 9 June 2011

2011-06-09T07:45:37Z

← Older revision		Revision as of 07:45, 9 June 2011
Line 17:		Line 17:
	<source lang="xml">		<source lang="xml">
	<script type="text/javascript">		<script type="text/javascript">
	var board = JXG.JSXGraph.initBoard('box', {~~originX~~: ~~100~~, ~~originY: 200~~, ~~unitX: 50~~, ~~unitY: 50~~, axis:true, grid:true});		var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
	</script>		</script>
	</source>		</source>
Line 26:		Line 26:
	* unitX, unitY (in pixel)		* unitX, unitY (in pixel)
	* zoomX, zoomY		* zoomX, zoomY
	* [[Bounding box]]		* Or easier than origin, unit and zoom*: [[Bounding box]]
	* axis (true/false)		* axis (true/false)
	* grid (true/false)		* grid (true/false)
Line 33:		Line 33:
	More than one boards can be initialised simultaneously in one HTML file.		More than one boards can be initialised simultaneously in one HTML file.
	====The result====		====The result====
	<~~html>~~		<jsxgraph box="box" width="400" height="400">
	~~<link rel="stylesheet" type="text/css" href="http://~~jsxgraph~~.uni-bayreuth.de/distrib/jsxgraph.css" />~~		var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>~~		</jsxgraph>
	~~<div id~~="box" ~~class~~="~~jxgbox~~" ~~style="width:400px;~~ height~~:400px;"></div>~~
	~~<script type~~="~~text/javascript~~">
	var board = JXG.JSXGraph.initBoard('box', {~~originX~~: ~~100~~, ~~originY: 200~~, ~~unitX: 50~~, ~~unitY: 50~~, axis:true, grid:true});
	</~~script~~>
	~~</html>~~
	====The complete code====		====The complete code====
	<source lang="xml">		<source lang="xml">
Line 50:		Line 46:
	<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>		<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var board = JXG.JSXGraph.initBoard('box', {~~originX~~: ~~100~~, ~~originY: 200~~, ~~unitX: 50~~, ~~unitY: 50~~, axis:true, grid:true});		var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
	</script>		</script>
	</body>		</body>
	</source>		</source>
	=== Fourth step: [[Creating geometric elements]] ===		=== Fourth step: [[Creating geometric elements]] ===

A WASSERMANN at 15:09, 29 October 2009

2009-10-29T15:09:36Z

← Older revision		Revision as of 15:09, 29 October 2009
Line 3:		Line 3:
	<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/prototype.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>
	</source>		</source>
Line 36:		Line 35:
	<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/prototype.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="box" class="jxgbox" style="width:400px; height:400px;"></div>		<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
Line 47:		Line 45:
	<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/prototype.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>

A WASSERMANN at 22:21, 23 June 2009

2009-06-23T22:21:14Z

← Older revision		Revision as of 22:21, 23 June 2009
Line 24:		Line 24:
	* Parameter 2: properties of the board.		* Parameter 2: properties of the board.
	====Possible properties of the board====		====Possible properties of the board====
	** originX, originY (in pixel)		* originX, originY (in pixel)
	** unitX, unitY (in pixel)		* unitX, unitY (in pixel)
	** zoomX, zoomY		* zoomX, zoomY
	** [[Bounding box]]		* [[Bounding box]]
	** axis (true/false)		* axis (true/false)
	** grid (true/false)		* grid (true/false)
	** showNavigation (true/false)		* showNavigation (true/false)
	** showCopyright (true/false)		* showCopyright (true/false)
	More than one boards can be initialised simultaneously in one HTML file.		More than one boards can be initialised simultaneously in one HTML file.
	The result:		====The result====
	<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" />

A WASSERMANN at 22:20, 23 June 2009

2009-06-23T22:20:24Z

← Older revision		Revision as of 22:20, 23 June 2009
Line 23:		Line 23:
	* Parameter 1: id of the div tag		* Parameter 1: id of the div tag
	* Parameter 2: properties of the board.		* Parameter 2: properties of the board.
	===Possible properties of the board===		====Possible properties of the board====
	** originX, originY (in pixel)		** originX, originY (in pixel)
	** unitX, unitY (in pixel)		** unitX, unitY (in pixel)
Line 43:		Line 43:
	</script>		</script>
	</html>		</html>
	The complete code:		====The complete code====
	<source lang="xml">		<source lang="xml">
	<head>		<head>

A WASSERMANN at 22:19, 23 June 2009

2009-06-23T22:19:42Z

← Older revision		Revision as of 22:19, 23 June 2009
Line 22:		Line 22:
	</source>		</source>
	* Parameter 1: id of the div tag		* Parameter 1: id of the div tag
	* Parameter 2: properties of the board. Possible ~~entries are:~~		* Parameter 2: properties of the board.
			===Possible properties of the board===
	** originX, originY (in pixel)		** originX, originY (in pixel)
	** unitX, unitY (in pixel)		** unitX, unitY (in pixel)
	** zoomX, zoomY		** zoomX, zoomY
			** [[Bounding box]]
	** axis (true/false)		** axis (true/false)
	** grid (true/false)		** grid (true/false)
	** ~~[[Bounding box]]~~		** showNavigation (true/false)
			** showCopyright (true/false)
	More than one boards can be initialised simultaneously in one HTML file.		More than one boards can be initialised simultaneously in one HTML file.
	The result:		The result:

A WASSERMANN at 22:16, 23 June 2009

2009-06-23T22:16:06Z

← Older revision		Revision as of 22:16, 23 June 2009
Line 28:		Line 28:
	** axis (true/false)		** axis (true/false)
	** grid (true/false)		** grid (true/false)
	** [[Bounding box ~~boundingbox~~]]		** [[Bounding box]]
	More than one boards can be initialised simultaneously in one HTML file.		More than one boards can be initialised simultaneously in one HTML file.
	The result:		The result:

A WASSERMANN at 22:15, 23 June 2009

2009-06-23T22:15:48Z

← Older revision		Revision as of 22:15, 23 June 2009
Line 23:		Line 23:
	* Parameter 1: id of the div tag		* Parameter 1: id of the div tag
	* Parameter 2: properties of the board. Possible entries are:		* Parameter 2: properties of the board. Possible entries are:
	** originX		** originX, originY (in pixel)
	** ~~originY~~		** unitX, unitY (in pixel)
	** ~~unitX~~		** zoomX, zoomY
	** ~~unitY~~		** axis (true/false)
	** ~~zoomX~~		** grid (true/false)
	** ~~zoomY~~		** [[Bounding box boundingbox]]
	More than one boards can be initialised simultaneously in one HTML file.		More than one boards can be initialised simultaneously in one HTML file.
	The result:		The result:
Line 54:		Line 54:
	</body>		</body>
	</source>		</source>
	~~<html>~~
	=== Fourth step: [[Creating geometric elements]] ===		=== Fourth step: [[Creating geometric elements]] ===

A WASSERMANN at 22:13, 23 June 2009

2009-06-23T22:13:11Z

← Older revision		Revision as of 22:13, 23 June 2009
Line 42:		Line 42:
	The complete code:		The complete code:
	<source lang="xml">		<source lang="xml">
			<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/prototype.js"></script>		<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>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
			</head>
			<body>
	<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>		<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});		var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
	</script>		</script>
			</body>
	</source>		</source>
	<html>		<html>
	=== Fourth step: [[Creating geometric elements]] ===		=== Fourth step: [[Creating geometric elements]] ===

A WASSERMANN at 22:12, 23 June 2009

2009-06-23T22:12:34Z

← Older revision		Revision as of 22:12, 23 June 2009
Line 32:		Line 32:
	The result:		The result:
	<html>		<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>
	<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>		<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
Line 39:		Line 42:
	The complete code:		The complete code:
	<source lang="xml">		<source lang="xml">
			<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>
	<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>		<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">

A WASSERMANN at 22:11, 23 June 2009

2009-06-23T22:11:57Z

← Older revision		Revision as of 22:11, 23 June 2009
Line 18:		Line 18:
	<source lang="xml">		<source lang="xml">
	<script type="text/javascript">		<script type="text/javascript">
	var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});		var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
	</script>		</script>
	</source>		</source>
	* Parameter 1: id of the ~~division~~		* Parameter 1: id of the div tag
	* Parameter 2: properties of the board. Possible entries are:		* Parameter 2: properties of the board. Possible entries are:
	** originX		** originX
Line 30:		Line 30:
	** zoomY		** zoomY
	More than one boards can be initialised simultaneously in one HTML file.		More than one boards can be initialised simultaneously in one HTML file.
			The result:
			<html>
			<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
			<script type="text/javascript">
			var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
			</script>
			</html>
			The complete code:
			<source lang="xml">
			<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
			<script type="text/javascript">
			var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50, axis:true, grid:true});
			</script>
			</source>
			<html>
	=== Fourth step: [[Creating geometric elements]] ===		=== Fourth step: [[Creating geometric elements]] ===