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

<h4>Question</h4>
Mark the function graphs that are invertible as long as the parameters are not equal to zero.

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

\([\{function graph 1\}, \{...\}, \{function graph N\}]\)
<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 = {
        'clickable': ['a*(x+b)^2+2', 'b*(x-c)^3-3', 'c*log(d*x)', 'd*sqrt(x+b)'],
        'multi': true
    };
    
    // JSXGraph board
    
    let board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-10, 10, 10, -10],
        moveTarget: document,
        axis: true,
        keepAspectRatio: true,
        showCopyright: false,
        pan: {
            enabled: false
        },
        browserpan: false
    });
    
    // JSXGraph construction
    
    board.create('slider', [[1, -2], [7, -2], [-5, 0.5, 5]], { name: 'a' });
    board.create('slider', [[1, -4], [7, -4], [-5, 1, 5]], { name: 'b' });
    board.create('slider', [[1, -6], [7, -6], [-5, -1, 5]], { name: 'c' });
    board.create('slider', [[1, -8], [7, -8], [-5, 2, 5]], { name: 'd' });
    
    for (let i = 0; i < input["clickable"].length; i++) {
        board.create('functiongraph', [input["clickable"][i]], { clickValue: true, strokeWidth: 2 });
        board.create('text', [-8, -2-2*i, 'f(x)=' + input["clickable"][i]], { fixed: 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 : 2,
                                    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'))
                input['clickable'][i]
            ) : null;
        }
        return out;
    }
    
    // output events, binding to LMS
    
    board.on('up', function (e) {
        document.getElementById('outputID').innerHTML = output();
    });
    
 </script>