JSXGraph
JSXGraph share

Share

Update defining term of function graph
Show plain example
QR code 
<iframe 
    src="https://www.jsxgraph.org/share/iframe/update-defining-term-of-function-graph-1" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Update defining term of function graph" 
    allowfullscreen
></iframe>
This code has to 
<input type="text" id="term_input" value="sin(x)*cos(x)">
<input type="button" value="set" onClick="updateTerm()"> 


<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 3/2; width: 100%;" data-ar="3/2"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    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();
    };
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

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

const BOARDID = 'your_div_id'; // Insert your id here!

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();
};

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 you have to mention The Center of Mobile Learning with Digital Technology in the credits.