var board = JXG.JSXGraph.initBoard('box1', {
boundingbox: [-10, 10, 10, -10], showcopyright: false,axis: true, shownavigation: false,axis: false
});
a = board.create('slider',[[2,-7],[7,-7],[-8,-7.79,8]],),
b = board.create('slider',[[2,-9],[7,-9],[0,8.07,10]], {name:'b'}),
p1 = board.create('point',[function(){ return a.Value();}, function(){ return b.Value();}],{name:'A', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}}
);
var p2 = board.create('point', [-4, -4.0],{name:'B', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});
var p3 = board.create('point', [6.0, -4.0],{name:'C', size: 1,face:"", color:'blue', label: {offset:[5,10], color:'blue'}});
var l3 = board.create('segment', [p2, p3]);
var l1 = board.create('segment', [p1, p2]);
var l2 = board.create('segment', [p1, p3]);
var mp1 = board.create('midpoint', [p1, p2]);
var mp2 = board.create('midpoint', [p1, p3]);
var l4 = board.create('segment', [p2, mp2]);
var l5 = board.create('segment', [p3, mp1]);
var i = board.create('intersection', [l4,l5], {name:'Z', size: 1,face:"", color:'blue', label: {offset:[-5,-15], color:'blue'}});
ang = board.create('angle', [mp2, i, mp1],{label: {offset:[-8,0], color:'blue'} ,radius: 1});