golden-ratio-segment

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 defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<!-- JSXGraph div -->
<div id="jxgbox" class="jxgbox" style="max-width:100%;height:auto; min-height: 200px; ">
</div>

JavaScript

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


const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [0, 0.5, 5, -0.5],
    axis: false,
    showNavigation: false, //hides arrows and zoom icons
    pan: { enabled: false },      // Disable pan for 3D view
    zoom: { enabled: false }      // Disable zoom for 3D view
});

//    var p1 = board.create('point', [1, 0], {size:1});
//    var p2 = board.create('point', [4, 0], {size:1});
var liapb = board.create('segment', [[1,-0.1],[4,-0.1]],
  {name:'a+b',
    strokeColor:'#000000',
    strokeWidth:1,
    highlightStrokeWidth: 5,
    dash: 2,
    lastArrow: {type: 2, size: 10},
    firstArrow: {type: 2, size: 10},
    highlight: false,
    fixed: true
  });


var li = board.create('segment', [[1,0],[4,0]],
  {name:'a+b',
    strokeColor:'#000000',
    highlight: false,
    fixed: true
});

var A=board.create('point',[1,0],{label:{visible:false}, size: 2, strokecolor: "black", fillcolor: "white", fixed: true, highlight: false})
var A=board.create('point',[4,0],{label:{visible:false}, size: 2, strokecolor: "black", fillcolor: "white", fixed: true, highlight: false})
var G=board.create('point',[2.855,0],{visible:false})

var p=board.create('glider',[2.5,0,li], {label:{visible:false}, size: 4, strokecolor: "black", fillcolor: "white", attractorDistance: 0.05, attractors:[ G] })

var text = board.create('text',[2.5,-0.15,"a+b"],{color: "green", fixed: true})
var text = board.create('text',[()=>(p.X()+1)/2,0.1,"a"],{color: "red"})
var text = board.create('text',[()=>(p.X()+4)/2,0.1,"b"],{color: "blue"})
var text = board.create('text',[3.4,-0.3,"\\(\\dfrac{a+b}{a}=\\dfrac{a}{b}\\)"],{color: "red", fixed: true, visible: ()=>(Math.abs(p.X()-2.855)<0.01)?true:false})

var text =...