Difference between revisions of "Highlight curve via slider"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
Line 1: | Line 1: | ||
Depending on the value of the slider ''s'', one of the curves is highlighted. | Depending on the value of the slider ''s'', one of the curves is highlighted. | ||
− | <jsxgraph height="500" width=" | + | <jsxgraph height="500" width="500" board="board" box="jxgbox"> |
− | board = JXG.JSXGraph.initBoard('jxgbox', { | + | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]}); |
− | var s = board. | + | var s = board.create('slider', [[1,8],[5,8],[0,0,1]]); |
− | var g = board. | + | var g = board.create('functiongraph', [function(x){ return x*x;}], |
{ | { | ||
strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';}, | strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';}, | ||
strokeWidth:function(){ return (s.Value()<0.5)?4:1;} | strokeWidth:function(){ return (s.Value()<0.5)?4:1;} | ||
}); | }); | ||
− | var f = board. | + | var f = board.create('functiongraph', [function(x){ return x+1;}], |
{ | { | ||
strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';}, | strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';}, | ||
Line 18: | Line 18: | ||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | var s = board. | + | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]}); |
+ | var s = board.create('slider', [[1,8],[5,8],[0,0,1]]); | ||
− | var g = board. | + | var g = board.create('functiongraph', [function(x){ return x*x;}], |
{ | { | ||
strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';}, | strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';}, | ||
strokeWidth:function(){ return (s.Value()<0.5)?4:1;} | strokeWidth:function(){ return (s.Value()<0.5)?4:1;} | ||
}); | }); | ||
− | var f = board. | + | var f = board.create('functiongraph', [function(x){ return x+1;}], |
{ | { | ||
strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';}, | strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';}, |
Latest revision as of 09:15, 8 June 2011
Depending on the value of the slider s, one of the curves is highlighted.
The underlying JavaScript code
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);
var g = board.create('functiongraph', [function(x){ return x*x;}],
{
strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
});
var f = board.create('functiongraph', [function(x){ return x+1;}],
{
strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
});