<iframe 
    src="https://www.jsxgraph.org/share/iframe/area-of-a-triangle" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Area of a Triangle (assessment)" 
    allowfullscreen
></iframe>

<h4>Question: Area of a Triangle</h4>
Change the position of points \(A\), \(B\) and \(C\) so that triangle \(ABC\) has an area of \(\{area\}\) \(cm^2\).
Note the specified unit.

<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>


<h4>Result</h4>
[<span id="outputID">Change JSXGraph construction.</span>]
<h4>Additional elements</h4>
<button onclick="show();">Show/hide additional elements!</button>

<h4>Input</h4>

\([\{x_A\}, \{y_A\}, \{x_B\}, \{y_B\}, \{x_C\}, \{y_C\}, \{unit\}]\)

<h4>Output</h4>

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}, \{unit\}, \{area\}]\)

<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';

    // input data from LMS
    
    let input = [
        2, 4,   // point A(x, y)
        12, 6,  // point B(x, y)
        8, 12,  // point C(x, y)
        2       // unit
    ];
    
    // JSXGraph board
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [0, 15, 15, 0],
        keepAspectRatio: true,
        grid: true,
        showNavigation: false,
        showCopyright: false
    });
    
    // unit
    
    let unit = board.create('segment', [[1, 14], [3, 14]], {
        name: '\\(' + input[6] + '\\) \\(cm\\)',
        withLabel: true,
        label: {offset: [-20, -20], fontSize: 16, align: 'middle'},
        fixed: true,
        strokeWidth: 3
    });
    
    // triangle ABC
    
    let A = board.create('point', [input[0], input[1]], {
        name: '\\(A\\)',
        label: {offset: [-25, -10], fontSize: 16},
        snapToGrid: true
    });
    let B = board.create('point', [input[2], input[3]], {
        name: '\\(B\\)',
        label: {offset: [10, -5], fontSize: 16},
        snapToGrid: true
    });
    let C = board.create('point', [input[4], input[5]], {
        name: '\\(C\\)',
        label: {offset: [0, 15], fontSize: 16},
        snapToGrid: true
    });
    let ABC = board.create('polygon', [A, B, C], {
        borders: {strokeWidth: 2}
    });
    
    // the following elements are visible: true / invisible: false
    
    let opt = false;
    
    // baseline of triangle ABC
    
    let c = board.create('segment', [A, B], {
        name: '',
        withlabel: true,
        label: {offset: [0, -15], fontSize: 16},
        strokeColor: '#ff0000',
        visible: () => {
            return opt;
        }
    });
    
    // height of triangle ABC
    
    let F = board.create('perpendicularpoint', [C, c], {
        name: '',
        label: {offset: [0, -15], fontSize: 16},
        strokeColor: '#999999',
        fillColor: '#999999',
        visible: () => {
            return opt;
        }
    });
    let h = board.create('segment', [C, F], {
        name: '',
        withlabel: true,
        label: {offset: [-20, -15], fontSize: 16},
        strokeColor: '#ff0000',
        dash: 2,
        visible: () => {
            return opt;
        }
    });
    
    // output data for LMS, additional binding to LMS necessary
    
    let output = function () {
        return [
            A.X(), A.Y(),   // point A(x, y)
            B.X(), B.Y(),   // point B(x, y)
            C.X(), C.Y(),   // point C(x, y)
            input[6],      // unit
            0.5 * c.L() * input[6] / 2 * h.L() * input[6] / 2   // area
        ];
    }
    
    // output events (only necessary for demonstration in share database, not needed in LMS)
    
    A.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    B.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    C.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    
    let show = function () {
        opt = !opt;
        board.update();
    }
    
 </script>