JSXGraph share
Share
Elements as Checkboxes – Triangles (assessment)
Elements as Checkboxes – Triangles (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.
Question
Mark all the yellow triangles that have the same area as the red triangle.Result
[Change JSXGraph construction.]Input
\([\{multi\}]\) \(checkbox: multi=true\) \(radio button: multi= false\)Output
\([\{1st\,clickValue\}, \{...\}, \{Nth\,clickValue\}]\)<h4>Question</h4>
Mark all the yellow triangles that have the same area as the red triangle.// 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, 20, 20, 0],
moveTarget: document,
keepAspectRatio: true,
showCopyright: false,
grid: true,
pan: {
enabled: false
},
browserPan: false,
shownavigation: false
});
// JSXGraph construction
board.create('polygon', [[ 1, 1], [ 7, 1], [ 5, 5]], { fixed: true, borders: { strokeWidth: 6, lineCap: 'round' }, vertices: { fixed: true, visible: false }, fillColor: 'red' });
board.create('polygon', [[ 3, 7], [ 9, 7], [ 4, 11]], { clickValue: 'triangle 1', fixed: true, hasInnerPoints:true, borders: { strokeWidth: 2, lineCap: 'round' }, vertices: { fixed: true, visible: false } });
board.create('polygon', [[ 7, 12], [14, 14], [ 9, 16]], { clickValue: 'triangle 2', fixed: true, hasInnerPoints:true, borders: { strokeWidth: 2, lineCap: 'round' }, vertices: { fixed: true, visible: false } });
board.create('polygon', [[12, 6], [19, 6], [14, 10]], { clickValue: 'triangle 3', fixed: true, hasInnerPoints:true, borders: { strokeWidth: 2, lineCap: 'round' }, vertices: { fixed: true, visible: false } });
board.create('polygon', [[ 1, 14], [ 5, 14], [ 6, 19]], { clickValue: 'triangle 4', fixed: true, hasInnerPoints:true, borders: { strokeWidth: 2, lineCap: 'round' }, vertices: { fixed: true, visible: false } });
board.create('polygon', [[19, 12], [15, 13], [16, 18]], { clickValue: 'triangle 5', fixed: true, hasInnerPoints:true, borders: { strokeWidth: 2, lineCap: 'round' }, vertices: { fixed: true, visible: false } });
board.create('polygon', [[10, 2], [19, 2], [ 8, 5]], { clickValue: 'triangle 6', fixed: true, hasInnerPoints:true, borders: { strokeWidth: 2, lineCap: 'round' }, vertices: { fixed: true, visible: false } });
// 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 (only necessary for demonstration in share database, not needed in 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.