<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/archimedian-circle-approximation" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Archimedian circle approximation" 
    allowfullscreen
></iframe>

<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 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, 6, 6, -6],
        grid: true
    });
    var n = board.create('slider', [
        [-5, 5],
        [4, 5],
        [3, 4, 96]
    ], {
        name: 'n',
        snapWidth: 1
    });
    
    var p0 = board.create('point', [0, 0], {
        strokeColor: 'black',
        fillColor: 'white',
        name: ''
    });
    var p1 = board.create('point', [4, 0], {
        strokeColor: 'black',
        fillColor: 'white',
        name: ''
    });
    var rot = board.create('transform', [function() {
        return Math.PI * 2.0 / n.Value();
    }, p0], {
        type: 'rotate'
    }); // angle, rotation center
    var ptmp = board.create('point', [0, 0], {
        visible: false,
        withLabel: false
    }); // dummy point for the rotation
    var cOut = board.create('curve', [
        [0],
        [0]
    ], {
        fillColor: '#5e9abf',
        highlightFillColor: '#5e9abf',
        fillOpacity: 1,
        highlightFillOpacity: 1,
        strokeColor: 'black',
        highlightStrokeColor: 'black'
    });
    var circ = board.create('circle', [p0, p1], {
        fillColor: '#fefd4c',
        highlightFillColor: '#fefd4c',
        fillOpacity: 0.5,
        highlightFillOpacity: 0.5,
        strokeColor: 'black',
        highlightStrokeColor: 'black'
    });
    var cIn = board.create('curve', [
        [0, 1, 2],
        [0, 1, 2]
    ], {
        fillColor: '#d769a3',
        highlightFillColor: '#d769a3',
        fillOpacity: 1,
        highlightFillOpacity: 1,
        strokeColor: 'black',
        highlightStrokeColor: 'black'
    });
    
    var tCirc = board.create('text', [-5, -4.0, function() {
        return 'Area of the circle = ' + (0.0625 * circ.getRadius() * circ.getRadius() * Math.PI).toFixed(5);
    }], {
        fontSize: 16,
        fixed: true
    });
    var tIn = board.create('text', [-5, -4.5, function() {
        return 'Area of the inscribed ' + n.Value().toFixed(0) + '-polygon = ' + (0.0625 * n.Value() * circ.getRadius() * circ.getRadius() * Math.sin(Math.PI / n.Value())).toFixed(5);
    }], {
        fontSize: 16,
        fixed: true
    });
    var tOut = board.create('text', [-5, -5, function() {
        return 'Area of the circumscribed  ' + n.Value().toFixed(0) + '-polygon = ' + (0.0625 * n.Value() * circ.getRadius() * circ.getRadius() * Math.tan(Math.PI / n.Value())).toFixed(5);
    }], {
        fontSize: 16,
        fixed: true
    });
    
    cIn.updateDataArray = function() {
        var i, len = n.Value();
        this.dataX = [p0.X() + circ.getRadius()];
        this.dataY = [p0.Y()];
        ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X() + circ.getRadius(), p0.Y()]);
        for (i = 0; i < len; i++) {
            rot.applyOnce(ptmp);
            this.dataX.push(ptmp.X());
            this.dataY.push(ptmp.Y());
        }
    }
    
    cOut.updateDataArray = function() {
        var i, len = n.Value();
        var s = circ.getRadius() / Math.cos(Math.PI / n.Value());
        this.dataX = [p0.X() + s];
        this.dataY = [p0.Y()];
        ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X() + s, p0.Y()]);
        for (i = 0; i < len; i++) {
            rot.applyOnce(ptmp);
            this.dataX.push(ptmp.X());
            this.dataY.push(ptmp.Y());
        }
    }
    
    board.update();
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Archimedian circle approximation" 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 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 board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-6, 6, 6, -6],
       grid: true
   });
   var n = board.create('slider', [
       [-5, 5],
       [4, 5],
       [3, 4, 96]
   ], {
       name: 'n',
       snapWidth: 1
   });
   
   var p0 = board.create('point', [0, 0], {
       strokeColor: 'black',
       fillColor: 'white',
       name: ''
   });
   var p1 = board.create('point', [4, 0], {
       strokeColor: 'black',
       fillColor: 'white',
       name: ''
   });
   var rot = board.create('transform', [function() {
       return Math.PI * 2.0 / n.Value();
   }, p0], {
       type: 'rotate'
   }); // angle, rotation center
   var ptmp = board.create('point', [0, 0], {
       visible: false,
       withLabel: false
   }); // dummy point for the rotation
   var cOut = board.create('curve', [
       [0],
       [0]
   ], {
       fillColor: '#5e9abf',
       highlightFillColor: '#5e9abf',
       fillOpacity: 1,
       highlightFillOpacity: 1,
       strokeColor: 'black',
       highlightStrokeColor: 'black'
   });
   var circ = board.create('circle', [p0, p1], {
       fillColor: '#fefd4c',
       highlightFillColor: '#fefd4c',
       fillOpacity: 0.5,
       highlightFillOpacity: 0.5,
       strokeColor: 'black',
       highlightStrokeColor: 'black'
   });
   var cIn = board.create('curve', [
       [0, 1, 2],
       [0, 1, 2]
   ], {
       fillColor: '#d769a3',
       highlightFillColor: '#d769a3',
       fillOpacity: 1,
       highlightFillOpacity: 1,
       strokeColor: 'black',
       highlightStrokeColor: 'black'
   });
   
   var tCirc = board.create('text', [-5, -4.0, function() {
       return 'Area of the circle = ' + (0.0625 * circ.getRadius() * circ.getRadius() * Math.PI).toFixed(5);
   }], {
       fontSize: 16,
       fixed: true
   });
   var tIn = board.create('text', [-5, -4.5, function() {
       return 'Area of the inscribed ' + n.Value().toFixed(0) + '-polygon = ' + (0.0625 * n.Value() * circ.getRadius() * circ.getRadius() * Math.sin(Math.PI / n.Value())).toFixed(5);
   }], {
       fontSize: 16,
       fixed: true
   });
   var tOut = board.create('text', [-5, -5, function() {
       return 'Area of the circumscribed  ' + n.Value().toFixed(0) + '-polygon = ' + (0.0625 * n.Value() * circ.getRadius() * circ.getRadius() * Math.tan(Math.PI / n.Value())).toFixed(5);
   }], {
       fontSize: 16,
       fixed: true
   });
   
   cIn.updateDataArray = function() {
       var i, len = n.Value();
       this.dataX = [p0.X() + circ.getRadius()];
       this.dataY = [p0.Y()];
       ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X() + circ.getRadius(), p0.Y()]);
       for (i = 0; i < len; i++) {
           rot.applyOnce(ptmp);
           this.dataX.push(ptmp.X());
           this.dataY.push(ptmp.Y());
       }
   }
   
   cOut.updateDataArray = function() {
       var i, len = n.Value();
       var s = circ.getRadius() / Math.cos(Math.PI / n.Value());
       this.dataX = [p0.X() + s];
       this.dataY = [p0.Y()];
       ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X() + s, p0.Y()]);
       for (i = 0; i < len; i++) {
           rot.applyOnce(ptmp);
           this.dataX.push(ptmp.X());
           this.dataY.push(ptmp.Y());
       }
   }
   
   board.update();
</jsxgraph>