Share JSXGraph: example "Reflection of a Triangle with respect to a line (assessment)"

JSXGraph
Share JSXGraph: example "Reflection of a Triangle with respect to a line (assessment)"
This website is a beta version. The official release will be in **2024**.

Reflection of a Triangle with respect to a line (assessment)

Assessment Basic constructions Polygons Symmetry Transformations
This example can be used for assessment tasks with graphical input. The input variables have to be generated by the course system (e.g randomly). The output variables must be binded to the course system's answer method. Additional Elements can be displayed, e. g. if the solution is correct or for additional help. If you change elements within the board, you will find the result below.

Question

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\).

Result

[Change JSXGraph construction.]

Additional elements

Input

\([\{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'}\}]\)

Output

\([\{x_{A'}\}, \{y_{A'}\}, \{x_{B'}\}, \{y_{B'}\}, \{x_{C'}\}, \{y_{C'}\}]\) 
<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\).
// Define the id of your board in BOARDID

// 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();
}

<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'}\}]\)

This example is not licensed.