<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/exploring-functions-assessment" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Exploring Functions (assessment)" 
    allowfullscreen
></iframe>

<h4>Question: Values of the Derivative of a Function</h4>
Mark the intervals in which the derivative of the function {f(x)} is positive, negative or 0.
<p/>
First divide the domain of the function into intervals.
To do this, drag the interval separators from the green box at the bottom right.
<p/>
Then move the horizontal interval sliders down to red (negative derivative) or up to blue (positive derivative).

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

\([\{boundingbox_{xMin}\}, \)
\(\{boundingbox_{yMax}\}, \)
\(\{boundingbox_{xMax}\}, \)
\(\{boundingbox_{yMin}\}, \)
\(\{y_{bar}\}, \)
\(\{intValue_1\}, \)
\(\{intSeparator_1\}, \)
\(\{intValue_2\}, \)
\(\{intSeparator_2\}, ...,\)
\(\{intSeparator_{N-1}\},
\)\(\{intVaule_N\}, \)
\(\{f(x)\}]\)
<p/><p/>

\(\{intValue_i\}\in\{-1, 0, 1\}\)

<h4>Output</h4>

\([\{int_{begin}\}, \)
\(\{intValue_1\}, \)
\(\{intSeparator_1\}, \)
\(\{intValue_2\}, \)
\(\{intSeparator_2\},
...,\)
\(\{intSeparator_{M-1}\}, \)
\(\{intValue_M\}, \)
\(\{int_{end}\}]\)
<p/><p/>
\(M\) Number of Separators (outside the box)
<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/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 = [
        -10, 10, 10, -10,           // boundingbox JSXGraph
        -8,                         // y coordinate (integer) of the interval bar
        0, 10,                      // interval value 1, separator 1
        0, 10,                      // interval value 2, separator 2
        0, 10,                      // interval value 3, separator 3
        0, 10,                      // interval value 4, separator 4
        0, 10,                      // interval value 5, separator 5
        0,                          // interval value 6,
        '0.1*x^3+0.25*x^2-0.5*x-1'  // function term
    ];
    
    // visual adjustment necessary
    
    let padding = 1;                // depends on xMax of boundingBox
    
    // digits of results
    
    let digits = 2;                 // digits
    
    //
    
    let xMin = input[0], xMax = input[2], yMax = input[1], yMin = input[3]; // JSXGraph boundingbox
    let xStore = xMax - padding;    // position of the green box where the separators are "stored"
    let yBar = input[4];            // interval bar
    
    // JSXGraph board
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [xMin, yMax, xMax, yMin],
        keepAspectRatio: true,
        axis: true,
        grid: false,
        defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}},
        showNavigation: false,
        showCopyright: false
    });
    
    // function graph
    
    let f = board.create('functiongraph', [input[input.length - 1]], {
        strokeWidth: 2
    });
    
    // interval bar with green separator box
    
    let A = board.create('point', [xMin, yBar], {
        fixed: true,
        visible: false
    });
    let B = board.create('point', [xStore, yBar], {
        fixed: true,
        visible: false
    });
    let s = board.create('segment', [A, B], {
        fixed: true,
        strokeWidth: 20,
        strokeColor: '#ffffff',
        highLight: false
    });
    let store = board.create('segment', [[xStore, yBar - padding / 2], [xStore, yBar + padding / 2]], {
        fixed: true,
        strokeWidth: 30,
        linecap: 'round',
        strokeColor: '#66cc33',
        highLight: false
    });
    
    //  separator handling
    
    let G = [];
    let P = [];
    let coordsX = [];
    let interval = [];
    let sCount = (input.length - 7) / 2;
    
    for (let i = 0; i < sCount; i++) {
        G[i] = board.create('glider', [input[6 + i * 2], 0, s], {
            name: '',
            face: '|',
            size: 10,
            strokeWidth: 3,
            strokeColor: '#000000',
            highlight: false,
            showInfoBox: false
        });
        G[i].on('drag', function (e) {
            sortSeparators();
        });
    }
    
    // all separators including begin and end separators
    
    P.push(A);
    for (let i = 0; i < G.length; i++)
        P.push(G[i]);
    P.push(B);
    
    // sort separators
    
    let sortSeparators = function () {
        for (let i = 0; i < P.length; i++)
            coordsX[i] = P[i].X();
        coordsX.sort(function (a, b) {
            return a - b;
        });
        document.getElementById('outputID').innerHTML = output();
    }
    
    sortSeparators();
    
    // create separators
    
    for (let i = 0; i < P.length; i++) {
        let Pi = board.create('point', [() => {
            return coordsX[i];
        }, yBar], {visible: false});
        let Pi1 = board.create('point', [() => {
            return coordsX[i + 1];
        }, yBar], {visible: false});
        let l = board.create('segment', [Pi, Pi1], {strokeColor: '#cccccc', highlight: false, strokeWidth: 20});
        let n = board.create('segment', [[() => {
            return coordsX[i];
        }, xMin], [() => {
            return coordsX[i];
        }, xMax]], {
            strokeColor: '#999999', dash: 2, strokeWidth: 1, point1: {visible: false}, visible: () => {
                return (Math.abs(coordsX[i] - xStore) > 0.5 ? true : false);
            }
        });
        let m = board.create('segment', [[() => {
            return (Pi.X() + Pi1.X()) / 2;
        }, yBar - padding / 4], [() => {
            return (Pi.X() + Pi1.X()) / 2;
        }, yBar + padding / 4]], {name: '', visible: false});
        interval[i] = board.create('glider', [0, yBar + input[5 + i * 2] * padding, m], {
            name: '',
            face: '-',
            size: 6,
            strokeWidth: 3,
            strokeColor: '#000000',
            fillColor: '#000000',
            snapToGrid: true,
            highlight: false,
            snapToPoint: true,
            showInfoBox: false,
            visible: () => {
                return (l.L() > 1 ? true : false);
            }
        });
        let p = board.create('polygon', [[() => {
            return Pi.X();
        }, yMax], [() => {
            return (Pi1.X() == xStore ? xMax : Pi1.X());
        }, yMax], [() => {
            return (Pi1.X() == xStore ? xMax : Pi1.X());
        }, yMin], [() => {
            return Pi.X();
        }, yMin]], {
            highlight: false,
            strokeWidth: 20,
            vertices: {visible: false},
            borders: {visible: false},
            visible: () => {
                return (Pi.X() == xStore ? false : true);
            }
        });
        let t = board.create('text', [() => {
            return coordsX[i + 1];
        }, yBar - padding, () => {
            return ' ' + (i + 1) + ' ';
        }], {
            cssStyle: 'border: solid 2px black; padding: 2px 5px 2px 5px; background-color: #ffffff; margin: ' + (padding / 2) + 'px 0px 0px -10px; border-radius: 15px;',
            anchorX: 'left',
            anchorY: 'middle'
        });
        l.setAttribute({
            strokeColor: () => {
                return (interval[i].Y() != yBar ? (interval[i].Y() > yBar ? '#99ccff' : '#ffcccc') : '#cccccc');
            }
        });
        interval[i].setAttribute({
            strokeColor: () => {
                return (interval[i].Y() != yBar ? (interval[i].Y() > yBar ? '#0000ff' : '#ff0000') : '#666666');
            }
        });
        t.setAttribute({
            visible: () => {
                return (l.L() > 0.6 & (Math.abs(coordsX[i + 1] - xStore) > 1) ? true : false);
            }
        });
        p.setAttribute({
            fillColor: () => {
                return (interval[i].Y() != yBar ? (interval[i].Y() > yBar ? '#99ccff' : '#ffcccc') : '#ffffff');
            }
        });
        interval[i].on('drag', function (e) {
            sortSeparators();
        });
    }
    
    // output data for LMS, additional binding to LMS necessary
    
    function output () {
        let out = [];
        let i = 0;
        while (coordsX[i] < xStore) {
            out.push(Math.round(coordsX[i] * Math.pow(10, digits)) / Math.pow(10, digits));
            try {
                let x = interval[i].Y() - yBar;
                if (x > 0)
                    out.push(1);
                else if (x < 0)
                    out.push(-1);
                else
                    out.push(0);
            } catch (e) {
            }
            i++;
        }
        out.push(xMax);
        return out;
    }
 </script>