Difference between revisions of "Linear Function: parameters"
From JSXGraph Wiki
Jump to navigationJump to search (Created page with "# Linear function") |
(creating the linear function example) |
||
Line 1: | Line 1: | ||
− | + | {| | |
+ | |Linear Function | ||
+ | |- | ||
+ | | <jsxgraph box="jxgbox" width="500" height="500"> | ||
+ | JXG.Options.text.useMathJax = true; | ||
+ | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 7, 5, -3], axis:true}); | ||
+ | |||
+ | var gr = board.create('grid'); | ||
+ | |||
+ | |||
+ | var m = board.create('slider', [[4,1],[4,5],[0,1,4]],{snapWidth: 0.1, precision: 1, | ||
+ | ticks: { drawLabels: true, label: {position: 'rt', offset: [10,0]}}, | ||
+ | name: "m"}); | ||
+ | var t = board.create('slider', [[-4,1],[-4,5],[-2,0,6]],{snapWidth: 0.1, precision: 1, | ||
+ | ticks: { drawZero: true, drawLabels: true, ticksDistance: 1, | ||
+ | minTicksDistance: 5, // insertTicks: true, | ||
+ | tickEndings: [1,0], | ||
+ | label: {position: 'lft', offset: [-20,0]}}, | ||
+ | name: "t"}); | ||
+ | var tval = function(){return t.Value();}; | ||
+ | var T = board.create('point', [0,tval], {name: "T", label: "T", strokeColor: 'purple', face: 'cross'}); | ||
+ | var mval = function(){return m.Value();}; | ||
+ | var linF0 = function(x){return mval()*x}; | ||
+ | var linF = function(x){return mval()*x + tval()}; | ||
+ | var G0 = board.create('functiongraph',[linF0,-5,5], {strokeWidth: 1, dash: 2}); | ||
+ | var G = board.create('functiongraph',[linF,-5,5], {strokeWidth: 2}); | ||
+ | |||
+ | var ftextval = function(){ | ||
+ | var vz = ""; | ||
+ | var tv = ""; | ||
+ | if (tval() >= 0.0) {if (tval() == 0.0){tv = ""; vz = "";} else {vz = "+"; tv = JXG.toFixed(tval(),1);}} | ||
+ | else {vz = ""; tv = JXG.toFixed(tval(),1);}; | ||
+ | return "\\[f(x)="+ JXG.toFixed(mval(),1) + " \\cdot x" + vz + tv + "\\]"; | ||
+ | }; | ||
+ | var ftext = board.create('text', [-4.2,6.0,ftextval], {fontSize: 18, color:'blue', cssStyle: 'background-color: rgb(255,255,255)'}); | ||
+ | var dt = board.create('segment',[[0,0],[0,tval]],{strokeColor: 'purple', strokeWidth: 3}); | ||
+ | var A = board.create('glider', [1,2,G], {label: {offset: [0,-15]}}); | ||
+ | var tangent = board.create('tangent', [A]); | ||
+ | var st = board.create('slopetriangle', [tangent], {toppoint: {face: 'plus', withLabel: false}}); | ||
+ | </jsxgraph> | ||
+ | |} | ||
+ | |||
+ | |||
+ | === The underlying JavaScript source code === | ||
+ | |||
+ | |||
+ | <source lang="javascript"> | ||
+ | <jsxgraph box="jxgbox" width="500" height="500"> | ||
+ | JXG.Options.text.useMathJax = true; | ||
+ | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 7, 5, -3], axis:true}); | ||
+ | |||
+ | var gr = board.create('grid'); | ||
+ | |||
+ | |||
+ | var m = board.create('slider', [[4,1],[4,5],[0,1,4]],{snapWidth: 0.1, precision: 1, | ||
+ | ticks: { drawLabels: true, label: {position: 'rt', offset: [10,0]}}, | ||
+ | name: "m"}); | ||
+ | var t = board.create('slider', [[-4,1],[-4,5],[-2,0,6]],{snapWidth: 0.1, precision: 1, | ||
+ | ticks: { drawZero: true, drawLabels: true, ticksDistance: 1, | ||
+ | minTicksDistance: 5, // insertTicks: true, | ||
+ | tickEndings: [1,0], | ||
+ | label: {position: 'lft', offset: [-20,0]}}, | ||
+ | name: "t"}); | ||
+ | var tval = function(){return t.Value();}; | ||
+ | var T = board.create('point', [0,tval], {name: "T", label: "T", strokeColor: 'purple', face: 'cross'}); | ||
+ | var mval = function(){return m.Value();}; | ||
+ | var linF0 = function(x){return mval()*x}; | ||
+ | var linF = function(x){return mval()*x + tval()}; | ||
+ | var G0 = board.create('functiongraph',[linF0,-5,5], {strokeWidth: 1, dash: 2}); | ||
+ | var G = board.create('functiongraph',[linF,-5,5], {strokeWidth: 2}); | ||
+ | |||
+ | var ftextval = function(){ | ||
+ | var vz = ""; | ||
+ | var tv = ""; | ||
+ | if (tval() >= 0.0) {if (tval() == 0.0){tv = ""; vz = "";} else {vz = "+"; tv = JXG.toFixed(tval(),1);}} | ||
+ | else {vz = ""; tv = JXG.toFixed(tval(),1);}; | ||
+ | return "\\[f(x)="+ JXG.toFixed(mval(),1) + " \\cdot x" + vz + tv + "\\]"; | ||
+ | }; | ||
+ | var ftext = board.create('text', [-4.2,6.0,ftextval], {fontSize: 18, color:'blue', cssStyle: 'background-color: rgb(255,255,255)'}); | ||
+ | var dt = board.create('segment',[[0,0],[0,tval]],{strokeColor: 'purple', strokeWidth: 3}); | ||
+ | var A = board.create('glider', [1,2,G], {label: {offset: [0,-15]}}); | ||
+ | var tangent = board.create('tangent', [A]); | ||
+ | var st = board.create('slopetriangle', [tangent], {toppoint: {face: 'plus', withLabel: false}}); | ||
+ | </jsxgraph> | ||
+ | </source> | ||
+ | |||
+ | [[Category:Contributions]] | ||
+ | [[Category:Examples]] |
Revision as of 09:01, 29 June 2021
Linear Function |
The underlying JavaScript source code
<jsxgraph box="jxgbox" width="500" height="500">
JXG.Options.text.useMathJax = true;
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 7, 5, -3], axis:true});
var gr = board.create('grid');
var m = board.create('slider', [[4,1],[4,5],[0,1,4]],{snapWidth: 0.1, precision: 1,
ticks: { drawLabels: true, label: {position: 'rt', offset: [10,0]}},
name: "m"});
var t = board.create('slider', [[-4,1],[-4,5],[-2,0,6]],{snapWidth: 0.1, precision: 1,
ticks: { drawZero: true, drawLabels: true, ticksDistance: 1,
minTicksDistance: 5, // insertTicks: true,
tickEndings: [1,0],
label: {position: 'lft', offset: [-20,0]}},
name: "t"});
var tval = function(){return t.Value();};
var T = board.create('point', [0,tval], {name: "T", label: "T", strokeColor: 'purple', face: 'cross'});
var mval = function(){return m.Value();};
var linF0 = function(x){return mval()*x};
var linF = function(x){return mval()*x + tval()};
var G0 = board.create('functiongraph',[linF0,-5,5], {strokeWidth: 1, dash: 2});
var G = board.create('functiongraph',[linF,-5,5], {strokeWidth: 2});
var ftextval = function(){
var vz = "";
var tv = "";
if (tval() >= 0.0) {if (tval() == 0.0){tv = ""; vz = "";} else {vz = "+"; tv = JXG.toFixed(tval(),1);}}
else {vz = ""; tv = JXG.toFixed(tval(),1);};
return "\\[f(x)="+ JXG.toFixed(mval(),1) + " \\cdot x" + vz + tv + "\\]";
};
var ftext = board.create('text', [-4.2,6.0,ftextval], {fontSize: 18, color:'blue', cssStyle: 'background-color: rgb(255,255,255)'});
var dt = board.create('segment',[[0,0],[0,tval]],{strokeColor: 'purple', strokeWidth: 3});
var A = board.create('glider', [1,2,G], {label: {offset: [0,-15]}});
var tangent = board.create('tangent', [A]);
var st = board.create('slopetriangle', [tangent], {toppoint: {face: 'plus', withLabel: false}});
</jsxgraph>