JSXGraph test

Template for JSXGraph

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

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;
  }]);
});
//var plot = function() {};
//graph.updateCurve();
// In this example we hide the input as we are not yet ready to talk about two-way binding.
//document.getElementById(ans1Ref).style.display = 'none';
//var btn_start = board.create('button', [-4.5, 3.2, 'plot', plot]);