{"id":10081,"date":"2025-09-19T11:19:06","date_gmt":"2025-09-19T09:19:06","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=10081"},"modified":"2025-09-19T11:19:06","modified_gmt":"2025-09-19T09:19:06","slug":"roue-de-la-fortune-jsxgraph","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=10081","title":{"rendered":"Roue de la fortune -JSXGraph"},"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\r\n<style>   \r\n\t#jxgbox { \r\n\tmargin: auto; \r\n\twidth: 600px; \r\n\theight: 600px; \r\n\tborder: 1px solid #ccc; \r\n\tbackground-color: white; \r\n\t}\r\n    \r\n\tbutton { \r\n\tmargin-top: 10px; \r\n\tpadding: 10px 20px; \r\n\tfont-size: 16px; \r\n\tcursor: pointer; \r\n\t}\r\n\t\r\n\t@font-face {\r\n   font-family: \"Computer Modern\";\r\n   src: url('http:\/\/mirrors.ctan.org\/fonts\/cm-unicode\/fonts\/otf\/cmunss.otf');\r\n   }\r\n\r\n   @font-face {\r\n   font-family: \"Computer Modern\";\r\n   src: url('http:\/\/mirrors.ctan.org\/fonts\/cm-unicode\/fonts\/otf\/cmunsx.otf');\r\n   font-weight: bold;\r\n   }\r\n\r\n @font-face {\r\n  font-family: \"Computer Modern\";\r\n  src: url('http:\/\/mirrors.ctan.org\/fonts\/cm-unicode\/fonts\/otf\/cmunsi.otf');\r\n  font-style: italic, oblique;\r\n  }\r\n\r\n @font-face {\r\n  font-family: \"Computer Modern\";\r\n  src: url('http:\/\/mirrors.ctan.org\/fonts\/cm-unicode\/fonts\/otf\/cmunbxo.otf');\r\n  font-weight: bold;\r\n  font-style: italic, oblique;\r\n  }\r\n\r\n  <\/style>\r\n\r\n<div id=\"jxgbox\"><\/div>\r\n\r\n<p id=\"result\" style=\"font-weight:bold; font-size:18px; color:#AE181E;\"><\/p>\r\n<div style=\"margin-top: 15px;\">\r\n  \r\n<script>\r\n  JXG.Options.text.useMathJax = true;\r\nconst board = JXG.JSXGraph.initBoard('jxgbox', {\r\n  boundingbox: [-3,2, 3, -3],\r\n  axis:false,\r\n  showNavigation: false,\r\n  showCopyright: false,\r\n  keepaspectratio: true\r\n});\r\n board.renderer.container.style.backgroundColor = 'gainsboro';\r\n\r\n\/\/ boutons\r\n\r\nconst titre0 = board.create('text',[0.5,2,'\\\\(\\\\textrm{Roue de la fortune}\\\\)'],{color:\"#AE181E\", fontSize:16});\r\nconst bou0 = board.create('text',[-2.5,2,'<button onclick=\"startAnimation()\"><span style=\"color:#AE181E;\">\\\\(\\\\textrm{GO}\\\\)<\/span><\/button>'],{fixed:true,fontSize:8});\r\nconst titre1 = board.create('text',[-2.65,-2.25,'\\\\(\\\\textrm{Noms des Secteurs (s\u00e9par\u00e9s par  des ,)}\\\\)'],{color:\"#AE181E\", fontSize:10});\r\nconst bou1 = board.create('text',[-2.75,-2.5, '<input type=\"text\" id=\"sectorNames\" value=\"x,y,z,t,u\" style=\"width: 200px;\">'],{fixed:true,fontSize:8});\r\nconst titre2 = board.create('text',[0.6,-2.25,'\\\\(\\\\textrm{Tailles des Secteurs (\\% s\u00e9par\u00e9s par  des ,)}\\\\)'],{color:\"#AE181E\", fontSize:10});\r\nconst bou2 = board.create('text',[0.6,-2.5, '<input type=\"text\" id=\"sectorSizes\" value=\"10,20,15,25,30\" style=\"width: 200px;\">'],{fixed:true,fontSize:8});\r\nconst bou3 = board.create('text',[0,-3, '<button onclick=\"drawCustomSectors()\"><span style=\"color:#AE181E;\">\\\\(\\\\textrm{Secteurs}\\\\)<\/span><\/button>'],{fixed:true,fontSize:8,anchorX:'middle',anchorY:'middle'});\r\n\/\/ Param\u00e8tres\r\nconst center = board.create('point', [0, 0], {name:' ', visible: true ,highlight:false,fixed:true,color:'slategray'});\r\nconst radius = 1.5;\r\nconst numPoints = 72;\r\nconst trailLength = 12;\r\nconst points = [];\r\n\r\n\/\/ Palette de couleurs\r\nconst sectorColors = [\r\n  \"#e6194b\",\"#3cb44b\",\"#ffe119\",\"#4363d8\",\"#f58231\",\"#911eb4\",\r\n  \"#46f0f0\",\"#f032e6\",\"#bcf60c\",\"#fabebe\",\"#008080\",\"#e6beff\",\r\n  \"#9a6324\",\"#fffac8\",\"#800000\",\"#aaffc3\",\"#808000\",\"#ffd8b1\"\r\n];\r\n\r\n\/\/ Cr\u00e9ation des points pour l\u2019animation lumineuse\r\nfor (let i = 0; i < numPoints; i++) {\r\n  const angle = (2 * Math.PI * i) \/ numPoints;\r\n  const x = radius * Math.cos(angle);\r\n  const y = radius * Math.sin(angle);\r\n  const pt = board.create('point', [x, y], {\r\n    name: '',\r\n    size: 2.5,\r\n    color: 'gray',\r\n    fixed: true,\r\n    label: { visible: false }\r\n  });\r\n  points.push(pt);\r\n}\r\n\r\nlet currentRay = null;\r\nlet drawnSectors = [];\r\n\r\nfunction startAnimation() {\r\n  document.getElementById('result').textContent = '';\r\n  points.forEach(p => p.setAttribute({ color: 'gray' }));\r\n  if (currentRay) {\r\n    board.removeObject(currentRay);\r\n    currentRay = null;\r\n  }\r\n\r\n  let current = 0;\r\n  let cycles = Math.floor(Math.random() * 3) + 1;\r\n  let totalSteps = cycles * numPoints + Math.floor(Math.random() * numPoints);\r\n  let step = 0;\r\n\r\n  const interval = setInterval(() => {\r\n    points.forEach(p => p.setAttribute({ color: 'gray' }));\r\n    for (let i = 0; i < trailLength; i++) {\r\n      const index = (current - i + numPoints) % numPoints;\r\n      points[index].setAttribute({ color: sectorColors[i % sectorColors.length] });\r\n    }\r\n\r\n    if (currentRay) {\r\n      board.removeObject(currentRay);\r\n    }\r\n\r\n    const rayIndex = (current - 1 + numPoints) % numPoints;\r\n    currentRay = board.create('line', [center, points[rayIndex]], {\r\n      straightFirst: false,\r\n      straightLast: false,\r\n      strokeColor: '#FF4500',\r\n      strokeWidth: 3,\r\n\t  shadow:true\r\n    });\r\n\r\n    current = (current + 1) % numPoints;\r\n    step++;\r\n\r\n    if (step > totalSteps) {\r\n      clearInterval(interval);\r\n      const finalIndex = (current - 1 + numPoints) % numPoints;\r\n      points.forEach((p, i) => {\r\n        p.setAttribute({ color: i === finalIndex ? 'red' : 'gray' });\r\n      });\r\n      if (currentRay) board.removeObject(currentRay);\r\n\r\n      currentRay = board.create('line', [center, points[finalIndex]], {\r\n        straightFirst: false,\r\n        straightLast: false,\r\n        strokeColor: '#FF0000',\r\n        strokeWidth: 3\r\n      });\r\n\r\n    }\r\n  }, 10);\r\n};\r\n\r\nfunction drawCustomSectors() {\r\n  drawnSectors.forEach(s => board.removeObject(s));\r\n  drawnSectors = [];\r\n\r\n  const sizeInput = document.getElementById('sectorSizes').value;\r\n  const nameInput = document.getElementById('sectorNames').value;\r\n\r\n  const sizes = sizeInput.split(',').map(s => parseFloat(s.trim()));\r\n  const names = nameInput.split(',').map(s => s.trim());\r\n  const total = sizes.reduce((a, b) => a + b, 0);\r\n\r\n  if (sizes.some(s => isNaN(s) || s <= 0) || total !== 100) {\r\n    alert(\"Les tailles doivent \u00eatre valides et totaliser exactement 100%.\");\r\n    return;\r\n  }\r\n\r\n  let startAngle = 0;\r\n  sizes.forEach((percent, index) => {\r\n    const angleSize = (2 * Math.PI * percent) \/ 100;\r\n    const endAngle = startAngle + angleSize;\r\n\r\n    const p1 = board.create('point', [\r\n      radius * Math.cos(startAngle),\r\n      radius * Math.sin(startAngle)\r\n    ], {visible: false});\r\n\r\n    const p2 = board.create('point', [\r\n      radius * Math.cos(endAngle),\r\n      radius * Math.sin(endAngle)\r\n    ], {visible: false});\r\n\r\n    const sector = board.create('sector', [center, p1, p2], {\r\n      fillColor: sectorColors[index % sectorColors.length],\r\n      fillOpacity: 0.6,\r\n      strokeColor: 'black',\r\n      strokeWidth: 1,\r\n      withLines: false,\r\n      layer: 1\r\n    });\r\n\r\n    \/\/ texte au milieu du secteur\r\n    const midAngle = (startAngle + endAngle) \/ 2;\r\n    const labelX = 0.7 * radius * Math.cos(midAngle);\r\n    const labelY = 0.7 * radius * Math.sin(midAngle);\r\n    board.create('text', [labelX, labelY, '\\\\('+names[index]+'\\\\)' || (\"S\" + (index+1))], {\r\n      fontSize: 16,\r\n      fixed: true\r\n    });\r\n\r\n    drawnSectors.push(sector);\r\n    startAngle = endAngle;\r\n  });\r\n}\r\n<\/script>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\n\n<p><\/p>\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-10081","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10081","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=10081"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10081\/revisions"}],"predecessor-version":[{"id":10082,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10081\/revisions\/10082"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}