JSXGraph
JSXGraph share

Share

Power series - pointwise
Show plain example
QR code 
<iframe 
    src="https://www.jsxgraph.uni-bayreuth.de/share/iframe/power-series-pointwise" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Power series - pointwise" 
    allowfullscreen
></iframe>
This code has to 
nth-coefficient: <input type="text" id="input" value="1 / factorial(n) * x^n">
start summation at n = <input type="number" id="startval" value="0" style="width:2em">

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

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

    var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-8, 8, 8, -8], axis: true, showClearTraces: true, keepaspectratio: true });
    
    var p = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'x' });
    var q = board.create('point', [0, 1], { name: '', color: 'blue', trace: true, fixed: true });
    
    p.on('up', function(evt) {
    
        var x, n, s, m = 51;
        var txtraw = document.getElementById('input').value;
        var a_n = board.jc.snippet(txtraw, true, 'x, n', true);
        var n_0 = parseInt(document.getElementById('startval').value);
    
        x = p.X();
        for (n = n_0, s = 0; n < m; n++) {
            s += a_n(x, n);
        }
        q.moveTo([x, s], 0);
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/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!

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-8, 8, 8, -8], axis: true, showClearTraces: true, keepaspectratio: true });

var p = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'x' });
var q = board.create('point', [0, 1], { name: '', color: 'blue', trace: true, fixed: true });

p.on('up', function(evt) {

    var x, n, s, m = 51;
    var txtraw = document.getElementById('input').value;
    var a_n = board.jc.snippet(txtraw, true, 'x, n', true);
    var n_0 = parseInt(document.getElementById('startval').value);

    x = p.X();
    for (n = n_0, s = 0; n < m; n++) {
        s += a_n(x, n);
    }
    q.moveTo([x, s], 0);
});

Power series - pointwise

Calculus
Approximate the value of $$ \sum_{n=0}^\infty a_n\cdot x^n$$ for various values of $x$ and a user-supplied power series. Drag the red point 'x'. After releasing the mouse key (or lifting the finger), the approximation, i.e the value $$f = \sum_{n=0}^{50} a_n\cdot x^n,$$ is computed for $x$ set to the $x$-coordinate of the red point 'x'. Then the blue point is shown at position $(x, f)$. Some examples for series: - $\exp(x)$: start at $n=0$, term: $\frac{1}{n!} x^n$. Input $a_n$ as `1 / factorial(n) * x^n` - $\sin(x)$: start at $n=0$, term: $\frac{(-1)^n}{(2*n + 1)!} x^{2n + 1}$. Input $a_n$ as `(-1)^n / factorial(2*n + 1) * x^(2*n + 1)` - $\cos(x)$: start at $n=0$, term: $\frac{(-1)^n}{(2n)!} x^{2n}`$. Input $a_n$ as `(-1)^n / factorial(2*n) * x^(2*n)` In technical terms, the `up` event is fired after releasing the mouse key. Click on ⊗ to clear traces.
nth-coefficient: start summation at n = 
nth-coefficient: <input type="text" id="input" value="1 / factorial(n) * x^n">
start summation at n = <input type="number" id="startval" value="0" style="width:2em">
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-8, 8, 8, -8], axis: true, showClearTraces: true, keepaspectratio: true });

var p = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'x' });
var q = board.create('point', [0, 1], { name: '', color: 'blue', trace: true, fixed: true });

p.on('up', function(evt) {

    var x, n, s, m = 51;
    var txtraw = document.getElementById('input').value;
    var a_n = board.jc.snippet(txtraw, true, 'x, n', true);
    var n_0 = parseInt(document.getElementById('startval').value);

    x = p.X();
    for (n = n_0, s = 0; n < m; n++) {
        s += a_n(x, n);
    }
    q.moveTo([x, s], 0);
});

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.