{"id":10021,"date":"2025-09-18T09:07:13","date_gmt":"2025-09-18T07:07:13","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=10021"},"modified":"2025-09-18T09:07:13","modified_gmt":"2025-09-18T07:07:13","slug":"loterie-simple","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=10021","title":{"rendered":"Loterie simple"},"content":{"rendered":"<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraph.css\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.11.1\/distrib\/jsxgraphcore.js\"><\/script>\r\n  <script async src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-chtml.js\" id=\"MathJax-script\"><\/script>\r\n\r\n<style>\r\n  body { font-family: sans-serif; }\r\n  #boxTree, #boxChart { border: 1px solid #ccc; margin: 5px; }\r\n<\/style>\r\n<div style=\"margin:0px 0px 0px 150px;\">\r\n\t<div id=\"boxTree\" style=\"width:400px;height:300px;display:inline-block;\"><\/div>\r\n\t<div id=\"boxChart\" style=\"width:400px;height:300px;display:inline-block;\"><\/div>\r\n<\/div>\r\n<script>\r\n\r\nJXG.Options.text.useMathJax = true;\r\n\/\/ --- Board 1 : Arbre probabiliste\r\nconst boardTree = JXG.JSXGraph.initBoard('boxTree', {\r\n    boundingbox: [-1, 3.5, 5, -1],\r\n\taxis: false,\r\n\tshowNavigation: false,\r\n    showCopyright:false\r\n});\r\n boardTree.renderer.container.style.backgroundColor = 'gainsboro';\r\n \r\nconst simul = boardTree.create('text',[-1,3,` <div style=\"margin: 10px;\"> <button onclick=\"startSimulation()\"><span style=\"color:#AE181E;\">GO<\/span><\/button><\/div>`],{fixed:true});\r\n \r\n const sl0 = boardTree.create('text', [3.5, 3.25, '\\\\(\\\\textrm{Loterie simple}\\\\)'], { fixed: true, highlight: false,strokeColor:\"#AE181E\" });\r\nconst pvalt0 = boardTree.create('text',[-0.5,-0.5,'\\\\(p =  \\\\)'], {fixed:true});\r\nconst pval0 = boardTree.create('text',[0,-0.5,'<input type=\"number\" id=\"pval\" name=\"proba\" min=\"0\" max=\"1\" value=\"0.5\" step=\"0.01\" style=\"width: 50px\"\/>'], {fixed:true});\r\nconst nvalt0 = boardTree.create('text',[1.5,-0.5,'\\\\(N=  \\\\)'], {fixed:true});\r\nconst nval0 = boardTree.create('text',[2,-0.5,'<input type=\"number\" id=\"nval\" name=\"proba\" min=\"1\" max=\"10000\" value=\"10\" step=\"10\" style=\"width: 50px\"\/>'], {fixed:true});\r\nconst vvalt0 = boardTree.create('text',[3.5,-0.5,'\\\\(V=  \\\\)'], {fixed:true});\r\nconst vval0 = boardTree.create('text',[4,-0.5,'<input type=\"number\" id=\"vval\" name=\"proba\" min=\"10\" max=\"1000\" value=\"100\" step=\"10\" style=\"width: 45px\"\/>'], {fixed:true});\r\n\r\nconst A = boardTree.create('point',[0,1.5],{name:'',size:7,visible:true,label:{autoPosition: true, offset:[-2, 2]},shadow:true,color:'cadetblue',fixed:true,highlight:false});\r\nconst lot0 = boardTree.create('text',[0,1.475,'\\\\(l\\\\)'],{highlight:false,visible:true,anchorX:'middle',anchorY:'middle',fixed:true,highlight:false});\r\n\r\nconst X = boardTree.create('point', [3, 2.5], {name:'',size:7,visible:true,label:{autoPosition: true, offset:[-2, 2]},shadow:true,color:'lightblue',fixed:true,highlight:false});\r\nconst lot1 = boardTree.create('text',[4,2.5,'\\\\(x\\\\)'],{highlight:false,visible:true,anchorX:'middle',anchorY:'middle',fixed:true,highlight:false});\r\nconst Y = boardTree.create('point', [3, 0.5], {name:'',size:7,visible:true,label:{autoPosition: true, offset:[-2, 2]},shadow:true,color:'lightgreen',fixed:true,highlight:false});\r\nconst lot2 = boardTree.create('text',[4,0.5,'\\\\(y\\\\)'],{highlight:false,visible:true,anchorX:'middle',anchorY:'middle',fixed:true,highlight:false});\r\nconst segAX = boardTree.create('segment', [A, X], {strokeWidth: 3,strokeColor:\"slategray\",highlight:false,shadow:true});\r\nconst segAY = boardTree.create('segment', [A, Y], {strokeWidth: 3,strokeColor:\"slategray\",highlight:false,shadow:true});\r\n\r\n\r\n\/\/ Cr\u00e9ation des textes dynamiques\r\nconst arbprob0 = boardTree.create('text', [0.7, 2.3, '\\\\(p = 0.5\\\\)'], { fixed: true, highlight: false });\r\nconst arbprob1 = boardTree.create('text', [0.7, 0.7, '\\\\(1-p = 0.5\\\\)'], { fixed: true, highlight: false });\r\n\r\n\/\/ Fonction de mise \u00e0 jour des textes\r\nfunction updateProbTexts() {\r\n  const p = parseFloat(document.getElementById('pval').value);\r\n  if (!isNaN(p)) {\r\n    arbprob0.setText(`\\\\(1 - p = ${ p.toFixed(2) }\\\\)`);\r\n    arbprob1.setText(`\\\\(1-p = ${ (1-p).toFixed(2) }\\\\)`);\r\n    boardTree.update(); \/\/ Rafra\u00eechit le graphe\r\n  }\r\n}\r\nupdateProbTexts();\r\n\/\/ \u00c9couteur sur le champ input\r\ndocument.getElementById('pval').addEventListener('input', updateProbTexts);\r\n\r\n\r\n\/\/ --- Board 2 : Histogramme\r\nconst boardChart = JXG.JSXGraph.initBoard('boxChart', {\r\n    boundingbox: [-0.01, 1.2, 3.5, -0.01], \r\n\taxis: true,\r\n\tgrid:false,\r\n\tshowNavigation: false,\r\n    showCopyright:false\r\n});\r\n\r\n\/\/ boardChart est l'enfant de boardTree\r\nboardTree.addChild(boardChart );\r\n boardChart.renderer.container.style.backgroundColor = 'gainsboro';\r\n const sl1 = boardChart.create('text', [1.25, 1.075, '\\\\(\\\\textrm{Histogramme de la simulation}\\\\)'], { fixed: true, highlight: false,strokeColor:\"#AE181E\" });\r\n\/\/ const spoly0 = boardChart.create('polygon',[[-1.5,-.2],[-1.5,-0.001],[4,-0.001],[4,-0.2]],{color:'red',fixed:true,higlight:false,layer:15});\/\/ on ne peut pas retirer les axes\r\n \r\n \r\n \/\/ --- Ajout des segments et textes pour p et 1-p\r\nlet segP = boardChart.create('segment', [[0, 0], [0, 0]], {strokeColor: '#AE181E', strokeWidth: 2,dash:2});\r\nlet seg1P = boardChart.create('segment', [[2, 0], [2, 0]], {strokeColor: '#AE181E', strokeWidth: 2,dash:2});\r\nlet textP = boardChart.create('text', [0.5, 0.1, ''], {anchorX: 'middle', anchorY: 'bottom'});\r\nlet text1P = boardChart.create('text', [2.5, 0.1, ''], {anchorX: 'middle', anchorY: 'bottom'});\r\n \r\nlet barX = boardChart.create('polygon', [[0,0],[0,0],[1,0],[1,0]],\r\n    {fillColor:'lightblue', borders:{visible:false},shadow:true});\r\nbarX.vertices.forEach(point => {point.setAttribute({visible: false});});\t\r\nlet barY = boardChart.create('polygon', [[2,0],[2,0],[3,0],[3,0]],\r\n    {fillColor:'lightgreen', borders:{visible:false},shadow:true});\r\nbarY.vertices.forEach(point => {point.setAttribute({visible: false});});\r\nlet labelX = boardChart.create('text', [0.5, 0.2, '\\\\(0\\\\; (0\\\\%)\\\\)'], {anchorX:'middle', anchorY:'bottom'});\r\nlet labelY = boardChart.create('text', [2.5, 0.2, '\\\\(0\\\\; (0\\\\%)\\\\)'], {anchorX:'middle', anchorY:'bottom'});\r\n\r\n\r\n\r\n\/\/ --- Variables\r\nlet countX = 0, countY = 0, trials = 0;\r\nlet intervalID = null;\r\n\/\/let countX = 0, countY = 0, trials = 0;\r\n\r\n\/\/ --- Mise \u00e0 jour des barres + labels\r\nfunction updateBars(){\r\n    const freqX = trials ? (countX\/trials*100).toFixed(1) : 0;\r\n    const freqY = trials ? (countY\/trials*100).toFixed(1) : 0;\r\n\r\n    barX.vertices[1].moveTo([0, countX\/trials]);\r\n    barX.vertices[2].moveTo([1, countX\/trials]);\r\n    barY.vertices[1].moveTo([2, countY\/trials]);\r\n    barY.vertices[2].moveTo([3, countY\/trials]);\r\n\r\n    labelX.setText(`\\\\(${countX} (${freqX}\\\\%)\\\\)`);\r\n    labelY.setText(`\\\\(${countY} (${freqY}\\\\%)\\\\)`);\r\n\r\n    boardChart.update();\r\n}\r\n\r\n\/\/ --- Simulation al\u00e9atoire\r\nfunction tirage(){\r\n    const r = Math.random();\r\n    trials++;\r\n    if(r < 0.5){\r\n        countX++;\r\n    } else {\r\n        countY++;\r\n    }\r\n    updateBars();\r\n}\r\n\r\n\/\/text commentaire\r\n\r\nconst comment0 = boardTree.create('text', [-.275, -0.85, '\\\\(\\\\textrm{Probabilit\u00e9}\\\\)'], {fontSize:8, fixed: true, highlight: false,strokeColor:\"#AE181E\" });\r\nconst comment1 = boardTree.create('text', [1.5, -0.85, '\\\\(\\\\textrm{Nombre de Simulations}\\\\)'], {fontSize:8, fixed: true, highlight: false,strokeColor:\"#AE181E\" });\r\nconst comment2 = boardTree.create('text', [3.5, -0.85, '\\\\(\\\\textrm{Vitesse de Simulations}\\\\)'], {fontSize:8, fixed: true, highlight: false,strokeColor:\"#AE181E\" });\r\n\r\n\/\/ --- Lancer la simulation \r\n\r\n\r\n\r\n\r\nfunction startSimulation() {\r\n    \/\/ R\u00e9initialiser les compteurs\r\n    countX = 0;\r\n    countY = 0;\r\n    trials = 0;\r\n\r\n    \/\/ Lire les valeurs des inputs\r\n    const p = parseFloat(document.getElementById('pval').value);\r\n    const N = parseInt(document.getElementById('nval').value);\r\n    const V = parseInt(document.getElementById('vval').value);\r\n\r\n    if (isNaN(p) || isNaN(N) || isNaN(V)) {\r\n        alert(\"Veuillez entrer des valeurs valides pour p, N et V.\");\r\n        return;\r\n    }\r\n\r\n    \/\/ Mettre \u00e0 jour les textes de probabilit\u00e9\r\n    arbprob0.setText(`\\\\(p = ${p.toFixed(2)}\\\\)`);\r\n    arbprob1.setText(`\\\\(1 - p = ${(1 - p).toFixed(2)}\\\\)`);\r\n    boardTree.update();\r\n\r\n    \/\/ Nettoyer l'intervalle pr\u00e9c\u00e9dent s'il existe\r\n    if (intervalID) clearInterval(intervalID);\r\n\r\n    let currentTrial = 0;\r\n    intervalID = setInterval(() => {\r\n    const r = Math.random();\r\n    trials++;\r\n    currentTrial++;\r\n\r\n    \/\/ R\u00e9initialiser les couleurs\r\n    segAX.setAttribute({strokeColor: \"slategray\"});\r\n    segAY.setAttribute({strokeColor: \"slategray\"});\r\n\r\n    if (r < p) {\r\n        countX++;\r\n        segAX.setAttribute({strokeColor: \"#AE181E\", shadow:true, strokeWidth:4}); \/\/ branche vers X\r\n    } else {\r\n        countY++;\r\n        segAY.setAttribute({strokeColor: \"#AE181E\", shadow:true, strokeWidth:4}); \/\/ branche vers Y\r\n    }\r\n\r\n    updateBars();\r\n    boardTree.update();\r\n\r\n    \/\/ R\u00e9initialiser la couleur apr\u00e8s un court d\u00e9lai\r\n    setTimeout(() => {\r\n        segAX.setAttribute({strokeColor: \"slategray\"});\r\n        segAY.setAttribute({strokeColor: \"slategray\"});\r\n        boardTree.update();\r\n    }, V * 0.8); \/\/ ajustable selon la vitesse\r\n\r\n    if (currentTrial >= N) {\r\n        clearInterval(intervalID);\r\n    }\r\n}, V);\r\n};\r\n\r\n\/\/ --- Mise \u00e0 jour des segments et textes en fonction de p\r\nfunction updateSegments() {\r\n    const p = parseFloat(document.getElementById('pval').value);\r\n    if (!isNaN(p)) {\r\n        segP.setAttribute({point1: [0, p], point2: [1, p]});\r\n        seg1P.setAttribute({point1: [2, 1-p], point2: [3, 1-p]});\r\n        textP.setText(`\\\\(p = ${p.toFixed(2)}\\\\)`);\r\n        text1P.setText(`\\\\(1-p = ${(1-p).toFixed(2)}\\\\)`);\r\n        textP.moveTo([0.5, p + 0.1]);\r\n        text1P.moveTo([2.5, (1-p) + 0.1]);\r\n        boardChart.update();\r\n    }\r\n}\r\n\r\n\/\/ --- Appel initial et \u00e9couteur\r\nupdateSegments();\r\ndocument.getElementById('pval').addEventListener('input', updateSegments);\r\n<\/script>\r\n\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10021","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10021"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10021\/revisions"}],"predecessor-version":[{"id":10022,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10021\/revisions\/10022"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}