JSXGraph
JSXGraph share

Share

Elements as Checkboxes – Functions (assessment)
QR code 
<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>
This code has to 
<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> 
/*
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 = 'your_div_id'; // Insert your id here!

// 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();
});
In this example, JSXGraph function graphs can be used as "checkboxes". By adding \(clickValue: '...'\) to a function graph's attributes, this element becomes clickable. The input parameter \(multi\) defines whether the function graphs behave as a checkbox \(multi=true\) or a radio button \(multi=false\). When such an function graph is clicked, the \(clickValues\) are stored in the result array.

Question

Mark the function graphs that are invertible as long as the parameters are not equal to zero.

Result

[Change JSXGraph construction.]

Input

\([\{multi\}]\)

\(checkbox: multi=true\)

\(radio button: multi= false\)

Output

\([\{function graph 1\}, \{...\}, \{function graph N\}]\) 
<h4>Question</h4>
Mark the function graphs that are invertible as long as the parameters are not equal to zero.
// Define the id of your board in BOARDID

// 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();
});

<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\}]\)

license

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.