<iframe src="https://jsxgraph.org/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>
/* 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 = 'your_div_id'; // Insert your id here! // 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; }
<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).
// Define the id of your board in BOARDID // 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; }
<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)
This example is licensed under a Creative Commons Attribution 4.0 International License. Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.