<iframe 
    src="https://jsxgraph.org/share/iframe/elements-as-checkboxes" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Elements as Checkboxes – Triangles (assessment)" 
    allowfullscreen
></iframe>

<h4>Question</h4>
Mark all the yellow triangles that have the same area as the red triangle.

<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>Input</h4>

\([\{multi\}]\)
<p></p>
\(checkbox: multi=true\)
<p></p>
\(radio button: multi= false\)

<h4>Output</h4>

\([\{1st\,clickValue\}, \{...\}, \{Nth\,clickValue\}]\)
<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note 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 = {
        '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, binding to LMS
    
    board.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    
 </script>