boite edgeworth - etape 3

by spgoo

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>[SPGoOO -- Etape1  -- edgeworth box]</title>
    <script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />   
   
<script>
window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    packages: ['base', 'ams']
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  }
};
</script>  
    
    
    <script type="text/javascript" id="MathJax-script"   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

<body class="serif">
    <center>
        <div id="box1" class="jxgbox" style="width:800px; height:600px;"></div>
        <div id="box2" class="jxgbox" style="width:800px; height:200px;display:none"></div>
    </center>
    
</body>
</html>

JavaScript

const rougevenitien='#AE181E',peche='#ffdfbf',cadet='#5F9EA0',olivedrab='#6B8E23',vert="#069E1C",monjaune='#f9f9fb';
const cadetBlue="#5F93A0",venetianRed="#c80815",grey="#d9d9d6",mauve="#E2ABBF",jauneImperial="#FAE22F",oldPink="#c77986";
const vertPin="#01796F",wheat="#F5DEB3",lavenderBlush="#FFF0F5",monBleu="#09ABF1",vertEmeraude="#019875",brightTeal="#01F9C6";
const von=true,vno=false;
JXG.Options.text.useMathJax = true;	

var board = JXG.JSXGraph.initBoard("box1", {pan: {enabled:false},boundingbox: [-1,4, 10,-1], axis:true,
withLines:true,defaultAxes: {x:{ ticks: {visible: true} },y:{ ticks: {visible: true}}},showNavigation:false,showCopyright:false});
board.jc = new JXG.JessieCode();
board.jc.use(board);
board.renderer.container.style.backgroundColor='#E5E4E2';
board.dehighlightAll();
board.renderer.container.style.backgroundColor = '#E5E4E2';

var board2 = JXG.JSXGraph.initBoard("box2", {boundingbox: [-1, 1.33, 7, -0.5],visible:false, showNavigation:false,showCopyright:false});
board2.renderer.container.style.backgroundColor='#E5E4E2';
board2.dehighlightAll();
board2.renderer.container.style.backgroundColor = '#E5E4E2';

const  t0 = board.create('text',[-.15,-.15,"$0$"],{visible:von,name:"",highlight:vno,anchorX:"middle"});
const  t00 = board.create('text',[9.15,3.6,"$0$"],{visible:von,name:"",highlight:vno,anchorX:"middle"});
// ----------------------
// construction glider bas
// ----------------------
const  q0 = board.create('point',[0,0],{visible:von,fillColor:cadetBlue,strokeColor:cadetBlue,name:"",highlight:vno,fixed:true});
const  q1 = board.create('point',[9,0],{visible:von,fillColor:mauve,strokeColor:mauve,name:"",highlight:vno,fixed:true});
const  s0 = board.create('segment',[q0,q1],{visible:vno,fillColor:cadetBlue,strokeColor:cadetBlue,name:"",highlight:false});
const  g0 = board.create('glider',[3,0,s0],{visible:von,fillColor:cadetBlue,strokeColor:"white",highlight:vno,
											name:"$\\overline{x}_A$",label:{position:'bottom',...