JSXGraph
JSXGraph share

Share

Sequences of functions
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/sequences-of-functions" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Sequences of functions" 
    allowfullscreen
></iframe>
This code has to 
<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>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>
<div id="board-2-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-2" 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 BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID2 = 'board-2';
    const BOARDID = BOARDID0;

    var board = JXG.JSXGraph.initBoard(BOARDID0, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
        keepaspectratio: true });
    
    var n = board.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
    var f = function(x) { return Math.pow(x, n.Value()); }
    var plot = board.create('functiongraph', [f, 0, 1], { strokeWidth: 2 });
    board.create('text', [0.2, 1.2,
        () => 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'
    ], { fontSize: 20 });
    
    var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
        keepaspectratio: true });
    
    var n2 = board2.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
    var f2 = function(x) { return 4 * (1 - x) * x / n2.Value(); }
    var plot2 = board2.create('functiongraph', [f2, 0, 1], { strokeWidth: 2 });
    board2.create('text', [0.2, 1.2,
        () => 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x) = (1-x)*x*4/' + n2.Value().toFixed(0)
    ], { fontSize: 20 });
    
    var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
        keepaspectratio: true });
    
    var n3 = board3.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
    var f3 = function(x) { return x * x + x / n3.Value(); }
    var plot3 = board3.create('functiongraph', [f3, 0, 1], { strokeWidth: 2 });
    board3.create('text', [0.2, 1.2,
        () => 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' + n3.Value().toFixed(0)
    ], { fontSize: 20 });
 </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 BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!
const BOARDID2 = 'your_div_id_2'; // Insert your 3rd board id here!

var board = JXG.JSXGraph.initBoard(BOARDID0, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
    keepaspectratio: true });

var n = board.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
var f = function(x) { return Math.pow(x, n.Value()); }
var plot = board.create('functiongraph', [f, 0, 1], { strokeWidth: 2 });
board.create('text', [0.2, 1.2,
    () => 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'
], { fontSize: 20 });

var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
    keepaspectratio: true });

var n2 = board2.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
var f2 = function(x) { return 4 * (1 - x) * x / n2.Value(); }
var plot2 = board2.create('functiongraph', [f2, 0, 1], { strokeWidth: 2 });
board2.create('text', [0.2, 1.2,
    () => 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x) = (1-x)*x*4/' + n2.Value().toFixed(0)
], { fontSize: 20 });

var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
    keepaspectratio: true });

var n3 = board3.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
var f3 = function(x) { return x * x + x / n3.Value(); }
var plot3 = board3.create('functiongraph', [f3, 0, 1], { strokeWidth: 2 });
board3.create('text', [0.2, 1.2,
    () => 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' + n3.Value().toFixed(0)
], { fontSize: 20 });
<jsxgraph width="100%, 100%, 100%" aspect-ratio="1 / 1, 1 / 1, 1 / 1" numberOfBoards="3" title="Sequences of functions" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   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.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID0, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
       keepaspectratio: true });
   
   var n = board.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
   var f = function(x) { return Math.pow(x, n.Value()); }
   var plot = board.create('functiongraph', [f, 0, 1], { strokeWidth: 2 });
   board.create('text', [0.2, 1.2,
       () => 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'
   ], { fontSize: 20 });
   
   var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
       keepaspectratio: true });
   
   var n2 = board2.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
   var f2 = function(x) { return 4 * (1 - x) * x / n2.Value(); }
   var plot2 = board2.create('functiongraph', [f2, 0, 1], { strokeWidth: 2 });
   board2.create('text', [0.2, 1.2,
       () => 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x) = (1-x)*x*4/' + n2.Value().toFixed(0)
   ], { fontSize: 20 });
   
   var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
       keepaspectratio: true });
   
   var n3 = board3.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
   var f3 = function(x) { return x * x + x / n3.Value(); }
   var plot3 = board3.create('functiongraph', [f3, 0, 1], { strokeWidth: 2 });
   board3.create('text', [0.2, 1.2,
       () => 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' + n3.Value().toFixed(0)
   ], { fontSize: 20 });
</jsxgraph>
The first example illustrates __pointwise convergence__ with the series of functions $f_n(x)=x^n$, $n\to\infty$, on \[0,1] with a slider for $n$. The second example illustrates __uniform convergence__ with the series of functions $f_n(x)=\frac{4}{n}(1-x)x$, $n\to\infty$, on \[0,1] converging uniformly zero. The third example with the series of functions $f_n(x)=x^2 + x/n$, $n\to\infty$, converges uniformly to $x^2$ on \[0,1] . 
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board = JXG.JSXGraph.initBoard(BOARDID0, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
    keepaspectratio: true });

var n = board.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
var f = function(x) { return Math.pow(x, n.Value()); }
var plot = board.create('functiongraph', [f, 0, 1], { strokeWidth: 2 });
board.create('text', [0.2, 1.2,
    () => 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'
], { fontSize: 20 });

var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
    keepaspectratio: true });

var n2 = board2.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
var f2 = function(x) { return 4 * (1 - x) * x / n2.Value(); }
var plot2 = board2.create('functiongraph', [f2, 0, 1], { strokeWidth: 2 });
board2.create('text', [0.2, 1.2,
    () => 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x) = (1-x)*x*4/' + n2.Value().toFixed(0)
], { fontSize: 20 });

var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5],
    keepaspectratio: true });

var n3 = board3.create('slider', [[0.1, 1.5], [1.1, 1.5], [1, 1, 100]], { name: 'n', snapWidth: 1 });
var f3 = function(x) { return x * x + x / n3.Value(); }
var plot3 = board3.create('functiongraph', [f3, 0, 1], { strokeWidth: 2 });
board3.create('text', [0.2, 1.2,
    () => 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' + n3.Value().toFixed(0)
], { fontSize: 20 });

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.