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