JSXGraph
JSXGraph share

Share

Sequences of functions
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.org/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 });
    board.suspendUpdate();
    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, 0.7, function() { return 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'; }], { fontSize: 20 });
    board.unsuspendUpdate();
    
    var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
    board2.suspendUpdate();
    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, 0.7, function() { return 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x)=4*(1-x)*x/' + n2
            .Value().toFixed(0); }], { fontSize: 20 });
    board2.unsuspendUpdate();
    
    var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
    board3.suspendUpdate();
    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, 0.7, function() { return 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' +
            n3.Value().toFixed(0); }], { fontSize: 20 });
    board3.unsuspendUpdate();
 </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 });
board.suspendUpdate();
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, 0.7, function() { return 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'; }], { fontSize: 20 });
board.unsuspendUpdate();

var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
board2.suspendUpdate();
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, 0.7, function() { return 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x)=4*(1-x)*x/' + n2
        .Value().toFixed(0); }], { fontSize: 20 });
board2.unsuspendUpdate();

var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
board3.suspendUpdate();
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, 0.7, function() { return 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' +
        n3.Value().toFixed(0); }], { fontSize: 20 });
board3.unsuspendUpdate();
<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 });
   board.suspendUpdate();
   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, 0.7, function() { return 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'; }], { fontSize: 20 });
   board.unsuspendUpdate();
   
   var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
   board2.suspendUpdate();
   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, 0.7, function() { return 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x)=4*(1-x)*x/' + n2
           .Value().toFixed(0); }], { fontSize: 20 });
   board2.unsuspendUpdate();
   
   var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
   board3.suspendUpdate();
   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, 0.7, function() { return 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' +
           n3.Value().toFixed(0); }], { fontSize: 20 });
   board3.unsuspendUpdate();
</jsxgraph>
The first, **Pointwise Convergence**, shows $f_n(x)=x^n$ on \[0,1] with a slider for $n$. The second, **Uniform Convergence**, shows $f_n(x)=4(1-x)x/n$ illustrating uniform convergence to zero. The third, **Mixed Convergence**, shows $f_n(x)=x^2 + x/n$, converging pointwise to $x^2$ as $n$ increases. **AI generated desctiption**
// 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 });
board.suspendUpdate();
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, 0.7, function() { return 'f<sub>' + Math.floor(n.Value()) + '</sub>(x)=x<sup>' + Math.floor(n.Value()) + '</sup>'; }], { fontSize: 20 });
board.unsuspendUpdate();

var board2 = JXG.JSXGraph.initBoard(BOARDID1, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
board2.suspendUpdate();
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, 0.7, function() { return 'f<sub>' + Math.floor(n2.Value()) + '</sub>(x)=4*(1-x)*x/' + n2
        .Value().toFixed(0); }], { fontSize: 20 });
board2.unsuspendUpdate();

var board3 = JXG.JSXGraph.initBoard(BOARDID2, { axis: true, boundingbox: [-0.25, 1.7, 1.25, -0.5], keepaspectratio: true });
board3.suspendUpdate();
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, 0.7, function() { return 'f<sub>' + Math.floor(n3.Value()) + '</sub>(x)=x<sup>2</sup>+x/' +
        n3.Value().toFixed(0); }], { fontSize: 20 });
board3.unsuspendUpdate();

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.