<iframe src="https://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(); }
This example can be used for assessment tasks with graphical input. The input variables have to be generated by the course system (e.g randomly). The output variables must be binded to the course system's answer method. Additional Elements can be displayed, e. g. if the solution is correct or for additional help. If you change elements within the board, you will find the result below.
You can manipulate the blue graph by changing the given points ♦ and the anchors ▲.
<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.