continued fractions and squares

Template for JSXGraph

by pedritomelenas

HTML

<!-- Include JSXGraph -->
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<!-- Include MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<p>This is an interactive example of continued fractions visualized with squares.</p>
<p>Drag the orange points to change the values of a and b.</p>

<!-- JSXGraph div -->
<div id="jxgbox" class="jxgbox" style="max-width:75%;height:auto; min-height: 300px;text-align:center; margin: auto;">
</div>

JavaScript

// Enable MathJax for all JSXGraph elements!
// Use '\\( ... \\)' or '\\[ ... \\]` for LaTeX math text
JXG.Options.text.useMathJax = true;
JXG.Options.point.showInfobox = false;

let a;
let b;

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-2, 40, 60, -6],
    axis: false,
    showNavigation: false, //hides arrows and zoom icons
    keepaspectratio: true,
    showCopyright: false,
    showLogo:true,
    pan: { enabled: false },      // Disable pan for 3D view
    zoom: { enabled: false }      // Disable zoom for 3D view
});

var sa = board.create('segment',[[1,0],[50,0]], {visible:false});
var sb = board.create('segment',[[0,1],[0,30]], {visible:false});

var A = board.create('glider', [23,0, sa], {name:'', size:2, color:'orange', highlight:false, snapToGrid:true, gridX:1, gridY:1});
var B = board.create('glider', [0,16, sb], {name:'', size:2, color:'orange', highlight:false, snapToGrid:true, gridX:1, gridY:1});


let points = [];
let squares = [];
let text ="\\(\\dfrac{a}{b} = \\dfrac{" + a + "}{" + b + "}";
let n_brackets = 0;


let t = board.create('text', [()=> a+1, ()=>b, () => text+"\\)"], {fontSize: 11, color: 'black'});

let t2 = board.create('text', [1,-3,"test"], {fontSize: 12, color: 'black'});
let cs = [];

function plot_squares(x,y,size,n_squares, color,direction){
  let dx=direction;
  let dy=(direction+1)%2;
  let p1;
  let p2;
  for (let i=0;i<n_squares;i++){
    p1 = board.create('point', [x+i*dx*size, y+i*dy*size],{visible:false, name:''});
    p2 = board.create('point', [p1.X()+size, y+i*dy*size],{visible:false, name:''});
    points.push(p1);
    points.push(p2);
    let square = board.create('regularpolygon', [p1, p2, 4], 
      {fillColor: color, fillOpacity: 0.3, strokeColor: color, strokeWidth: 2, highlight:false, fixed:true, vertices:{visible: false, draggable:false,fixed:true}, borders:{visible:true,draggable:false,fixed:true, highlight:false}});
   ...