Code de graphiques en JSXGraph

# Médianes | `<div id='boxMed' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var board = JXG.JSXGraph.initBoard('boxMed', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); var A = board.create('point', [1, 0] ); var B = board.create('point', [-1, 0], {label:{offset:[-15,-5]}} ); var C = board.create('point', [0.2, 1.5], ); var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); var mAB = board.create('midpoint', [A, B], {name:'C\'',size:0.8,label:{offset:[5,-15],fontSize:10},strokeColor:'blue'}); var mAC = board.create('midpoint', [A, C], {name:'B\'',size:0.8,label:{offset:[5,13],fontSize:10},strokeColor:'blue'}); var mBC = board.create('midpoint', [C, B], {name:'A\'',size:0.8,label:{offset:[-15,-5],fontSize:10},strokeColor:'blue'}); var l1 = board.create('line',[mAB,C]); var l2 = board.create('line',[mAC,B]); var l3 = board.create('line',[mBC,A]); var G = board.create('intersection',[l1,l2],{name:'G',label:{offset:[5,10]}}) </script>`

# Médiatrices | `<div id='boxMediatrice' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var board = JXG.JSXGraph.initBoard('boxMediatrice', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); var A = board.create('point', [1, 0] ); var B = board.create('point', [-1, 0], {label:{offset:[-15,-5]}} ); var C = board.create('point', [0.2, 1.5], ); var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); var mAB = board.create('midpoint', [A, B], {name:'C\'',size:0.8,label:{offset:[5,-15],fontSize:10},strokeColor:'blue'}); var mAC = board.create('midpoint', [A, C], {name:'B\'',size:0.8,label:{offset:[5,13],fontSize:10},strokeColor:'blue'}); var mBC = board.create('midpoint', [C, B], {name:'A\'',size:0.8,label:{offset:[-15,-5],fontSize:10},strokeColor:'blue'}); var medAB = board.create('perpendicular', [pol.borders[0], mAB]); var medAC = board.create('perpendicular', [pol.borders[2], mAC]); var medBC = board.create('perpendicular', [pol.borders[1], mBC]); var O = board.create('intersection',[medAB,medBC],{name:'O',label:{offset:[10,10]}}); </script>`

# Hauteurs | `<div id='boxHauteur' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var board = JXG.JSXGraph.initBoard('boxHauteur', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); var A = board.create('point', [1, 0] ); var B = board.create('point', [-1, 0], {label:{offset:[-15,5]}} ); var C = board.create('point', [0.2, 1.5], ); var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); var hC = board.create('perpendicular', [pol.borders[0], C]); var hA = board.create('perpendicular', [pol.borders[1], A]); var hB = board.create('perpendicular', [pol.borders[2], B]); var c1 = board.create('intersection',[hC,pol.borders[0]],{name:'C_1',label:{offset:[-17,-10]}}); var a1 = board.create('intersection',[hA,pol.borders[1]],{name:'A_1',label:{offset:[-22,-2]}}); var b1 = board.create('intersection',[hB,pol.borders[2]],{name:'B_1',label:{offset:[2,15]}}); var H = board.create('intersection',[hC,hA],{name:'H',label:{offset:[5,15]}}); </script>`

# Distance d'un point à une droite | `<div id='boxDistPtD' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> <script> var board12 = JXG.JSXGraph.initBoard('boxDistPtD', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); var A12 = board12.create('point', [0, 1.3] ,{visible:true,fixed:false}); var B = board12.create('point', [-1, 0], {label:{offset:[-15,5]},visible:false} ); var C = board12.create('point', [1, 0], {visible:false}); var l1 = board12.create('line',[B,C],{straightFirst:true}); var pl1 = board12.create('perpendicular',[l1,A12],{visible:false}); var H = board12.create('intersection',[l1,pl1],{name:'H'}); var M12 = board12.create('point', [1.1, 0], {slideObject: l1,name:'M'}); var s1 = board12.create('segment',[A12,M12],{strokeColor:'black',strokeWidth:1,dash:2}); var s2 = board12.create('segment',[A12,H],{strokeColor:'gray',strokeWidth:1,dash:1}); var t1 = board12.create('text',[-1,1.6,function(){var l=Math.sqrt(Math.pow(M12.X()-A12.X(),2)+Math.pow(M12.Y()-A12.Y(),2));return 'AM = '+l;}]); </script>`

# Bissectrice | `<div id='boxBis' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var board = JXG.JSXGraph.initBoard('boxBis', {boundingbox: [-1.5, 2.3, 1.5, -0.2], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); var A = board.create('point', [1, 0] ,{visible:false,fixed:true}); var B = board.create('point', [-1, 0], {label:{offset:[-15,5]},visible:false,fixed:true} ); var C = board.create('point', [-0.5, 1.3], {visible:false,fixed:true}); var l1 = board.create('line',[B,A],{straightFirst:false}); var l2 = board.create('line',[B,C],{straightFirst:false}); var a1 = board.create('angle',[A,B,C],{name:'',label:{fontSize:0}}); var bB = board.create('bisector', [A, B, C],{straightFirst:false}); var M = board.create('point', [1.1, 0], {slideObject: bB,name:'M',label:{offset:[-5,10]}}); var p1 = board.create('perpendicular',[l1,M],{straightFirst:false,visible:false}); var M1 = board.create('intersection',[l1,p1],{name:'M_1',label:{offset:[5,-10]}}); var s1 = board.create('segment',[M,M1],{dash:2,strokeColor:'gray',strokeWidth:1}); var p2 = board.create('perpendicular',[l2,M],{straightFirst:false,visible:false}); var M2 = board.create('intersection',[l2,p2],{name:'M_2',label:{offset:[-22,5]}}); var s2 = board.create('segment',[M,M2],{dash:2,strokeColor:'gray',strokeWidth:1}); var t1 = board.create('text',[-1.45,2.1,function(){var l=Math.sqrt(Math.pow(M.X()-M1.X(),2)+Math.pow(M.Y()-M1.Y(),2));return 'MM_1 = '+l;}]); var t2 = board.create('text',[-1.45,1.9,function(){var l=Math.sqrt(Math.pow(M.X()-M2.X(),2)+Math.pow(M.Y()-M2.Y(),2));return 'MM_2 = '+l;}]); </script>`

# Bissectrices | `<div id='boxTriangleBis' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var board = JXG.JSXGraph.initBoard('boxTriangleBis', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); var A = board.create('point', [1, 0] ); var B = board.create('point', [-1, -0.65], {label:{offset:[-15,5]}} ); var C = board.create('point', [0.2, 1.47], ); var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); var bB = board.create('bisector', [A, B, C],{straightFirst:true,strokeWidth:1,dash:2}); var bC = board.create('bisector', [B, C, A],{straightFirst:true,strokeWidth:1,dash:2}); var bA = board.create('bisector', [C, A, B],{straightFirst:true,strokeWidth:1,dash:2}); var Ib = board.create('intersection',[bB,bA],{name:'I'}); var pAB = board.create('perpendicular',[pol.borders[0],Ib],{visible:false}); var I1b = board.create('intersection',[pol.borders[0],pAB],{name:'I_1',visible:true,label:{offset:[-2,-15]}}); var s1 = board.create('segment',[I1b,Ib],{strokeWidth:0.5,strokeColor:'red'}); var pAC = board.create('perpendicular',[pol.borders[2],Ib],{visible:false}); var I2b = board.create('intersection',[pol.borders[2],pAC],{name:'I_2',visible:true,label:{offset:[15,-5]}}); var s2 = board.create('segment',[I2b,Ib],{strokeWidth:0.5,strokeColor:'red'}); var pBC = board.create('perpendicular',[pol.borders[1],Ib],{visible:false}); var I3b = board.create('intersection',[pol.borders[1],pBC],{name:'I_3',visible:true,label:{offset:[-15,-5]}}); var s3 = board.create('segment',[I3b,Ib],{strokeWidth:0.5,strokeColor:'red'}); var cercleI = board.create('circle',[Ib,I1b]); </script>`

# Droite d'Euler | `<div id='box' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> (function () { var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false}); var cerise = {strokeColor: '#901B77',fillColor: '#CA147A'}, grass = { strokeColor: '#009256', fillColor: '#65B72E', visible: true, withLabel: true }, perpendicular = { strokeColor: 'black', dash: 1, strokeWidth: 1, point: JXG.deepCopy(cerise, { visible: true, withLabel: true }) }, median = { strokeWidth: 1, strokeColor: '#333333', dash:2 }, A = board.create('point', [1, 0], cerise), B = board.create('point', [-1, 0], cerise), C = board.create('point', [0.2, 1.5], cerise), pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); var pABC, pBCA, pCAB, i1; perpendicular.point.name = 'H_c'; pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular); perpendicular.point.name = 'H_a'; pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular); perpendicular.point.name = 'H_b'; pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular); grass.name = 'H'; i1 = board.create('intersection', [pABC, pCAB, 0], grass); var mAB, mBC, mCA; cerise.name = 'M_c'; mAB = board.create('midpoint', [A, B], cerise); cerise.name = 'M_a'; mBC = board.create('midpoint', [B, C], cerise); cerise.name = 'M_b'; mCA = board.create('midpoint', [C, A], cerise); var ma, mb, mc, i2; ma = board.create('segment', [mBC, A], median); mb = board.create('segment', [mCA, B], median); mc = board.create('segment', [mAB, C], median); grass.name = 'S'; i2 = board.create('intersection', [ma, mc, 0], grass); var c; grass.name = 'U'; c = board.create('circumcircle',[A, B, C], { strokeColor: '#000000', dash: 3, strokeWidth: 1, center: grass }); var euler; euler = board.create('line', [i1, i2], { strokeWidth: 2, strokeColor:'#901B77' }); board.update(); })(); </script>`

# Quadrilatère | `<div id='jxgbox1' class='jxgbox' style='width:500px; height:500px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var brdqu = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-10, 10, 10, -10], showCopyright:false}); var aq = brdqu.create('point', [-2, 1]); var bq = brdqu.create('point', [-4, -5]); var cq = brdqu.create('point', [3, -6]); var dq = brdqu.create('point', [2, 3]); var pq = brdqu.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: true}); </script>`

# Quadrilatère (repère) | `<div id='jxgboxq' class='jxgbox' style='width:600px; height:600px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var brdq = JXG.JSXGraph.initBoard('jxgboxq', {boundingbox:[-2,2,2,-2], axis:true, showCopyright:false}); var pq = []; for (var i=0; i<4; i++) { pq.push(brdq.create('point', [Math.random()*3.6-1.8, Math.random()*3.6-1.8])); } var pol = brdq.create('polygon',pq,{ withLines:true, withLabel: false, label: {offset:[-200,100]} // Pixel values }); </script>`

# Canon | `<div id='jxgbox2' class='jxgbox' style='width:800px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> (function () { var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}), bottom = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}), muzzle = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}), shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']), reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']), rot, rp, cp, cc, cannonball, cbanim, solution, velocity, animTime = function () { return 3000; }, fAngle = function () { return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X()); }, fSolution = function (x) { var b = fAngle(), g = 9.81/2; return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y(); }, fAnim = function (t) { var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/, s = NaN; if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) { s = solution.points[i].usrCoords.slice(1); } return s; }; board.options.animationDelay = 50; velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'}); cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false}); cc = board.create('circle', [cp, 1.25], {visible: false}); rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'}); rot = board.create('transform', [fAngle, cp], {type: 'rotate'}); rot.bindTo(muzzle); cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true}); cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false}); rot.bindTo(cannonball); solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false}); JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () { cannonball.setProperty({ visible: false }); cbanim.setProperty({ visible: true }); cbanim.moveTo([cannonball.X(), cannonball.Y()]); cbanim.moveAlong(fAnim, animTime(), { callback: function () { // this is executed when the animation is finished } }); }, this); JXG.addEvent(document.getElementById('reset'), 'mouseup', function () { board.stopAllAnimation(); cbanim.setProperty({visible: false}); cannonball.setProperty({visible: true}); }, this); })(); </script>`

# Cycloïde | `<form style="width:100%;text-align:center;padding:10px;"> <input type="button" value="start" onclick="rol.start()"> <input type="button" value="stop" onclick="rol.stop()"> <input type="button" value="one step" onclick="rol.rolling()"> </form> <div id='jxgboxcy' class='jxgbox' style='width:600px; height:300px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var brdcy = JXG.JSXGraph.initBoard('jxgboxcy',{boundingbox:[-1,5,20,-1], keepaspectratio:true, showCopyright:false}); brdcy.suspendUpdate(); // Line var liney = brdcy.create('curve', [function(t) { return t;}, function(t){ return 1;}], {strokeWidth:6}); // Circle var P = brdcy.create('point',[0,1],{name:'P', trace:true}); var C = brdcy.create('point',[0,2],{name:'C'}); var circley = brdcy.create('curve',[ function(t){var d = P.Dist(C), beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P); t += beta; return C.X()+d*Math.cos(t); }, function(t){var d = P.Dist(C), beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P); t += beta; return C.Y()+d*Math.sin(t); }, 0,2*Math.PI], {strokeWidth:6, strokeColor:'green'}); // Point on circle var B = brdcy.create('glider',[0,2,circley],{name:'B', color:'blue',trace:false}); brdcy.create('segment',[C,B],{color:'black'}); brdcy.unsuspendUpdate(); var rol = brdcy.createRoulette(liney, circley, 0, Math.PI/20, 1, 100, [C,P,B]); </script>`

# Triangle de Sierpinski | `<form style="width:100%;margin:auto;text-align:center;padding:10px;"><input type='button' value="Next iteration" onClick="run();"></form> <div id='boxsie' class='jxgbox' style='width:500px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div><script type='text/javascript'> var boardsie = JXG.JSXGraph.initBoard('boxsie', {boundingbox: [-0.02631578947368421, 1.0263157894736843, 1.2894736842105263, -0.02631578947368421], showCopyright:false}); var level = 0; function run() { JXG.JSXGraph.freeBoard(boardsie); boardsie = JXG.JSXGraph.initBoard('boxsie', {boundingbox: [-0.02631578947368421, 1.0263157894736843, 1.2894736842105263, -0.02631578947368421], showCopyright:false}); level++; boardsie.suspendUpdate(); paint(); boardsie.unsuspendUpdate(); } function paint() { // Initial triangle var xCoords = [0, 1, 0.5]; var yCoords = [0, 0, 1]; drawPolygon(xCoords, yCoords, level); drawTriangle({x:0,y:0}, {x:1,y:0}, {x:0.5,y:1}, level); } function drawPolygon(xCoords, yCoords,level) { p1 = boardsie.create('point', [xCoords[0], yCoords[0]], {visible:false,name:'',withLabel:false}); p2 = boardsie.create('point', [xCoords[1], yCoords[1]], {visible:false,name:'',withLabel:false}); p3 = boardsie.create('point', [xCoords[2], yCoords[2]], {visible:false,name:'',withLabel:false}); var colors=['#000000','#665566','#994499','#BB33BB','#EE99FF','#FFCCFF']; l1 = boardsie.create('line',[p1,p2],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:'',withLabel:false}); l2 = boardsie.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:'',withLabel:false}); l3 = boardsie.create('line',[p3,p1],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:'',withLabel:false}); } function drawTriangle(a, b, c, level) { if (level==0) return; level -= 1; // In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt var xCoords = [c.x, (c.x+b.x)/2, (a.x+c.x)/2]; var yCoords = [b.y, (c.y+a.y)/2, (c.y+a.y)/2]; drawPolygon(xCoords, yCoords,level); // 3 neue Dreiecke bestimmen a1 = a; b1 = {x:c.x, y:b.y}; c1 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2}; drawTriangle(a1, b1, c1, level); a2 = {x:c.x, y:b.y}; b2 = b; c2 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2}; drawTriangle(a2, b2, c2, level); a3 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2}; b3 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2}; c3 = c; drawTriangle(a3, b3, c3, level); } paint(); </script>`

# Addition de nombres complexes | `<div id='box2' class='jxgbox' style='width:600px; height:400px;margin:auto;'></div> <script type='text/javascript'> var board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-6, 6, 8, -4], axis: true, showCopyright:false}); var org = board.create('point', [0,0], {style:10,visible:true,fixed:true,name:' '}); var x = board.create('point', [2,2], {style:5,color:'blue',name:'x'}); var y = board.create('point', [-1,-3], {style:5,color:'blue',name:'y'}); var xy = board.create('point', ["X(x)+X(y)","Y(x)+Y(y)"], {style:7,color:'green',name:'x+y'}); var ax =board.create('arrow', [org,x], {strokeColor:'blue'}); var ay =board.create('arrow', [org,y], {strokeColor:'blue'}); var axy =board.create('arrow', [org,xy], {strokeColor:'red'}); var ax2 =board.create('arrow', [x,xy], {strokeColor:'blue',strokeWidth:1,dash:1}); var ay2 =board.create('arrow', [y,xy], {strokeColor:'blue',strokeWidth:1,dash:1}); </script>`

# Multiplication de nombres complexes | `<div id='box3' class='jxgbox' style='width:600px; height:400px;margin:auto;margin-bottom:40px;'></div> <script type='text/javascript'> brd2 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-6, 6, 8, -4], axis: true, showCopyright:false}); var org2 = brd2.create('point', [0,0], {style:10,visible:true,fixed:true,name:' '}); var x = brd2.create('point', [1,0], {style:4,color:'blue',name:'x'}); var y = brd2.create('point', [0,2], {style:4,color:'red',strokeColor:'red',name:'y'}); var xy = brd2.create('point', ["X(x)*X(y)-Y(x)*Y(y)","X(x)*Y(y)+X(y)*Y(x)"], {style:7,fillColor:'green',strokeColor:'green',name:'x*y'}); var c = brd2.create('circle',[org2,1],{strokeWidth:1,dash:1}); var ax =brd2.create('arrow', [org2,x], {strokeColor:'blue'}); var ax =brd2.create('arrow', [org2,y], {strokeColor:'red'}); var ax =brd2.create('arrow', [org2,xy], {strokeColor:'green'}); </script>`

# Plan complexe |
    <div id="jxgbox123" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
    <script>

     var board = JXG.JSXGraph.initBoard('jxgbox123', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: true});
     JXG.Options.text.useMathJax = true;
     var absAxe = board.create('arrow',[ [-4,0],[4,0] ], {strokeColor: 'black', strokeWidth:2});
     var absOrd = board.create('arrow',[ [0,-4],[0,4] ], {strokeColor: 'black'});

     var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
     vectU.setProperty({fixed:true});
     var tu = board.create('text',[0.5,-0.3,function() {
        return '$\\vec{u}$';
      }], {fontSize:12});
      tu.setProperty({fixed:true});
     var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
     vectV.setProperty({fixed:true});
     var tv = board.create('text',[-0.4,0.5,function() {
        return '$\\vec{v}$';
      }], {fontSize:12});
      tv.setProperty({fixed:true});

     var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });

     pO.setProperty({fixed:true});
     var pM = board.create('point',[2.5,3],{name:'M',size:1});
     var pX = board.create('point',['X(M)',0],{name:'x',size:1});
     var pY = board.create('point',[0,'Y(M)'],{name:'y',size:1});

     var li1 = board.create('line',[pM,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li2 = board.create('line',[pM,pY], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var v1 = board.create('arrow', [pO, pM], {strokeColor: 'blue', strokeWidth: '3px'});
     var t = board.create('text',['X(M)/2','Y(M)/2+0.3','r']);
     var tangle = board.create('angle', [[5,0],pO,pM], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5});
    </script>

# Plan complexe 2 |
    <div id="jxgbox5123" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
    <script type="text/javascript">

     var board = JXG.JSXGraph.initBoard('jxgbox5123', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: true});
     JXG.Options.text.useMathJax = true;
     var absAxe = board.create('arrow',[ [-4,0],[4,0] ], {strokeColor: 'black', strokeWidth:2});
     var absOrd = board.create('arrow',[ [0,-4],[0,4] ], {strokeColor: 'black'});

     var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
     vectU.setProperty({fixed:true});
     var tu = board.create('text',[0.4,-0.15,function() {
        return '$\\vec{u}$';
      }], {fontSize:12});
      tu.setProperty({fixed:true});
     var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
     vectV.setProperty({fixed:true});
     var tv = board.create('text',[-0.4,0.5,function() {
        return '$\\vec{v}$';
      }], {fontSize:12});
      tv.setProperty({fixed:true});

     var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });
     pO.setProperty({fixed:true});

     var pM = board.create('point',[2.5,3],{name:'M',size:1});
     var pM1 = board.create('point',['X(M)','-Y(M)'],{name:'M\'',size:1});
     var pX = board.create('point',['X(M)',0],{name:'x',size:1});
     var pY = board.create('point',[0,'Y(M)'],{name:'y',size:1});
     var pY1 = board.create('point',[0,'-Y(M)'],{name:'-y',size:1});

     var li1 = board.create('line',[pM,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li2 = board.create('line',[pM,pY], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li3 = board.create('line',[pM1,pY1], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li4 = board.create('line',[pM1,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var v1 = board.create('arrow', [pO, pM], {strokeColor: 'blue', strokeWidth: '3px'});
     var v2 = board.create('arrow', [pO, pM1], {strokeColor: 'blue', strokeWidth: '3px'});
     var t = board.create('text',['X(M)/2','Y(M)/2+0.3','r']);
     var tangle = board.create('angle', [[5,0],pO,pM], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5});
     var tangle1 = board.create('angle', [pM1,pO,pX], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5, fillColor:'green'});
    </script>

# Plan complexe 3 |
    <div id="jxgbox4" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
    <script type="text/javascript">

     var board = JXG.JSXGraph.initBoard('jxgbox4', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: true});
     JXG.Options.text.useMathJax = true;
     var absAxe = board.create('arrow',[ [-4,0],[4,0] ], {strokeColor: 'black', strokeWidth:2});
     var absOrd = board.create('arrow',[ [0,-4],[0,4] ], {strokeColor: 'black'});

     var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
     vectU.setProperty({fixed:true});
     var tu = board.create('text',[0.4,-0.15,function() {
        return '$\\vec{u}$';
      }], {fontSize:12});
      tu.setProperty({fixed:true});
     var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
     vectV.setProperty({fixed:true});
     var tv = board.create('text',[-0.4,0.5,function() {
        return '$\\vec{v}$';
      }], {fontSize:12});
      tv.setProperty({fixed:true});

     var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });
     pO.setProperty({fixed:true});

     var pM = board.create('point',[2.5,3],{name:'M',size:1});
     var pM1 = board.create('point',['-X(M)','-Y(M)'],{name:'M\'',size:1});
     var pX = board.create('point',['X(M)',0],{name:'x',size:1});
     var pX1 = board.create('point',['-X(M)',0],{name:'-x',size:1});
     var pY = board.create('point',[0,'Y(M)'],{name:'y',size:1});
     var pY1 = board.create('point',[0,'-Y(M)'],{name:'-y',size:1});

     var li1 = board.create('line',[pM,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li2 = board.create('line',[pM,pY], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li3 = board.create('line',[pM1,pY1], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var li4 = board.create('line',[pM1,pX1], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
     var v1 = board.create('arrow', [pO, pM], {strokeColor: 'blue', strokeWidth: '3px'});
     var v2 = board.create('arrow', [pO, pM1], {strokeColor: 'blue', strokeWidth: '3px'});
     var t = board.create('text',['X(M)/2','Y(M)/2+0.3','r']);
     var tangle = board.create('angle', [[5,0],pO,pM], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5});
     var tangle1 = board.create('angle', [pM,pO,pM1], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5, fillColor:'green'});
    </script>

# Conjugué | `<div id='box2uvw' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;'></div> <script type='text/javascript'> JXG.Options.axis.ticks.drawLabels = false; boardAZ = JXG.JSXGraph.initBoard('box2uvw', {boundingbox: [-2, 3, 5, -3], axis: true, showCopyright:false,showNavigation:false}); var pHaut = boardAZ.create('point', [3,2], {style:10,visible:true,name:'M a pour affixe z=x+iy',strokeColor:'blue',fillColor:'blue'}); var pBas = boardAZ.create('point', [function(){return pHaut.X()},function(){return -pHaut.Y()}], {style:10,visible:true,name:'M\' a pour affixe z=x-iy',strokeColor:'blue',fillColor:'blue'}); boardAZ.update(); </script>`

# Inégalité triangulaire |
    <div id="jxgbox6" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
    <script type="text/javascript">

     var board = JXG.JSXGraph.initBoard('jxgbox6', {boundingbox: [-2, 6, 6, -2], axis: false, showNavigation: false, showCopyright: false, grid: true});
     JXG.Options.text.useMathJax = true;
     var absAxe = board.create('arrow',[ [-2,0],[6,0] ], {strokeColor: 'black', strokeWidth:2});
     var absOrd = board.create('arrow',[ [0,-2],[0,6] ], {strokeColor: 'black'});

     var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
     vectU.setProperty({fixed:true});
     var tu = board.create('text',[0.5,-0.3,function() {
        return '$\\vec{u}$';
      }], {fontSize:12});
      tu.setProperty({fixed:true});
     var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
     vectV.setProperty({fixed:true});
     var tv = board.create('text',[-0.4,0.5,function() {
        return '$\\vec{v}$';
      }], {fontSize:12});
      tv.setProperty({fixed:true});

     var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });

     pO.setProperty({fixed:true});
     var pM = board.create('point',[2,3],{name:'M',size:1});
     var pMpr = board.create('point',[2.5,1],{name:'M\'',size:1});
     var pM1 = board.create('point',[ function () { return  pM.X()+pMpr.X() }, function () { return  pM.Y()+pMpr.Y() } ],{name:'$M_1$',size:1});

     var li1 = board.create('line',[pM,pO], { straightFirst:false, straightLast:false, strokeWidth:2});
     var li2 = board.create('line',[pMpr,pO], {straightFirst:false, straightLast:false, strokeWidth:2});
     var li1 = board.create('line',[pM1,pO], {straightFirst:false, straightLast:false, strokeWidth:2});
     var li1 = board.create('line',[pM,pM1], {straightFirst:false, straightLast:false, strokeWidth:2});
     var li1 = board.create('line',[pMpr,pM1], {straightFirst:false, straightLast:false, strokeWidth:2});

     var t1 = board.create('text', [function () { return  pM.X()/2-0.2 }, function () { return  pM.Y()/2+0.5 }, '|z|']);
     var t2 = board.create('text', [function () { return  pMpr.X()/2 }, function () { return  pMpr.Y()/2-0.2 }, '|z‘|']);
     var t3 = board.create('text', [function () { return  pM.X()+pMpr.X()/2 }, function () { return  pM.Y()+pMpr.Y()/2+0.5 }, '|z‘|']);
     var t4 = board.create('text', [function () { return  pM.X()/2+pMpr.X()/2-0.2 }, function () { return  pM.Y()/2+pMpr.Y()/2+0.4 }, '|z+z‘|']);
     var t5 = board.create('text', [function () { return  pM.X()/2+pMpr.X()+0.1 }, function () { return  pM.Y()/2+pMpr.Y() }, '|z|']);
    </script>

# Angles adjacents |
    <div id="jxgbox7" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;margin-bottom: 10px;"></div>
    <script type="text/javascript">

     var board = JXG.JSXGraph.initBoard('jxgbox7', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: false});
     JXG.Options.text.useMathJax = true;

     var pA = board.create('point',[-2.2,0], {name:'$A$',withLabel: true, label:{ offset:[-20,-10] },size:1 });
     var pB = board.create('point',[1.8,-1.9],{name:'B',size:1});
     var pC = board.create('point',[-0.2,2.9],{name:'C',size:1});
     var pU = board.create('point',[1,0],{name:'',size:0});

     var vectU = board.create('arrow',[ pA,pU ], {label:'u', strokeColor: 'black', strokeWidth:3});
     var tu = board.create('text',[ function () {return (pA.X()+pU.X())/2;}, function () {return (pA.Y()+pU.Y())/2-0.2;}  ,function() {
        return '$\\vec{u}$';
      }], {fontSize:12});

     var vectAB = board.create('arrow',[ pA,pB ], {label:'u', strokeColor: 'black', strokeWidth:3});
     var vectAC = board.create('arrow',[ pA,pC ], {label:'u', strokeColor: 'black', strokeWidth:3});

     var tangle3 = board.create('angle', [pB,pA,pC], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:1.2, fillColor : 'rgba(0,0,255,0.5)'});
     var tangle1 = board.create('angle', [pB,pA,pU], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.7, fillColor : 'green'});
     var tangle2 = board.create('angle', [pU,pA,pC], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.7, fillColor : 'red'});
    </script>

# Longueur d'un arc de courbe |
    <div id='box4a' class='jxgbox' style='width:800px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
    <script>
    var brdac = JXG.JSXGraph.initBoard('box4a', {axis:true, boundingbox: [-8, 6, 8, -2], showCopyright:false});
    var nac = brdac.create('slider',[[1,3],[6,3],[1,10,70]],{name:'n',snapWidth:1});
    var fg = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
    var plot = brdac.create('functiongraph',[fg], {strokeWidth:1,strokeOpacity:0.3});
    var start = -3.0;
    var end = 5.0;
    var sc = brdac.create('curve',[[0],[0]],{dash:1,strokeWidth:1,strokeColor:'red'});
    sc.updateDataArray = function() {
       var i;
       var m = nac.Value();
       var d = (end-start)/m;
       this.dataX = [];
       this.dataY = [];
       this.dataX[0] = start;
       this.dataY[0] = fg(start);
       for (var i=1;i<=m;i++) {
         this.dataX.push(start+i*d);
         this.dataY.push(fg(start+(i-1)*d));
         this.dataX.push(start+i*d);
         this.dataY.push(fg(start+i*d));
       }
    }

    var approx = brdac.create('curve',[[0],[0]], {strokeColor:'red'});
    approx.updateDataArray = function() {
       var i;
       var m = nac.Value();
       var d = (end-start)/m;
       this.dataX = [];
       this.dataY = [];
       this.dataX[0] = start;
       this.dataY[0] = fg(start);
       for (var i=1;i<=m;i++) {
         this.dataX.push(start+i*d);
         this.dataY.push(fg(start+i*d));
       }
    }

    brdac.create('text',[-6,-1,function(){
       var i,s,f0,f1;
       var m = nac.Value();
       var d = (end-start)/m;
       s = 0.0;
       f0 = fg(start);
       for (var i=1;i<=m;i++) {
         f1 = fg(start+i*d);
         s += Math.sqrt(d*d+(f1-f0)*(f1-f0));
         f0 = f1;
       }
       return 'Longueur ='+s.toFixed(4); }]);
    brdac.update();

    </script>

# Grapheur (tangente, dérivée) | `<form style="width:100%;margin:auto;padding:10px;text-align:center;"> <input type="text" id="input" value="sin(x)*x"> <input type="button" value="Tracer" onClick="plotter()"> <input type="button" value="Effacer" onClick="clearAll()"> <input type="button" value="Tangente" onClick="addTangent()"> <input type="button" value="Dérivée" onClick="addDerivative()"> </form> <div id='jxgboxpl' class='jxgbox' style='width:600px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var board = JXG.JSXGraph.initBoard('jxgboxpl', {boundingbox:[-5,8,8,-5], axis:true, showCopyright:false}); var f, curve; // global objects function plotter() { var txtraw = document.getElementById('input').value; f = board.jc.snippet(txtraw, true, 'x', true); curve = board.create('functiongraph',[f, function(){ var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board); return c.usrCoords[1]; }, function(){ var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board); return c.usrCoords[1]; } ],{name:txtraw, withLabel:true}); var q = board.create('glider', [2, 1, curve], {withLabel:false}); var t = board.create('text', [ function(){ return q.X()+0.1; }, function(){ return q.Y()+0.1; }, function(){ return "f '(" + q.X().toFixed(2) + ")=" + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); } ], {fontSize:15}); } function clearAll() { JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard('jxgboxpl', {boundingbox:[-5,8,8,-5], axis:true, showCopyright:false}); f = null; curve = null; } function addTangent() { if (JXG.isFunction(f)) { board.suspendUpdate(); var p = board.create('glider',[1,0,curve], {name:'drag me'}); board.create('tangent',[p], {name:'drag me'}); board.unsuspendUpdate(); } } function addDerivative() { if (JXG.isFunction(f)) { board.create('functiongraph',[JXG.Math.Numerics.D(f), function(){ var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board); return c.usrCoords[1]; }, function(){ var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board); return c.usrCoords[1]; }], {dash:2}); } } </script>`

# Méthode des rectangles/trapèzes Riemann sum type: | `<form style="width:100%;margin:auto;padding:10px;text-align:center;">Riemann sum type: <select id="sumtype" onChange="brd.update()"> <option value='left' selected> left <option value='right'> right <option value='middle'> middle <option value='trapezoidal'> trapezoidal <option value='simpson'> simpson <option value='lower'> lower <option value='upper'> upper </select> </form> <div id='boxrecta' class='jxgbox' style='width:800px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('boxrecta', {axis:true, boundingbox:[-2,40,8,-5], showCopyright:false}); var s11 = brdre.create('slider',[[-1,30],[2,30],[3,50,500]],{name:'n',snapWidth:1}); var a11 = brdre.create('slider',[[-1,20],[2,20],[-10,0,0]],{name:'start'}); var br = brdre.create('slider',[[-1,10],[2,10],[0,6,10]],{name:'end'}); var fo = function(x){ return x*x; }; var plot1 = brdre.create('functiongraph',[fo,function(){return a11.Value();}, function(){return br.Value();}]); var os = brdre.create('riemannsum',[fo, function(){ return s11.Value();}, function(){ return document.getElementById('sumtype').value;}, function(){return a11.Value();}, function(){return br.Value();} ], {fillColor:'#ffff00', fillOpacity:0.3}); brdre.create('text', [1,35,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(fo,s11.Value(),document.getElementById('sumtype').value,a11.Value(),br.Value())).toFixed(4); }]); </script>`

# Approximation de l'aire du disque | `<div id='jxgboxdi' class='jxgbox' style='width:809px; height:500px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var board3 = JXG.JSXGraph.initBoard('jxgboxdi', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true, showCopyright:false}); var N = board3.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1}); var circ = board3.createElement('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3}); var c = board3.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2}); c.updateDataArray = function() { var r = 1, n = Math.floor(N.Value()), x = [0], y = [0], phi = Math.PI/n, h = r*Math.cos(phi), s = r*Math.sin(phi), i, j, px = 0, py = 0, sgn = 1, d = 16, dt = phi/d, pt; for (i=0;i<n;i++) { for (j=-d;j<=d;j++) { pt = dt*j; x.push(px+r*Math.sin(pt)); y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5); } px += s; sgn *= (-1); } x.push((n-1)*s); y.push(h+(sgn-1)*h*0.5); this.dataX = x; this.dataY = y; } var c2 = board3.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1}); c2.updateDataArray = function() { var r = 1, n = Math.floor(N.Value()), px = circ.midpoint.X(), py = circ.midpoint.Y(), x = [px], y = [py], phi = Math.PI/n, s = r*Math.sin(phi), i, j, d = 16, dt = phi/d, pt = Math.PI*0.5+phi; for (i=0;i<n;i++) { for (j=-d;j<=d;j++) { x.push(px+r*Math.cos(pt)); y.push(py+r*Math.sin(pt)); pt -= dt; } x.push(px); y.push(py); pt += dt; } this.dataX = x; this.dataY = y; } board3.update(); </script>`

# Puissance de x | `<div id='boxp' class='jxgbox' style='width:650px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var brd1 = JXG.JSXGraph.initBoard('boxp', {axis:true, boundingbox:[-0.25,1.7,1.25,-0.5], showCopyright:false}); brd1.suspendUpdate(); var n = brd1.create('slider',[[0.1,1.5],[1.1,1.5],[1,1,100]],{name:'n',snapWidth:1}); var fu = function(x){ return Math.pow(x,n.Value()); } var plot = brd1.create('functiongraph',[fu,0,1], {strokeWidth:2}); brd1.createElement('text',[0.2,0.7,function(){return 'f'+Math.floor(n.Value())+'(x)=x'+Math.floor(n.Value())+'';}], {fontSize:20}); brd1.unsuspendUpdate(); </script>`

# Série entière du sinus | `<div id='jxgbox1s' class='jxgbox' style='width:700px; height:300px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var board1s = JXG.JSXGraph.initBoard('jxgbox1s', {axis:true, boundingbox: [-6, 3, 8, -3], showCopyright:false}); board1s.suspendUpdate(); board1s.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"}); var s1 = board1s.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1}); board1s.create('functiongraph', [ function(t) { var val = 0, i, sv = s1.Value()+1; for(i = 0; i < sv; i++) { val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1); } return val; }, -10, 10], {strokeColor: "#bb0000"}); board1s.unsuspendUpdate(); </script>`

# Série entière du cosinus | `<div id='jxgbox2c' class='jxgbox' style='width:700px; height:300px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> board2c = JXG.JSXGraph.initBoard('jxgbox2c', {axis:true, boundingbox: [-6, 3, 8, -3], showCopyright:false}); board2c.suspendUpdate(); board2c.create('functiongraph', [function(t){ return Math.cos(t); }, -10, 10],{strokeColor: "#cccccc"}); var s2c = board2c.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'T',snapWidth:1}); board2c.create('functiongraph', [ function(t) { var val = 0, i, sv = s2c.Value()+1; for(i = 0; i < sv; i++) { val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / JXG.Math.factorial(2*i); } return val; }, -10, 10],{strokeColor: "#009900"}); board2c.unsuspendUpdate(); </script>`

# Série entière de l'exponentielle | `<div id='jxgbox1e' class='jxgbox' style='width:600px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> board1e = JXG.JSXGraph.initBoard('jxgbox1e', {boundingbox: [-6, 25, 6, -15], axis: true, showCopyright:false}); board1e.suspendUpdate(); board1e.create('functiongraph', [function(t){ return Math.exp(t); },-10, 10], {strokeColor: "#cccccc"}); var se = board1e.create('slider', [[0.75,-2],[5,-2.0],[0,0,15]], {name:'S',snapWidth:1}); board1e.create('text',[-4,10, function() { return 'n='+se.Value(); } ]); board1e.create('text',[-4,8, function() { var val = 0, i, sv = se.Value()+1; for(i = 0; i < sv; i++) { val+= 1.0/JXG.Math.factorial(i); } return 'e~'+(val).toFixed(10); } ]); board1e.create('functiongraph', [ function(t) { var val = 0, i, sv = se.Value()+1; for(i = 0; i < sv; i++) { val+= Math.pow(t,i)/JXG.Math.factorial(i); } return val; }, -10, 10], {strokeColor: "#bb0000", curveType:'plot'}); board1e.unsuspendUpdate(); </script>`

# Régression | `<div id='jxgboxr' class='jxgbox' style='width:700px; height:500px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> brdr = JXG.JSXGraph.initBoard('jxgboxr', {boundingbox:[-2, 100, 220, -70], grid: false, axis:true, showCopyright:false}); brdr.suspendUpdate(); deg = brdr.create('slider',[[10,90],[100,90],[1,1,10]],{name:'degree',snapWidth:1}); sr = brdr.create('slider',[[10,70],[100,70],[0,1,3]],{name:'scale'}); pointlist = []; for (i=0; i<30;i++) { pointlist.push(brdr.create('point', [function() { return 200*Math.random(); }, function() { return sr.Value()*30*Math.random()+20;}], { style:4, strokecolor:"#0000a0", name:" "})); } brdr.unsuspendUpdate(); regression = JXG.Math.Numerics.regressionPolynomial(deg,pointlist); reg = brdr.create('functiongraph',[regression],{strokeColor:'green'}); tr = brdr.create('text',[20,-40, function(){ return "r(x) = " + regression.getTerm();} ], {strokeColor:'black',fontSize:'14px'}); </script>`

# Fonction tangente | `<div id='boxtan' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div> <script type='text/javascript'> var board17 = JXG.JSXGraph.initBoard('boxtan', {boundingbox: [-4, 5, 10, -5], axis: false,showCopyright:false,grid: false,showNavigation:false}); board17.suspendUpdate(); var xaxis = board17.create('axis', [ [0,0],[1,0] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); var yaxis = board17.create('axis', [ [0,0],[0,1] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); yaxis.removeAllTicks(); board17.create('ticks', [xaxis, Math.PI], {strokeColor: 'black', strokeWidth: 2,}); board17.create('ticks', [yaxis, 4], {strokeColor: 'black', strokeWidth: 1}); for (i=-5;i<7;i++) { board17.create('segment',[ [0.5*i*Math.PI,-5], [0.5*i*Math.PI,5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true,dash:1}); } board17.create('text', [1.4, -0.5, 'π/2'],{fixed:true}); board17.create('text', [3.1, -0.5, 'π'],{fixed:true}); board17.create('text', [4.3, -0.5, '3π/2'],{fixed:true}); board17.create('text', [6.2, -0.5, '2π'],{fixed:true}); board17.create('text', [-1.8, -0.5, '-π/2'],{fixed:true}); board17.create('text', [-3.3, -0.5, '-π'],{fixed:true}); board17.create('text', [7.5, -0.5, '5π/2'],{fixed:true}); board17.create('text', [-6.5, -0.5, '-2π'],{fixed:true}); var fsin = function(x){ return Math.tan(x); } var plot = board17.create('functiongraph',[fsin,-4,10], {strokeWidth:1,strokeColor:'red'}); board17.create('text', [-2.5, -4.5, '$y=\\\\tan(x)$'],{fixed:true,strokeColor:'red'}); </script>`

# Cercle trigo | `<div id='boxcercleprime' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div> <script type='text/javascript'> var board14 = JXG.JSXGraph.initBoard('boxcercleprime', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false}); board14.suspendUpdate(); var b1c1 = board14.create('circle', [[0,0], [1,0]]); var b1p1 = board14.create('point', [2, 0], {slideObject: b1c1,name:'M'}); var seg = board14.create('segment', [b1p1, [0,0] ] ); var segcos = board14.create('segment', [b1p1, ["X(M)",0] ],{strokeWidth:1,dash:1,color:'black'} ); var segsin = board14.create('segment', [b1p1, [0,"Y(M)"] ],{strokeWidth:1,dash:1,color:'black'} ); var p1 = board14.create('point', [0, 0], {name:'p1',visible:false}); var p2 = board14.create('point',["X(M)/3","Y(M)/3"],{name:'p2',visible:false}); var l = "X(M)"; var s = "Y(M)"; var r = "X(p2)*X(p2)"; var ct = board14.create('point',[l,0],{name:'cos(t)'}); var st = board14.create('point',[0,s],{name:'sin(t)'}); var p3 = board14.create('point',[0.3,0],{name:'p3',visible:false}); board14.create('text',["X(M)/3","Y(M)/3",'t']); board14.create('arc',[p1, p3, p2],{}); board14.unsuspendUpdate(); </script>`

# Cercle trigo (2) |
    <div id='boxcercle1' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;display:inline-block;'></div>
    <script type='text/javascript'>
    var board1 = JXG.JSXGraph.initBoard('boxcercle1', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false});
    board1.suspendUpdate();
    var b1c11 = board1.create('circle', [[0,0], [1,0]]);
    var b1p11 = board1.create('point', [2, 0], {slideObject: b1c11,name:'M'});
    var seg = board1.create('segment', [b1p11, [0,0] ] );
    var perp1 = board1.create('segment', [b1p11, ["X(M)",0] ],{strokeWidth:1,dash:1,color:'black'} );
    var perp2 = board1.create('segment', [b1p11, [0,"Y(M)"] ],{strokeWidth:1,dash:1,color:'black'} );
    //var perp21 = board1.create('perpendicular',[board1.defaultAxes.y,b1p11],[{strokeColor: '#0000ff', visible: true}, {visible: true}]);
    var f1 = function(x){ return x; }
    var plot = board1.create('functiongraph',[f1,-1.5,1.5], {strokeWidth:1,dash:1});
    var f2 = function(x){ return -x; }
    var plot = board1.create('functiongraph',[f2,-1.5,1.5], {strokeWidth:1,dash:1});
    var f3 = function(x){ return 0.57735*x; }
    var plot = board1.create('functiongraph',[f3,-1.5,1.5], {strokeWidth:1,dash:1});
    var f4 = function(x){ return -0.57735*x; }
    var plot = board1.create('functiongraph',[f4,-1.5,1.5], {strokeWidth:1,dash:1});
    var f5 = function(x){ return 1.73205*x; }
    var plot = board1.create('functiongraph',[f5,-1.5,1.5], {strokeWidth:1,dash:1});
    var f6 = function(x){ return -1.73205*x; }
    var plot = board1.create('functiongraph',[f6,-1.5,1.5], {strokeWidth:1,dash:1});
    t1 = board1.create('text', [1, 0.5, 'π/6'],{fixed:true});
    t2 = board1.create('text', [0.9, 0.8, 'π/4'],{fixed:true});
    t3 = board1.create('text', [0.64, 1, 'π/3'],{fixed:true});
    t4 = board1.create('text', [0.05, 1.1, 'π/2'],{fixed:true});
    t5 = board1.create('text', [-0.5, 1, '2π/3'],{fixed:true});
    t6 = board1.create('text', [-0.8, 0.85, '3π/4'],{fixed:true});
    t7 = board1.create('text', [-1.2, 0.55, '5π/6'],{fixed:true});
    t8 = board1.create('text', [-1.1, 0.05, 'π'],{fixed:true});
    t9 = board1.create('text', [1, -0.5, '11π/6'],{fixed:true});
    t10 = board1.create('text', [0.9, -0.8, '7π/4'],{fixed:true});
    t11 = board1.create('text', [0.64, -1, '5π/3'],{fixed:true});
    t12 = board1.create('text', [0.05, -1.2, 'π/2'],{fixed:true});
    t13 = board1.create('text', [-0.5, -1, '4π/3'],{fixed:true});
    t14 = board1.create('text', [-0.8, -0.85, '5π/4'],{fixed:true});
    t15 = board1.create('text', [-1.2, -0.55, '7π/6'],{fixed:true});

    pa1 = board1.create('segment',[[0.867, -0.04],[0.867, 0.04]]);
    t16 = board1.create('text', [0.80, -0.1, function (){ return '$\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
    pa2 = board1.create('segment',[[0.707, -0.04],[0.707, 0.04]]);
    t17 = board1.create('text', [0.61, -0.1, function (){ return '$\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
    pa3 = board1.create('segment',[[0.5, -0.04],[0.5, 0.04]]);

    pa4 = board1.create('segment',[[-0.867, -0.04],[-0.867, 0.04]]);
    t18 = board1.create('text', [-0.97, -0.1, function (){ return '$-\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
    pa5 = board1.create('segment',[[-0.707, -0.04],[-0.707, 0.04]]);
    t19 = board1.create('text', [-0.82, -0.1, function (){ return '$-\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
    pa6 = board1.create('segment',[[-0.5, -0.04],[-0.5, 0.04]]);

    pa7 = board1.create('segment',[[-0.04,0.867],[0.04,0.867]]);
    t20 = board1.create('text', [-0.2,0.92, function (){ return '$\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
    pa8 = board1.create('segment',[[0.04,0.707],[-0.04,0.707]]);
    t21 = board1.create('text', [-0.2,0.72, function (){ return '$\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
    pa9 = board1.create('segment',[[-0.04,0.5],[0.04,0.5]]);

    pa10 = board1.create('segment',[[-0.04,-0.867],[0.04,-0.867]]);
    t22 = board1.create('text', [-0.25,-0.83, function (){ return '$-\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
    pa11 = board1.create('segment',[[-0.04,-0.707],[0.04,-0.707]]);
    t23 = board1.create('text', [-0.25,-0.64, function (){ return '$-\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
    pa12 = board1.create('segment',[[-0.04,-0.5],[0.04,-0.5]]);

    board1.unsuspendUpdate();

    </script>

# Sinus/cosinus | `<div id='boxdeph' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div> <script type='text/javascript'> var board9 = JXG.JSXGraph.initBoard('boxdeph', {boundingbox: [-4, 1.33, 10, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false}); board9.suspendUpdate(); var xaxis = board9.create('axis', [ [0,0],[1,0] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); var yaxis = board9.create('axis', [ [0,0],[0,1] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); yaxis.removeAllTicks(); board9.create('ticks', [xaxis, Math.PI], {strokeColor: 'black', strokeWidth: 2,}); board9.create('ticks', [yaxis, 0.5], {strokeColor: 'black', strokeWidth: 2}); for (i=-5;i<7;i++) { board9.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); } board9.create('segment',[ [-7,0.5], [10,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board9.create('segment',[ [-7,-0.5], [10,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board9.create('segment',[ [-7,1], [10,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board9.create('segment',[ [-7,-1], [10,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board9.create('text', [1.4, -0.08, 'π/2'],{fixed:true}); board9.create('text', [3.1, -0.08, 'π'],{fixed:true}); board9.create('text', [4.5, -0.08, '3π/2'],{fixed:true}); board9.create('text', [6.2, -0.08, '2π'],{fixed:true}); board9.create('text', [-1.8, -0.08, '-π/2'],{fixed:true}); board9.create('text', [-3.1, -0.08, '-π'],{fixed:true}); board9.create('text', [-5.0, -0.08, '-3π/2'],{fixed:true}); board9.create('text', [-6.5, -0.08, '-2π'],{fixed:true}); // sine: var fsin = function(x){ return Math.sin(x); } var plot = board9.create('functiongraph',[fsin,-4,10], {strokeWidth:1,strokeColor:'red'}); var fcos = function(x){ return Math.cos(x); } var plot = board9.create('functiongraph',[fcos,-4,10], {strokeWidth:1,strokeColor:'blue'}); board9.create('arrow', [ [6.2,1.1] , [8,1.1]], {strokeWidth:1,strokeColor:'black',fixed:true}); board9.create('arrow', [ [8,1.1] , [6.2,1.1]], {strokeWidth:1,strokeColor:'black',fixed:true}); board9.create('text',[7,1.2,'π/2'],{fixed:true}) board9.create('text', [-2.5, -1.2, '$y=\\\\sin(x)$'],{fixed:true,strokeColor:'red'}); board9.create('text', [3.5, -1.2, '$y=\\\\cos(x)$'],{fixed:true,strokeColor:'blue'}); </script>`

# Cercle trigo/opposé | `<div id='boxparite' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div> <script type='text/javascript'> var board6 = JXG.JSXGraph.initBoard('boxparite', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showNavigation:false,showCopyright:false}); board6.suspendUpdate(); var c1 = board6.create('circle', [[0,0], [1,0]]); var pt1 = board6.create('point', [2, 0], {slideObject: c1,name:'M'}); var pt2 = board6.create('point', ["X(M)", "-Y(M)"], {name:'N'}); var perp1 = board6.create('perpendicular', [board6.defaultAxes.x,pt1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]); var perp2 = board6.create('perpendicular',[board6.defaultAxes.y,pt1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]); var perp3 = board6.create('perpendicular',[board6.defaultAxes.y,pt2],[{strokeColor: '#0000ff', visible: true}, {visible: false}]); board6.create('segment', [pt1, [0,0] ] ); board6.create('segment', [pt2, [0,0] ] ); var p1 = board6.create('point', [0, 0], {name:'p1',visible:false}); var p2 = board6.create('point',["X(M)/3","Y(M)/3"],{name:'p2',visible:false}); var p3 = board6.create('point',[0.3,0],{name:'p3',visible:false}); var p4 = board6.create('point',["X(N)/3","Y(N)/3"],{name:'p4',visible:false}); board6.create('text',["X(M)/3","Y(M)/3",'t'],{anchorX:'left',anchorY:'top'}); board6.create('arc',[p1, p3, p2],{}); board6.create('text',["X(N)/3","Y(N)/3",'-t'],{anchorX:'left',anchorY:'bottom'}); board6.create('arc',[p1, p4, p3],{}); board6.unsuspendUpdate(); </script>`

# Construction courbe sinus | `<div style="width:100%;text-align:center;"> <div id='boxcercle2sin' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div> <script type='text/javascript'> var board3 = JXG.JSXGraph.initBoard('boxcercle2sin', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false}); board3.suspendUpdate(); var b1c1 = board3.create('circle', [[0,0], [1,0]]); var b1p12 = board3.create('point', [2, 0], {slideObject: b1c1,name:'A'}); var seg = board3.create('segment', [b1p12, [0,0] ] ); var perp1 = board3.create('segment', [b1p12, ["X(A)",0] ],{strokeWidth:1,dash:1,color:'black'} ); var f1 = function(x){ return x; } var plot = board3.create('functiongraph',[f1,-1.5,1.5], {strokeWidth:1,dash:1}); var f2 = function(x){ return -x; } var plot = board3.create('functiongraph',[f2,-1.5,1.5], {strokeWidth:1,dash:1}); var f3 = function(x){ return 0.57735*x; } var plot = board3.create('functiongraph',[f3,-1.5,1.5], {strokeWidth:1,dash:1}); var f4 = function(x){ return -0.57735*x; } var plot = board3.create('functiongraph',[f4,-1.5,1.5], {strokeWidth:1,dash:1}); var f5 = function(x){ return 1.73205*x; } var plot = board3.create('functiongraph',[f5,-1.5,1.5], {strokeWidth:1,dash:1}); var f6 = function(x){ return -1.73205*x; } var plot = board3.create('functiongraph',[f6,-1.5,1.5], {strokeWidth:1,dash:1}); t1 = board3.create('text', [1, 0.5, 'π/6'],{fixed:true}); t2 = board3.create('text', [0.9, 0.8, 'π/4'],{fixed:true}); t3 = board3.create('text', [0.64, 1, 'π/3'],{fixed:true}); t4 = board3.create('text', [0.05, 1.1, 'π/2'],{fixed:true}); t5 = board3.create('text', [-0.5, 1, '2π/3'],{fixed:true}); t6 = board3.create('text', [-0.8, 0.85, '3π/4'],{fixed:true}); t7 = board3.create('text', [-1.2, 0.55, '5π/6'],{fixed:true}); t8 = board3.create('text', [-1.1, 0.05, 'π'],{fixed:true}); t9 = board3.create('text', [1, -0.5, '11π/6'],{fixed:true}); t10 = board3.create('text', [0.9, -0.8, '7π/4'],{fixed:true}); t11 = board3.create('text', [0.64, -1, '5π/3'],{fixed:true}); t12 = board3.create('text', [0.05, -1.2, 'π/2'],{fixed:true}); t13 = board3.create('text', [-0.5, -1, '4π/3'],{fixed:true}); t14 = board3.create('text', [-0.8, -0.85, '5π/4'],{fixed:true}); t15 = board3.create('text', [-1.2, -0.55, '7π/6'],{fixed:true}); board3.unsuspendUpdate(); // Animation var animated = false; function animate(point, direction, count) { if(animated) { point.stopAnimation(); animated = false; } else { point.startAnimation(direction, count); animated = true; } } </script> <div id='boxsin22' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div> <script type='text/javascript'> var board4 = JXG.JSXGraph.initBoard('boxsin22', {boundingbox: [-1, 1.33, 7, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false}); board4.suspendUpdate(); var xaxis = board4.create('axis', [ [0,0],[1,0] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); var yaxis = board4.create('axis', [ [0,0],[0,1] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); yaxis.removeAllTicks(); board4.create('ticks', [xaxis, Math.PI*0.5], {strokeColor: 'green', strokeWidth: 2,}); board4.create('ticks', [yaxis, 0.5], {strokeColor: 'green', strokeWidth: 2}); for (i=1;i<5;i++) { board4.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); } board4.create('segment',[ [-1,0.5], [7,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('segment',[ [-1,-0.5], [7,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('segment',[ [-1,1], [7,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('segment',[ [-1,-1], [7,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('text', [1.4, -0.08, 'π/2'],{fixed:true}); board4.create('text', [3.1, -0.08, 'π'],{fixed:true}); board4.create('text', [4.5, -0.08, '3π/2'],{fixed:true}); board4.create('text', [6.2, -0.08, '2π'],{fixed:true}); var b2p1 = board4.create('point', [ function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p12); }, function() { return b1p12.Y() }], {fixed: true, trace: true, color: '#ff0000', name: 'S',size:0.5}); b1p12.addChild(b2p1); board4.unsuspendUpdate(); board3.addChild(board4); </script> </div>`

# Construction courbe cosinus | `<div style="width:100%;text-align:center;"> <div id='boxcercle2cos' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div> <script type='text/javascript'> var board3 = JXG.JSXGraph.initBoard('boxcercle2cos', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false}); board3.suspendUpdate(); var b1c1 = board3.create('circle', [[0,0], [1,0]]); var b1p12 = board3.create('point', [2, 0], {slideObject: b1c1,name:'A'}); var seg = board3.create('segment', [b1p12, [0,0] ] ); var perp1 = board3.create('segment', [b1p12, ["X(A)",0] ],{strokeWidth:1,dash:1,color:'black'} ); var f1 = function(x){ return x; } var plot = board3.create('functiongraph',[f1,-1.5,1.5], {strokeWidth:1,dash:1}); var f2 = function(x){ return -x; } var plot = board3.create('functiongraph',[f2,-1.5,1.5], {strokeWidth:1,dash:1}); var f3 = function(x){ return 0.57735*x; } var plot = board3.create('functiongraph',[f3,-1.5,1.5], {strokeWidth:1,dash:1}); var f4 = function(x){ return -0.57735*x; } var plot = board3.create('functiongraph',[f4,-1.5,1.5], {strokeWidth:1,dash:1}); var f5 = function(x){ return 1.73205*x; } var plot = board3.create('functiongraph',[f5,-1.5,1.5], {strokeWidth:1,dash:1}); var f6 = function(x){ return -1.73205*x; } var plot = board3.create('functiongraph',[f6,-1.5,1.5], {strokeWidth:1,dash:1}); t1 = board3.create('text', [1, 0.5, 'π/6'],{fixed:true}); t2 = board3.create('text', [0.9, 0.8, 'π/4'],{fixed:true}); t3 = board3.create('text', [0.64, 1, 'π/3'],{fixed:true}); t4 = board3.create('text', [0.05, 1.1, 'π/2'],{fixed:true}); t5 = board3.create('text', [-0.5, 1, '2π/3'],{fixed:true}); t6 = board3.create('text', [-0.8, 0.85, '3π/4'],{fixed:true}); t7 = board3.create('text', [-1.2, 0.55, '5π/6'],{fixed:true}); t8 = board3.create('text', [-1.1, 0.05, 'π'],{fixed:true}); t9 = board3.create('text', [1, -0.5, '11π/6'],{fixed:true}); t10 = board3.create('text', [0.9, -0.8, '7π/4'],{fixed:true}); t11 = board3.create('text', [0.64, -1, '5π/3'],{fixed:true}); t12 = board3.create('text', [0.05, -1.2, 'π/2'],{fixed:true}); t13 = board3.create('text', [-0.5, -1, '4π/3'],{fixed:true}); t14 = board3.create('text', [-0.8, -0.85, '5π/4'],{fixed:true}); t15 = board3.create('text', [-1.2, -0.55, '7π/6'],{fixed:true}); board3.unsuspendUpdate(); // Animation var animated = false; function animate(point, direction, count) { if(animated) { point.stopAnimation(); animated = false; } else { point.startAnimation(direction, count); animated = true; } } </script> <div id='boxcos22' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div> <script type='text/javascript'> var board4 = JXG.JSXGraph.initBoard('boxcos22', {boundingbox: [-1, 1.33, 7, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false}); board4.suspendUpdate(); var xaxis = board4.create('axis', [ [0,0],[1,0] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); var yaxis = board4.create('axis', [ [0,0],[0,1] ], { label: {offset: [7, -10]}, // Doesn't do anything here. drawZero:false // Doesn't do anything here. } ); xaxis.removeAllTicks(); yaxis.removeAllTicks(); board4.create('ticks', [xaxis, Math.PI*0.5], {strokeColor: 'green', strokeWidth: 2,}); board4.create('ticks', [yaxis, 0.5], {strokeColor: 'green', strokeWidth: 2}); for (i=1;i<5;i++) { board4.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); } board4.create('segment',[ [-1,0.5], [7,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('segment',[ [-1,-0.5], [7,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('segment',[ [-1,1], [7,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('segment',[ [-1,-1], [7,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true}); board4.create('text', [1.4, -0.08, 'π/2'],{fixed:true}); board4.create('text', [3.1, -0.08, 'π'],{fixed:true}); board4.create('text', [4.5, -0.08, '3π/2'],{fixed:true}); board4.create('text', [6.2, -0.08, '2π'],{fixed:true}); var b2p1 = board4.create('point', [ function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p12); }, function() { return b1p12.X() }], {fixed: true, trace: true, color: '#ff0000', name: 'C',size:0.5}); b1p12.addChild(b2p1); board4.unsuspendUpdate(); board3.addChild(board4); </script> </div>`

# Aire sous une courbe | `<div id="d45d7188" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:20px;"></div> <script type="text/javascript"> (function(){ var intex1_board = JXG.JSXGraph.initBoard('d45d7188', {boundingbox: [-5, 5, 5, -1.01], showcopyright: false, axes:false, shownavigation: false,grid:true}); var absAxe = intex1_board.create('arrow',[ [-5,0],[5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex1_board.create('arrow',[ [0,-1],[0,5] ], {strokeColor: 'black',fixed:true}); var intex1_c1 = intex1_board.create('functiongraph', [function (t) { return Math.exp(t)*0.3+1; }]); var intex1_i1 = intex1_board.create('integral', [[-2.0, 2.0], intex1_c1],{withLabel: false,fixed:true}); intex1_i1.curveLeft.setProperty({visible:false}); intex1_i1.curveRight.setProperty({visible:false}); var pa = intex1_board.create('point',[function (){ return intex1_i1.baseLeft.X() },0],{name:'a',size:3}); var pb = intex1_board.create('point',[function (){ return intex1_i1.baseRight.X() },0],{name:'b',size:3}); })(); </script>`

# Méthode des rectangles Type de rectangles | `<form style="width:100%;margin:auto;padding:10px;text-align:center;">Type de rectangles <select id="sumtype" onChange="brd.update()"> <option value='lower'> inférieurs <option value='upper'> supérieurs </select> </form> <div id='boxrecta1' class='jxgbox' style='width:370px; height:400px;margin:auto;margin-top:10px;margin-bottom:40px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('boxrecta1', {axis:false, boundingbox:[-5,5,5,-1], showCopyright:false, shownavigation: false,grid:true}); var absAxe = brdre.create('arrow',[ [-5,0],[5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = brdre.create('arrow',[ [0,-1],[0,5] ], {strokeColor: 'black',fixed:true}); var intex1_c1 = brdre.create('functiongraph', [function (t) { return Math.exp(t)*0.3+1; }],{strokeWidth:2}); var l1 = brdre.create('line', [[-2,-1], [-2, 5]],{dash:2,strokeWidth:0.5,fixed:true}); var l2 = brdre.create('line', [[2,-1], [2, 5]],{dash:2,strokeWidth:0.5,fixed:true}); var s11 = brdre.create('slider',[[-4,-0.5],[1,-0.5],[1,3,100]],{name:'n',snapWidth:1}); var a11 = brdre.create('slider',[[-1,20],[2,20],[-10,-2,0]],{name:'start'}); var br = brdre.create('slider',[[-1,10],[2,10],[0,2,10]],{name:'end'}); var fo = function(x){ return Math.exp(x)*0.3+1; }; var plot1 = brdre.create('functiongraph',[fo,function(){return a11.Value();}, function(){return br.Value();}]); var os = brdre.create('riemannsum',[fo, function(){ return s11.Value();}, function(){ return document.getElementById('sumtype').value;}, function(){return a11.Value();}, function(){return br.Value();} ], {fillColor:'#ffff00', fillOpacity:0.3}); brdre.create('text', [1,35,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(fo,s11.Value(),document.getElementById('sumtype').value,a11.Value(),br.Value())).toFixed(4); }]); </script>`

# Unité d'aire | `<div id='jxgboxq1' class='jxgbox' style='width:350px; height:200px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> <script type='text/javascript'> var brdq = JXG.JSXGraph.initBoard('jxgboxq1', {boundingbox:[-1,2,5,-1], axis:true, unitX: 50, unitY: 25,showCopyright:false,showNavigation:false,grid:true}); var p1 = brdq.create('point',[0,0],{visible:false,fixed:true}); var p2 = brdq.create('point',[3,0],{visible:false,fixed:true}); var p3 = brdq.create('point',[3,2],{visible:false,fixed:true}); var p4 = brdq.create('point',[0,2],{visible:false,fixed:true}); var pol = brdq.create('polygon',[ p1,p2,p3,p4 ],{ withLines:true, vertices:false, withLabel: false, fixed:true, label: {offset:[-200,100]} }); </script>`

# Signe des aires | `<div id="ddf4528" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:20px;"></div> <script type="text/javascript"> var intex3_board = JXG.JSXGraph.initBoard('ddf4528', {boundingbox: [-2, 2.5, 4, -0.5], showcopyright: false, axes:false, shownavigation: false,grid:true}); var absAxe = intex3_board.create('arrow',[ [-2,0],[4,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex3_board.create('arrow',[ [0,-1],[0,2.5] ], {strokeColor: 'black',fixed:true}); var intex3_c1 = intex3_board.create('functiongraph', [function (t) { return (t-3)*(t-1)*(t+1)*0.4+0.8; }]); var intex3_i1 = intex3_board.create('integral', [[-1.0, 1.55], intex3_c1],{withLabel: false,fixed:true,fillColor:'blue'}); intex3_i1.curveLeft.setProperty({visible:false}); intex3_i1.curveRight.setProperty({visible:false}); var intex3_i2 = intex3_board.create('integral', [[1.55, 2.67], intex3_c1],{withLabel: false,fixed:true,fillColor:'red'}); intex3_i2.curveLeft.setProperty({visible:false}); intex3_i2.curveRight.setProperty({visible:false}); var intex3_i3 = intex3_board.create('integral', [[2.67,3.2], intex3_c1],{withLabel: false,fixed:true,fillColor:'blue'}); intex3_i3.curveLeft.setProperty({visible:false}); intex3_i3.curveRight.setProperty({visible:false}); var pa = intex3_board.create('point',[function (){ return intex3_i1.baseLeft.X() },0],{name:'a',size:3}); var pb = intex3_board.create('point',[function (){ return intex3_i3.baseRight.X() },0],{name:'b',size:3}); var t1 = intex3_board.create('text', [-0.3, 0.5 , '<div style="border:solid 1px black;padding:10px;padding-top:5px;padding-bottom:5px;border-radius:10px;background-color:rgba(255,255,255,0.6);font-size:120%;font-weight:bold;box-shadow:3px 3px 5px #303030;">+</div>']); var t2 = intex3_board.create('text', [2.8, 0.5 , '<div style="border:solid 1px black;padding:10px;padding-top:5px;padding-bottom:5px;border-radius:10px;background-color:rgba(255,255,255,0.6);font-size:120%;font-weight:bold;box-shadow:3px 3px 5px #303030;">+</div>']); var t3 = intex3_board.create('text', [1.9, -0.2 , '<div style="border:solid 1px black;padding:10px;padding-top:5px;padding-bottom:5px;border-radius:10px;background-color:rgba(255,255,255,0.6);font-size:120%;font-weight:bold;box-shadow:3px 3px 5px #303030;">-</div>']); </script>`

# Comparaison d'aires | `<div id='box11' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-bottom:20px;margin-top:20px;'></div> <script type='text/javascript'> brd24210 = JXG.JSXGraph.initBoard('box11', {boundingbox: [-0.1, 4.3, 6.5, -1.5], axis: false, showCopyright:false, shownavigation: false,grid:false}); var absAxe = brd24210.create('arrow',[ [-2,0],[6.5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var l8 = brd24210.create('line',[ [1,0.8],[1.9,1.361] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l9 = brd24210.create('line',[ [1,0.4],[5,3.3] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l10 = brd24210.create('line',[ [1,0],[5,3.0] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l11 = brd24210.create('line',[ [1.5,0],[5,2.6] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l12 = brd24210.create('line',[ [2,0],[5,2.2] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l13 = brd24210.create('line',[ [2.5,0],[5,1.8] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l14 = brd24210.create('line',[ [3,0],[5,1.4] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l15 = brd24210.create('line',[ [3.5,0],[5,1.0] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l16 = brd24210.create('line',[ [4,0],[5,0.6] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l17 = brd24210.create('line',[ [4.5,0],[5,0.2] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var f_c1 = brd24210.create('functiongraph', [function (t) { return 0.1*t*t+1; }]); var f = brd24210.create('functiongraph', [function (t) { return 1.1; },1,5],{strokeColor:"black"}); var i1 = brd24210.create('integral', [[1, 5], f],{withLabel: false,fixed:true,fillColor:'green'}); var l1 = brd24210.create('line',[ [1,0],[1,1.1] ], {strokeColor: 'black',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l2 = brd24210.create('line',[ [5,0],[5,1.1] ], {strokeColor: 'black',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0}); var l3 = brd24210.create('line',[ [5,1.1],[5,3.5] ], {strokeColor: 'black',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:2}); var l4 = brd24210.create('arrow',[ [1,-0.5],[5,-0.5] ], {strokeColor: 'black',fixed:true, strokeWidth:1}); var l5 = brd24210.create('arrow',[ [5,-0.5],[1,-0.5] ], {strokeColor: 'black',fixed:true, strokeWidth:1}); var t1 = brd24210.create('text', [2.8,-0.7, 'x - a']); var l6 = brd24210.create('arrow',[ [0.6,0.05],[0.6,1.0] ], {strokeColor: 'black',fixed:true, strokeWidth:1}); var l7 = brd24210.create('arrow',[ [0.6,1.0],[0.6,0.05] ], {strokeColor: 'black',fixed:true, strokeWidth:1}); var t2 = brd24210.create('text', [0,0.5, 'f(a)']); var pa = brd24210.create('point',[function (){ return i1.baseLeft.X() },0],{name:'a',size:3,fixed:true}); var pb = brd24210.create('point',[function (){ return i1.baseRight.X() },0],{name:'x',size:3,fixed:true}); i1.curveLeft.setProperty({visible:false}); i1.curveRight.setProperty({visible:false}); </script>`

# Symétrie | `<div id='jxgboxqs' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:5px;'></div> <script type='text/javascript'> var brdqs = JXG.JSXGraph.initBoard('jxgboxqs', {boundingbox:[-5,5,5,-5], grid:true,axis:true, showCopyright:false,showNavigation:false,pan: { enabled: false} }); brdqs.create('line',[[0,0],[1,1]],{fixed:true}); brdqs.create('point', [2,4],{name:'A'}); brdqs.create('point', ['A.Y()','A.X()']); </script>`

# Exp / Ln | `<div id='box5622' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type="text/javascript"> board = JXG.JSXGraph.initBoard('box5622',{axis:true,boundingbox:[-4,9,9,-4], showCopyright:false,showNavigation:false,pan: { enabled: false} }); <!--boundingbox:[xmin,ymax,xmax,-ymin]--> var fexp = board.create('functiongraph', [function(x){return Math.exp(x);},-4,9],{strokeColor:'blue'}); board.create('line',[[0,0],[1,1]],{strokeColor: 'black', strokeWidth: 1.5,fixed:true}); var p1 = board.create('point', [0, 1], {slideObject: fexp,name:'A'}); var p2 = board.create('point',['A.Y()','A.X()'],{name:'A\'',trace: true,size:0.5}); board.create('segment',[p1,p2],{strokeColor: 'gray', strokeWidth: 1}); </script>`

# Limite LN | `<div id='box1293' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type="text/javascript"> board3 = JXG.JSXGraph.initBoard('box1293',{axis:true,boundingbox:[-2,6,7,-2], showCopyright:false,showNavigation:false,pan: { enabled: false} }); <!--boundingbox:[xmin,ymax,xmax,-ymin]--> board3.create('functiongraph', [function(x){return Math.log(1+x);},-2,7],{strokeColor:'red'}); board3.create('line',[[0,0],[1,1]],{strokeWidth:0.5,fixed:true}); board3.create('text', [1, 2, 'y=x'],{fixed:true}); board3.create('text', [3, 1, 'y=ln(1+x)'],{fixed:true}); </script>`

# Signe LN | `<div id='box1295' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type="text/javascript"> board4 = JXG.JSXGraph.initBoard('box1295',{axis:true,boundingbox:[-1,3,6,-5], showCopyright:false,showNavigation:false,pan: { enabled: false} }); board4.create('functiongraph', [function(x){return Math.log(x);},0,1],{strokeColor:'red',strokeWidth:2}); board4.create('functiongraph', [function(x){return Math.log(x);},1,6],{strokeColor:'blue',strokeWidth:2}); </script>`

# Graphe suite | `<div id='boxrecta1q' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('boxrecta1q', {axis:true, boundingbox:[-1,11,13,-1], showCopyright:false,showNavigation:false,pan: { enabled: false} }); var fo = function(x){ return x+2/(x+1); }; var plot1 = brdre.create('functiongraph',[fo,0, 13],{dash:2}); pointlist = []; for (i=0; i<11;i++) { pointlist.push(brdre.create('point', [i, i+2/(i+1)], { style:3, name:" ",fixed:true})); } </script>`

# Suite récurrence | `<div id='boxrecta1a' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('boxrecta1a', {axis:true, boundingbox:[-0.2,1.2,1.8,-0.2], showCopyright:false,showNavigation:false,pan: { enabled: false} }); var s1 = brdre.create('slider',[[0.2,-0.1],[1.5,-0.1],[0,0,50]],{name:'n',snapWidth:1}); var fo = function(x){ return (3*x+2)/(x+4); }; var plot1 = brdre.create('functiongraph',[fo,-1, 13],{dash:0}); var fi = function(x){return x}; var plot2 = brdre.create('functiongraph',[fi,-1, 13],{dash:0}); var approx = brdre.create('curve',[[0],[0]], {strokeColor:'red',dash:2}); approx.updateDataArray = function() { var i; var m = s1.Value(); this.dataX = []; this.dataY = []; this.dataX[0] = 0.2; this.dataY[0] = 0; for (var i=1;i<=m;i++) { if(i%2==1){ this.dataX.push( this.dataX[i-1] ); this.dataY.push( (3*this.dataX[i-1]+2)/(this.dataX[i-1]+4) ); } else{ this.dataX.push( this.dataY[i-1] ); this.dataY.push( this.dataY[i-1] ); } } this.dataX.push( this.dataX[m] ); this.dataY.push( 0 ); } var approx2 = brdre.create('curve',[[0],[0]], {strokeColor:'red',dash:0}); approx2.updateDataArray = function() { var i; var m = s1.Value(); this.dataX = []; this.dataY = []; this.dataX[0] = 0.2; this.dataY[0] = 0; for (var i=1;i<=m;i++) { if(i%2==1){ this.dataX.push( this.dataX[i-1] ); this.dataY.push( (3*this.dataX[i-1]+2)/(this.dataX[i-1]+4) ); } else{ this.dataX.push( this.dataY[i-1] ); this.dataY.push( this.dataY[i-1] ); } } } var tab = [0.2,0.2,0.619,0.619,0.835,0.835,0.932,0.932,0.972,0.972,0.989,0.989,0.996,0.996,0.998,0.998,0.999,0.999,0.9997,0.9997,0.9998856, 0.9998856,0.999954,0.999954,0.999982,0.999982,0.9999927,0.9999927,0.99999707,0.99999707,0.9999988286,0.9999988286,0.9999995315,0.9999995315, 0.9999998126,0.9999998126,0.999999925,0.999999925,0.99999997,0.99999997,0.999999988,0.999999988,0.9999999952,0.9999999952,0.9999999981, 0.9999999981,0.9999999992,0.9999999992,0.9999999997,0.9999999997,0.9999999999,0.9999999999,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]; var tab2 = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18,19,19,20,20,21,21,22,22,23,23,24,24,25,25,26,26,27,27,28,28,29,29,30,30]; var ph = brdre.create('point',[function(){return tab2[s1.Value()];},0],{visible:false}); var ti = brdre.create('point', [function(){return tab[s1.Value()];} ,0],{name:function(){return "u"+ph.X();} } ); brde.update(); </script>`

# Suite convergente | `<div id='boxrecta1A' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('boxrecta1A', {axis:true, boundingbox:[-1,9,13,-1], showCopyright:false,showNavigation:false}); pointlist = []; for (i=1; i<200;i++) { pointlist.push(brdre.create('point', [i-1,4*Math.cos(Math.PI*i/4)*Math.pow(i,-1.2)+2 ], { style:1, name:" ",fixed:true,size:0.5})); } var aq = brdre.create('point', [0, 0.2],{strokeColor:'blue',fillColor:'blue'}); var bq = brdre.create('point', [0, 4],{strokeColor:'blue',fillColor:'blue'}); brdre.on('move', function(){ aq.moveTo([0, aq.Y()]); bq.moveTo([0, bq.Y()]); }); var cq = brdre.create('point', [200, function(){return bq.Y()} ]); var dq = brdre.create('point', [200, function(){return aq.Y()} ]); var pq = brdre.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: false}); </script>`

# Limite finie fonction | `<div id='boxrecta1A' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('boxrecta1A', {axis:true, boundingbox:[-1,9,13,-1], showCopyright:false,showNavigation:false}); var fo = function(x){ return 4*Math.cos(Math.PI*x/4)/(x+1)+2; }; var plot1 = brdre.create('functiongraph',[fo,0, 500],{dash:0,strokeColor:"black" }); brdre.create('line',[[0,2],[500,2]],{fixed:true,dash:2,strokeColor:"red" }); var aq = brdre.create('point', [0, 0.2],{strokeColor:'blue',fillColor:'blue'}); var bq = brdre.create('point', [0, 4],{strokeColor:'blue',fillColor:'blue'}); brdre.on('move', function(){ aq.moveTo([0, aq.Y()]); bq.moveTo([0, bq.Y()]); }); var cq = brdre.create('point', [200, function(){return bq.Y()} ]); var dq = brdre.create('point', [200, function(){return aq.Y()} ]); var pq = brdre.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: false}); </script>`

# Théorème des gendarmes | `<div id='boxp' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> var brd1 = JXG.JSXGraph.initBoard('boxp', {axis:true, boundingbox:[-1,5,5,-1], showCopyright:false,showNavigation:false,pan: { enabled: false}}); brd1.suspendUpdate(); var fu = function(x){ return 2+0.6*Math.cos(10*x)/x; } var plots = brd1.create('functiongraph',[fu,0,10], {strokeWidth:2,strokeColor:'black'}); var fu2 = function(x){ return 2+1/x; } var plots2 = brd1.create('functiongraph',[fu2,0,10], {strokeWidth:2}); var fu3 = function(x){ return 2-1/x; } var plots3 = brd1.create('functiongraph',[fu3,0,10], {strokeWidth:2}); var seg1 = brd1.create('line', [[0,2], [2,2] ],{strokeColor:'red',dash:1,fixed:true} ); var t1 = brd1.create('text',[2,1.1,'C'],{strokeColor:'blue'}); var t2 = brd1.create('text',[2.2,0.95,'u'],{strokeColor:'blue',strokeSize:0.5}); var t3 = brd1.create('text',[2,3.0,'C'],{strokeColor:'blue'}); var t4 = brd1.create('text',[2.2,2.95,'v'],{strokeColor:'blue',strokeSize:0.5}); var t5 = brd1.create('text',[-0.5,2.5,'C'],{strokeColor:'black'}); var t6 = brd1.create('text',[-0.3,2.45,'f'],{strokeColor:'black',strokeSize:0.5}); brd1.unsuspendUpdate(); </script>`

# Partie entière | `<div id='boxp2' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> JXG.Options.axis.ticks.drawLabels = true; var brd1 = JXG.JSXGraph.initBoard('boxp2', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}}); brd1.suspendUpdate(); var fu21 = function(x){ return Math.floor(x); } var plots1 = brd1.create('functiongraph',[fu21,-5,5], {strokeWidth:2,strokeColor:'blue'}); for(var i=-5;i<6;i++){ brd1.create('point',[i,i],{name:'',strokeColor:'blue',fillColor:'blue',fixed:true}); brd1.create('segment',[ [i+1,i-0.2],[i+1,i+0.2] ],{strokeColor:'blue',fixed:true}); brd1.create('segment',[ [i+1,i-0.2],[i+1.1,i-0.2] ],{strokeColor:'blue',fixed:true}); brd1.create('segment',[ [i+1,i+0.2],[i+1.1,i+0.2] ],{strokeColor:'blue',fixed:true}); } </script>`

# TVI | `<div id='boxp2R' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> JXG.Options.axis.ticks.drawLabels = false; var brd1 = JXG.JSXGraph.initBoard('boxp2R', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}}); brd1.suspendUpdate(); var fu21 = function(x){ return (0.1*x+2.7)*Math.cos(x +1); } var plots1 = brd1.create('functiongraph',[fu21,-5,-4], {strokeWidth:2,strokeColor:'blue'}); var plots2 = brd1.create('functiongraph',[fu21,-4,-3], {strokeWidth:2,strokeColor:'blue'}); var plots3 = brd1.create('functiongraph',[fu21,-3,-2], {strokeWidth:2,strokeColor:'blue'}); var plots4 = brd1.create('functiongraph',[fu21,-2,-1], {strokeWidth:2,strokeColor:'blue'}); var plots5 = brd1.create('functiongraph',[fu21,-1, 0], {strokeWidth:2,strokeColor:'blue'}); var plots6 = brd1.create('functiongraph',[fu21, 0, 1], {strokeWidth:2,strokeColor:'blue'}); var plots7 = brd1.create('functiongraph',[fu21, 1, 2], {strokeWidth:2,strokeColor:'blue'}); var plots8 = brd1.create('functiongraph',[fu21, 2, 3], {strokeWidth:2,strokeColor:'blue'}); var plots9 = brd1.create('functiongraph',[fu21, 3, 4], {strokeWidth:2,strokeColor:'blue'}); var plots10 = brd1.create('functiongraph',[fu21, 4, 5], {strokeWidth:2,strokeColor:'blue'}); var line1 = brd1.create('line',[ [-10,1] , [10,1] ],{strokeColor:'red'}); var t1 = brd1.create('text',[2,function(t){return line1.point1.Y()+0.4;},'y=k'],{strokeColor:'red'}); var i1 = brd1.create('intersection', [line1, plots1, 0],{name:''}); var i2 = brd1.create('intersection', [line1, plots2, 0],{name:''}); var i3 = brd1.create('intersection', [line1, plots3, 0],{name:''}); var i4 = brd1.create('intersection', [line1, plots4, 0],{name:''}); var i5 = brd1.create('intersection', [line1, plots5, 0],{name:''}); var i6 = brd1.create('intersection', [line1, plots6, 0],{name:''}); var i7 = brd1.create('intersection', [line1, plots7, 0],{name:''}); var i8 = brd1.create('intersection', [line1, plots8, 0],{name:''}); var i9 = brd1.create('intersection', [line1, plots9, 0],{name:''}); var i10 = brd1.create('intersection', [line1, plots10, 0],{name:''}); var pt1 = brd1.create('point',[-4,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'a',label: {offset: [-8, -10]}}); var linept1 = brd1.create('segment',[ [-4,-2.3] , [-4,0] ],{strokeColor:'green',dash:1,fixed:true}); var linept2 = brd1.create('segment',[ [-4,-2.3] , [0,-2.3] ],{strokeColor:'green',dash:1,fixed:true}); var pt2 = brd1.create('point',[0,-2.3],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(a)',label: {offset: [-8, -10]}}); var pt3 = brd1.create('point',[4.7,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'b',label: {offset: [-8, -10]}}); var linept3 = brd1.create('segment',[ [4.7,2.8] , [4.7,0] ],{strokeColor:'green',dash:1,fixed:true}); var linept4 = brd1.create('segment',[ [4.7,2.8] , [0,2.8] ],{strokeColor:'green',dash:1,fixed:true}); var pt4 = brd1.create('point',[0,2.8],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(b)',label: {offset: [-8, -10]}}); brd1.unsuspendUpdate(); </script>`

# TVI bijection | `<div id='boxp2R1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> JXG.Options.axis.ticks.drawLabels = false; var brd1 = JXG.JSXGraph.initBoard('boxp2R1', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}}); brd1.suspendUpdate(); var fu21 = function(x){ return (0.4*x+2.7)*Math.cos(0.1*(x-12) )-1.5; } var plots1 = brd1.create('functiongraph',[fu21,-5,5], {strokeWidth:2,strokeColor:'blue'}); var line1 = brd1.create('line',[ [-10,1] , [10,1] ],{strokeColor:'red'}); var t1 = brd1.create('text',[2,function(t){return line1.point1.Y()+0.4;},'y=k'],{strokeColor:'red'}); var i1 = brd1.create('intersection', [line1, plots1, 0],{name:''}); var pt1 = brd1.create('point',[-4,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'a',label: {offset: [-8, -10]}}); var linept1 = brd1.create('segment',[ [-4,-1.5] , [-4,0] ],{strokeColor:'green',dash:1,fixed:true}); var linept2 = brd1.create('segment',[ [-4,-1.5] , [0,-1.5] ],{strokeColor:'green',dash:1,fixed:true}); var pt2 = brd1.create('point',[0,-1.5],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(a)',label: {offset: [-8, -10]}}); var pt3 = brd1.create('point',[4.7,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'b',label: {offset: [-8, -10]}}); var linept3 = brd1.create('segment',[ [4.7,1.9] , [4.7,0] ],{strokeColor:'green',dash:1,fixed:true}); var linept4 = brd1.create('segment',[ [4.7,1.9] , [0,1.9] ],{strokeColor:'green',dash:1,fixed:true}); var pt4 = brd1.create('point',[0,1.9],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(b)',label: {offset: [-8, 15]}}); brd1.unsuspendUpdate(); </script>`

# Histogramme | `<div id='boxa1a' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> JXG.Options.axis.ticks.drawLabels = false; var board = JXG.JSXGraph.initBoard('boxa1a', {boundingbox: [-1, 0.057, 10, -0.005], axis:true,showCopyright:false,showNavigation:false,pan: { enabled: false} } ); board.suspendUpdate(); var aq1 = board.create('point', [1, 0],{visible:false,fixed:true}); var bq1 = board.create('point', [3, 0],{visible:false,fixed:true}); var cq1 = board.create('point', [3, 0.004545454545455 ],{visible:false,fixed:true}); var dq1 = board.create('point', [1, 0.004545454545455 ],{visible:false,fixed:true}); var pq1 = board.create('polygon', [aq1, bq1, cq1, dq1], {borders: {strokeWidth:0},fillColor:'#8E1B77',fillOpacity:0.3,shadow:true }); var aq2 = board.create('point', [3, 0],{visible:false,fixed:true}); var bq2 = board.create('point', [4, 0],{visible:false,fixed:true}); var cq2 = board.create('point', [4, 0.013636363636364 ],{visible:false,fixed:true}); var dq2 = board.create('point', [3, 0.013636363636364 ],{visible:false,fixed:true}); var pq2 = board.create('polygon', [aq2, bq2, cq2, dq2], {borders: {strokeWidth:0},fillColor:'#DA2130',fillOpacity:0.3,shadow:true,fixed:true }); var aq3 = board.create('point', [4, 0],{visible:false,fixed:true}); var bq3 = board.create('point', [5, 0],{visible:false,fixed:true}); var cq3 = board.create('point', [5, 0.018181818181818 ],{visible:false,fixed:true}); var dq3 = board.create('point', [4, 0.018181818181818 ],{visible:false,fixed:true}); var pq3 = board.create('polygon', [aq3, bq3, cq3, dq3], {borders: {strokeWidth:0},fillColor:'#58FA82',fillOpacity:0.3,shadow:true,fixed:true }); var aq4 = board.create('point', [5, 0],{visible:false,fixed:true}); var bq4 = board.create('point', [5.5, 0],{visible:false,fixed:true}); var cq4 = board.create('point', [5.5, 0.054545454545455 ],{visible:false,fixed:true}); var dq4 = board.create('point', [5, 0.054545454545455 ],{visible:false,fixed:true}); var pq4 = board.create('polygon', [aq4, bq4, cq4, dq4], {borders: {strokeWidth:0},fillColor:'#5858FA',fillOpacity:0.3,shadow:true,fixed:true }); var aq5 = board.create('point', [5.5, 0],{visible:false,fixed:true}); var bq5 = board.create('point', [6.5, 0],{visible:false,fixed:true}); var cq5 = board.create('point', [6.5, 0.022727272727273 ],{visible:false,fixed:true}); var dq5 = board.create('point', [5.5, 0.022727272727273 ],{visible:false,fixed:true}); var pq5 = board.create('polygon', [aq5, bq5, cq5, dq5], {borders: {strokeWidth:0},fillColor:'#6E6E6E',fillOpacity:0.3,shadow:true,fixed:true }); var aq6 = board.create('point', [6.5, 0],{visible:false,fixed:true}); var bq6 = board.create('point', [8.5, 0],{visible:false,fixed:true}); var cq6 = board.create('point', [8.5, 0.004545454545455 ],{visible:false,fixed:true}); var dq6 = board.create('point', [6.5, 0.004545454545455 ],{visible:false,fixed:true}); var pq6 = board.create('polygon', [aq6, bq6, cq6, dq6], {borders: {strokeWidth:0},fillColor:'#AEB404',fillOpacity:0.3,shadow:true,fixed:true }); board.create('text',[1.4,-0.0017,'[120;140['],{fixed:true,fontSize:7}); board.create('text',[3.00,-0.0017,'[140;150['],{fixed:true,fontSize:7}); board.create('text',[4.00,-0.0017,'[150;160['],{fixed:true,fontSize:7}); board.create('text',[5.00,-0.0027,'[160;165['],{fixed:true,fontSize:7}); board.create('text',[5.55,-0.0012,'[165;175['],{fixed:true,fontSize:7}); board.create('text',[7.00,-0.0017,'[175;195['],{fixed:true,fontSize:7}); board.create('text',[1.4,0.00555,'0,00455'],{fixed:true,fontSize:7}); board.create('text',[3.00,0.01464,'0,01364'],{fixed:true,fontSize:7}); board.create('text',[4.00,0.01918,'0,01818'],{fixed:true,fontSize:7}); board.create('text',[5.00,0.05555,'0,05455'],{fixed:true,fontSize:7}); board.create('text',[5.55,0.02272,'0,02272'],{fixed:true,fontSize:7}); board.create('text',[7.00,0.00555,'0,00455'],{fixed:true,fontSize:7}); board.unsuspendUpdate(); </script>`

# Loi normale | `<div id="Fd45d7188c" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var intex1_board2 = JXG.JSXGraph.initBoard('Fd45d7188c', {boundingbox: [110, 1.2, 200, -0.1], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = intex1_board2.create('arrow',[ [-5,-0.005],[200,-0.005] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var intex1_c1 = intex1_board2.create('functiongraph', [function (x) { return Math.pow(2,(-0.01*((x-160)*(x-160)))); }]); var pinf2 = intex1_board2.create('point',[153,0],{name:'a'}); var psup2 = intex1_board2.create('point',[172,0],{name:'b'}); intex1_board2.on('move', function(){ pinf2.moveTo([pinf2.X(),0]); psup2.moveTo([psup2.X(),0]); }); var intex1_i1 = intex1_board2.create('integral', [[function(){return pinf2.X()},function(){return psup2.X()} ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'}); intex1_i1.curveLeft.setProperty({visible:false}); intex1_i1.curveRight.setProperty({visible:false}); for(var i=120;i<201;i=i+10){ intex1_board2.create('segment',[ [i,-0.02] , [i,0.02] ],{strokeColor:'black',fixed:true}); intex1_board2.create('text',[i-3,-0.05,i],{fixed:true}); } </script>`

# Binomiale | `<div id='box12Ax' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script type='text/javascript'> var brdre = JXG.JSXGraph.initBoard('box12Ax', {axis:true, boundingbox:[-5,0.2,140,-0.05], showCopyright:false,showNavigation:false,pan:{enabled:false}}); for(var k=0;k<200;k=k+50){ brdre.create('text',[k-2,-0.015,k],{fixed:true}); brdre.create('segment',[[k,-0.005],[k,0.005]],{fixed:true,strokeColor:'black'}); } var n = brdre.create('slider',[[10,0.18],[80,0.18],[1,2,140]], {name:'n',snapWidth:1}); var prob = brdre.create('slider',[[10,0.15],[80,0.15],[0,.5,1]], {name:'p',snapWidth:0.01}); var sc = brdre.create('curve',[[0],[0]],{dash:0,strokeWidth:1,strokeColor:'red'}); sc.updateDataArray = function() { this.dataX = []; this.dataY = []; for (var i=0;i<=n.Value();i++) { this.dataX.push(i); this.dataY.push( binomial(n.Value(),i,prob.Value() )); this.dataX.push(i); this.dataY.push( 0 ); } } function binomial(n, k, p) { var coeff = 1; for (var x = n - k + 1; x < n+1; x++) { coeff *= x; } for (x = 1; x < k+1; x++) { coeff /= x; } var p1=1; var p2=1; for (x=0; x < k; x++) { p1=p1*p; } for (x=0; x < n-k; x++) { p2=p2*(1-p); } return coeff*p1*p2; } </script>`

# Loi normale centrée réduite | `<div id="d4boxF" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var intex1_board00 = JXG.JSXGraph.initBoard('d4boxF', {boundingbox: [-4, 0.5, 4, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = intex1_board00.create('arrow',[ [-5,0.00],[4,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex1_board00.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true}); var intex1_c1 = intex1_board00.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]); var pinfA = intex1_board00.create('point',[-1.2,0],{name:'a'}); var psupA = intex1_board00.create('point',[1,0],{name:'b'}); intex1_board00.on('move', function(){ pinfA.moveTo([pinfA.X(),0]); psupA.moveTo([psupA.X(),0]); }); var intex1_i1A = intex1_board00.create('integral', [[function(){return pinfA.X()},function(){return psupA.X()} ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'}); intex1_i1A.curveLeft.setProperty({visible:false}); intex1_i1A.curveRight.setProperty({visible:false}); for(var i=-4;i<4;i=i+0.5){ intex1_board00.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1}); intex1_board00.create('text',[i-0.2,-0.02,i],{fixed:true}); } var t1 = intex1_board00.create('text',[function(){return (pinfA.X()+psupA.X())/2-0.5;},0.2,' P(a< X < b) '],{fixed:true}); var t2 = intex1_board00.create('text',[-3.5,0.45,function(){return 'P( a < X < b ) = '+intex1_i1A.Value(); }],{strokeColor:'blue'}); </script>`

# Loi normale | `<div id="c12boxFs" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var boardGo = JXG.JSXGraph.initBoard('c12boxFs', {boundingbox: [-4.5, 0.5, 4.5, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = boardGo.create('arrow',[ [-5,0.00],[4.5,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = boardGo.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true}); var c1 = boardGo.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]); var tmobileA = boardGo.create('slider',[[-2,0.45],[2,0.45],[0,1,5]],{name:'t',snapWidth:0.01}); var i1 = boardGo.create('integral', [[function(){return -tmobileA.Value();}, function(){return tmobileA.Value();} ] , c1],{withLabel: false,fixed:true,fillColor:'blue',label:{strokeColor:'blue',offset: [-60, -40],fontSize:10,fixed:true} }); i1.curveLeft.setProperty({visible:false}); i1.curveRight.setProperty({visible:false}); var i2 = boardGo.create('integral', [[-4.2, function(){return -tmobileA.Value();} ] , c1],{withLabel: false,fixed:true,fillColor:'green',label:{strokeColor:'green',offset: [-50, 10],fontSize:10} }); i2.curveLeft.setProperty({visible:false}); i2.curveRight.setProperty({visible:false}); var i3 = boardGo.create('integral', [[ function(){return tmobileA.Value();},4.2 ] , c1],{withLabel: false,fixed:true,fillColor:'green',label:{strokeColor:'green',offset: [-80, -80],fontSize:10} }); i3.curveLeft.setProperty({visible:false}); i3.curveRight.setProperty({visible:false}); boardGo.create('text',[-4,0.3,function(){var p = Math.floor(1000000*i1.Value())/1000000;var r = Math.round((-(p-1)/2)*1000000)/1000000;return ' 1-2P( X > t ) = 1-2x'+Math.round(100000*r)/100000+' = '+Math.round(100000*p)/100000+' ';}],{fixed:true,strokeColor:'green'}); boardGo.create('text',[-4,0.35,function(){var p = Math.floor( i1.Value()*1000000 )/1000000;return ' P( -t < X < t )='+Math.round(100000*p)/100000+' ';}],{fixed:true,strokeColor:'blue'}); boardGo.create('text',[-4,0.25,function(){var p = Math.floor( i1.Value()*1000000 )/1000000;return ' P( X > t )= P( X < -t ) ='+Math.round((-(p-1)/2)*1000000)/1000000+' ';}],{fixed:true,strokeColor:'black'}); for(var i=-4;i<4;i=i+0.5){ boardGo.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1}); boardGo.create('text',[i-0.2,-0.02,i],{fixed:true}); } </script>`

# Loi normale | `<div id="d4boxFt" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var intex1_board5 = JXG.JSXGraph.initBoard('d4boxFt', {boundingbox: [-4, 0.5, 4, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = intex1_board5.create('arrow',[ [-5,0.00],[4,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex1_board5.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true}); var intex1_c1 = intex1_board5.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]); var pinfC = intex1_board5.create('slider',[[-3,0.47],[2,0.47],[-4,-1,5]],{name:'a',snapWidth:0.1}); var psupC = intex1_board5.create('slider',[[-3,0.42],[2,0.42],[-4,1,5]],{name:'b',snapWidth:0.1}); var intex1_i1S = intex1_board5.create('integral', [[function(){return pinfC.Value()},function(){return psupC.Value()} ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'}); intex1_i1S.curveLeft.setProperty({visible:false}); intex1_i1S.curveRight.setProperty({visible:false}); for(var i=-4;i<4;i=i+0.5){ intex1_board5.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1}); intex1_board5.create('text',[i-0.2,-0.02,i],{fixed:true}); } intex1_board5.create('text',[-4,0.35,function(){var p = Math.floor( intex1_i1S.Value()*1000000 )/1000000;return ' P( a < X < b )='+Math.round(100000*p)/100000+' ';}],{fixed:true,strokeColor:'blue'}); var t1 = intex1_board5.create('text',[function(){return (pinfC.X()+psupC.X())/2-0.5;},0.2,' P(a< X < b) '],{fixed:true}); </script>`

# Loi normale | `<div id="ed4BboxFtyy" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var intex1_board35 = JXG.JSXGraph.initBoard('ed4BboxFtyy', {boundingbox: [-10, 0.8, 10, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = intex1_board35.create('arrow',[ [-10,0.00],[10,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex1_board35.create('arrow',[ [0,-1],[0,0.8] ], {strokeColor: 'black',fixed:true}); var mu = intex1_board35.create('slider',[[-9.5,0.67],[6,0.67],[-5,1,5]],{name:'μ',snapWidth:0.01}); var sigma = intex1_board35.create('slider',[[-9.5,0.62],[6,0.62],[0.1,1,5]],{name:'σ',snapWidth:0.01}); var intex1_c1 = intex1_board35.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*( x-mu.Value() )*( x-mu.Value() )/(sigma.Value()*sigma.Value() ) ) )/sigma.Value(); }],{strokeWidth:2}); for(var i=-9;i<10;i=i+1){ intex1_board35.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1}); intex1_board35.create('text',[i-0.2,-0.03,i],{fixed:true}); } </script>`

# Loi normal | `<div id="d4boxFtyyXF" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var intex1_board3 = JXG.JSXGraph.initBoard('d4boxFtyyXF', {boundingbox: [-4, 0.5, 4, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = intex1_board3.create('arrow',[ [-5,0.00],[4,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex1_board3.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true}); var intex1_c1 = intex1_board3.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]); var intex1_i1 = intex1_board3.create('integral', [[-1.2,1.2], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'}); intex1_i1.curveLeft.setProperty({visible:false}); intex1_i1.curveRight.setProperty({visible:false}); var t1 = intex1_board3.create('point',[-1.2,0],{name:function(){return '-u_{α}'},fixed:true,strokeColor:'black',fillColor:'black',label:{offset:[-5,-15]}}); var t2 = intex1_board3.create('point',[1.2,0],{name:function(){return '+u_{α}'},fixed:true,strokeColor:'black',fillColor:'black',label:{offset:[-5,-15]}}); var t3 = intex1_board3.create('text',[-3.8,0.2,'P( X < -u_{α} ) = α/2'],{fixed:true,strokeColor:'black'}); var t4 = intex1_board3.create('text',[1.7,0.2,'P( X > u_{α} ) = α/2'],{fixed:true,strokeColor:'black'}); var s1 = intex1_board3.create('arrow',[ [-2.8,0.18],[-1.5,0.05] ],{dash:1,strokeColor:'black',strokeWidth:1.5,fixed:true}); var s2 = intex1_board3.create('arrow',[ [2.8,0.18],[1.5,0.05] ],{dash:1,strokeColor:'black',strokeWidth:1.5,fixed:true}); var t5 = intex1_board3.create('text',[-1.2,0.45,' P(u_{α} ≤ X ≤ u_{α} ) = 1 - α '],{fixed:true,strokeColor:'black'}); var s3 = intex1_board3.create('arrow',[ [-0.6,0.43],[-0.2,0.3] ],{dash:1,strokeColor:'black',strokeWidth:1.5,fixed:true}); </script>`

# Loi normal | `<div id="Fed4BboxFtyy" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var intex1_board35 = JXG.JSXGraph.initBoard('Fed4BboxFtyy', {boundingbox: [-10, 0.8, 10, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var absAxe = intex1_board35.create('arrow',[ [-10,0.00],[10,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true}); var absOrd = intex1_board35.create('arrow',[ [0,-1],[0,0.8] ], {strokeColor: 'black',fixed:true}); var mu1 = intex1_board35.create('slider',[[-9.5,0.77],[6,0.77],[-5,1,5]],{name:'μ',snapWidth:0.1}); var sigma1 = intex1_board35.create('slider',[[-9.5,0.72],[6,0.72],[0.1,1,5]],{name:'σ',snapWidth:0.1}); var numS = intex1_board35.create('slider',[[-9.5,0.67],[6,0.67],[1,1,3]],{name:'nb sigma',snapWidth:0.1}); var intex1_c1 = intex1_board35.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*( x-mu1.Value() )*( x-mu1.Value() )/(sigma1.Value()*sigma1.Value() ) ) )/sigma1.Value(); }],{strokeWidth:2}); var a = function(){ return mu1.Value()-numS.Value()*sigma1.Value(); } var b = function(){ return mu1.Value()+numS.Value()*sigma1.Value(); } var intex1_i1V = intex1_board35.create('integral', [[a, b ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue',label:{offset:[-10,-20]}}); intex1_i1V.curveLeft.setProperty({visible:false}); intex1_i1V.curveRight.setProperty({visible:false}); for(var i=-9;i<10;i=i+1){ intex1_board35.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1}); intex1_board35.create('text',[i-0.2,-0.03,i],{fixed:true}); } intex1_board35.create('text',[-9.5,0.5,function(){ var n = Math.round(10*numS.Value())/10;return ' P( μ-'+n+'σ ≤ X ≤ μ+'+n+'σ) = '+intex1_i1V.Value();}],{strokeColor:'blue'}); </script>`

# Espace | `<div id="butter" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var board35 = JXG.JSXGraph.initBoard('butter', {boundingbox: [-20, 43, 20.2, -5], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var rayon = 4; var sli = board35.create('slider',[[-15,5],[-15,20],[8.8,15,30]],{name:'S',snapWidth:0.01,label:{fontSize:0}}); var a1 = board35.create('point',[-19.5,-2.5],{fixed:true,visible:false}); var a2 = board35.create('point',[-10,2.3],{fixed:true,visible:false}); var a3 = board35.create('point',[11.5,-2.5],{fixed:true,visible:false}); var a4 = board35.create('point',[20.0,2.3],{fixed:true,visible:false}); var s1 = board35.create('segment',[ a1 , a2 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var s2 = board35.create('segment',[ a1 , a3 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var s3 = board35.create('segment',[ a3 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var s31 = board35.create('segment',[ a2 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var c1 = board35.create('functiongraph', [function (x) { var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) );return -0.3*Math.sqrt(0.3*r*r-0.3*x*x); }],{strokeWidth:1}); var c2 = board35.create('functiongraph', [function (x) { var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) );return 0.20*Math.sqrt(0.3*r*r-0.3*x*x); }],{strokeWidth:1,dash:2}); var c3 = board35.create('functiongraph', [function (x) { return rayon-0.3*Math.sqrt(16-x*x); }],{strokeWidth:1}); var c4 = board35.create('functiongraph', [function (x) { return rayon+0.3*Math.sqrt(16-x*x); }],{strokeWidth:1,dash:2}); var i1 = board35.create('integral', [[function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) );return -r;}, function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) ); return r;} ], c1],{withLabel: false,fixed:true,fillColor:'blue',label:{offset:[-4,4]},fillOpacity:0.2}); i1.curveLeft.setProperty({visible:false}); i1.curveRight.setProperty({visible:false}); var cercle = board35.create('circle',[[0,rayon],[0,0]],{fixed:true}); var Pi = board35.create('point',[function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) ); return -r;},0],{name:'I',size:0.2,label:{offset:[-10,-10]}}); var Pj = board35.create('point',[function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) ); return r;},0],{name:'J',size:0.2,label:{offset:[-10,-10]},visible:false}); var Ps = board35.create('point',[0,function(){ return sli.Value();}],{name:'S',size:0.2,label:{offset:[10,10]},visible:true}); var s4 = board35.create('segment',[Pi,Ps],{fixed:true,strokeColor:'black',strokeWidth:1}); var s5 = board35.create('segment',[Pj,Ps],{fixed:true,strokeColor:'black',strokeWidth:1}); var Pa = board35.create('intersection', [cercle, s4, 0],{name:'A',size:0.2,label:{offset:[-10,10]},visible:true}); var pq = board35.create('polygon', [Pi, Ps, Pj], {borders: {strokeWidth:0},fillColor:'blue',fillOpacity:0.2 }); var s3 = board35.create('segment',[ [0,0] , Ps ],{strokeColor:'black',strokeWidth:0.5,dash:2}); var Po = board35.create('point',[0,4],{name:'O',label:{fontSize:10,offset:[5,1]},size:0.2,fixed:true}); var Ph = board35.create('point',[0,0],{name:'H',label:{fontSize:10,offset:[5,-8]},size:0.2,fixed:true}); </script>`

# Espace | `<div id="cream" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div> <script type="text/javascript"> var board35 = JXG.JSXGraph.initBoard('cream', {boundingbox: [-20, 43, 20, -5], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}}); var rayon = 4; var sli = board35.create('slider',[[-15,20],[-15,5],[4.1,5,12.5]],{name:'I',snapWidth:0.01,label:{fontSize:0}}); var a1 = board35.create('point',[-19.5,-2.5],{fixed:true,visible:false}); var a2 = board35.create('point',[-14,1],{fixed:true,visible:false}); var a3 = board35.create('point',[14,-2.5],{fixed:true,visible:false}); var a4 = board35.create('point',[19.5,1],{fixed:true,visible:false}); var s1 = board35.create('segment',[ a1 , a2 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var s2 = board35.create('segment',[ a1 , a3 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var s3 = board35.create('segment',[ a3 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var s31 = board35.create('segment',[ a2 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1}); var c1 = board35.create('functiongraph', [function (x) { return -0.3*Math.sqrt(0.3*sli.Value()*sli.Value()-0.3*x*x); }],{strokeWidth:1}); var c2 = board35.create('functiongraph', [function (x) { return 0.3*Math.sqrt(0.3*sli.Value()*sli.Value()-0.3*x*x); }],{strokeWidth:1,dash:2}); var c3 = board35.create('functiongraph', [function (x) { return rayon-0.3*Math.sqrt(16-x*x); }],{strokeWidth:1}); var c4 = board35.create('functiongraph', [function (x) { return rayon+0.3*Math.sqrt(16-x*x); }],{strokeWidth:1,dash:2}); var i1 = board35.create('integral', [[function(){return -sli.Value();}, function(){return sli.Value();} ], c1],{withLabel: false,fixed:true,fillColor:'blue',label:{offset:[-4,4]},fillOpacity:0.2}); i1.curveLeft.setProperty({visible:false}); i1.curveRight.setProperty({visible:false}); var cercle = board35.create('circle',[[0,rayon],[0,0]],{fixed:true}); var Pi = board35.create('point',[function(){return -sli.Value();},0],{name:'I',size:0.2,label:{offset:[-10,-10]}}); var Pj = board35.create('point',[function(){return sli.Value();},0],{name:'J',size:0.2,label:{offset:[-10,-10]},visible:false}); var Pa = board35.create('point',[function(){return -2*sli.Value()*rayon*rayon/(rayon*rayon+sli.Value()*sli.Value());},function(){return 2*rayon*sli.Value()*sli.Value()/(rayon*rayon+sli.Value()*sli.Value());}],{name:'A',size:0.2,label:{offset:[-10,10]},visible:true}); var Ps = board35.create('point',[0,function(){ return Pa.Y()*Pi.X()/(Pi.X()-Pa.X());}],{name:'S',size:0.2,label:{offset:[10,10]},visible:true}); var s4 = board35.create('segment',[Pi,Ps],{fixed:true,strokeColor:'black',strokeWidth:1}); var s5 = board35.create('segment',[Pj,Ps],{fixed:true,strokeColor:'black',strokeWidth:1}); var pq = board35.create('polygon', [Pi, Ps, Pj], {borders: {strokeWidth:0},fillColor:'blue',fillOpacity:0.2 }); var s3 = board35.create('segment',[ [0,0] , Ps ],{strokeColor:'black',strokeWidth:0.5,dash:2}); var Po = board35.create('point',[0,4],{name:'O',label:{fontSize:10,offset:[5,1]},size:0.2,fixed:true}); var Ph = board35.create('point',[0,0],{name:'H',label:{fontSize:10,offset:[5,-8]},size:0.2,fixed:true}); </script>`

# Cube | `<div id='bb1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var brdqu = JXG.JSXGraph.initBoard('bb1', {boundingbox: [0, 6.5, 7.5, 0], showCopyright:false, shownavigation: false,grid:false,pan:{enabled:false}}); var pA = brdqu.create('point',[2.5,2.0],{fixed:true,name:'A',label:{offset:[-3,-15]},strokeColor:'black',fillColor:'black'}); var pB = brdqu.create('point',[0.5,0.5],{fixed:true,name:'B',label:{offset:[-15,-10]},strokeColor:'black',fillColor:'black'}); var pC = brdqu.create('point',[4.5,0.5],{fixed:true,name:'C',label:{offset:[15,-10]},strokeColor:'black',fillColor:'black'}); var pD = brdqu.create('point',[6.5,2.0],{fixed:true,name:'D',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'}); var pE = brdqu.create('point',[2.5,6.0],{fixed:true,name:'E',label:{offset:[-18,0]},strokeColor:'black',fillColor:'black'}); var pF = brdqu.create('point',[0.5,4.5],{fixed:true,name:'F',label:{offset:[-15,0]},strokeColor:'black',fillColor:'black'}); var pG = brdqu.create('point',[4.5,4.5],{fixed:true,name:'G',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'}); var pH = brdqu.create('point',[6.5,6.0],{fixed:true,name:'H',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'}); var aAB = brdqu.create('segment',[pA,pB],{strokeColor:'black',strokeWidth:1,dash:2}); var aAD = brdqu.create('segment',[pA,pD],{strokeColor:'black',strokeWidth:1,dash:2}); var aAE = brdqu.create('segment',[pA,pE],{strokeColor:'black',strokeWidth:1,dash:2}); var aBC = brdqu.create('segment',[pB,pC],{strokeColor:'black',strokeWidth:1,dash:0}); var aBF = brdqu.create('segment',[pB,pF],{strokeColor:'black',strokeWidth:1,dash:0}); var aCG = brdqu.create('segment',[pC,pG],{strokeColor:'black',strokeWidth:1,dash:0}); var aCD = brdqu.create('segment',[pC,pD],{strokeColor:'black',strokeWidth:1,dash:0}); var aDH = brdqu.create('segment',[pD,pH],{strokeColor:'black',strokeWidth:1,dash:0}); var aFG = brdqu.create('segment',[pF,pG],{strokeColor:'black',strokeWidth:1,dash:0}); var aFE = brdqu.create('segment',[pF,pE],{strokeColor:'black',strokeWidth:1,dash:0}); var aHG = brdqu.create('segment',[pH,pG],{strokeColor:'black',strokeWidth:1,dash:0}); var aHE = brdqu.create('segment',[pH,pE],{strokeColor:'black',strokeWidth:1,dash:0}); var pI = brdqu.create('midpoint',[pA,pB],{fixed:true,name:'I',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue'}); var pJ = brdqu.create('midpoint',[pE,pH],{fixed:true,name:'J',label:{offset:[0,13]},strokeColor:'blue',fillColor:'blue'}); var pK = brdqu.create('midpoint',[pC,pB],{fixed:true,name:'K',label:{offset:[0,-15]},strokeColor:'blue',fillColor:'blue'}); var pL = brdqu.create('midpoint',[pC,pG],{fixed:true,name:'L',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue'}); </script>`

# Cube / Plan | `<div id='bb110' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var brdqu = JXG.JSXGraph.initBoard('bb110', {boundingbox: [0, 6.5, 7.5, 0], showCopyright:false, shownavigation: false,grid:false,pan:{enabled:false}}); var pA = brdqu.create('point',[2.5,2.0],{fixed:true,name:'A',label:{offset:[-3,-15]},strokeColor:'black',fillColor:'black'}); var pB = brdqu.create('point',[0.5,0.5],{fixed:true,name:'B',label:{offset:[-15,-10]},strokeColor:'black',fillColor:'black'}); var pC = brdqu.create('point',[4.5,0.5],{fixed:true,name:'C',label:{offset:[15,-10]},strokeColor:'black',fillColor:'black'}); var pD = brdqu.create('point',[6.5,2.0],{fixed:true,name:'D',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'}); var pE = brdqu.create('point',[2.5,6.0],{fixed:true,name:'E',label:{offset:[-18,0]},strokeColor:'black',fillColor:'black'}); var pF = brdqu.create('point',[0.5,4.5],{fixed:true,name:'F',label:{offset:[-15,0]},strokeColor:'black',fillColor:'black'}); var pG = brdqu.create('point',[4.5,4.5],{fixed:true,name:'G',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'}); var pH = brdqu.create('point',[6.5,6.0],{fixed:true,name:'H',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'}); var aAB = brdqu.create('segment',[pA,pB],{strokeColor:'black',strokeWidth:1,dash:2}); var aAD = brdqu.create('segment',[pA,pD],{strokeColor:'black',strokeWidth:1,dash:2}); var aAE = brdqu.create('segment',[pA,pE],{strokeColor:'black',strokeWidth:1,dash:2}); var aBC = brdqu.create('segment',[pB,pC],{strokeColor:'black',strokeWidth:1,dash:0}); var aBF = brdqu.create('segment',[pB,pF],{strokeColor:'black',strokeWidth:1,dash:0}); var aCG = brdqu.create('segment',[pC,pG],{strokeColor:'black',strokeWidth:1,dash:0}); var aCD = brdqu.create('segment',[pC,pD],{strokeColor:'black',strokeWidth:1,dash:0}); var aDH = brdqu.create('segment',[pD,pH],{strokeColor:'black',strokeWidth:1,dash:0}); var aFG = brdqu.create('segment',[pF,pG],{strokeColor:'black',strokeWidth:1,dash:0}); var aFE = brdqu.create('segment',[pF,pE],{strokeColor:'black',strokeWidth:1,dash:0}); var aHG = brdqu.create('segment',[pH,pG],{strokeColor:'black',strokeWidth:1,dash:0}); var aHE = brdqu.create('segment',[pH,pE],{strokeColor:'black',strokeWidth:1,dash:0}); var pI = brdqu.create('midpoint',[pA,pB],{fixed:true,name:'I',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8}); var pJ = brdqu.create('midpoint',[pE,pH],{fixed:true,name:'J',label:{offset:[0,13]},strokeColor:'blue',fillColor:'blue',size:0.8}); var pK = brdqu.create('midpoint',[pC,pB],{fixed:true,name:'K',label:{offset:[0,-15]},strokeColor:'blue',fillColor:'blue',size:0.8}); var pL = brdqu.create('midpoint',[pC,pG],{fixed:true,name:'L',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8}); var pM = brdqu.create('midpoint',[pH,pG],{fixed:true,name:'',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8}); var pN = brdqu.create('midpoint',[pA,pE],{fixed:true,name:'',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8}); var pol = brdqu.create('polygon',[pI,pN,pJ,pM,pL,pK]); var lFD = brdqu.create('line',[pF,pD],{dash:2,strokeWidth:1,strokeColor:'red'}); var pInt = brdqu.create('point',[3.50,3.25],{fixed:true,name:'M',label:{offset:[15,0]},strokeColor:'red',fillColor:'red',size:1.0}); </script>`

# Signe fonction affine | `<div id='boxAffine' class='jxgbox' style='width:500px; height:500px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> <script> var brd1 = JXG.JSXGraph.initBoard('boxAffine', {axis:true, boundingbox:[-6,6,6,-6], showCopyright:false,showNavigation:false,pan: { enabled: false}}); var a = brd1.create('slider',[[-5.5,4],[1,4],[-4,1,4]], {name:'a',snapWidth:0.1}); var b = brd1.create('slider',[[-5.5,3],[1,3],[-4,1,4]], {name:'b',snapWidth:0.1}); var fu = function(x){ return a.Value()*x+b.Value(); } var plotG = brd1.create('functiongraph',[fu,-6,function(){return -b.Value()/a.Value();}], {strokeWidth:4,strokeColor:function(){ var coul = 'blue';if(a.Value()<0){coul = 'red';}return coul; } }); var plotD = brd1.create('functiongraph',[fu,function(){return -b.Value()/a.Value();},6], {strokeWidth:4,strokeColor:function(){ var coul = 'red';if(a.Value()<0){coul = 'blue';}return coul; } }); var text1 = brd1.create('text',[-5.5,2,function(){var s = -b.Value()/a.Value();return "-b/a = "+s;}],{fontSize:20}); </script>`

# Arbre probas | `<div id='bbProbas' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div> <script> var board = JXG.JSXGraph.initBoard('bbProbas', {boundingbox: [-12, 10, 8, -10], showCopyright:false,showNavigation:false,pan:{enabled:false}}); var s1 = board.create('segment',[[-9,0],[-4,4]],{fixed:true}); var s2 = board.create('segment',[[-9,0],[-4,-4]],{fixed:true}); var s3 = board.create('segment',[[-3,4.5],[2,8]],{fixed:true}); var s4 = board.create('segment',[[-3,3.5],[2,1]],{fixed:true}); var s5 = board.create('segment',[[-3,-4.5],[2,-8]],{fixed:true}); var s6 = board.create('segment',[[-3,-3.5],[2,-1]],{fixed:true}); var t1 = board.create('text',[-3.7,4.2,'R'],{fixed:true}); var t2 = board.create('text',[-3.7,-3.8,'R'],{fixed:true}); var t21 = board.create('text',[-3.7,-3.4,'–'],{fixed:true}); var t3 = board.create('text',[2.3, 8.2,'J'],{fixed:true}); var t4 = board.create('text',[2.3, 1.2,'J'],{fixed:true}); var t41 = board.create('text',[2.3,1.6,'–'],{fixed:true}); var t5 = board.create('text',[2.3, -7.8,'J'],{fixed:true}); var t51 = board.create('text',[2.3,-7.4,'–'],{fixed:true}); var t6 = board.create('text',[2.3, -0.8,'J'],{fixed:true}); var p1 = board.create('text',[-7, 3.1,'0,4'],{fixed:true,strokeColor:'red'}); var p2 = board.create('text',[-7, -2.8,'0,6'],{fixed:true,strokeColor:'red'}); var p3 = board.create('text',[-1, 7.6,'0,25'],{fixed:true,strokeColor:'red'}); var p4 = board.create('text',[-1, 1.8,'0,75'],{fixed:true,strokeColor:'red'}); var p5 = board.create('text',[-1, -1.5,'x'],{fixed:true,strokeColor:'red'}); var p6 = board.create('text',[-1, -6.5,'1-x'],{fixed:true,strokeColor:'red'}); </script>`