JSXGraph
JSXGraph share

Share

Thales' theorem
QR code 
<iframe 
    src="https://www.jsxgraph.uni-bayreuth.de/share/iframe/thales-theorem" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Thales' theorem" 
    allowfullscreen
></iframe>
This code has to 
<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],
        showCopyright: false,
        showNavigation: false,
        keepaspectratio: true
    });
    
    var p = board.create('point', [-3, -2], { name: 'p' }),
        q1 = board.create('point', [0, -2], { name: 'q_1' }),
        q2 = board.create('point', [-1, 0.5], { name: 'q_2' }),
        l1 = board.create('line', [p, q1], { straightFirst: false }),
        l2 = board.create('line', [p, q2], { straightFirst: false }),
    
        l3 = board.create('line', [q1, q2], { color: 'black', dash: 2 }),
        t1 = board.create('glider', [2.5, 2, l1], { name: 't_1' }),
        l4 = board.create('parallel', [l3, t1], { color: 'black', dash: 2 }),
        t2 = board.create('intersection', [l4, l2], { name: 't_2' }),
    
        txt1 = board.create('text', [-4, -3.5,
            () => 'TV(p,q_1,t_1) = ' + (t1.Dist(p) / q1.Dist(p)).toFixed(2)
        ]),
        txt2 = board.create('text', [-4, -4.2,
            () => 'TV(p,q_2,t_2) = ' + (t2.Dist(p) / q2.Dist(p)).toFixed(2)
        ]);
 </script> 
/*
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 = 'your_div_id'; // Insert your id here!

JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 24;

var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    showCopyright: false,
    showNavigation: false,
    keepaspectratio: true
});

var p = board.create('point', [-3, -2], { name: 'p' }),
    q1 = board.create('point', [0, -2], { name: 'q_1' }),
    q2 = board.create('point', [-1, 0.5], { name: 'q_2' }),
    l1 = board.create('line', [p, q1], { straightFirst: false }),
    l2 = board.create('line', [p, q2], { straightFirst: false }),

    l3 = board.create('line', [q1, q2], { color: 'black', dash: 2 }),
    t1 = board.create('glider', [2.5, 2, l1], { name: 't_1' }),
    l4 = board.create('parallel', [l3, t1], { color: 'black', dash: 2 }),
    t2 = board.create('intersection', [l4, l2], { name: 't_2' }),

    txt1 = board.create('text', [-4, -3.5,
        () => 'TV(p,q_1,t_1) = ' + (t1.Dist(p) / q1.Dist(p)).toFixed(2)
    ]),
    txt2 = board.create('text', [-4, -4.2,
        () => 'TV(p,q_2,t_2) = ' + (t2.Dist(p) / q2.Dist(p)).toFixed(2)
    ]);
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Thales' 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],
       showCopyright: false,
       showNavigation: false,
       keepaspectratio: true
   });
   
   var p = board.create('point', [-3, -2], { name: 'p' }),
       q1 = board.create('point', [0, -2], { name: 'q_1' }),
       q2 = board.create('point', [-1, 0.5], { name: 'q_2' }),
       l1 = board.create('line', [p, q1], { straightFirst: false }),
       l2 = board.create('line', [p, q2], { straightFirst: false }),
   
       l3 = board.create('line', [q1, q2], { color: 'black', dash: 2 }),
       t1 = board.create('glider', [2.5, 2, l1], { name: 't_1' }),
       l4 = board.create('parallel', [l3, t1], { color: 'black', dash: 2 }),
       t2 = board.create('intersection', [l4, l2], { name: 't_2' }),
   
       txt1 = board.create('text', [-4, -3.5,
           () => 'TV(p,q_1,t_1) = ' + (t1.Dist(p) / q1.Dist(p)).toFixed(2)
       ]),
       txt2 = board.create('text', [-4, -4.2,
           () => 'TV(p,q_2,t_2) = ' + (t2.Dist(p) / q2.Dist(p)).toFixed(2)
       ]);
</jsxgraph>
The *affine / simple ratio* $TV(p,q,t)$ of the collinear points $p$, $q$ and $t$ is defined by $|t-p| = TV(p,q,t)|q-p|$. It is also known as *division ratio*. In German, it is called *Teilverhältnis*. Thales's theorem, also known as *intercept theorem*, *basic proportionality theorem* or *side splitter theorem*. It says that 1. The ratio of any two segments on the first ray equals the ratio of the according segments on the second ray. 2. The ratio of the two segments on the same ray starting at $p$ equals the ratio of the segments on the parallels. 
// Define the id of your board in BOARDID

JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 24;

var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    showCopyright: false,
    showNavigation: false,
    keepaspectratio: true
});

var p = board.create('point', [-3, -2], { name: 'p' }),
    q1 = board.create('point', [0, -2], { name: 'q_1' }),
    q2 = board.create('point', [-1, 0.5], { name: 'q_2' }),
    l1 = board.create('line', [p, q1], { straightFirst: false }),
    l2 = board.create('line', [p, q2], { straightFirst: false }),

    l3 = board.create('line', [q1, q2], { color: 'black', dash: 2 }),
    t1 = board.create('glider', [2.5, 2, l1], { name: 't_1' }),
    l4 = board.create('parallel', [l3, t1], { color: 'black', dash: 2 }),
    t2 = board.create('intersection', [l4, l2], { name: 't_2' }),

    txt1 = board.create('text', [-4, -3.5,
        () => 'TV(p,q_1,t_1) = ' + (t1.Dist(p) / q1.Dist(p)).toFixed(2)
    ]),
    txt2 = board.create('text', [-4, -4.2,
        () => 'TV(p,q_2,t_2) = ' + (t2.Dist(p) / q2.Dist(p)).toFixed(2)
    ]);

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.