!set gl_type=dynamic
!set gl_author=Euler, Acadmie de Versailles
!set gl_title=Aire d'un trapze (exemple)
!set gl_renew=1

!set gl_polyg=BIEN,BIOS,BISE,BLEU,BLOC,BOIS,BOND,BORD,BOUC,BOUM,BOUT,BOXE,BREF,BRIN,BRIO,BROC,BRUN,BRUT,BUSE,CENT,CERF,CEUX,CIEL,CIME,CINQ,CIRE,CLEF,CLES,CLOS,CLOU,CLUB,CODE,COEF,COIN,COTE,COUP,CRIN,CUBE,CUVE,DEFI,DEMI,DEMO,DENT,DEUX,DING,DIRE,DOCK,DONC,DOUX,DROP,DUEL,DUNE,EMIR,EMOI,EPIS,ETUI,EURO,EXIL,EXPO,FEUX,FIER,FILE,FILM,FILS,FIXE,FLIP,FLOC,FLOP,FLOT,FLOU,FLUO,FLUX,FOIE,FOIN,FOIS,FOLK,FOND,FORT,FOUR,FRIC,FUEL,FUIR,GENS,GLUE,GOLF,GOND,GOUT,GREC,GRIS,GROS,GRUE,IDEM,ILOT,INDE,INFO,INOX,IODE,ITEM,JEUX,JOIE,JOLI,JONC,JOUE,JOUG,JOUR,JUDO,JUGE,JUIN,JUPE,JURY,KEPI,KILO,KILT,LENT,LEUR,LIEN,LIER,LIEU,LIFT,LIME,LION,LOBE,LOFT,LOUP,LOVE,LUGE,LUNE,LUXE,MELO,MENU,MIEL,MIRE,MISE,MODE,MOIS,MOLE,MONT,MUET,MULE,NERF,NEUF,NEWS,NOEL,NOIR,NOIX,NOTE,NOUS,NUIT,OCRE,OEUF,OGRE,ONDE,ONYX,ONZE,OPEN,OPUS,ORDI,ORGE,ORYX,OSER,OTER,OUPS,OVNI,PEUR,PIED,PIGE,PILE,PION,PLUS,PNEU,POIS,POLE,POLY,PONT,PORT,POUR,POUX,PRET,PRIX,PROF,PUCE,QUEL,QUID,QUIZ,QUOI,REIN,RIDE,RIEN,ROCK,ROND,ROSE,ROTI,ROUE,ROUX,SCIE,SECU,SELF,SERF,SEUL,SNIF,SNOB,SOIE,SOIF,SORT,STOP,SUER,SUMO,SURF,TOFU,TOGE,TOLE,TOME,TOUR,TOUS,TOUX,TRIO,TROC,TROP,TROU,TRUC,TUBE,UNIR,URNE,USER,VELO,VENT,VERS,VERT,VETO,VIDE,VOEU,VOIE,VOIR,VOIX,VOTE,VOUS,YETI,YEUX,YOLE,ZEBU,ZERO,ZINC,ZONE
!set gl_nom=!randitem $gl_polyg
!set gl_R=!char 1 of $gl_nom
!set gl_S=!char 2 of $gl_nom
!set gl_T=!char 3 of $gl_nom
!set gl_U=!char 4 of $gl_nom
!readproc data/glossary/mathematics/geometry/macro/randalphanum_gen
!set gl_alea=$gl_rd

!set gl_b1=brd_$gl_alea
!set gl_id1=id_$gl_alea
<style>
/*<![CDATA[*/
#appletA{order:2;}
#appletB{order:1;}
@media screen and (max-width: 40em) {
#appletA_$gl_alea{order:2;}
#appletB_$gl_alea{order:1;}
}
div.appletB{padding-left:1.5em;}
.rem_$gl_alea{font-size:0.8em;font-style:italic;text-align:center}
/*]]>*/
</style>
!set gl_dim1=!randint 2,10
!set gl_dim2=!randint 1,6
!set gl_dim3=!randint 3,12
!set gl_dim4=!randint 1+$gl_dim2,12
!set gl_choix=!randint 1,8
!set gl_ens_unitl=unit de longueur,mm,cm,dm,m,dam,hm,km
!set gl_ens_unita=unit d'aire,mm<sup>2</sup>,cm<sup>2</sup>,dm<sup>2</sup>,m<sup>2</sup>,dam<sup>2</sup>,hm<sup>2</sup>,km<sup>2</sup>
!set gl_unitl=$(gl_ens_unitl[$gl_choix])
!set gl_unita=$(gl_ens_unita[$gl_choix])
!set gl_script_$gl_alea=\
JXG.Options.point.snapToGrid = true;\
JXG.Options.point.snapSizeX = 1;\
JXG.Options.point.snapSizeY = 1;\
JXG.Options.elements.tabindex = -1;\
const $gl_b1 = JXG.JSXGraph.initBoard('$gl_id1', {\
  boundingbox:  [-3.9, 15, 14.9, -1],\
  axis:false,\
  grid:false,\
  showCopyright : false,\
  showNavigation:false,\
  showZoom : false,\
  keepaspectratio : true,\
  zoom: {enabled: false,wheel:false,needShift: false,factorX: 0,factorY: 0,min:0.001,max:0.001,pinchHorizontal: false,pinchVertical: false,pinchSensitivity: 0},\
  pan: {enabled: false,needTwoFingers: false,needShift:false}\
  });\
$gl_b1.renderer.displayCopyright('Figure ralise avec JSXGraph v'+JXG.version,11);\
dir4 = function () {\
  if (!this.visProp.fixed) {\
    $gl_b1.containerObj.style.cursor = 'move';\
  }\
};\
out = function () {\
  if (!this.visProp.fixed) {\
    $gl_b1.containerObj.style.cursor = 'default';\
  }\
};\
dir2 = function () {\
  if (!this.visProp.fixed) {\
    $gl_b1.containerObj.style.cursor = 'w-resize';\
  }\
};\
let s1_$gl_alea = $gl_dim1;\
let s2_$gl_alea = $gl_dim2;\
let s3_$gl_alea = $gl_dim3;\
let s4_$gl_alea = $gl_dim4;\
let xR_$gl_alea=0;\
let yR_$gl_alea=0;\
let seg_$gl_alea=[];\
for (let i=-3;i<15;i++){\
  for (let j=-1;j<13;j++){\
  seg_$gl_alea[i]=$gl_b1.create('segment',[[-3,j],[14,j]],{strokeColor:'#e3e3e3',strokeWidth:0.7,highlight: false,fixed:true});\
 $gl_b1.create('segment',[[i,-1],[i,12]],{strokeColor:'#e3e3e3',strokeWidth:0.7,highlight: false,fixed:true});\
 }\
}\
let z_$gl_alea=[];\
const coordo_$gl_alea=[[-3,1],[12,1],[-3,12],[12,12]];\
for (let m=0;m<4;m++){\
  z_$gl_alea[m]=$gl_b1.create('point',coordo_$gl_alea[m],{fixed:true,size:0,name:'',showInfobox:false});\
}\
let zone_$gl_alea= $gl_b1.create('polygon',[z_$gl_alea[0],z_$gl_alea[1],z_$gl_alea[3],z_$gl_alea[2]],{hasInnerPoints:true,borders:{visible:false},fillcolor:'transparent',highlight:false});\
let p1_$gl_alea = $gl_b1.create('point',[xR_$gl_alea, yR_$gl_alea],{name:'$gl_R',size:0,color:'green',fixed:true,face:'plus',showInfobox:false,label:{offset:[0,-10]}});\
let l1_$gl_alea=$gl_b1.create('segment',[[14,0],[1,0]],{strokeColor:'transparent',highlight:false,fixed:true});\
let p2_$gl_alea=$gl_b1.create('glider', [s1_$gl_alea, yR_$gl_alea,l1_$gl_alea],{fixed:false,name:'$gl_S',size:2,color:'green',showInfobox:false,tabindex:0,label:{offset:[0,-10]},layer:15});\
let p4_$gl_alea=$gl_b1.create('point', [s2_$gl_alea, s3_$gl_alea],{fixed:false,name:'$gl_U',size:2,color:'green',showInfobox:false,tabindex:0,label:{offset:[0,10]},layer:15});\
let l2_$gl_alea=$gl_b1.create('parallel', [l1_$gl_alea, p4_$gl_alea], {strokeColor:'transparent',highlight:false,straightFirst: false, straightLast: false,visible:false,fixed:true});\
let p3_$gl_alea=$gl_b1.create('glider', [s4_$gl_alea,s3_$gl_alea,l2_$gl_alea],{name:'$gl_T',fixed:false,size:2,color:'green',showInfobox:false,tabindex:0,label:{offset:[0,10]},layer: 15});\
let pol_$gl_alea=$gl_b1.create('polygon',[p1_$gl_alea,p2_$gl_alea,p3_$gl_alea,p4_$gl_alea],{hasInnerPoints:true,fillcolor:'green',borders:{strokeColor:'green',strokeWidth:2,layer:10,highlight:false},vertices:{face:'plus',strokeColor:'green',size:0,showInfobox:false,label:{fixed:false,offset:[-4,8]}},highlight: false});\
let p5_$gl_alea=$gl_b1.create('midpoint', [p1_$gl_alea, p2_$gl_alea],{name:'',size:0,color:'green',fixed:true,face:'',showInfobox:false,withLabel:false});\
let t2_$gl_alea = $gl_b1.create('text',[0, -0.5,function() { return p2_$gl_alea.X().toFixed(0)}], {anchor: p5_$gl_alea,anchorX:'middle',anchorY:'top',color:'green',fixed:true});\
let p7_$gl_alea = $gl_b1.create('midpoint', [p3_$gl_alea, p4_$gl_alea],{name:'',size:0,color:'green',fixed:true,face:'',showInfobox:false,withLabel:false});\
let t6_$gl_alea = $gl_b1.create('text',[0,0.8,function() { return (p3_$gl_alea.X()-p4_$gl_alea.X()).toFixed(0)}], {anchor: p7_$gl_alea,anchorX: 'middle',anchorY: 'top',color:'green',fixed:true});\
let p8_$gl_alea = $gl_b1.create('midpoint', [p1_$gl_alea, p4_$gl_alea],{name:'',size:0,color:'green',fixed:true,face:'',showInfobox:false,withLabel:false});\
let t5_$gl_alea = $gl_b1.create('text',[-0.5,0,function() { return p4_$gl_alea.Y()}], {visible:false,anchor: p8_$gl_alea,anchorX: 'middle',color:'blue',fixed:true});\
let H_$gl_alea =$gl_b1.create('perpendicularpoint', [p3_$gl_alea, l1_$gl_alea],{name:'H',visible:true,size:1,face:"plus",color:'blue',showInfobox:false,highlight: false,label:{offset:[0,-10]}});\
let hauteur_$gl_alea=$gl_b1.create('segment',[H_$gl_alea,p3_$gl_alea],{dash:"1",highlight: false});\
let ang1_$gl_alea =$gl_b1.create('angle',[hauteur_$gl_alea,l1_$gl_alea,1,1],{name:'',radius:0.4,color:'blue',highlight:false,withLabel:false});\
let ang5_$gl_alea =$gl_b1.create('angle',[l1_$gl_alea,hauteur_$gl_alea,-1,1], {visible:false,name:'',radius:0.4,color:'blue',highlight: false,withLabel:false});\
let base_$gl_alea= $gl_b1.create('segment',[p2_$gl_alea,H_$gl_alea],{dash:"1",highlight: false});\
let p6_$gl_alea=$gl_b1.create('midpoint',[p3_$gl_alea, H_$gl_alea],{name:'',size:0,fixed:true,face:'',visible:false,showInfobox:false,withLabel:false,highlight: false});\
let t3_$gl_alea =$gl_b1.create('text',[0.3,0,function() {return p3_$gl_alea.Y().toFixed(0)}], {anchor:p6_$gl_alea,anchorX:'middle',color:'blue',fixed:true});\
let ang2_$gl_alea =$gl_b1.create('angle',[p2_$gl_alea,p1_$gl_alea,p4_$gl_alea], {type: 'square',name:'',radius:0.4,color:'blue',highlight: false,visible:false,withLabel:false});\
let ang3_$gl_alea =$gl_b1.create('angle',[p1_$gl_alea,p4_$gl_alea,p3_$gl_alea], {type: 'square',name:'',radius:0.4,color:'blue',highlight: false,visible:false,withLabel:false});\
let ang4_$gl_alea =$gl_b1.create('angle',[p4_$gl_alea,p3_$gl_alea,p2_$gl_alea], {type: 'square',name:'',radius:0.4,color:'blue',highlight: false,visible:false,withLabel:false});\
let u1_$gl_alea=$gl_b1.create('point',[-3,14],{color:'green',withLabel:false,visible: false});\
let u2_$gl_alea=$gl_b1.create('point',[-2,14],{color:'green',withLabel:false,visible: false});\
let polu_$gl_alea = $gl_b1.create('regularpolygon', [u1_$gl_alea, u2_$gl_alea, 4],{fixed:true,fillcolor:'green',borders:{strokeColor:'#e3e3e3',highlight: false,strokeWidth:1,fixed:true},vertices:{face:'',showInfobox:false,withLabel:false,visible:false,fixed:true},highlight: false});\
let e1_$gl_alea=$gl_b1.create('segment',[[-3,13],[-2,13]],{fixed:true,strokeColor: 'green',strokeWidth: 2,highlight: false});\
let t1_$gl_alea = $gl_b1.create('text',[-1.5,14.5,"1 $gl_unita"],{fixed:true});\
let t4_$gl_alea = $gl_b1.create('text',[-1.5,13,"1 $gl_unitl"],{fixed:true});\
let quad_$gl_alea = $gl_b1.create('text',[6,14.5,"Le quadrillage ci-dessous est constitu de carrs."],{fixed:true});\
document.getElementById("unite_$gl_alea").addEventListener("change", function(){\
unitl_$gl_alea = document.getElementById("unite_$gl_alea").value;\
$gl_b1.removeObject(t1_$gl_alea);\
t1_$gl_alea = $gl_b1.create('text',[-1.5,14.5,"1 "+unita_$gl_alea.get(unitl_$gl_alea)],{fixed:true});\
$gl_b1.removeObject(t4_$gl_alea);\
t4_$gl_alea = $gl_b1.create('text',[-1.5,13,"1 "+unitl_$gl_alea],{fixed:true});\
});\
p2_$gl_alea.on('over',dir2);\
p2_$gl_alea.on('out',out);\
p3_$gl_alea.on('over',dir2);\
p3_$gl_alea.on('out',out);\
p4_$gl_alea.on('over',dir4);\
p4_$gl_alea.on('out',out);\
$gl_b1.fullUpdate();

<div class="grid-container fluid">
  <div>
    <label for="unite_$gl_alea">Choix de l'unit de longueur&nbsp;:</label>
    <select name="unites" id="unite_$gl_alea" onchange=" ChoixUnite_$gl_alea()">
    !for gl_k=1 to 8
      <option value="$(gl_ens_unitl[$gl_k])"
      !if $gl_k=$gl_choix
        selected
      !endif
      >$(gl_ens_unitl[$gl_k])</option>
    !next gl_k
    </select>
  </div>
  <div class="grid-x grid-padding-x">
    <div id="appletA_$gl_alea" class="cell2 small-12 medium-6 large-6">
      <div class="appletA">
        !readproc slib/geo2D/jsxgraph $gl_id1 $gl_b1,[250x250, center min=250px max=400px scroll],$(gl_script_$gl_alea)
        $slib_out
      </div>
      <div class="rem_$gl_alea">La figure est modifiable en dplaant les points <span class="nowrap">\(\mathrm{$gl_S}\),</span> \(\mathrm{$gl_T}\) et <span class="nowrap">\(\mathrm{$gl_U}\).</span>
      </div>
    </div>
    <div id="appletB_$gl_alea" class="cell2 small-12 medium-6 large-6">
      <div class="appletB">
        <div id="txt_$gl_alea"></div>
      </div>
    </div>
  </div>
</div>
<script>
let myText_$gl_alea;
const unita_$gl_alea = new Map();
  !for gl_kkk=1 to 8
    unita_$gl_alea.set("$(gl_ens_unitl[$gl_kkk])","$(gl_ens_unita[$gl_kkk])");
  !next gl_kkk

let unitl_$gl_alea="$gl_unitl";
let unitarea_$gl_alea="$gl_unita";
let unitl_accord_$gl_alea="$gl_unitlaccord";
let unita_accord_$gl_alea="$gl_unitaaccord";
const debMML_$gl_alea='<span class="wims_mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle  mathsize="110%">';
const finMML_$gl_alea='</mstyle></math></span>';

function ChoixUnite_$gl_alea() {
  unitl_$gl_alea = document.getElementById("unite_$gl_alea").value;
  unitarea_$gl_alea =unita_$gl_alea.get(unitl_$gl_alea);
  Accord_$gl_alea(unitl_$gl_alea,unitarea_$gl_alea);
  textDisplay_$gl_alea();
  document.getElementById("txt_$gl_alea").innerHTML = myText_$gl_alea;
}
function Accord_$gl_alea(l,a) {
  unitl_$gl_alea =l;
  unitarea_$gl_alea =a;
  if(unitl_$gl_alea == 'unit de longueur' && p2_$gl_alea.X()*p4_$gl_alea.Y()>1){
    unitl_accord_$gl_alea ='units de longueur';
    unita_accord_$gl_alea ="units d\'aire";
  } else {
    unitl_accord_$gl_alea =unitl_$gl_alea;
    unita_accord_$gl_alea =unitarea_$gl_alea;
  };
}
function isIn_$gl_alea(pt,poly) {
  let coor = new JXG.Coords(JXG.COORDS_BY_USER, [pt.X(), pt.Y()], $gl_b1);
  return poly.hasPoint(coor.scrCoords[1], coor.scrCoords[2])
}
function angle_$gl_alea() {
  if((p2_$gl_alea.X()-p3_$gl_alea.X()).toFixed(0)==0){
    ang4_$gl_alea.setAttribute({visible:true});
     H_$gl_alea.setAttribute({visible: false});
  } else {
    ang4_$gl_alea.setAttribute({visible:false});
     H_$gl_alea.setAttribute({visible: true});
  }
}
function textDisplay_$gl_alea() {
  let area_$gl_alea,ph1_$gl_alea,ph2_$gl_alea,ph4_$gl_alea,ph5_$gl_alea,ph6_$gl_alea,ph7_$gl_alea;
  let cote2_$gl_alea,hautrap_$gl_alea,rect_$gl_alea;
  let type;


  /*Pour parallelogramme*/
  if(H_$gl_alea.isOn(p1_$gl_alea)){
    cote2_$gl_alea='$gl_T$gl_R'
    }else{
    cote2_$gl_alea='$(gl_T)H'
  }
  /*Pour trapeze*/
  if(H_$gl_alea.isOn(p2_$gl_alea) || p4_$gl_alea.X()==0){
    rect_$gl_alea=' rectangle ';
    }else{
      rect_$gl_alea='';
    }

    switch(true){
      case p4_$gl_alea.X()==0:
        hautrap_$gl_alea='$gl_U$gl_R';
        break;
      case H_$gl_alea.isOn(p2_$gl_alea):
        hautrap_$gl_alea='$gl_T$gl_S';
        break;
      case H_$gl_alea.isOn(p1_$gl_alea):
        hautrap_$gl_alea='$gl_T$gl_R';
        break;
      default:
        hautrap_$gl_alea='$(gl_T)H';
        break;
    }

  type1={
    nature:'<strong>carr</strong> ',
    cote1:'$gl_R$gl_S',
    cote2:'$gl_R$gl_S',
    longcote1:p2_$gl_alea.X(),
    longcote2:p2_$gl_alea.X()
  };
  type2={
    nature:'<strong>rectangle</strong> ',
    cote1:'$gl_R$gl_S',
    cote2:'$gl_T$gl_S',
    longcote1:p2_$gl_alea.X(),
    longcote2:p3_$gl_alea.Y()
  };
  type3={
    nature:'<strong>paralllogramme</strong> ',
    nature2:'de ct '+debMML_$gl_alea+'<mrow><mo fence="true" form="prefix">[</mo><mrow><mrow><mi mathvariant="normal">$gl_R</mi></mrow><mrow><mi mathvariant="normal">$gl_S</mi></mrow></mrow><mo fence="true" form="postfix">]</mo></mrow>'+finMML_$gl_alea+' et de hauteur '+ debMML_$gl_alea+'<mrow><mo stretchy="true">[</mo><mi mathvariant="normal">'+cote2_$gl_alea+'</mi><mo stretchy="true">]</mo></mrow>'+finMML_$gl_alea+' relative  ce ct ',
    cote1:'$gl_R$gl_S',
    cote2:cote2_$gl_alea,
    longcote1:p2_$gl_alea.X(),
    longcote2:p3_$gl_alea.Y()
  };
  type4={
    nature:'<strong>trapze</strong> ',
    nature2:'<strong>'+rect_$gl_alea+'</strong> de bases '+debMML_$gl_alea+'<mrow><mo stretchy="true">[</mo><mi mathvariant="normal">'+'$gl_R$gl_S'+'</mi><mo stretchy="true">]</mo></mrow>'+finMML_$gl_alea+' et '+debMML_$gl_alea+'<mrow><mo stretchy="true">[</mo><mi mathvariant="normal">'+'$gl_U$gl_T'+'</mi><mo stretchy="true">]</mo></mrow>'+finMML_$gl_alea+' et de hauteur '+debMML_$gl_alea+'<mrow><mo stretchy="true">[</mo><mi mathvariant="normal">'+hautrap_$gl_alea+'</mi><mo stretchy="true">]</mo></mrow>'+finMML_$gl_alea+'',
    cote1:'$gl_R$gl_S',
    cote2:'$gl_U$gl_T',
    hauteur:hautrap_$gl_alea,
    longcote1:p2_$gl_alea.X(),
    longcote2:p3_$gl_alea.X()-p4_$gl_alea.X(),
    longhauteur:p3_$gl_alea.Y()
  };
  switch(true){
    case p4_$gl_alea.X()==0 && H_$gl_alea.isOn(p2_$gl_alea) && p2_$gl_alea.X()==p4_$gl_alea.Y():
      type=type1;
      break;
    case p4_$gl_alea.X()==0 && H_$gl_alea.isOn(p2_$gl_alea):
      type=type2;
      break;
    case (p2_$gl_alea.X()-p3_$gl_alea.X()+p4_$gl_alea.X()).toFixed(0)==0:
      type=type3;
      break;
    default:
      type=type4;
      break;
  }
  if(type!=type4){
    area_$gl_alea=(type.longcote1*type.longcote2).toString().replaceAll('.', ',');
    }else{
    area_$gl_alea=(((((type4.longcote1+type4.longcote2)*type4.longhauteur)/2)).toFixed(1)).toString().replaceAll('.', ',').replaceAll(',0', '');
  }
  ph1_$gl_alea='Soit '+debMML_$gl_alea+'<mi mathvariant="normal">$gl_R$gl_S$gl_T$gl_U</mi>'+finMML_$gl_alea+' un '+type.nature;
  if(type==type3 || type==type4 ){
    ph1_$gl_alea=ph1_$gl_alea+type.nature2;
  }
  ph1_$gl_alea=ph1_$gl_alea+' tel que, en '+unitl_$gl_alea+', ';
  ph2_$gl_alea='<span class="nowrap">'+ ((x,y) => debMML_$gl_alea+'<mi mathvariant="normal">'+x+'</mi><mo>=</mo><mn>'+y+'</mn>'+finMML_$gl_alea)(type.cote1,type.longcote1);
  if(type!=type1){
    ph2_$gl_alea=ph2_$gl_alea+'</span> et <span class="nowrap">'+ ((x,y) => debMML_$gl_alea+'<mi mathvariant="normal">'+x+'</mi><mo>=</mo><mn>'+y+'</mn>'+finMML_$gl_alea)(type.cote2,(type.longcote2).toFixed(0));
  }
  if(type==type4){
    ph2_$gl_alea=ph2_$gl_alea+'</span> et <span class="nowrap">'+ ((x,y) => debMML_$gl_alea+'<mi mathvariant="normal">'+x+'</mi><mo>=</mo><mn>'+y+'</mn>'+finMML_$gl_alea)(type.hauteur,type.longhauteur);
  }
  ph2_$gl_alea=ph2_$gl_alea+'.</span>';
  const ph3_$gl_alea='Soit '+debMML_$gl_alea+'<mi>A</mi>'+finMML_$gl_alea+' son aire en ';
  if(type!=type4){
    ph4_$gl_alea=((x,y) => debMML_$gl_alea+'<mi>A</mi><mo>=</mo><mi mathvariant="normal">'+x+'</mi><mo>&#xD7;</mo><mi mathvariant="normal">'+y+'</mi>'+finMML_$gl_alea)(type.cote1,type.cote2);
  } else{
    ph4_$gl_alea=((x,y,z) => debMML_$gl_alea+'<mi>A</mi><mo>=</mo><mstyle displaystyle="true"><mfrac><mrow><mi mathvariant="normal">'+x+'</mi><mo>+</mo><mi mathvariant="normal">'+y+'</mi></mrow><mn>2</mn></mfrac></mstyle><mo>&#xD7;</mo><mi mathvariant="normal">'+z+'</mi>'+finMML_$gl_alea)(type.cote1,type.cote2,type.hauteur);
  }
  if(type!=type4){
    ph5_$gl_alea= ((x,y) => debMML_$gl_alea+'<mi>A</mi><mo>=</mo><mn>'+x+'</mn><mo>&#xD7;</mo><mn>'+y+'</mn>'+finMML_$gl_alea)(type.longcote1,type.longcote2);
  } else{
    ph5_$gl_alea=((x,y,z) => debMML_$gl_alea+'<mi>A</mi><mo>=</mo><mstyle displaystyle="true"><mfrac><mrow><mn>'+x+'</mn><mo>+</mo><mn>'+y+'</mn></mrow><mn>2</mn></mfrac></mstyle><mo>&#xD7;</mo><mn>'+z+'</mn>'+finMML_$gl_alea)(type.longcote1,(type.longcote2).toFixed(0),type.longhauteur);
  }
  ph6_$gl_alea=(x => debMML_$gl_alea+'<mi>A</mi><mo>=</mo><mn>'+x+'</mn>'+finMML_$gl_alea)(area_$gl_alea);
  ph7_$gl_alea='L\'aire du '+type.nature+debMML_$gl_alea+'<mi mathvariant="normal">$gl_R$gl_S$gl_T$gl_U</mi>'+finMML_$gl_alea+' est gale  ';
  ph8_$gl_alea=(x => debMML_$gl_alea+'<mn>'+x+'</mn>'+finMML_$gl_alea)(area_$gl_alea);
  myText_$gl_alea='<p>'+ph1_$gl_alea+ph2_$gl_alea+'</p><p>'+ph3_$gl_alea+unitarea_$gl_alea+'.</p><p>'+ph4_$gl_alea+'</p><p>'+ph5_$gl_alea+'</p><p>'+ph6_$gl_alea+'</p><p>'+ph7_$gl_alea+ph8_$gl_alea+' '+unita_accord_$gl_alea+'.</p>';
}
document.addEventListener('DOMContentLoaded', function() {
  Accord_$gl_alea(unitl_$gl_alea,unitarea_$gl_alea);
  angle_$gl_alea();
  textDisplay_$gl_alea();
  document.getElementById("txt_$gl_alea").innerHTML = myText_$gl_alea;
})
$gl_b1.on('move', function(){
  $gl_b1.fullUpdate();
  angle_$gl_alea();
  Accord_$gl_alea(unitl_$gl_alea,unitarea_$gl_alea);
  textDisplay_$gl_alea();
  document.getElementById("txt_$gl_alea").innerHTML = myText_$gl_alea;
  if(H_$gl_alea.isOn(p1_$gl_alea) || H_$gl_alea.isOn(p2_$gl_alea)){
    H_$gl_alea.setAttribute({visible: false});
    if(H_$gl_alea.isOn(p2_$gl_alea)){
      ang4_$gl_alea.setAttribute({visible: true});
    } else {
      ang4_$gl_alea.setAttribute({visible: false});
    }
  } else {
    if(p4_$gl_alea.X()==0){
      H_$gl_alea.setAttribute({visible: false});
    } else {
      H_$gl_alea.setAttribute({visible: true});
      ang4_$gl_alea.setAttribute({visible:false});
    }
  }

  if(H_$gl_alea.X()>=14){
    p3_$gl_alea.moveTo([14,p4_$gl_alea.Y()]);
  }
  if(H_$gl_alea.X()<=0 ){
    ang1_$gl_alea.setAttribute({visible:false});
    ang5_$gl_alea.setAttribute({visible:true});
  } else {
    ang1_$gl_alea.setAttribute({visible:true});
    ang5_$gl_alea.setAttribute({visible:false});
 }
 /*$gl_b1.fullUpdate();*/
})
p2_$gl_alea.coords.on('update', function(){
  Accord_$gl_alea(unitl_$gl_alea,unitarea_$gl_alea);
  textDisplay_$gl_alea();
  document.getElementById("txt_$gl_alea").innerHTML = myText_$gl_alea;
})
p3_$gl_alea.coords.on('update', function(){
  if(p3_$gl_alea.isOn(p4_$gl_alea)){
    p3_$gl_alea.moveTo([p4_$gl_alea.X()+1,p4_$gl_alea.Y()]);
  }
  Accord_$gl_alea(unitl_$gl_alea,unitarea_$gl_alea);
  textDisplay_$gl_alea();
  document.getElementById("txt_$gl_alea").innerHTML = myText_$gl_alea;
})
p4_$gl_alea.coords.on('update', function(){
  if(isIn_$gl_alea(p4_$gl_alea,zone_$gl_alea)==false){
   switch (true) {
    case p4_$gl_alea.Y()>12 && p4_$gl_alea.X()>12:
      p4_$gl_alea.moveTo([12,12]);
      break;
    case p4_$gl_alea.Y()>12 && p4_$gl_alea.X()>=-3 && p4_$gl_alea.X()<=12:
      p4_$gl_alea.moveTo([p4_$gl_alea.X(),12]);
      break;
    case p4_$gl_alea.Y()>12 && p4_$gl_alea.X()<-3:
      p4_$gl_alea.moveTo([-3,12]);
      break;
    case p4_$gl_alea.Y()<1 && p4_$gl_alea.X()>12:
      p4_$gl_alea.moveTo([12,1]);
      break;
    case p4_$gl_alea.Y()<1 && p4_$gl_alea.X()>=-3 && p4_$gl_alea.X()<=12:
      p4_$gl_alea.moveTo([p4_$gl_alea.X(),1]);
      break;
    case p4_$gl_alea.Y()<1 && p4_$gl_alea.X()<-3:
      p4_$gl_alea.moveTo([-3,1]);
      break;
    case p4_$gl_alea.X()>12 :
      p4_$gl_alea.moveTo([12,p4_$gl_alea.Y()]);
      break;
    case p4_$gl_alea.X()<-3:
      p4_$gl_alea.moveTo([-3,p4_$gl_alea.Y()]);
      break;
   }
  }
  if(p4_$gl_alea.X()==0){
    /*H_$gl_alea.setAttribute({visible: false});*/
    ang2_$gl_alea.setAttribute({visible: true});
    ang3_$gl_alea.setAttribute({visible: true});
  } else {
    /*H_$gl_alea.setAttribute({visible: true});*/
    ang2_$gl_alea.setAttribute({visible: false});
    ang3_$gl_alea.setAttribute({visible: false});
  }
  Accord_$gl_alea(unitl_$gl_alea,unitarea_$gl_alea);
  textDisplay_$gl_alea();
  document.getElementById("txt_$gl_alea").innerHTML = myText_$gl_alea;
  })
</script>
