Share JSXGraph: example "Area of a Triangle (assessment)"

JSXGraph
Share JSXGraph: example "Area of a Triangle (assessment)"
This website is a beta version. The official release will be in **2023**.

Area of a Triangle (assessment)

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: Area of a Triangle

Change the position of points \(A\), \(B\) and \(C\) so that triangle \(ABC\) has an area of \(\{area\}\) \(cm^2\). Note the specified unit.

Result

[Change JSXGraph construction.]

Additional elements

Input

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

Output

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

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