multiplication with ruler

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 showing how to multiply two numbers using straightedge and compass.</p>

<p>We start by drawing the line \(y=x\). We take the point \((1,1)\) in this line. We represent the quantities \(a\) and \(b\) that we want to multiply on the \(x\)-axis. Then, we compute the line \(l\) passing through \((1,1)\) and \((a,0)\), and then the line \(s\) parallel to this line passing through \((b,b)\). The line \(s\) intersects the \(x\)-axis at the point \((ab,0)\).</p>


<!-- JSXGraph div -->
<div id="jxgbox" class="jxgbox" style="width:75%;height:auto; min-height: 400px;text-align:center; margin: auto; border: 0px solid black;">
</div>

JavaScript

JXG.Options.text.useMathJax = true;
JXG.Options.point.showInfobox = false;

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-2, 15, 30, -2],
    axis: true,
    showNavigation: false, //hides arrows and zoom icons
    keepaspectratio: true,
    showCopyright: false,
    showLogo:true,
    defaultAxes: {
      x: { ticks: { visible: false, majorHeight: 5 } },
      y: { ticks: { visible: false, majorHeight: 5 } }
    },
    pan: { enabled: false },      // Disable pan for 3D view
    zoom: { enabled: false }      // Disable zoom for 3D view
});

var one = board.create('point', [1,1],{fixed:true, visible:true, highlight:false, name:''});
var zero = board.create('point', [0,0],{fixed:true, visible:false});
var xeqy= board.create('line', [zero, one], {visible:true, fixed:true, highlight:false,color:"black"});
var s = board.create('segment',[[1,0],one],{dash:1, highlight:false});

var OX = board.defaultAxes.x;

var A= board.create('glider', [7,0,OX], {name:'b',size:3, color:'orange',snapToGrid:true, snapSizeX:0.1,}); 
var B= board.create('glider', [3,0,OX], {name:'a',size:3, color:'orange',snapToGrid:true, snapSizeX:0.1,}); 

var lb = board.create('line', [B, one], {visible:true, highlight:false, color:'blue'});

var pa = board.create('perpendicular',[A,OX], {visible:false, color:'orange', dash:1,size:1});

var P= board.create('intersection', [pa,xeqy,0], {name:'',highlight:false});

var AP = board.create('segment', [A, P], {visible:true, dash:1, color:'orange'});


var lb = board.create('parallel', [P, lb], {visible:true, highlight:false, color:'blue'});

var AtB=board.create('intersection', [lb, OX,0], {name:'', size:2, color:'red',highlight:false});

var ta=board.create('text', [()=>A.X()-0.5, -1, ()=>'\\('+A.X().toFixed(1)+`\\)`], {fontSize: 14, color:'black', fontSize:11, fixed:true});

var tb=board.create('text', [()=>B.X()-0.5, ()=>(Math.abs(A.X()-B.X())<2?-2:-1), ()=>'\\('+B.X().toFixed(1)+`\\)`],...