<iframe 
    src="https://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]], { });
            }
    
            // 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 (only necessary for demonstration in share database, not needed in LMS)
    
            board.on('up', function (e) {
                document.getElementById('outputID').innerHTML = output();
            });
    
 </script>