Slider: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
Sliders enable a convenient way to experiment with mathematical constructions. | Sliders enable a convenient way to experiment with mathematical constructions. | ||
In the example below there is a slider ''s'' which takes values between 1 and 5. | |||
The value of the slider can be accessed via ''s.Value()''. | |||
The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on this value | |||
''s.Value()'': | |||
<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" /> | ||
Line 10: | Line 13: | ||
ax = b.createElement('axis', [[0,0], [1,0]], {}); | ax = b.createElement('axis', [[0,0], [1,0]], {}); | ||
ay = b.createElement('axis', [[0,0], [0,1]], {}); | ay = b.createElement('axis', [[0,0], [0,1]], {}); | ||
var s = b.createElement('slider',[[ | var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]); | ||
var a = b.createElement('point',[ | var a = b.createElement('point',[ | ||
function(){return s.Value() | function(){return s.Value();}, | ||
function(){return | function(){return 3/s.Value();} | ||
]); | ]); | ||
</script> | </script> | ||
</html> | </html> | ||
JavaScript code: | |||
<source lang="html4script"> | |||
<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="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div> | |||
<script type="text/javascript"> | |||
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40}); | |||
ax = b.createElement('axis', [[0,0], [1,0]], {}); | |||
ay = b.createElement('axis', [[0,0], [0,1]], {}); | |||
var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]); | |||
var a = b.createElement('point',[ | |||
function(){return s.Value();}, | |||
function(){return 3/s.Value();} | |||
]); | |||
</script> | |||
</source> |
Revision as of 13:32, 25 January 2009
Sliders enable a convenient way to experiment with mathematical constructions. In the example below there is a slider s which takes values between 1 and 5. The value of the slider can be accessed via s.Value(). The x-coordinate and the y-coordinate of the point A depend on this value s.Value():
JavaScript code:
<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="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40});
ax = b.createElement('axis', [[0,0], [1,0]], {});
ay = b.createElement('axis', [[0,0], [0,1]], {});
var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
var a = b.createElement('point',[
function(){return s.Value();},
function(){return 3/s.Value();}
]);
</script>