Share JSXGraph: example "Euler line: JessieCode"

Share JSXGraph: example "Euler line: JessieCode"

This website is a beta version. The official release will be in **2023**.

Javascript is disabled in your browser.

This site includes the JavaScript library JSXGraph to demonstrate its functionalities. To watch this, enable JavaScript in settings of your browser and reload this page.

example

{"id":10080,"alias":"euler-line-jessiecode","name":"Euler line: JessieCode","reference":"[{\"link\": \"https:\/\/en.wikipedia.org\/wiki\/Euler_line\", \"text\": \"Wikipedia article on Euler line\"}]","content":"\n\/\/ Dummy example, please ignore\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n});\n","pre":"<script type=\"text\/jessiecode\" width=\"600px\" height=\"600px\" axis=\"true\">\n$board.setView([-1.5, 2, 1.5, -1]);\n\n\/\/ Triangle ABC\nA = point(1, 0);\nB = point(-1, 0);\nC = point(0.2, 1.5);\npol = polygon(A,B,C) <<\n        fillColor: '#FFFF00',\n        borders: <<\n            strokeWidth: 2,\n            strokeColor: '#009256'\n        >>\n    >>;\n \n\/\/ Perpendiculars and orthocenter i1\npABC = perpendicular(pol.borders[0], C);\npBCA = perpendicular(pol.borders[1], A);\npCAB = perpendicular(pol.borders[2], B);\ni1 = intersection(pABC, pCAB, 0);\n\n\/\/ Midpoints of segments\nmAB = midpoint(A, B);\nmBC = midpoint(B, C);\nmCA = midpoint(C, A);\n \n\/\/ Line bisectors and centroid i2\nma = segment(mBC, A);\nmb = segment(mCA, B);\nmc = segment(mAB, C);\ni2 = intersection(ma, mc, 0);\n \n\/\/ Circumcircle and circumcenter\nc = circumcircle(A, B, C) <<\n        strokeColor: '#000000',\n        dash: 3,\n        strokeWidth: 1,\n        center: <<\n            name: 'i_3',\n            withlabel:true,\n            visible: true\n        >>\n    >>;\n \n\/\/ Euler line \neuler = line(i1, i2) <<\n        dash:1,\n        strokeWidth: 2,\n        strokeColor:'#901B77'\n    >>;\n<\/script>","post":"","number_of_boards":1,"description":"Euler line with JessieCode","dimensions":[{"width":"100%","height":"","aspect-ratio":"1 \/ 1"}],"large_in_db":0,"license":{"title":"Creative Commons Attribution 4.0 International","identifier":"CC BY 4.0","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by\/4.0\/88x31.png","rank":0},"timestamp":"2023-02-01 10:30:03","deleted":0,"tags":[{"id":124,"alias":"euclidean","name":"Euclidean"},{"id":121,"alias":"geometry","name":"Geometry"},{"id":146,"alias":"jessiecode","name":"JessieCode"}],"groups":[],"refers_to":[],"authors":[],"unique_ids":["jxgbox-662201507f5c9"],"code_display":"\/\/ Define the id of your board in BOARDID\n\n\n\/\/ Dummy example, please ignore\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n});\n","code_execute_html":"<div id=\"jxgbox-662201507f5c9\" class=\"jxgbox shadow\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<script type=\"text\/javascript\">\r\n    (function() {\r\n        let addWrapper = function (boardid, classes = [], styles = \"\") {\r\n            let board = document.getElementById(boardid),\r\n                wrapper, wrapperid = boardid + \"-wrapper\";\r\n            \r\n            wrapper = document.createElement(\"div\");\r\n            wrapper.id = wrapperid;\r\n            wrapper.classList.add(\"jxgbox-wrapper\");\r\n            \r\n            for (let c of classes)\r\n                wrapper.classList.add(c);\r\n                \r\n            wrapper.style = styles;\r\n                \r\n            board.parentNode.insertBefore(wrapper, board.nextSibling);\r\n            wrapper.appendChild(board);\r\n        }\r\n        \r\n        const FORCE_WRAPPER = false || true;\r\n        \r\n        let boardid = \"jxgbox-662201507f5c9\",\r\n            wrapper_classes = \"p-3\".split(\" \"),\r\n            wrapper_styles = \"width: 100%; \",\r\n            board = document.getElementById(boardid),\r\n            ar, ar_h, ar_w, padding_bottom;\r\n        \r\n        ar = board.dataset.ar;\r\n            \r\n        if (!CSS.supports(\"aspect-ratio\", \"1 \/ 1\") && JXG.exists(ar, true)) {\r\n            \r\n            ar = ar.split(\"\/\", 3);\r\n            ar_w = ar[0].trim();\r\n            ar_h = ar[1].trim();\r\n            padding_bottom = ar_h \/ ar_w * 100;\r\n            \r\n            if (wrapper_styles !== \"\")\r\n                addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n            \r\n            board.style = \"height: 0; padding-bottom: \" + padding_bottom + \"%; \/*\" + board.style + \"*\/\";\r\n            \r\n        } else if (FORCE_WRAPPER) {\r\n            \r\n            wrapper_styles = \"\";\r\n            if (board.style.width.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"width: \" + board.style.width + \"; \"\r\n                board.style.width = \"100%\";\r\n            }\r\n            if (board.style.height.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"height: \" + board.style.height + \"; \"\r\n                board.style.height = \"100%\";\r\n            }\r\n            addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n        }\r\n    })();\r\n        <\/script>","code_execute_html_pre":"<script type=\"text\/jessiecode\" width=\"600px\" height=\"600px\" axis=\"true\">\n$board.setView([-1.5, 2, 1.5, -1]);\n\n\/\/ Triangle ABC\nA = point(1, 0);\nB = point(-1, 0);\nC = point(0.2, 1.5);\npol = polygon(A,B,C) <<\n        fillColor: '#FFFF00',\n        borders: <<\n            strokeWidth: 2,\n            strokeColor: '#009256'\n        >>\n    >>;\n \n\/\/ Perpendiculars and orthocenter i1\npABC = perpendicular(pol.borders[0], C);\npBCA = perpendicular(pol.borders[1], A);\npCAB = perpendicular(pol.borders[2], B);\ni1 = intersection(pABC, pCAB, 0);\n\n\/\/ Midpoints of segments\nmAB = midpoint(A, B);\nmBC = midpoint(B, C);\nmCA = midpoint(C, A);\n \n\/\/ Line bisectors and centroid i2\nma = segment(mBC, A);\nmb = segment(mCA, B);\nmc = segment(mAB, C);\ni2 = intersection(ma, mc, 0);\n \n\/\/ Circumcircle and circumcenter\nc = circumcircle(A, B, C) <<\n        strokeColor: '#000000',\n        dash: 3,\n        strokeWidth: 1,\n        center: <<\n            name: 'i_3',\n            withlabel:true,\n            visible: true\n        >>\n    >>;\n \n\/\/ Euler line \neuler = line(i1, i2) <<\n        dash:1,\n        strokeWidth: 2,\n        strokeColor:'#901B77'\n    >>;\n<\/script>","code_execute_html_post":"","code_execute_js":"const BOARDID_662201507f5c7_0 = 'jxgbox-662201507f5c9';\nconst BOARDID_662201507f5c7_ = BOARDID_662201507f5c7_0;\n\n\n\/\/ Dummy example, please ignore\nconst board = JXG.JSXGraph.initBoard(BOARDID_662201507f5c7_, {\n    boundingbox: [-5, 5, 5, -5],\n});\n","code_export_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'your_div_id'; \/\/ Insert your id here!\n\n\n\/\/ Dummy example, please ignore\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n});\n","code_export_html":"<script type=\"text\/jessiecode\" width=\"600px\" height=\"600px\" axis=\"true\">\n$board.setView([-1.5, 2, 1.5, -1]);\n\n\/\/ Triangle ABC\nA = point(1, 0);\nB = point(-1, 0);\nC = point(0.2, 1.5);\npol = polygon(A,B,C) <<\n        fillColor: '#FFFF00',\n        borders: <<\n            strokeWidth: 2,\n            strokeColor: '#009256'\n        >>\n    >>;\n \n\/\/ Perpendiculars and orthocenter i1\npABC = perpendicular(pol.borders[0], C);\npBCA = perpendicular(pol.borders[1], A);\npCAB = perpendicular(pol.borders[2], B);\ni1 = intersection(pABC, pCAB, 0);\n\n\/\/ Midpoints of segments\nmAB = midpoint(A, B);\nmBC = midpoint(B, C);\nmCA = midpoint(C, A);\n \n\/\/ Line bisectors and centroid i2\nma = segment(mBC, A);\nmb = segment(mCA, B);\nmc = segment(mAB, C);\ni2 = intersection(ma, mc, 0);\n \n\/\/ Circumcircle and circumcenter\nc = circumcircle(A, B, C) <<\n        strokeColor: '#000000',\n        dash: 3,\n        strokeWidth: 1,\n        center: <<\n            name: 'i_3',\n            withlabel:true,\n            visible: true\n        >>\n    >>;\n \n\/\/ Euler line \neuler = line(i1, i2) <<\n        dash:1,\n        strokeWidth: 2,\n        strokeColor:'#901B77'\n    >>;\n<\/script>\n\n<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n\n<script type = \"text\/javascript\"> \n    \/*\n    This example is licensed under a \n    Creative Commons Attribution 4.0 International License.\n    https:\/\/creativecommons.org\/licenses\/by\/4.0\/\n    \n    Please note that you have to mention \n    The Center of Mobile Learning with Digital Technology\n    in the credits.\n    *\/\n    \n    const BOARDID = 'board-0';\n\n    \n    \/\/ Dummy example, please ignore\n    const board = JXG.JSXGraph.initBoard(BOARDID, {\n        boundingbox: [-5, 5, 5, -5],\n    });\n    \n <\/script> ","code_export_jsfiddle_html":"<script type=\"text\/jessiecode\" width=\"600px\" height=\"600px\" axis=\"true\">\n$board.setView([-1.5, 2, 1.5, -1]);\n\n\/\/ Triangle ABC\nA = point(1, 0);\nB = point(-1, 0);\nC = point(0.2, 1.5);\npol = polygon(A,B,C) <<\n        fillColor: '#FFFF00',\n        borders: <<\n            strokeWidth: 2,\n            strokeColor: '#009256'\n        >>\n    >>;\n \n\/\/ Perpendiculars and orthocenter i1\npABC = perpendicular(pol.borders[0], C);\npBCA = perpendicular(pol.borders[1], A);\npCAB = perpendicular(pol.borders[2], B);\ni1 = intersection(pABC, pCAB, 0);\n\n\/\/ Midpoints of segments\nmAB = midpoint(A, B);\nmBC = midpoint(B, C);\nmCA = midpoint(C, A);\n \n\/\/ Line bisectors and centroid i2\nma = segment(mBC, A);\nmb = segment(mCA, B);\nmc = segment(mAB, C);\ni2 = intersection(ma, mc, 0);\n \n\/\/ Circumcircle and circumcenter\nc = circumcircle(A, B, C) <<\n        strokeColor: '#000000',\n        dash: 3,\n        strokeWidth: 1,\n        center: <<\n            name: 'i_3',\n            withlabel:true,\n            visible: true\n        >>\n    >>;\n \n\/\/ Euler line \neuler = line(i1, i2) <<\n        dash:1,\n        strokeWidth: 2,\n        strokeColor:'#901B77'\n    >>;\n<\/script>\n\n<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n","code_export_jsfiddle_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'board-0';\n\n\n\/\/ Dummy example, please ignore\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n});\n","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Euler line: JessieCode<\/title>\n      <meta content=\"text\/html; charset=UTF-8\" http-equiv=\"Content-Type\" \/>\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraph.css\" \/>\n      <script src=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraphcore.js\" type=\"text\/javascript\"><\/script>\n      <style type=\"text\/css\">\nbody {\n   font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n<\/style>\n   <\/head>\n   <body>\n      <h1>Euler line: JessieCode<\/h1>\n      <script type=\"text\/jessiecode\" width=\"600px\" height=\"600px\" axis=\"true\">\n      $board.setView([-1.5, 2, 1.5, -1]);\n      \n      \/\/ Triangle ABC\n      A = point(1, 0);\n      B = point(-1, 0);\n      C = point(0.2, 1.5);\n      pol = polygon(A,B,C) <<\n              fillColor: '#FFFF00',\n              borders: <<\n                  strokeWidth: 2,\n                  strokeColor: '#009256'\n              >>\n          >>;\n       \n      \/\/ Perpendiculars and orthocenter i1\n      pABC = perpendicular(pol.borders[0], C);\n      pBCA = perpendicular(pol.borders[1], A);\n      pCAB = perpendicular(pol.borders[2], B);\n      i1 = intersection(pABC, pCAB, 0);\n      \n      \/\/ Midpoints of segments\n      mAB = midpoint(A, B);\n      mBC = midpoint(B, C);\n      mCA = midpoint(C, A);\n       \n      \/\/ Line bisectors and centroid i2\n      ma = segment(mBC, A);\n      mb = segment(mCA, B);\n      mc = segment(mAB, C);\n      i2 = intersection(ma, mc, 0);\n       \n      \/\/ Circumcircle and circumcenter\n      c = circumcircle(A, B, C) <<\n              strokeColor: '#000000',\n              dash: 3,\n              strokeWidth: 1,\n              center: <<\n                  name: 'i_3',\n                  withlabel:true,\n                  visible: true\n              >>\n          >>;\n       \n      \/\/ Euler line \n      euler = line(i1, i2) <<\n              dash:1,\n              strokeWidth: 2,\n              strokeColor:'#901B77'\n          >>;\n      <\/script>\n      \n      <div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n         <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n      <\/div>\n      \n      <script type = \"text\/javascript\"> \n          \/*\n          This example is licensed under a \n          Creative Commons Attribution 4.0 International License.\n          https:\/\/creativecommons.org\/licenses\/by\/4.0\/\n          \n          Please note that you have to mention \n          The Center of Mobile Learning with Digital Technology\n          in the credits.\n          *\/\n          \n          const BOARDID = 'board-0';\n      \n          \n          \/\/ Dummy example, please ignore\n          const board = JXG.JSXGraph.initBoard(BOARDID, {\n              boundingbox: [-5, 5, 5, -5],\n          });\n          \n       <\/script> \n\n      <div style=\"margin:30px 15px; text-align:center; font-style:italic; font-size:80%;\">\n         <p>\n            <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\" target=\"_blank\"><img alt=\"license\" src=\"https:\/\/i.creativecommons.org\/l\/by\/4.0\/88x31.png\" style=\"height: 31px; width: auto;\"><\/a>\n         <\/p>\n         <p>\n         This example is licensed under a \n         <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\" target=\"_blank\">Creative Commons Attribution 4.0 International<\/a> License.\n         <\/p>\n         <p>\n         Please note that you have to mention \n         <a href=\"http:\/\/mobile-learning.uni-bayreuth.de\/\" target=\"_blank\">The Center of Mobile Learning with Digital Technology<\/a>\n         in the credits.\n         <\/p>\n      <\/div>\n\n      <p>For more examples have a look at our <a target=\"_blank\" href=\"http:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/euler-line-jessiecode\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<script type=\"text\/jessiecode\" width=\"600px\" height=\"600px\" axis=\"true\">\n$board.setView([-1.5, 2, 1.5, -1]);\n\n\/\/ Triangle ABC\nA = point(1, 0);\nB = point(-1, 0);\nC = point(0.2, 1.5);\npol = polygon(A,B,C) <<\n        fillColor: '#FFFF00',\n        borders: <<\n            strokeWidth: 2,\n            strokeColor: '#009256'\n        >>\n    >>;\n \n\/\/ Perpendiculars and orthocenter i1\npABC = perpendicular(pol.borders[0], C);\npBCA = perpendicular(pol.borders[1], A);\npCAB = perpendicular(pol.borders[2], B);\ni1 = intersection(pABC, pCAB, 0);\n\n\/\/ Midpoints of segments\nmAB = midpoint(A, B);\nmBC = midpoint(B, C);\nmCA = midpoint(C, A);\n \n\/\/ Line bisectors and centroid i2\nma = segment(mBC, A);\nmb = segment(mCA, B);\nmc = segment(mAB, C);\ni2 = intersection(ma, mc, 0);\n \n\/\/ Circumcircle and circumcenter\nc = circumcircle(A, B, C) <<\n        strokeColor: '#000000',\n        dash: 3,\n        strokeWidth: 1,\n        center: <<\n            name: 'i_3',\n            withlabel:true,\n            visible: true\n        >>\n    >>;\n \n\/\/ Euler line \neuler = line(i1, i2) <<\n        dash:1,\n        strokeWidth: 2,\n        strokeColor:'#901B77'\n    >>;\n<\/script>\n\n<jsxgraph width=\"100%\" aspect-ratio=\"1 \/ 1\" title=\"Euler line: JessieCode\" description=\"This construction was copied from JSXGraph examples database: http:\/\/jsxgraph.uni-bayreuth.de\/share\/\" useGlobalJS=\"false\">\n   \/*\n   This example is licensed under a \n   Creative Commons Attribution 4.0 International License.\n   https:\/\/creativecommons.org\/licenses\/by\/4.0\/\n   \n   Please note that you have to mention \n   The Center of Mobile Learning with Digital Technology\n   in the credits.\n   *\/\n   \n   \n   \/\/ Dummy example, please ignore\n   const board = JXG.JSXGraph.initBoard(BOARDID, {\n       boundingbox: [-5, 5, 5, -5],\n   });\n   \n<\/jsxgraph>","link":"http:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/euler-line-jessiecode","link_raw":"http:\/\/jsxgraph.uni-bayreuth.de\/share\/raw\/euler-line-jessiecode","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Euler line: JessieCode

Euclidean Geometry JessieCode

Euler line with JessieCode

Web references:

Wikipedia article on Euler line

<script type="text/jessiecode" width="600px" height="600px" axis="true">
$board.setView([-1.5, 2, 1.5, -1]);

// Triangle ABC
A = point(1, 0);
B = point(-1, 0);
C = point(0.2, 1.5);
pol = polygon(A,B,C) <<
        fillColor: '#FFFF00',
        borders: <<
            strokeWidth: 2,
            strokeColor: '#009256'
        >>
    >>;
 
// Perpendiculars and orthocenter i1
pABC = perpendicular(pol.borders[0], C);
pBCA = perpendicular(pol.borders[1], A);
pCAB = perpendicular(pol.borders[2], B);
i1 = intersection(pABC, pCAB, 0);

// Midpoints of segments
mAB = midpoint(A, B);
mBC = midpoint(B, C);
mCA = midpoint(C, A);
 
// Line bisectors and centroid i2
ma = segment(mBC, A);
mb = segment(mCA, B);
mc = segment(mAB, C);
i2 = intersection(ma, mc, 0);
 
// Circumcircle and circumcenter
c = circumcircle(A, B, C) <<
        strokeColor: '#000000',
        dash: 3,
        strokeWidth: 1,
        center: <<
            name: 'i_3',
            withlabel:true,
            visible: true
        >>
    >>;
 
// Euler line 
euler = line(i1, i2) <<
        dash:1,
        strokeWidth: 2,
        strokeColor:'#901B77'
    >>;
</script>

// Define the id of your board in BOARDID


// Dummy example, please ignore
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
});

/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!


// Dummy example, please ignore
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
});

<script type="text/jessiecode" width="600px" height="600px" axis="true">
$board.setView([-1.5, 2, 1.5, -1]);

// Triangle ABC
A = point(1, 0);
B = point(-1, 0);
C = point(0.2, 1.5);
pol = polygon(A,B,C) <<
        fillColor: '#FFFF00',
        borders: <<
            strokeWidth: 2,
            strokeColor: '#009256'
        >>
    >>;
 
// Perpendiculars and orthocenter i1
pABC = perpendicular(pol.borders[0], C);
pBCA = perpendicular(pol.borders[1], A);
pCAB = perpendicular(pol.borders[2], B);
i1 = intersection(pABC, pCAB, 0);

// Midpoints of segments
mAB = midpoint(A, B);
mBC = midpoint(B, C);
mCA = midpoint(C, A);
 
// Line bisectors and centroid i2
ma = segment(mBC, A);
mb = segment(mCA, B);
mc = segment(mAB, C);
i2 = intersection(ma, mc, 0);
 
// Circumcircle and circumcenter
c = circumcircle(A, B, C) <<
        strokeColor: '#000000',
        dash: 3,
        strokeWidth: 1,
        center: <<
            name: 'i_3',
            withlabel:true,
            visible: true
        >>
    >>;
 
// Euler line 
euler = line(i1, i2) <<
        dash:1,
        strokeWidth: 2,
        strokeColor:'#901B77'
    >>;
</script>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    
    // Dummy example, please ignore
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
    });
    
 </script>

/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!


// Dummy example, please ignore
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
});

<script type="text/jessiecode" width="600px" height="600px" axis="true">
$board.setView([-1.5, 2, 1.5, -1]);

// Triangle ABC
A = point(1, 0);
B = point(-1, 0);
C = point(0.2, 1.5);
pol = polygon(A,B,C) <<
        fillColor: '#FFFF00',
        borders: <<
            strokeWidth: 2,
            strokeColor: '#009256'
        >>
    >>;
 
// Perpendiculars and orthocenter i1
pABC = perpendicular(pol.borders[0], C);
pBCA = perpendicular(pol.borders[1], A);
pCAB = perpendicular(pol.borders[2], B);
i1 = intersection(pABC, pCAB, 0);

// Midpoints of segments
mAB = midpoint(A, B);
mBC = midpoint(B, C);
mCA = midpoint(C, A);
 
// Line bisectors and centroid i2
ma = segment(mBC, A);
mb = segment(mCA, B);
mc = segment(mAB, C);
i2 = intersection(ma, mc, 0);
 
// Circumcircle and circumcenter
c = circumcircle(A, B, C) <<
        strokeColor: '#000000',
        dash: 3,
        strokeWidth: 1,
        center: <<
            name: 'i_3',
            withlabel:true,
            visible: true
        >>
    >>;
 
// Euler line 
euler = line(i1, i2) <<
        dash:1,
        strokeWidth: 2,
        strokeColor:'#901B77'
    >>;
</script>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    
    // Dummy example, please ignore
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
    });
    
 </script>