<iframe src="http://jsxgraph.uni-bayreuth.de/share/iframe/function-composer-assessment" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: Function Composer (assessment)" allowfullscreen ></iframe>
<h4>Question: Find the Functiongraph of the Derivative</h4> Find the (blue) graph of the derivative of the given function \(\{term\}\) (red graph). Take care of extreme values, inflection points, etc. <p/> You can manipulate the blue graph by changing the given points ♦ and the anchors ▲. <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>Additional elements</h4> <button onclick="show();">Show/hide additional elements!</button> <h4>Input</h4> \([\{boundingbox_{xMin}\}, \) \(\{boundingbox_{yMax}\}, \) \(\{boundingbox_{xMax}\}, \) \(\{boundingbox_{yMin}\}, \) \(\{y_{bar}\}, \) \(\{anchor1_x\}, \) \(\{anchor1_y\}, \) \(\{anchor2_x\}, \) \(\{anchor2_y\}, \) \(... , \) \(\{anchorN_x\}, \) \(\{anchorN_y\} \)] <h4>Output</h4> [\(\{anchor1_x\}, \) \(\{anchor1_y\}, \) \(\{anchor2_x\}, \) \(\{anchor2_y\}, \) \(... , \) \(\{anchorN_x\}, \) \(\{anchorN_y\} \)] <script type = "text/javascript"> /* This example is not licensed. */ const BOARDID = 'board-0'; // input data from LMS let input = [ -0.5, 10, 10, -5, // boundingbox JSXGraph -4.5, // y coordinate of the anchor bar 0, 1, // anchor 1 (x, y) 2.5, 2, // anchor 2 (x, y) 4.5, 3, // anchor 3 (x, y) 6.25, 4, // anchor 4 (x, y) 10, 7 // anchor 5 (x, y) ]; // visual adjustment necessary let padding = 0.5; // depends on xMax of boundingBox // let xMin = input[0], xMax = input[2], yMax = input[1], yMin = input[3]; // JSXGraph boundingbox let yBar = input[4]; // anchor bar // JSXGraph board const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [xMin, yMax, xMax, yMin], keepAspectRatio: false, axis: true, grid: false, defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}}, showNavigation: false, showCopyright: false }); // anchor bar let term = '0.5*(x-2)*(x-5)*(x-7)'; let f = board.create('functiongraph', [term, xMin + padding, xMax], { strokeWidth: 3, strokeColor: '#ff6666' }); let A = board.create('point', [xMin + padding, yBar], { fixed: true, visible: false }); let B = board.create('point', [xMax - padding, yBar], { fixed: true, visible: false }); let bar = board.create('segment', [A, B], { fixed: true, strokeWidth: 10, strokeColor: '#cccccc', linecap: 'round', highLight: false }); // separator handling let P = []; let F = []; let coordsX = []; let sCount = (input.length - 5) / 2; for (let i = 0; i < sCount; i++) { P[i] = board.create('glider', [input[5 + i * 2], yBar, bar], { name: '', face: '^', size: 6, strokeWidth: 3, strokeColor: '#000000', fillColor: '#000000', highlight: false, showInfoBox: false }); P[i].on('drag', function (e) { sortSeparators(); }); } // sort separators function sortSeparators() { 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 n = board.create('segment', [[() => { return coordsX[i]; }, yMin + padding], [() => { return coordsX[i]; }, yMax - padding/2]], { strokeColor: '#888888', dash: 2, strokeWidth: 1, point1: {visible: false} }); F[i] = board.create('glider', [0, input[6 + i * 2], n], { name: '', face: '<>', size: 4, strokeWidth: 3, strokeColor: '#000000', fillColor: '#000000', highlight: false, showInfoBox: false }); } //let tau = board.create('slider', [[0.5,4],[4,3],[0.001,0.5,1]], {name:'tau'}); //let c = board.create('curve', JXG.Math.Numerics.CardinalSpline(F, function(){ return tau.Value();}), {strokeWidth:3}); //let c = board.create('curve', JXG.Math.Numerics.CatmullRomSpline(F, function(){ return tau.Value();}), {strokeWidth:3}); let c = board.create('spline', F, {strokeWidth:3}); // output data for LMS, additional binding to LMS necessary function output() { let out = []; for (let i = 0; i < F.length; i++) { out.push(F[i].X()); out.push(F[i].Y()); } return out; } // the following elements are visible: true / invisible: false let opt = false; let g = board.create('functiongraph', ['D(' + term + ')', xMin + padding, xMax], { strokeWidth: 2, strokeColor: '#669966', visible: () => { return opt; } }); // output events (only necessary for demonstration in share database, not needed in LMS) for (let i = 0; i < F.length; i++) { P[i].on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); F[i].on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); } function show() { opt = !opt; board.update(); } </script>
/* This example is not licensed. */ const BOARDID = 'your_div_id'; // Insert your id here! // input data from LMS let input = [ -0.5, 10, 10, -5, // boundingbox JSXGraph -4.5, // y coordinate of the anchor bar 0, 1, // anchor 1 (x, y) 2.5, 2, // anchor 2 (x, y) 4.5, 3, // anchor 3 (x, y) 6.25, 4, // anchor 4 (x, y) 10, 7 // anchor 5 (x, y) ]; // visual adjustment necessary let padding = 0.5; // depends on xMax of boundingBox // let xMin = input[0], xMax = input[2], yMax = input[1], yMin = input[3]; // JSXGraph boundingbox let yBar = input[4]; // anchor bar // JSXGraph board const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [xMin, yMax, xMax, yMin], keepAspectRatio: false, axis: true, grid: false, defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}}, showNavigation: false, showCopyright: false }); // anchor bar let term = '0.5*(x-2)*(x-5)*(x-7)'; let f = board.create('functiongraph', [term, xMin + padding, xMax], { strokeWidth: 3, strokeColor: '#ff6666' }); let A = board.create('point', [xMin + padding, yBar], { fixed: true, visible: false }); let B = board.create('point', [xMax - padding, yBar], { fixed: true, visible: false }); let bar = board.create('segment', [A, B], { fixed: true, strokeWidth: 10, strokeColor: '#cccccc', linecap: 'round', highLight: false }); // separator handling let P = []; let F = []; let coordsX = []; let sCount = (input.length - 5) / 2; for (let i = 0; i < sCount; i++) { P[i] = board.create('glider', [input[5 + i * 2], yBar, bar], { name: '', face: '^', size: 6, strokeWidth: 3, strokeColor: '#000000', fillColor: '#000000', highlight: false, showInfoBox: false }); P[i].on('drag', function (e) { sortSeparators(); }); } // sort separators function sortSeparators() { 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 n = board.create('segment', [[() => { return coordsX[i]; }, yMin + padding], [() => { return coordsX[i]; }, yMax - padding/2]], { strokeColor: '#888888', dash: 2, strokeWidth: 1, point1: {visible: false} }); F[i] = board.create('glider', [0, input[6 + i * 2], n], { name: '', face: '<>', size: 4, strokeWidth: 3, strokeColor: '#000000', fillColor: '#000000', highlight: false, showInfoBox: false }); } //let tau = board.create('slider', [[0.5,4],[4,3],[0.001,0.5,1]], {name:'tau'}); //let c = board.create('curve', JXG.Math.Numerics.CardinalSpline(F, function(){ return tau.Value();}), {strokeWidth:3}); //let c = board.create('curve', JXG.Math.Numerics.CatmullRomSpline(F, function(){ return tau.Value();}), {strokeWidth:3}); let c = board.create('spline', F, {strokeWidth:3}); // output data for LMS, additional binding to LMS necessary function output() { let out = []; for (let i = 0; i < F.length; i++) { out.push(F[i].X()); out.push(F[i].Y()); } return out; } // the following elements are visible: true / invisible: false let opt = false; let g = board.create('functiongraph', ['D(' + term + ')', xMin + padding, xMax], { strokeWidth: 2, strokeColor: '#669966', visible: () => { return opt; } }); // output events (only necessary for demonstration in share database, not needed in LMS) for (let i = 0; i < F.length; i++) { P[i].on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); F[i].on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); } function show() { opt = !opt; board.update(); }
<h4>Question: Find the Functiongraph of the Derivative</h4> Find the (blue) graph of the derivative of the given function \(\{term\}\) (red graph). Take care of extreme values, inflection points, etc. <p/> You can manipulate the blue graph by changing the given points ♦ and the anchors ▲.
// Define the id of your board in BOARDID // input data from LMS let input = [ -0.5, 10, 10, -5, // boundingbox JSXGraph -4.5, // y coordinate of the anchor bar 0, 1, // anchor 1 (x, y) 2.5, 2, // anchor 2 (x, y) 4.5, 3, // anchor 3 (x, y) 6.25, 4, // anchor 4 (x, y) 10, 7 // anchor 5 (x, y) ]; // visual adjustment necessary let padding = 0.5; // depends on xMax of boundingBox // let xMin = input[0], xMax = input[2], yMax = input[1], yMin = input[3]; // JSXGraph boundingbox let yBar = input[4]; // anchor bar // JSXGraph board const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [xMin, yMax, xMax, yMin], keepAspectRatio: false, axis: true, grid: false, defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}}, showNavigation: false, showCopyright: false }); // anchor bar let term = '0.5*(x-2)*(x-5)*(x-7)'; let f = board.create('functiongraph', [term, xMin + padding, xMax], { strokeWidth: 3, strokeColor: '#ff6666' }); let A = board.create('point', [xMin + padding, yBar], { fixed: true, visible: false }); let B = board.create('point', [xMax - padding, yBar], { fixed: true, visible: false }); let bar = board.create('segment', [A, B], { fixed: true, strokeWidth: 10, strokeColor: '#cccccc', linecap: 'round', highLight: false }); // separator handling let P = []; let F = []; let coordsX = []; let sCount = (input.length - 5) / 2; for (let i = 0; i < sCount; i++) { P[i] = board.create('glider', [input[5 + i * 2], yBar, bar], { name: '', face: '^', size: 6, strokeWidth: 3, strokeColor: '#000000', fillColor: '#000000', highlight: false, showInfoBox: false }); P[i].on('drag', function (e) { sortSeparators(); }); } // sort separators function sortSeparators() { 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 n = board.create('segment', [[() => { return coordsX[i]; }, yMin + padding], [() => { return coordsX[i]; }, yMax - padding/2]], { strokeColor: '#888888', dash: 2, strokeWidth: 1, point1: {visible: false} }); F[i] = board.create('glider', [0, input[6 + i * 2], n], { name: '', face: '<>', size: 4, strokeWidth: 3, strokeColor: '#000000', fillColor: '#000000', highlight: false, showInfoBox: false }); } //let tau = board.create('slider', [[0.5,4],[4,3],[0.001,0.5,1]], {name:'tau'}); //let c = board.create('curve', JXG.Math.Numerics.CardinalSpline(F, function(){ return tau.Value();}), {strokeWidth:3}); //let c = board.create('curve', JXG.Math.Numerics.CatmullRomSpline(F, function(){ return tau.Value();}), {strokeWidth:3}); let c = board.create('spline', F, {strokeWidth:3}); // output data for LMS, additional binding to LMS necessary function output() { let out = []; for (let i = 0; i < F.length; i++) { out.push(F[i].X()); out.push(F[i].Y()); } return out; } // the following elements are visible: true / invisible: false let opt = false; let g = board.create('functiongraph', ['D(' + term + ')', xMin + padding, xMax], { strokeWidth: 2, strokeColor: '#669966', visible: () => { return opt; } }); // output events (only necessary for demonstration in share database, not needed in LMS) for (let i = 0; i < F.length; i++) { P[i].on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); F[i].on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); } function show() { opt = !opt; board.update(); }
<h4>Result</h4> [<span id="outputID">Change JSXGraph construction.</span>] <h4>Additional elements</h4> <button onclick="show();">Show/hide additional elements!</button> <h4>Input</h4> \([\{boundingbox_{xMin}\}, \) \(\{boundingbox_{yMax}\}, \) \(\{boundingbox_{xMax}\}, \) \(\{boundingbox_{yMin}\}, \) \(\{y_{bar}\}, \) \(\{anchor1_x\}, \) \(\{anchor1_y\}, \) \(\{anchor2_x\}, \) \(\{anchor2_y\}, \) \(... , \) \(\{anchorN_x\}, \) \(\{anchorN_y\} \)] <h4>Output</h4> [\(\{anchor1_x\}, \) \(\{anchor1_y\}, \) \(\{anchor2_x\}, \) \(\{anchor2_y\}, \) \(... , \) \(\{anchorN_x\}, \) \(\{anchorN_y\} \)]
This example is not licensed.