<input type="text" id="input" value="sin(x)*x"><br />
<input type="button" value="plot" onClick="plotter()">
<input type="button" value="clear all" onClick="clearAll()">
<p><br>
<input type="button" value="add slope info" onClick="addSlopeInfo()">
<input type="button" value="add tangent" onClick="addTangent()">
<input type="button" value="add Derivative" onClick="addDerivative()">
// Define the id of your board in BOARDID
var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true});
var f, curve; // global objects
var plotter = function() {
var txtraw = document.getElementById('input').value;
f = board.jc.snippet(txtraw, true, 'x', true);
curve = board.create('functiongraph',[f], {name:txtraw, withLabel:true});
};
var clearAll = function() {
JXG.JSXGraph.freeBoard(board);
board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,8,8,-5], axis:true});
f = null;
curve = null;
};
var addSlopeInfo = function() {
if (JXG.isFunction(f)) {
var txtraw = document.getElementById('input').value;
var q = board.create('glider', [2, 1, curve], {withLabel:false});
var t = board.create('text', [
() => q.X()+0.1,
() => q.Y()+0.1,
() => "The slope of the function f(x)=" +
txtraw +
"
at x=" + q.X().toFixed(2) +
" is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2)
], {fontSize:15});
}
};
var addTangent = function() {
if (JXG.isFunction(f)) {
var p = board.create('glider',[1, 0, curve], {name:'drag me'});
board.create('tangent',[p]);
}
};
var addDerivative = function() {
if (JXG.isFunction(f)) {
board.create('functiongraph',[JXG.Math.Numerics.D(f)], {dash:2});
}
};