<div id='boxrecta1q' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1q', {axis:true, boundingbox:[-1,11,13,-1], showCopyright:false,showNavigation:false,pan: {
  enabled: false} });  
var fo = function(x){ return x+2/(x+1); };
var plot1 = brdre.create('functiongraph',[fo,0, 13],{dash:2});
pointlist = [];
for (i=0; i<11;i++) {
    pointlist.push(brdre.create('point', [i, i+2/(i+1)], { style:3, name:" ",fixed:true}));
} 
</script>

<div id='boxrecta1a' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1a', {axis:true, boundingbox:[-0.2,1.2,1.8,-0.2], showCopyright:false,showNavigation:false,pan: {
  enabled: false} });  
var s1 = brdre.create('slider',[[0.2,-0.1],[1.5,-0.1],[0,0,50]],{name:'n',snapWidth:1}); 
var fo = function(x){ return (3*x+2)/(x+4); };
var plot1 = brdre.create('functiongraph',[fo,-1, 13],{dash:0});
var fi = function(x){return x};
var plot2 = brdre.create('functiongraph',[fi,-1, 13],{dash:0});
var approx = brdre.create('curve',[[0],[0]], {strokeColor:'red',dash:2});
approx.updateDataArray = function() {
   var i;
   var m = s1.Value();
   this.dataX = [];
   this.dataY = [];
   this.dataX[0] = 0.2;   
   this.dataY[0] = 0;   
   for (var i=1;i<=m;i++) {
      if(i%2==1){
        this.dataX.push( this.dataX[i-1] );   
        this.dataY.push( (3*this.dataX[i-1]+2)/(this.dataX[i-1]+4) );   
        }
      else{
        this.dataX.push( this.dataY[i-1] );
        this.dataY.push( this.dataY[i-1] );
        } 
   }
   this.dataX.push( this.dataX[m] );
   this.dataY.push( 0 );
}
var approx2 = brdre.create('curve',[[0],[0]], {strokeColor:'red',dash:0});
approx2.updateDataArray = function() {
   var i;
   var m = s1.Value();
   this.dataX = [];
   this.dataY = [];
   this.dataX[0] = 0.2;   
   this.dataY[0] = 0;   
   for (var i=1;i<=m;i++) {
      if(i%2==1){
        this.dataX.push( this.dataX[i-1] );   
        this.dataY.push( (3*this.dataX[i-1]+2)/(this.dataX[i-1]+4) );   
        }
      else{
        this.dataX.push( this.dataY[i-1] );
        this.dataY.push( this.dataY[i-1] );
        }     
   }  
}
var tab = [0.2,0.2,0.619,0.619,0.835,0.835,0.932,0.932,0.972,0.972,0.989,0.989,0.996,0.996,0.998,0.998,0.999,0.999,0.9997,0.9997,0.9998856,
0.9998856,0.999954,0.999954,0.999982,0.999982,0.9999927,0.9999927,0.99999707,0.99999707,0.9999988286,0.9999988286,0.9999995315,0.9999995315,
0.9999998126,0.9999998126,0.999999925,0.999999925,0.99999997,0.99999997,0.999999988,0.999999988,0.9999999952,0.9999999952,0.9999999981,
0.9999999981,0.9999999992,0.9999999992,0.9999999997,0.9999999997,0.9999999999,0.9999999999,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
var tab2 = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18,19,19,20,20,21,21,22,22,23,23,24,24,25,25,26,26,27,27,28,28,29,29,30,30];
var ph = brdre.create('point',[function(){return tab2[s1.Value()];},0],{visible:false});
var ti = brdre.create('point', [function(){return tab[s1.Value()];} ,0],{name:function(){return "u"+ph.X();} } );
 
brde.update();
</script>

<div id='boxrecta1A' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1A', {axis:true, boundingbox:[-1,9,13,-1], showCopyright:false,showNavigation:false}); 
pointlist = [];
for (i=1; i<200;i++) {
pointlist.push(brdre.create('point', [i-1,4*Math.cos(Math.PI*i/4)*Math.pow(i,-1.2)+2  ], { style:1, name:" ",fixed:true,size:0.5}));
}
var aq = brdre.create('point', [0, 0.2],{strokeColor:'blue',fillColor:'blue'}); 
var bq = brdre.create('point', [0, 4],{strokeColor:'blue',fillColor:'blue'}); 
brdre.on('move', function(){
        aq.moveTo([0, aq.Y()]);
        bq.moveTo([0, bq.Y()]);
});
var cq = brdre.create('point', [200, function(){return bq.Y()} ]); 
var dq = brdre.create('point', [200, function(){return aq.Y()} ]); 
var pq = brdre.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: false}); 
</script>