Share JSXGraph: example "Move To"

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":10001,"alias":"move-to","name":"Move To","reference":"null","content":"const board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\n\nlet p = board.create('point', [0, 1]);\n\nfunction test() {\n    p.moveTo([1, 1], 500);\n}","pre":"<button onclick=\"test();\">Test<\/button>","post":"","number_of_boards":1,"description":"","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":"2022-08-04 16:41:31","deleted":0,"tags":[{"id":131,"alias":"animation","name":"Animation"},{"id":140,"alias":"point","name":"Point"},{"id":130,"alias":"technical","name":"Technical"}],"groups":[],"refers_to":[],"authors":[],"unique_ids":["jxgbox-662298a824cc5"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\n\nlet p = board.create('point', [0, 1]);\n\nfunction test() {\n    p.moveTo([1, 1], 500);\n}","code_execute_html":"<div id=\"jxgbox-662298a824cc5\" 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-662298a824cc5\",\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":"<button onclick=\"test();\">Test<\/button>","code_execute_html_post":"","code_execute_js":"const BOARDID_662298a824cc4_0 = 'jxgbox-662298a824cc5';\nconst BOARDID_662298a824cc4_ = BOARDID_662298a824cc4_0;\n\nconst board = JXG.JSXGraph.initBoard(BOARDID_662298a824cc4_, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\n\nlet p = board.create('point', [0, 1]);\n\nfunction test() {\n    p.moveTo([1, 1], 500);\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\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\n\nlet p = board.create('point', [0, 1]);\n\nfunction test() {\n    p.moveTo([1, 1], 500);\n}","code_export_html":"<button onclick=\"test();\">Test<\/button>\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    const board = JXG.JSXGraph.initBoard(BOARDID, {\n        showFullscreen: true,\n        axis: true,\n        boundingbox: [-5, 5, 5, -5],\n        keepaspectratio: true\n    });\n    \n    let p = board.create('point', [0, 1]);\n    \n    function test() {\n        p.moveTo([1, 1], 500);\n    }\n <\/script> ","code_export_jsfiddle_html":"<button onclick=\"test();\">Test<\/button>\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\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    showFullscreen: true,\n    axis: true,\n    boundingbox: [-5, 5, 5, -5],\n    keepaspectratio: true\n});\n\nlet p = board.create('point', [0, 1]);\n\nfunction test() {\n    p.moveTo([1, 1], 500);\n}","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Move To<\/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>Move To<\/h1>\n      <button onclick=\"test();\">Test<\/button>\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          const board = JXG.JSXGraph.initBoard(BOARDID, {\n              showFullscreen: true,\n              axis: true,\n              boundingbox: [-5, 5, 5, -5],\n              keepaspectratio: true\n          });\n          \n          let p = board.create('point', [0, 1]);\n          \n          function test() {\n              p.moveTo([1, 1], 500);\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=\"https:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/move-to\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<button onclick=\"test();\">Test<\/button>\n\n<jsxgraph width=\"100%\" aspect-ratio=\"1 \/ 1\" title=\"Move To\" description=\"This construction was copied from JSXGraph examples database: https:\/\/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   const board = JXG.JSXGraph.initBoard(BOARDID, {\n       showFullscreen: true,\n       axis: true,\n       boundingbox: [-5, 5, 5, -5],\n       keepaspectratio: true\n   });\n   \n   let p = board.create('point', [0, 1]);\n   \n   function test() {\n       p.moveTo([1, 1], 500);\n   }\n<\/jsxgraph>","link":"https:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/move-to","link_raw":"https:\/\/jsxgraph.uni-bayreuth.de\/share\/raw\/move-to","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Move To

Animation Point Technical

<button onclick="test();">Test</button>

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    showFullscreen: true,
    axis: true,
    boundingbox: [-5, 5, 5, -5],
    keepaspectratio: true
});

let p = board.create('point', [0, 1]);

function test() {
    p.moveTo([1, 1], 500);
}

/*
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!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    showFullscreen: true,
    axis: true,
    boundingbox: [-5, 5, 5, -5],
    keepaspectratio: true
});

let p = board.create('point', [0, 1]);

function test() {
    p.moveTo([1, 1], 500);
}

<button onclick="test();">Test</button>

<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';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        showFullscreen: true,
        axis: true,
        boundingbox: [-5, 5, 5, -5],
        keepaspectratio: true
    });
    
    let p = board.create('point', [0, 1]);
    
    function test() {
        p.moveTo([1, 1], 500);
    }
 </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!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    showFullscreen: true,
    axis: true,
    boundingbox: [-5, 5, 5, -5],
    keepaspectratio: true
});

let p = board.create('point', [0, 1]);

function test() {
    p.moveTo([1, 1], 500);
}

<button onclick="test();">Test</button>

<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';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        showFullscreen: true,
        axis: true,
        boundingbox: [-5, 5, 5, -5],
        keepaspectratio: true
    });
    
    let p = board.create('point', [0, 1]);
    
    function test() {
        p.moveTo([1, 1], 500);
    }
 </script>