Type 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. If you change elements within the board, you will find the result below.
Question
Change the position of points \(A\), \(B\) and \(C\) to get a \(\{type\}\) triangle \(ABC\).Result
[Change JSXGraph construction.]Additional elements
Input
\([\{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}\}, \{type\}]\) \(acute: type = 0\) \(right: type = 1\) \(obtuse: type = 2\)<h4>Question</h4>
Change the position of points \(A\), \(B\) and \(C\) to get a \(\{type\}\) triangle \(ABC\).// Define the id of your board in BOARDID
// input data from LMS
let input = [
2, 2, // point A(x, y)
12, 3, // point B(x, y)
8, 12 // point C(x, y)
];
// JSXGraph board
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [0, 15, 15, 0],
snapToGrid: true,
showNavigation: false,
showCopyright: false
});
// triangle ABC
let A = board.create('point', [input[0], input[1]], {
name: '\\(A\\)',
snapToGrid: true,
label: {offset: [-25, -10], fontSize: 16}
});
let B = board.create('point', [input[2], input[3]], {
name: '\\(B\\)',
snapToGrid: true,
label: {offset: [10, -5], fontSize: 16}
});
let C = board.create('point', [input[4], input[5]], {
name: '\\(C\\)',
snapToGrid: true,
label: {offset: [0, 15], fontSize: 16}
});
let ABC = board.create('polygon', [A, B, C], {
borders: {strokeWidth: 2}
});
// angles alpha, beta, gamma
let alpha = board.create('nonreflexangle', [B, A, C], {
orthoType: 'square',
withLabel: false,
visible: false
});
let beta = board.create('nonreflexangle', [C, B, A], {
orthoType: 'square',
withLabel: false,
visible: false
});
let gamma = board.create('nonreflexangle', [A, C, B], {
orthoType: 'square',
withLabel: false,
visible: false
});
// the following properties are visible: true / invisible: false
let opt = false;
// show right angle
alpha.setAttribute({
visible: () => {
return opt;
}
});
beta.setAttribute({
visible: () => {
return opt;
}
});
gamma.setAttribute({
visible: () => {
return opt;
}
});
// output data for LMS, additional binding to LMS necessary
let output = function () {
let type = -1;
if (Math.max(alpha.Value(), beta.Value(), gamma.Value())<0.5*Math.PI)
type = 0; // acute
else if (Math.max(alpha.Value(), beta.Value(), gamma.Value()) == 0.5 * Math.PI)
type = 1; // right
else
type = 2; //obtuse
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)
type // 0: acute, 1: right, 2: obtuse
];
}
// 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 show() {
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}\}]\)
<h4>Output</h4>
\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}, \{type\}]\)
<p></p>
\(acute: type = 0\)
<p></p>
\(right: type = 1\)
<p></p>
\(obtuse: type = 2\)