{"id":8016,"date":"2025-07-05T16:40:49","date_gmt":"2025-07-05T14:40:49","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=8016"},"modified":"2025-07-05T16:40:49","modified_gmt":"2025-07-05T14:40:49","slug":"jsxgraph-boards-demo","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=8016","title":{"rendered":"JSXGraph-Boards-demo"},"content":{"rendered":"<meta charset=\"UTF-8\">\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/js-polyfills\/0.1.43\/polyfill.min.js\"><\/script> \r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraphcore.js\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraph.css\" \/>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/6.65.7\/codemirror.min.js\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/6.65.7\/codemirror.min.css\">\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/6.65.7\/keymap\/emacs.min.js\"><\/script>\r\n  <!-- <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.12\/codemirror.min.css\"> -->\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/katex@0.16.9\/dist\/katex.min.css\">\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/katex@0.16.9\/dist\/katex.min.js\"><\/script>\r\n  <!-- <script src=\"https:\/\/polyfill.io\/v3\/polyfill.min.js?features=es6\"><\/script> -->\r\n\r\n\r\n<script>\r\nwindow.MathJax = {\r\n  tex: {\r\n    inlineMath: [ ['$','$'], [\"\\\\(\",\"\\\\)\"] ],\r\n    displayMath: [ ['$$','$$'], [\"\\\\[\",\"\\\\]\"] ],\r\n    packages: ['base', 'ams']\r\n  },\r\n  options: {\r\n    ignoreHtmlClass: 'tex2jax_ignore',\r\n    processHtmlClass: 'tex2jax_process'\r\n  }\r\n};\r\n<\/script>  \r\n\r\n<script type=\"text\/javascript\" id=\"MathJax-script\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-mml-chtml.js\"> <\/script>\r\n\r\n<script>\r\n  window.WebFontConfig = {\r\n      custom: {\r\n          families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',\r\n              'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',\r\n              'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',\r\n              'KaTeX_Size4', 'KaTeX_Typewriter'],\r\n      },\r\n  };\r\n<\/script>\r\n\r\n  <style>\r\n    \/* Style g\u00e9n\u00e9ral du body *\/\r\n     .blog-post-title {\r\n      background-color: #e6f4ea; \/* vert clair pastel *\/\r\n      \/* font-family: Arial, sans-serif; *\/\r\n      margin: 0;\r\n      padding: 1em;\r\n    }\r\n\r\n\r\n    \/* Bloc contenant un board et son code *\/\r\n    .board-block {\r\n      display: flex;\r\n      flex-direction: row;\r\n      background-color: #f0fdf0; \/* fond l\u00e9g\u00e8rement vert *\/\r\n      border: 1px solid #b5deb5; \/* bordure douce verte *\/\r\n      border-radius: 8px;         \/* angles arrondis *\/\r\n      padding: 1em;\r\n      max-width: 1000px;\r\n      box-shadow: 0 2px 5px rgba(0,0,0,0.1); \/* l\u00e9g\u00e8re ombre *\/\r\n    }\r\n\r\n\r\n   \/* Colonne gauche (board) *\/\r\n    .left {\r\n\t  width: 40%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 0.5em;\r\n    }\r\n\t  .right {\r\n\t\t  width: 60%;\r\n\t\t  margin:30px 0px 0px 0px;\r\n\t\t  height:230px;\r\n\t  }  \r\n\r\n    \/* Zone du board JSXGraph *\/\r\n    .jxgbox {\r\n      width: 250px;\r\n      height: 200px;\r\n      border: 1px solid #88cc88; \/* vert moyen pour encadrement *\/\r\n    }\r\n\r\n    \/* Titre au-dessus de chaque board *\/\r\n    .board-title {\r\n      font-weight: bold;\r\n      text-align: center;\r\n      color: #446644;\r\n      margin-bottom: 0.5em;\r\n    }\r\n\r\n    \/* Style des \u00e9diteurs CodeMirror *\/\r\n    .CodeMirror {\r\n      height: 200px;\r\n      font-size: 0.85em;\r\n      border: 1px solid #ccc;\r\n      border-radius: 5px;\r\n    }\r\n\t.explication {\r\n\t  margin-left:2em;\r\n      background-color: #e7f7ec;\r\n      border-left: 4px solid #88cc88;\r\n      padding: 1em;\r\n      margin-top: 2em;\r\n      max-width: 900px;\r\n   \t  border-radius: 6px;\r\n\t }  \r\n\t  \r\n  <\/style>\r\n\r\n<script>\r\n  JXG.Options.text.display = 'html';\r\n  JXG.Options.text.useMathJax = true;\r\n<\/script>\r\n\r\n  <h1 style=\"text-align:center;\"><span style=\"color: #c80815;\"> Boards (avec CSS, MathJax)<\/span><\/h1>\r\n  \r\n<div class=\"explication\">\r\n<!-- 1. Board normal -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n    <div class=\"board-title\"><span style=\"color: #c80815;\">Standard<\/span><\/div>\r\n    <div id=\"board1\" class=\"jxgbox\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea rows=\"20\" id=\"code1\">\r\n\/\/&LT;div id=&#8221;bd1&#8243; class=&#8221;jxgbox&#8221;&GT;&LT;\/div&GT;\t\r\n\/\/&LT;script&GT;\r\n\/\/Board JSXGraph standard avec axes activ\u00e9s.\r\n\/\/CSS appliqu\u00e9 via la classe .jxgbox :\r\n\/\/- largeur : 250px, hauteur : 200px\r\n\/\/- bordure : 1px solid #88cc88 (vert doux)\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board1&#8221;, {\r\n  \t\tboundingbox: [-2, 2, 2, -2],\r\n  \t\taxis: true\r\n\t});\r\nb.create(&#8220;point&#8221;, [1, 1]);\r\n\/\/&LT;\/script&GT;\r\n\t<\/textarea>\r\n  <\/div>\r\n<\/div>\r\n\r\n<br\/> \r\n\t\r\n<!-- 2. Fond diff\u00e9rent et bordure color\u00e9e -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n    <div class=\"board-title\"><span style=\"color: #c80815;\">Fond vert p\u00e2le &#038; bordure fonc\u00e9e<\/span><\/div>\r\n    <div id=\"board2\" class=\"jxgbox\" style=\"border: 2px solid #448844; background-color: #f5fff5;\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea id=\"code2\">\r\n\/\/ Bordure modifi\u00e9e dans l&#8217;attribut style de la div #board2\r\n\/\/&LT;div id=&#8221;board2&#8243; class=&#8221;jxgbox&#8221; style=&#8221;border: 2px solid #448844; background-color: #f5fff5;&#8221;&GT;&LT;\/div&GT;\t\t\r\n\/\/&LT;script&GT;\r\n\/\/-`border: 2px solid #448844`:vert fonc\u00e9, plus visible\r\n\/\/-`background-color: #f5fff5`:fond vert pastel clair\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board2&#8221;, {\r\n  boundingbox: [-2, 2, 2, -2],\r\n  axis: true\r\n});\r\nb.create(&#8220;line&#8221;, [[0,0],[1,1]]);\r\n\/\/&LT;\/script&GT;\t\t\r\n    <\/textarea>\r\n  <\/div>\r\n<\/div>\r\n\t\r\n<br\/> \r\n\t\r\n<!-- 3. Sans bordure -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n    <div class=\"board-title\"><span style=\"color: #c80815;\">Sans bordure<\/span><\/div>\r\n    <div id=\"board3\" class=\"jxgbox\" style=\"border: none; background-color: #ffffff;\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea id=\"code3\">\r\n\/\/&LT;div id=&#8221;board3&#8243; class=&#8221;jxgbox&#8221; style=&#8221;border: none; background-color: #ffffff;&#8221;&GT;&LT;\/div&GT;\r\n\/\/ &LT;script&GT;\r\n\/\/ Ici on supprime visuellement la bordure :\r\n\/\/ &#8211; `border: none` : pas de bordure\r\n\/\/ &#8211; `background-color: #ffffff` : fond blanc uni\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board3&#8221;, {\r\n  boundingbox: [-1, 1, 1, -1],\r\n  axis: true\r\n});\r\nb.create(&#8220;circle&#8221;, [[0,0], 1]);\r\n\/\/&LT;\/script&GT;\r\n<\/textarea>\r\n  <\/div>\r\n<\/div>\t\r\n\t\r\n<br\/> \t\r\n\t\r\n<!-- 4. Ratio x\/y = 1 -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n    <div class=\"board-title\"><span style=\"color: #c80815;\">Ratio x\/y = 1<\/span><\/div>\r\n    <div id=\"board4\" class=\"jxgbox\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea id=\"code4\">\r\n\/\/&LT;div id=&#8221;board4&#8243; class=&#8221;jxgbox&#8221;&GT;&LT;\/div&GT;\r\n\/\/ Option `keepaspectratio: true` pour un rapport 1:1 entre les axes.\r\n\/\/ Cela garantit qu&#8217;un cercle reste circulaire \u00e0 l&#8217;affichage.\r\n\/\/ &LT;script&GT;\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board4&#8221;, {\r\n  boundingbox: [-2, 2, 2, -2],\r\n  axis: true,\r\n  keepaspectratio: true\r\n});\r\nb.create(&#8220;circle&#8221;, [[0,0], 1]);\r\n\/\/&LT;\/script&GT;\r\n    <\/textarea>\r\n  <\/div>\r\n<\/div>\t\r\n\t\r\n<br\/> \r\n\t\r\n<!-- 5. \u00c9pur\u00e9 sans interface -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n    <div class=\"board-title\"><span style=\"color: #c80815;\">Board \u00e9pur\u00e9<\/span><\/div>\r\n    <div id=\"board5\" class=\"jxgbox\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea id=\"code5\">\r\n\/\/&LT;div id=&#8221;board5&#8243; class=&#8221;jxgbox&#8221;&GT;&LT;\/div&GT;\r\n\/\/ &LT;script&GT;\t\t\r\n\/\/ Suppression des \u00e9l\u00e9ments d&#8217;interface via les options :\r\n\/\/ &#8211; showNavigation: false\r\n\/\/ &#8211; showInfobox: false\r\n\/\/ &#8211; showCopyright: false\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board5&#8221;, {\r\n  boundingbox: [-1, 1, 1, -1],\r\n  showCopyright: false,\r\n  showNavigation: false,\r\n  showInfobox: false\r\n});\r\nb.create(&#8220;functiongraph&#8221;, [x => Math.sin(x), -2, 2]);\r\n\/\/&LT;\/script&GT;\r\n  <\/textarea>\r\n  <\/div>\r\n<\/div>\t\r\n\t\r\n\t<br\/> \r\n\t\r\n<!-- 6. KaTeX -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n\t  <div class=\"board-title\"><span style=\"color: #c80815;\">Avec KaTeX<\/span><\/div>\r\n    <div id=\"board6\" class=\"jxgbox\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea id=\"code6\">\r\n\/\/ Utilisation de KaTeX pour afficher une expression math\u00e9matique :\r\n\/\/ La propri\u00e9t\u00e9 `useKatex: true` active le rendu KaTeX.\t\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board6&#8221;, {\r\n  boundingbox: [-2, 2, 2, -2],\r\n  axis: true\r\n});\r\nb.create(&#8220;text&#8221;, [0, 1, &#8220;$\\\\int_0^1 x^2 dx = \\\\frac{1}{3}$&#8221;], {\r\n  useKatex: true,\r\n  fontSize: 18\r\n});\r\n\t\t\r\n    <\/textarea>\r\n  <\/div>\r\n<\/div>\t\r\n\t\r\n\t<br\/> \r\n\t\r\n<!-- 7. MathJax -->\r\n<div class=\"board-block\">\r\n  <div class=\"left\">\r\n    <div class=\"board-title\"><span style=\"color: #c80815;\">Avec MathJax<\/span><\/div>\r\n    <div id=\"board7\" class=\"jxgbox\"><\/div>\r\n  <\/div>\r\n  <div class=\"right\">\r\n    <textarea id=\"code7\">\r\n\/\/&LT;div id=&#8221;board7&#8243; class=&#8221;jxgbox&#8221;&GT;&LT;\/div&GT;\r\n\/\/ &LT;script&GT;\r\n\/\/ Utilisation de MathJax via une fonction de rendu personnalis\u00e9e\r\n\/\/ Elle ins\u00e8re l&#8217;expression LaTeX et d\u00e9clenche le rendu dynamique.\r\nconst b = JXG.JSXGraph.initBoard(&#8220;board7&#8221;, {\r\n  boundingbox: [-2, 2, 2, -2],\r\n  axis: true\r\n});\r\nb.create(&#8220;text&#8221;, [-1.5, 1, &#8220;\\\\( E = mc^2 \\\\)&#8221;], {\r\n  fontSize: 18\r\n});\r\n\/\/&LT;\/script&GT;\r\n\r\n    <\/textarea>\r\n\t\r\n  <\/div>\r\n<\/div>\r\n\t\r\n\t\r\n\t\r\n\t\r\n<\/div>  <!-- fin de la partie explication --> \r\n\t\r\n\t\r\n\r\n <!-- Scripts CodeMirror et ex\u00e9cution du code -->\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.12\/codemirror.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.12\/mode\/javascript\/javascript.min.js\"><\/script>\r\n  <script>\r\n\t  \r\n\tdocument.addEventListener(\"DOMContentLoaded\",function(event){\r\n    \tconst ids = [1,2,3,4,5,6,7];\r\n    \tids.forEach(id => {\r\n\t\t\tconsole.log(id);\r\n      \t\tconst editor = CodeMirror.fromTextArea(document.getElementById(\"code\"+id), {\r\n        \t\tmode: \"javascript\",\r\n        \t\ttheme: \"default\",\r\n        \t\tlineNumbers: false,\r\n        \t\treadOnly: true\r\n      \t\t});\r\n\t\t\tchaine=editor.getValue().replace(\/\u201c\/g,'\"').replace(\/\u201d\/g,'\"');\r\n\t  \t\tconsole.log(editor.getValue());\r\n      \t\teval(chaine);\r\n    \t});\r\n\t });\r\n  <\/script>\r\n\t  \r\n\t  ","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-8016","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/8016","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=8016"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/8016\/revisions"}],"predecessor-version":[{"id":8017,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/8016\/revisions\/8017"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}