Paper folding trangle geometric shape with slider

						var board = JXG.JSXGraph.initBoard('box1', {
axis: true, boundingbox: [-15, 15, 15, -15], showcopyright: false,keepaspectratio: true, axis: false, zoom: false,showNavigation: false
  });
var  a = board.create('slider',[[-4,-12],[4,-12],[-5,9.28,12]], {name:'a'});



var p1 = board.create('point', [-12, function(){return a.Value();}],{name:'A', size: 1,face:"", color:'blue', label: {offset:[-25,10], color:'blue'}} );
var p2 = board.create('point', [-12, -4],{name:'B', size: 1,face:"", color:'blue', label: {offset:[-25,10], color:'blue'}} );

var p3 = board.create('point', [3, -4],{name:'C', size: 1,face:"", color:'blue', label: {offset:[5,10], color:'blue'}} );
var l1 = board.create('segment', [p1, p2]);
var l2 = board.create('segment', [p2, p3]);
var l3 = board.create('segment', [p3, p1]);

var bi1 = board.create('bisector', [p2, p1, p3],{visible:false});

var i1 = board.create('intersection', [l2, bi1]);

var pp1 = board.create('perpendicularpoint', [i1, l3]);

var l4 = board.create('segment', [pp1, i1]);

var l5 = board.create('segment', [p1, i1]);
var l6 = board.create('segment', [p1, pp1]);
//p1.Dist(p2)

board.create('text',[-12,14, function(){ return "AE = "+ l6.L().toFixed(1);}]);


var Inpt = [[pp1,p3,l3],["F"],{d:function(){return l6.L();}}];
  
var p4 =  board.create('pointofline',Inpt,{line:{strokeColor:'red'}});
var l7 = board.create('segment', [p3, p4.F],{dash:2});

board.create('text',[-5,14, function(){ return "CF = "+ l7.L().toFixed(1);}]);

board.create('text',[1,14, function(){ return "AE/CF = "+ (l6.L()/l7.L()).toFixed(1);}]);



var l8 = board.create('segment', [i1, p4.F],{dash:2});

var po = board.create('polygon',[p1,pp1,i1]);