Share JSXGraph: example "Update defining term of function graph"

JSXGraph
Share JSXGraph: example "Update defining term of function graph"
This website is a beta version. The official release will be in **2023**.

Update defining term of function graph

Calculus Function plotting JessieCode Technical
This example shows how one can change the defining term of a function graph without creating the whole construction again. The function term can be supplied in JessieCode syntax. The term is parsed with JessieCode and returned as a function. This should be quite secure. Dependent elements are updated automatically. 
<input type="text" id="term_input" value="sin(x)*cos(x)">
<input type="button" value="set" onClick="updateTerm()"> 

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-6, 12, 8, -6],
    axis: true
});

// Initial plot of the graph
var f = board.jc.snippet(document.getElementById('term_input').value, true, 'x');
var graph = board.create('functiongraph', [f]);

// Glider on curve
var p = board.create('glider', [1, 0, graph], {face: '<>', size: 5, name: 'P'});
// Tangent in P
var t = board.create('tangent', [p]);
// Slope triangle in P
var st = board.create('slopetriangle', [t]);

// Update the defining term
var updateTerm = function() {
    // Redefine function f according to the current text field value
    f = board.jc.snippet(document.getElementById('term_input').value, true, 'x');

    // Change the Y attribute of the graph to the new function 
    graph.Y = f;
    board.update();
};

license

This example is licensed under a Creative Commons Attribution 4.0 International License.

Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.