Find the shaded area in the square

						var board = JXG.JSXGraph.initBoard('box1', {
        boundingbox: [-10, 10, 10, -10], showcopyright: false,shownavigation: false,axis: false
    });

 var a = board.create('slider',[[2,-7],[7,-7],[-8,-3.24,4]]);
   
  var  b = board.create('slider',[[7,-4],[7,4],[-4,0.1,8]]);
	  p0 = board.create('point',[function(){ return a.Value();}, function(){ return b.Value();}],{name:'O', size: 1,face:"", color:'blue', label: {offset:[15,-5]}} 
       );

var p1 = board.create('point', [-8, 8.0],{name:'A', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});

var p2 = board.create('point', [-8, -4.0],{name:'B', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});

var p3 = board.create('point', [4, -4.0],{name:'C', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});

var p4 = board.create('point', [4, 8.0],{name:'C', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});


var l1 = board.create('segment', [p1, p2]);
var l2 = board.create('segment', [p2, p3]);
var l3 = board.create('segment', [p3, p4]);
var l4 = board.create('segment', [p4, p1]);

var mp1 = board.create('midpoint', [p1, p2],{ size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});
var mp2 = board.create('midpoint', [p2, p3],{ size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});
var mp3 = board.create('midpoint', [p3, p4],{ size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});
var mp4 = board.create('midpoint', [p4, p1],{ size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}});


var l5 = board.create('segment', [p0, mp1]);
var l6 = board.create('segment', [p0, mp2]);
var l7 = board.create('segment', [p0, mp3]);
var l8 = board.create('segment', [p0, mp4]);

 var pol1 = board.create('polygon', [p0, mp2, p3, mp3], {
               name:'?', withLabel: true,
              
            });
 var pol2 = board.create('polygon', [p0, mp3, p4, mp4], {
               name: function (){return this.Area().toFixed(0)+"cm²"}, withLabel: true,
              fillColor: 'transparent'
            });
 var pol3 = board.create('polygon', [p0, mp4, p1, mp1], {
               name: function (){return this.Area().toFixed(0)+"cm²"}, withLabel: true,
              fillColor: 'transparent',label: {offset:[-15,0]}
            });

 var pol4 = board.create('polygon', [p0, mp1, p2, mp2], {
               name: function (){return this.Area().toFixed(0)+"cm²"}, withLabel: true,
              fillColor: 'transparent',label: {offset:[-15,0]}
            });
var l9 = board.create('segment', [mp1, mp3],{dash:2});
var l10 = board.create('segment', [mp2, mp4],{dash:2});
var i = board.create('intersection', [l9, l10],{name:"Q",face:''});
var l11 = board.create('segment', [p0, i],{dash:2});