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 k = board.create('slider', [[-3,-4],[3,-4],[2,3,10]], {name:'k', snapWidth:1});

var A = board.create('point', [-4, -3], {snapToGrid: true});
var B = board.create('point', [4, -3], {snapToGrid: true});
var C = board.create('point', [1, 4], {snapToGrid: false});


var tri = board.create('polygon', [A, B, C], {fillColor: 'yellow'});

var txt = board.create('text', [-4, 3, function() { return tri.Area().toFixed(12); }]);

var A1 = board.create('point',[function(){return B.X()+1/k.Value()*(C.X()-B.X());},function(){return B.Y()+1/k.Value()*(C.Y()-B.Y());}]);
var B1 = board.create('point',[function(){return C.X()+1/k.Value()*(A.X()-C.X());},function(){return C.Y()+1/k.Value()*(A.Y()-C.Y());}]);
var C1 = board.create('point',[function(){return A.X()+1/k.Value()*(B.X()-A.X());},function(){return A.Y()+1/k.Value()*(B.Y()-A.Y());}]);

/*
var tri1 = board.create('polygon', [A1, B1, C1], {fillColor: 'green'});
*/

var l1 = board.create('line',['A','D']);
var l2 = board.create('line',['B','E']);
var l3 = board.create('line',['C','F']);

var P = board.create('intersection', [l1, l2, 0]);
var Q = board.create('intersection', [l2, l3, 0]);
var R = board.create('intersection', [l1, l3, 0]);

var tri2 = board.create('polygon', [P, Q, R], {fillColor: 'red'});

var txti = board.create('text', [-4, 2, function() { return tri2.Area().toFixed(12); }]);

var txtrat = board.create('text', [3, 2, function() { 
	var r = k.Value() - 1,
      de, no, gcd;
	de = (r - 1);  
  de = de * de;
  no = r*r + r + 1;
  gcd = JXG.Math.gcd(de, no);
  de /= gcd;
  no /= gcd;
  return de.toFixed(0) + ' / ' + no.toFixed(0);
  
}]);