JXG.Options.text.useKatex = true;
JXG.Options.axis.ticks.majorHeight = 10;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.ticksDistance = 100;
var board = JXG.JSXGraph.initBoard('box1', {
boundingbox:[-8, 18, 18, -8],showNavigation:false, showcopyright: false, axis: true,
});
var h = 5;
var p = 2.6;
var k = 1
var f1 = board.create('functiongraph',[function(x){ return (x-h)*(x-h)/4/p+ k;}, -100, 100],{strokeColor:'red'});
var p1 = board.create('point', [h,k+p],{name:'F',fixed:true});
var p2 = board.create('point', [h,k],{name:'V',fixed:true});
var f2 = board.create('functiongraph',[k-p, -12, 25],{strokeColor:'red'});
txt1 = board.create('text', [h-5, k+p+5, function(){
return 'Focus'+'(h,k+p)';
}], {fontSize: 12, strokeColor:'red', anchorY: 'top'});
txt2 = board.create('text', [h-2,k-1, function(){
return 'Vertex'+'(h,k)';
}], {fontSize: 12, strokeColor:'red', anchorY: 'top'});
txt3 = board.create('text', [h-3,k-p-1, function(){
return 'Directrix:'+'y=k-p';
}], {fontSize: 12, strokeColor:'red', anchorY: 'top'});
var g1 = board.create('glider', [-4.0, 8, f1],{name:'P'});
var l1 = board.create('segment', [p1, g1]);
var g2 = board.create('glider', [-4.0, 8, f2],{visible:false});
var g3 = board.create('glider', [-1.0, 8, f2],{visible:false});
var l2 = board.create('segment', [g2, g3],{withLabel:true, name:'l',color:'transparent', label:{offset:[-10,-10]},});
var pp1 = board.create('perpendicularpoint', [g1, l2]);
var fe = board.create('perpendicularsegment', [l2, g1]);
board.create('text',[5,15, function(){ return "PF = "+ l1.L().toFixed(2);}]);
board.create('text',[5,12, function(){ return "PC = "+ fe.L().toFixed(2);}]);