How do I make the parabola calculated from given points change as the points are moved?

Question

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;
  }]);
});

Answer 1

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