<iframe 
    src="https://jsxgraph.org/share/iframe/menelaus-theorem" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Menelaus's Theorem" 
    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 ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    JXG.Options.label.autoPosition = true;
    JXG.Options.text.fontSize = 24;
    
    var board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: false,
        showCopyright: false,
        showNavigation: false,
        keepaspectratio: true
    });
    
    var a = board.create('point', [-1.7, 0], { name: 'a' });
    var b = board.create('point', [4, -3], { name: 'b' });
    var c = board.create('point', [1, 4], { name: 'c' });
    
    var s1 = board.create('segment', [c, a], { color: 'black' });
    var s2 = board.create('segment', [c, b], { color: 'black' });
    var s3 = board.create('line', [a, b], { color: 'black' });
    
    var as = board.create('glider', [2, 1.8, s2], { name: "a'" })
    var bs = board.create('glider', [-1, 1.5, s1], { name: "b'" })
    var s4 = board.create('line', [as, bs], { color: 'black' });
    
    var cs = board.create('glider', [-3, 3.3, s3], { name: "c'" });
    
    var TV = function(p, q, t) {
        var v = p.Dist(t) / p.Dist(q);
        if (JXG.Math.Geometry.isSameDir(p.coords, q.coords, p.coords, t.coords)) {
            return v;
        } else {
            return -v;
        }
    };
    
    var txt = board.create('text', [-4.5, -4, function() {
        return "TV(a',c,b) * TV(b',a,c) * TV(c',b,a) = " + (TV(as, c, b) * TV(bs, a, c) * TV(cs, b, a)).toFixed(2);
    }]);
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Menelaus's Theorem" 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 ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   JXG.Options.label.autoPosition = true;
   JXG.Options.text.fontSize = 24;
   
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: false,
       showCopyright: false,
       showNavigation: false,
       keepaspectratio: true
   });
   
   var a = board.create('point', [-1.7, 0], { name: 'a' });
   var b = board.create('point', [4, -3], { name: 'b' });
   var c = board.create('point', [1, 4], { name: 'c' });
   
   var s1 = board.create('segment', [c, a], { color: 'black' });
   var s2 = board.create('segment', [c, b], { color: 'black' });
   var s3 = board.create('line', [a, b], { color: 'black' });
   
   var as = board.create('glider', [2, 1.8, s2], { name: "a'" })
   var bs = board.create('glider', [-1, 1.5, s1], { name: "b'" })
   var s4 = board.create('line', [as, bs], { color: 'black' });
   
   var cs = board.create('glider', [-3, 3.3, s3], { name: "c'" });
   
   var TV = function(p, q, t) {
       var v = p.Dist(t) / p.Dist(q);
       if (JXG.Math.Geometry.isSameDir(p.coords, q.coords, p.coords, t.coords)) {
           return v;
       } else {
           return -v;
       }
   };
   
   var txt = board.create('text', [-4.5, -4, function() {
       return "TV(a',c,b) * TV(b',a,c) * TV(c',b,a) = " + (TV(as, c, b) * TV(bs, a, c) * TV(cs, b, a)).toFixed(2);
   }]);
</jsxgraph>