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