<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/reflection-of-a-triangle-with-respect-to-a-line-assessment" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Reflection of a Triangle with respect to a line (assessment)" 
    allowfullscreen
></iframe>

<h4>Question</h4>
Change the position of points \(A'\), \(B'\) and \(C'\) so that triangle \(A'B'C'\) is the result of a reflection of
triangle \(ABC\) with respect to line \(a = PQ\).

<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_P\}, \{y_P\}, \{x_Q\}, \{y_Q\}, \{x_A\}, \{y_A\}, \{x_B\}, \{y_B\}, \{x_C\}, \{y_C\}, \{x_{A'}\}, \{y_{A'}\},
\{x_{B'}\}, \{y_{B'}\}, \{x_{C'}\}, \{y_{C'}\}]\)

<h4>Output</h4>

\([\{x_{A'}\}, \{y_{A'}\}, \{x_{B'}\}, \{y_{B'}\}, \{x_{C'}\}, \{y_{C'}\}]\)
<script type = "text/javascript"> 
    /*
    This example is not licensed.
    */
    
    const BOARDID = 'board-0';

    // input data from LMS
    
    let input = [
        0, 0,   // point P(x, y)
        0, 20,  // point Q(x, y)
        -8, 4,  // point A(x, y)
        -2, 6,  // point B(x, y)
        -5, 15, // point C(x, y)
        3, 17,  // point A'(x, y)
        8, 10,  // point B'(x, y)
        6,4    // point C'(x, y)
    ];
    
    // JSXGraph board
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-10, 20, 10, 0],
        grid: true,
        showNavigation: false,
        showCopyright: false
    });
    
    // line
    
    let a = board.create('line', [[input[0], input[1]], [input[2], input[3]]], {
        name: '\\(a\\)',
        withLabel: true,
        label: {offset: [10, 0], fontSize: 16, align: 'middle'},
        fixed: true,
        strokeWidth: 3
    });
    
    // triangle ABC
    
    let A = board.create('point', [input[4], input[5]], {
        name: '\\(A\\)',
        label: {offset: [-25, -10], fontSize: 16},
        fixed: true,
        snapToGrid: true
    });
    let B = board.create('point', [input[6], input[7]], {
        name: '\\(B\\)',
        label: {offset: [10, -5], fontSize: 16},
        fixed: true,
        snapToGrid: true
    });
    let C = board.create('point', [input[8], input[9]], {
        name: '\\(C\\)',
        label: {offset: [0, 15], fontSize: 16},
        fixed: true,
        snapToGrid: true
    });
    let ABC = board.create('polygon', [A, B, C], {
        borders: {strokeWidth: 2}
    });
    
    // triangle A'B'C'
    
    let A1 = board.create('point', [input[10], input[11]], {
        name: '\\(A\'\\)',
        label: {offset: [10, 0], fontSize: 16},
        snapToGrid: true
    });
    let B1 = board.create('point', [input[12], input[13]], {
        name: '\\(B\'\\)',
        label: {offset: [10, 0], fontSize: 16},
        snapToGrid: true
    });
    let C1 = board.create('point', [input[14], input[15]], {
        name: '\\(C\'\\)',
        label: {offset: [10, 0], fontSize: 16},
        snapToGrid: true
    });
    let A1B1C1 = board.create('polygon', [A1, B1, C1], {
        borders: {strokeWidth: 2}
    });
    
    // the following elements are visible: true / invisible: false
    
    let opt = false;
    
    // reflected triangle
    
    let ABCreflected = board.create('reflection', [ABC, a], {
        fillColor: '#cccccc',
        borders: {strokeWidth: 1, strokeColor: '#cccccc'},
        vertices: {size: 1, strokeColor: '#cccccc', fillColor: '#cccccc'},
        visible: () => {
            return opt;
        }
    });
    
    // output data for LMS, additional binding to LMS necessary
    
    let output = function () {
        return [
            A1.X(), A1.Y(),   // point A(x, y)
            B1.X(), B1.Y(),   // point B(x, y)
            C1.X(), C1.Y()   // point C(x, y)
        ];
    }
    
    // output events (only necessary for demonstration in share database, not needed in LMS)
    
    A1.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    B1.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    C1.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    
    let show = function () {
        opt = !opt;
        board.update();
    }
    
 </script>