Boite edgeWorth -Etape2

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 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;"></div>
    </center>
    
</body>
</html>

JavaScript

// ---------------------
// création des boards 
// ---------------------
const 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";

const 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";

// création des points 
q0 = board.create('point',[0,0],{});
q1 = board.create('point',[9,0],{});
q2 = board.create('point',[0,3.5],{});
q3 = board.create('point',[9,3.5],{});

// tracé du slider du bas et des segments relatifs à sa position 
s0 = board.create('segment',[q0,q1],{});
g0 = board.create('glider',[3,0,s0],{});
s1 = board.create('segment',[q0,g0],{});
s2 = board.create('segment',[g0,q1],{});

// tracé du slider du haut et des segments relatifs à sa position 
s3 = board.create('segment',[q2,q3],{});
g1 = board.create('glider',[3,3.5,s3],{});
s4 = board.create('segment',[q2,g1],{});
s5 = board.create('segment',[g1,q3],{});

// segment vertical entre les deuxn sliders 
s6 = board.create('segment',[g0,g1],{});

// tracé du slider côté droit du graphe et des segments relatifs à sa position 
s7 = board.create('segment',[q0,q2],{});
g2 = board.create('glider',[0,1,s7 ],{});
s8 = board.create('segment',[q0,g2],{});
s9 = board.create('segment',[g2,q2],{});

// tracé du slider côté droit du graphe et des segments relatifs à sa position 
s10 = board.create('segment',[q1,q3],{});
g3 = board.create('glider',[9,1,s10 ],{});
s11 = board.create('segment',[q1,g3],{});
s12 =...