I'm trying to get students to be able to drag the three points around to show the three intercepts of a quadratic (with real roots) then have jsxgraph draw the parabola that matches those three points. I've got the maths working no dramas but I can't convince it to update as the points move.
Here's the fiddle I've been working on.
I can get the graph to re-plot when I drag the points using the .on('drag' method but I can't work out how to clear previous plots (also is seems like I shouldn't have to use that method?).
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis: true
});
var xi1 = board.create('point', [2, 1], {
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
var xi2 = board.create('point', [-2, 1], {
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
var el0 = board.create('line', [
[0, 0],
[0, 1]
], {
strokeOpacity: .2,
strokeColor: '#000000',
fixed: true,
name: 'x=0'
});
var yi = board.create('glider', [0, 1, el0], {
name: 'Y-Intercept',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
yi.on('drag', function() {
board.removeObject(f);
var p = parseFloat(xi1.X());
var q = parseFloat(xi2.X());
var r = parseFloat(yi.Y());
var a = r / (p * q);
var b = (r * (q + p)) / (p * q);
var c = r;
var func = a.toString() + '*x^2+' + b.toString() + '*x+' + c.toString();
var f = board.jc.snippet(func, true, 'x', true);
var graph = board.create('functiongraph', [f, -10, 10], {
strokeColor: '#003399',
strokeWidth: 2
});
var txt1 = board.create('text', [3, 4, function() {
return "The current equation is:" + func;
}]);
});
Had a colleague show me an alternative way of getting the function to draw without using the jc.snippet method. Here's the fiddle.
Basically addcurve does what I want.
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis: true
});
var el1 = board.create('line', [
[0, 0],
[1, 0]
], {
strokeOpacity: .2,
strokeColor: '#000000',
fixed: true,
name: 'y=0'
});
var el0 = board.create('line', [
[0, 0],
[0, 1]
], {
strokeOpacity: .2,
strokeColor: '#000000',
fixed: true,
name: 'x=0'
});
var xi1 = board.create('glider', [2, 0, el1], {
name: 'X-intercept2',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
var xi2 = board.create('glider', [-2, 0, el1], {
name: 'X-intercept1',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
var yi = board.create('glider', [0, 1, el0], {
name: 'Y-Intercept',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
// Macro function plotter
function addCurve(board, func, atts) {
var f = board.create('functiongraph', [func], atts);
return f;
}
// Simplified plotting of function
function plot(func, atts) {
if (atts==null) {
return addCurve(board, func, {strokewidth:2});
} else {
return addCurve(board, func, atts);
}
}
function f(x) {
var q = (-1)*parseFloat(xi1.X());
var p = (-1)*parseFloat(xi2.X());
var r = parseFloat(yi.Y());
var a = r / (p * q);
var b = (r * (q + p)) / (p * q);
var c = r;
var func = a * x * x + b * x + c;
return func;
}
c = plot(f);