Mean proportion

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>


<p>Given two numbers \(a\) and \(b\), represented by the horizontal segments, computes the mean proportional of them, that is a number \(x$ such that $a/x=x/b$.</p>

<div id="box4" class="jxgbox" style="width:80%; height:300px;border:0pt solid black"></div>

JavaScript

function pinta_rect(){
  //JXG.Options.text.useMathJax = true;
  var board = JXG.JSXGraph.initBoard('box4', {boundingbox: [-15, 15, 15, -5], axis:false, showCopyright:false, showNavigation:false,keepaspectratio:true});
  var q1 = board.create('point',[-10,0],{fixed:true,visible:true, name:""});
  var total = board.create('segment',[q1,[10,0]],{withLabel:false, fixed:true,visible:false});
  var pa = board.create("glider",[5,0,total],{snapSizeX:0.1,snapToGrid:true, withLabel:false,color:"orange"});
  var right = board.create('segment',[pa,[10,0]],{withLabel:false, fixed:true, visible:false});
  var q2 = board.create('glider',[10,0,right],{snapSizeX:0.1,snapToGrid:true, withLabel:false,color:"orange"});
  var sc = board.create('semicircle',[q1,q2],{withLabel:false, fixed:true} );
  //var ox = board.create('segment',[[-10,0],[10,0]],{fixed:true, visible:true});
  var oa = board.create('segment',[q1,pa],{withLabel:true, fixed:true,name:()=>(pa.X()-q1.X()).toFixed(2), label:{offset:[0,-10]}});
  var ob = board.create('segment',[pa,q2],{withLabel:true, fixed:true,name:()=>(q2.X()-pa.X()).toFixed(2), label:{offset:[0,-10]}});

  var center = board.create("midpoint",[q1,q2],{fixed:true, face:"x", name:""})
  //board.create("text", [-2.5,-0.5,"a"]);
  //board.create("text", [7.5,-.5,"b"]);
  var ptopa=board.create('perpendicular',[pa,total],{withLabel:false, fixed:true,dash:2});
  var inters = board.create('intersection', [sc,ptopa,1],{withLabel:false, fixed:true});
  var px = board.create('segment', [pa,inters],{fixed:true, withLabel:true, name:()=>(inters.Y()).toFixed(2), label:{offset:[5,0]}});
  //board.create("text", [5.5,Math.sqrt(75)/2,"x"]);
  board.update()
}
pinta_rect()