http://jsxgraph.org/wiki/api.php?action=feedcontributions&user=WikiSysop&feedformat=atom
JSXGraph Wiki - User contributions [en]
2024-03-29T07:46:23Z
User contributions
MediaWiki 1.40.1
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=702
Change Equation of a Graph
2008-12-17T11:08:59Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.<br />
<math>\int{x} dx</math><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<p><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.<br />
[[Category:Examples]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=701
Change Equation of a Graph
2008-12-17T11:08:44Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.<br />
<math>\intx dx</math><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<p><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.<br />
[[Category:Examples]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=699
Change Equation of a Graph
2008-12-17T11:07:36Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.<br />
<math>3x+x</math><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<p><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.<br />
[[Category:Examples]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=697
Change Equation of a Graph
2008-12-17T11:06:00Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.<br />
<math>3x+x>/math><br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<p><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});<br />
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.<br />
[[Category:Examples]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=294
Change Equation of a Graph
2008-11-14T08:52:14Z
<p>WikiSysop: Undo revision 275 by 94.102.60.77 (Talk)</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again. Dependend elements are updated automatically.<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<p><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
//graph = eval("board.createElement('curve', ['x', function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])",{curveType:'plot'});<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'}); <br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.<br />
[[Category:Examples]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=File:Layermodel.png&diff=91
File:Layermodel.png
2008-09-16T19:56:46Z
<p>WikiSysop: Layer model of JSXGraph and dependend applications</p>
<hr />
<div>Layer model of JSXGraph and dependend applications</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=87
MediaWiki:Sidebar
2008-09-16T08:18:26Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** :Category:Examples|Examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=86
MediaWiki:Sidebar
2008-09-16T08:18:05Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** ex|[[:Category:Examples]]<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=85
MediaWiki:Sidebar
2008-09-16T08:17:19Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** [[:Category:Examples]]|Examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=84
MediaWiki:Sidebar
2008-09-16T08:14:43Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** Examples|Examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Category:Examples&diff=83
Category:Examples
2008-09-16T08:12:00Z
<p>WikiSysop: New page: Currently these documented examples are available</p>
<hr />
<div>Currently these documented examples are available</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=82
MediaWiki:Sidebar
2008-09-16T08:07:37Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** examples|Examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=81
MediaWiki:Sidebar
2008-09-16T08:07:10Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=80
MediaWiki:Sidebar
2008-09-16T08:06:55Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
* EXAMPLES<br />
** latest examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=79
MediaWiki:Sidebar
2008-09-16T08:06:09Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
* examples<br />
** latest examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=63
MediaWiki:Sidebar
2008-09-15T14:39:28Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=62
MediaWiki:Sidebar
2008-09-15T14:39:13Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** [:Examples]|Examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=55
Change Equation of a Graph
2008-09-15T14:31:54Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.<br />
[[Category:Examples]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=51
MediaWiki:Sidebar
2008-09-15T14:27:37Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** Examples|Examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=50
MediaWiki:Sidebar
2008-09-15T14:27:20Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** Examples|examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=49
MediaWiki:Sidebar
2008-09-15T14:25:34Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** Examples|Graph|sss<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=48
MediaWiki:Sidebar
2008-09-15T14:24:50Z
<p>WikiSysop: </p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** Examples|Graph<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=MediaWiki:Sidebar&diff=47
MediaWiki:Sidebar
2008-09-15T14:23:30Z
<p>WikiSysop: New page: * navigation ** mainpage|mainpage-description ** portal-url|portal ** currentevents-url|currentevents ** recentchanges-url|recentchanges ** randompage-url|randompage ** helppage|help ** ex...</p>
<hr />
<div>* navigation<br />
** mainpage|mainpage-description<br />
** portal-url|portal<br />
** currentevents-url|currentevents<br />
** recentchanges-url|recentchanges<br />
** randompage-url|randompage<br />
** helppage|help<br />
** examples<br />
* SEARCH<br />
* TOOLBOX<br />
* LANGUAGES</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=44
Change Equation of a Graph
2008-09-15T14:17:36Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.<br />
[[Category:Examples|Graph]]</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=38
Change Equation of a Graph
2008-09-15T14:09:47Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=37
Change Equation of a Graph
2008-09-15T14:08:29Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); };<br />
//graph.Y = graph.yterm;<br />
//graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=36
Change Equation of a Graph
2008-09-15T14:07:55Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//graph.yterm = function(x){ return f(x); };<br />
//graph.Y = graph.yterm;<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=35
Change Equation of a Graph
2008-09-15T14:06:43Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=34
Change Equation of a Graph
2008-09-15T14:06:10Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=33
Change Equation of a Graph
2008-09-15T14:05:11Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=32
Change Equation of a Graph
2008-09-15T14:03:29Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source lang="javascript"><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=31
Change Equation of a Graph
2008-09-15T14:02:32Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="html"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=30
Change Equation of a Graph
2008-09-15T14:00:42Z
<p>WikiSysop: /* JavaScript Part */</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=29
Change Equation of a Graph
2008-09-15T13:45:02Z
<p>WikiSysop: /* How to Create this Construction */</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); };<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=28
Change Equation of a Graph
2008-09-15T12:12:11Z
<p>WikiSysop: /* HowTo Create this Construction */</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=27
Change Equation of a Graph
2008-09-15T12:10:12Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=26
Change Equation of a Graph
2008-09-15T11:43:19Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{labelcolor:'#ff0000'}); <br />
<br />
t.visProp['strokeColor'] = '#ff0000';<br />
t.visProp['labelColor'] = '#ff0000';<br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=25
Change Equation of a Graph
2008-09-15T11:41:39Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{labelcolor:'#ff0000'}); <br />
<br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=24
Change Equation of a Graph
2008-09-15T11:34:07Z
<p>WikiSysop: /* HowTo Create this Construction */</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=23
Change Equation of a Graph
2008-09-15T10:25:53Z
<p>WikiSysop: /* JavaScript Part */</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Main_Page&diff=22
Main Page
2008-09-15T10:23:19Z
<p>WikiSysop: /* JSXGrpah Wiki */</p>
<hr />
<div><br />
== JSXGraph Wiki ==<br />
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=21
Change Equation of a Graph
2008-09-15T10:21:16Z
<p>WikiSysop: /* Remarks */</p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=20
Change Equation of a Graph
2008-09-15T10:20:49Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript.</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=19
Change Equation of a Graph
2008-09-15T10:14:56Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=18
Change Equation of a Graph
2008-09-15T10:11:09Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
g = board.algebra.D(f);<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=17
Change Equation of a Graph
2008-09-15T10:10:01Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
//a point on the tangent<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.createElement('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source><br />
<br />
'''Define JavaScript Function doIt() for Reacting on User Input'''<br />
<source><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the yterm attribute of the graph to the new function <br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
graph.Y = graph.yterm;<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The</div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=16
Change Equation of a Graph
2008-09-15T09:59:20Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
g = board.algebra.D(f);<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source><br />
<br />
'''Create a JavaScript Function f(x) From the Text Field'''<br />
<br />
<source><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
'''Use f(x) for defining the Graph'''<br />
<br />
<source><br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]);<br />
</source><br />
<br />
'''Define Further Elements'''<br />
<br />
<source><br />
//glider on the curve<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
<br />
//define the derivative of f<br />
g = board.algebra.D(f);<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''}); // apoint on the tangent<br />
l1 = board.createElement('line', [p1,p2],{}); // the tangent<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
</source></div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=15
Change Equation of a Graph
2008-09-15T09:48:55Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
g = board.algebra.D(f);<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html><br />
<br />
<br />
== HowTo of this construction ==<br />
Adding a text input field somewhere on the page<br />
<source><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
</source><br />
'''Setting up the board'''<br />
<source><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
</source></div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=14
Change Equation of a Graph
2008-09-15T09:45:54Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
g = board.algebra.D(f);<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html></div>
WikiSysop
http://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=13
Change Equation of a Graph
2008-09-15T09:43:39Z
<p>WikiSysop: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/loadjsxgraphXML.js"></script><br />
<div style="width:960px"><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; float:left; "></div><br />
<p style="float:right"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</p><br />
</div><br />
<br clear=all><br />
<div id="debug" style="display:none;"></div><br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
<br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});<br />
// Axes<br />
b1axisx = board.createElement('axis', [[1,0], [0,0]], {});<br />
b1axisy = board.createElement('axis', [[0,1], [0,0]], {});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph = board.createElement('curve', [function(x){ return x; }, function(x){ return f(x); }, "x", -10, 10]); <br />
//graph = eval("board.createElement('curve', [function(x){ return x; }, function(x){ return "+document.getElementById("eingabe").value+";}, 'x', -10, 10])");<br />
//graph.curveType = "graph";<br />
p1 = board.createElement('glider', [graph], {style:6, name:'P'});<br />
g = board.algebra.D(f);<br />
p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
l1 = board.createElement('line', [p1,p2],{});<br />
p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
pol = board.createElement('polygon', [p1,p2,p3], {});<br />
t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}]); <br />
<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.yterm = function(x){ return f(x); }; // usually: e.g. "x^2"<br />
//graph.yterm = eval("function(x){ return "+document.getElementById("eingabe").value+"; };");<br />
graph.Y = graph.yterm;<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
<br />
/* ]]> */<br />
</script><br />
</html></div>
WikiSysop