JSXGraph share
Share
Elements as Checkboxes – Angles (assessment)
Elements as Checkboxes – Angles (assessment)
In this example, JSXGraph elements can be used as "checkboxes". By adding \(clickValue: '...'\) to an element's attributes, this element becomes clickable.
The input parameter \(multi\) defines whether the elements with a \(clikValue\) attribute behave as a checkbox \(multi=true\) or a radio button \(multi=false\).
When such an element is clicked, the \(clickValues\) are stored in the result array.
Have also a look at the examples
Question
The point M is the center of the line AB. The straight line AD is an angle bisector. Change the position of points A, B and C and observe the angles. Mark the angles that are always less than 90°, regardless of the shape of the triangle ABC.Result
[Change JSXGraph construction.]Input
\([\{multi\}]\) \(checkbox: multi=true\) \(radio button: multi= false\)Output
\([\{1st\,clickValue\}, \{...\}, \{Nth\,clickValue\}]\)<h4>Question</h4>
The point M is the center of the line AB. The straight line AD is an angle bisector.
Change the position of points A, B and C and observe the angles. Mark the angles that are always less than 90°, regardless of the shape of the triangle ABC.// Define the id of your board in BOARDID
// input data from LMS
let input = {
'multi': true
};
// JSXGraph board
let board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [0, 8, 8, 0],
moveTarget: document,
keepAspectRatio: true,
showCopyright: false,
pan: {
enabled: false
},
browserpan: false,
shownavigation: false,
zoom: {
enabled: false,
}
});
// JSXGraph construction
let A = board.create('point', [1, 1], { });
let B = board.create('point', [7, 2], { });
let C = board.create('point', [6, 7], { });
let ABC = board.create('polygon', [A, B, C], { });
let M = board.create('midpoint', [A, B], { name: 'M' });
let s = board.create('segment', [C, M], { });
let w = board.create('bisector', [B, A, C], { });
let D = board.create('intersection', [w, ABC.borders[1]], { });
let E = board.create('intersection', [w, s], { });
let alpha = board.create('nonreflexangle', [B, A, D], { clickValue: 'alpha', radius: 1.25, hasInnerPoints: true });
let beta = board.create('nonreflexangle', [D, A, C], { clickValue: 'beta', radius: 1.75, hasInnerPoints: true });
let gamma = board.create('nonreflexangle', [A, D, B], { clickValue: 'gamma', radius: 1.00, hasInnerPoints: true });
let delta = board.create('nonreflexangle', [A, C, M], { clickValue: 'delta', radius: 1.25, hasInnerPoints: true });
let epsilon = board.create('nonreflexangle', [M, C, B], { clickValue: 'epsilon', radius: 1.75, hasInnerPoints: true });
let zeta = board.create('nonreflexangle', [B, M, C], { clickValue: 'zeta', radius: 1.00, hasInnerPoints: true });
let eta = board.create('nonreflexangle', [D, E, C], { clickValue: 'eta', radius: 1.00, hasInnerPoints: true });
// clickable elements
let clickablesEl = initClickableElements(input["multi"]);
// filter elements with attribute 'clickValue' and add event listeners
function initClickableElements(multi) {
let elements = [];
let elType = '';
let id = board.create('transform', [1, 1], {type: 'scale'});
for (let key in board.objects)
if (JXG.exists(board.objects[key].getAttribute('clickValue'))) {
try {
elType = board.objects[key].elType;
if (elType === 'intersection') {
elType = 'point';
}
if (elType === 'angle') {
elType = 'curve';
}
let element = board.objects[key];
let duplicate = board.create(elType, [element, id], {name: '', fillColor: 'none', vertices: { visible: false }});
elements.push([element, duplicate, false]);
element.on('down', (e) => {
let elIndex = -1;
for (let i = 0; i < elements.length; i++)
if (elements[i][0] == element) elIndex = i;
if (elIndex != -1)
for (let i = 0; i < elements.length; i++) {
elements[i][2] = multi ? (elIndex == i ? !elements[i][2] : elements[i][2]) : elIndex == i;
let attr = {
strokeWidth: elements[i][2] ? 8 : 1,
strokeColor: elements[i][0].getAttribute('strokeColor') + '77',
highlightStrokeColor: elements[i][0].getAttribute('strokeColor') + 'bb'
};
if (elements[i][0].elType === 'polygon') {
elements[i][0].setAttribute({ borders: attr });
} else {
elements[i][0].setAttribute(attr);
}
}
});
} catch (e) {
console.log('Attribute "clickValue" not supported!');
console.log(e)
}
}
return elements;
}
// output data for LMS, additional binding to LMS necessary
let output = function () {
let out = [];
for (let i = 0; i < clickablesEl.length; i++) {
clickablesEl[i][2] ? out.push(
JXG.evaluate(clickablesEl[i][0].getAttribute('clickValue'))
) : null;
}
return out;
}
// output events, binding to LMS
board.on('up', function (e) {
document.getElementById('outputID').innerHTML = output();
});<h4>Result</h4>
[<span id="outputID">Change JSXGraph construction.</span>]
<h4>Input</h4>
\([\{multi\}]\)
<p></p>
\(checkbox: multi=true\)
<p></p>
\(radio button: multi= false\)
<h4>Output</h4>
\([\{1st\,clickValue\}, \{...\}, \{Nth\,clickValue\}]\)
This example is licensed under a
Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.