<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/desarguess-theorem" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Desargues'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 4.0 International License.
    https://creativecommons.org/licenses/by/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 = 16;
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5,5,5,-5], axis:false, showCopyright:false, showNavigation:false});
    
    var r = board.create('point', [-4, -2], {name:'r'});
    var r1 = board.create('point', [-1.5, -2.5], {name:'', color: 'blue'});
    var r2 = board.create('point', [-1.5, -1.7], {name:'', color: 'blue'});
    var r3 = board.create('point', [-1.5, -0.5], {name:'', color: 'blue'});
    
    var l1 = board.create('line', [r, r1], {straightFirst: false, name: 'g_1', withLabel: true, label: {position: 'rt', offset: [-10, 0]}});
    var l2 = board.create('line', [r, r2], {straightFirst: false, name: 'g_2', withLabel: true, label: {position: 'rt', offset: [-10, 10]}});
    var l3 = board.create('line', [r, r3], {straightFirst: false, name: 'g_3', withLabel: true, label: {position: 'rt', offset: [-10, 0]}});
    
    var p1 = board.create('glider', [-1, -2, l1], {name:'p_1'});
    var p2 = board.create('glider', [0.5, -2, l2], {name:'p_2'});
    var p3 = board.create('glider', [-0.5, 0, l3], {name:'p_3'});
    
    var q1 = board.create('glider', [0.75, -2, l1], {name:'q_1'});
    
    var s1 = board.create('segment', [p1, p2], {color: 'black'});
    var s2 = board.create('segment', [p1, p3], {color: 'black'});
    var s3 = board.create('segment', [p2, p3], {color: 'red'});
    
    var par1 = board.create('parallel', [s1, q1], {visible: false});
    var par2 = board.create('parallel', [s2, q1], {visible: false});
    
    var q2 = board.create('intersection', [par1, l2], {name:'q_2', color: 'black'});
    var q3 = board.create('intersection', [par2, l3], {name:'q_3', color: 'black'});
    
    var s4 = board.create('segment', [q1, q2], {color: 'black'});
    var s5 = board.create('segment', [q1, q3], {color: 'black'});
    var s6 = board.create('segment', [q2, q3], {color: 'red'});
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Desargues'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 4.0 International License.
   https://creativecommons.org/licenses/by/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 = 16;
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-5,5,5,-5], axis:false, showCopyright:false, showNavigation:false});
   
   var r = board.create('point', [-4, -2], {name:'r'});
   var r1 = board.create('point', [-1.5, -2.5], {name:'', color: 'blue'});
   var r2 = board.create('point', [-1.5, -1.7], {name:'', color: 'blue'});
   var r3 = board.create('point', [-1.5, -0.5], {name:'', color: 'blue'});
   
   var l1 = board.create('line', [r, r1], {straightFirst: false, name: 'g_1', withLabel: true, label: {position: 'rt', offset: [-10, 0]}});
   var l2 = board.create('line', [r, r2], {straightFirst: false, name: 'g_2', withLabel: true, label: {position: 'rt', offset: [-10, 10]}});
   var l3 = board.create('line', [r, r3], {straightFirst: false, name: 'g_3', withLabel: true, label: {position: 'rt', offset: [-10, 0]}});
   
   var p1 = board.create('glider', [-1, -2, l1], {name:'p_1'});
   var p2 = board.create('glider', [0.5, -2, l2], {name:'p_2'});
   var p3 = board.create('glider', [-0.5, 0, l3], {name:'p_3'});
   
   var q1 = board.create('glider', [0.75, -2, l1], {name:'q_1'});
   
   var s1 = board.create('segment', [p1, p2], {color: 'black'});
   var s2 = board.create('segment', [p1, p3], {color: 'black'});
   var s3 = board.create('segment', [p2, p3], {color: 'red'});
   
   var par1 = board.create('parallel', [s1, q1], {visible: false});
   var par2 = board.create('parallel', [s2, q1], {visible: false});
   
   var q2 = board.create('intersection', [par1, l2], {name:'q_2', color: 'black'});
   var q3 = board.create('intersection', [par2, l3], {name:'q_3', color: 'black'});
   
   var s4 = board.create('segment', [q1, q2], {color: 'black'});
   var s5 = board.create('segment', [q1, q3], {color: 'black'});
   var s6 = board.create('segment', [q2, q3], {color: 'red'});
</jsxgraph>