Share JSXGraph: example "Conic section: parabola"

Share JSXGraph: example "Conic section: parabola"

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":10054,"alias":"conic-section-parabola","name":"Conic section: parabola","reference":"null","content":"const board=JXG.JSXGraph.initBoard(BOARDID,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n\nvar A = board.create('point',[-1,1]);\nvar B = board.create('point',[1,1]);\nvar line = board.create('line',[A,B]);\nvar C = board.create('point',[0,-1]);\nvar par = board.create('parabola',[C,line]);","pre":"","post":"","number_of_boards":1,"description":"The input elements for a parabola are\n\n- a point and a line: focus and the directrix","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-01-30 11:24:57","deleted":0,"tags":[{"id":113,"alias":"curves","name":"Curves"},{"id":133,"alias":"jsxgraph-objects","name":"JSXGraph objects"}],"groups":[],"refers_to":[{"id":10052,"name":"Conic section: ellipse","alias":"conic-section-ellipse","symmetrical":1},{"id":10055,"name":"Conic section: generic through 5 points","alias":"conic-section-generic-through-5-points","symmetrical":1},{"id":10053,"name":"Conic section: hyperbola","alias":"conic-section-hyperbola","symmetrical":1}],"authors":[],"unique_ids":["jxgbox-6622fc95364d1"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board=JXG.JSXGraph.initBoard(BOARDID,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n\nvar A = board.create('point',[-1,1]);\nvar B = board.create('point',[1,1]);\nvar line = board.create('line',[A,B]);\nvar C = board.create('point',[0,-1]);\nvar par = board.create('parabola',[C,line]);","code_execute_html":"<div id=\"jxgbox-6622fc95364d1\" 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-6622fc95364d1\",\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":"","code_execute_html_post":"","code_execute_js":"const BOARDID_6622fc95364ce_0 = 'jxgbox-6622fc95364d1';\nconst BOARDID_6622fc95364ce_ = BOARDID_6622fc95364ce_0;\n\nconst board=JXG.JSXGraph.initBoard(BOARDID_6622fc95364ce_,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n\nvar A = board.create('point',[-1,1]);\nvar B = board.create('point',[1,1]);\nvar line = board.create('line',[A,B]);\nvar C = board.create('point',[0,-1]);\nvar par = board.create('parabola',[C,line]);","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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n\nvar A = board.create('point',[-1,1]);\nvar B = board.create('point',[1,1]);\nvar line = board.create('line',[A,B]);\nvar C = board.create('point',[0,-1]);\nvar par = board.create('parabola',[C,line]);","code_export_html":"<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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n    \n    var A = board.create('point',[-1,1]);\n    var B = board.create('point',[1,1]);\n    var line = board.create('line',[A,B]);\n    var C = board.create('point',[0,-1]);\n    var par = board.create('parabola',[C,line]);\n <\/script> ","code_export_jsfiddle_html":"<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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n\nvar A = board.create('point',[-1,1]);\nvar B = board.create('point',[1,1]);\nvar line = board.create('line',[A,B]);\nvar C = board.create('point',[0,-1]);\nvar par = board.create('parabola',[C,line]);","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Conic section: parabola<\/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>Conic section: parabola<\/h1>\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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n          \n          var A = board.create('point',[-1,1]);\n          var B = board.create('point',[1,1]);\n          var line = board.create('line',[A,B]);\n          var C = board.create('point',[0,-1]);\n          var par = board.create('parabola',[C,line]);\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.org\/share\/example\/conic-section-parabola\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<jsxgraph width=\"100%\" aspect-ratio=\"1 \/ 1\" title=\"Conic section: parabola\" description=\"This construction was copied from JSXGraph examples database: https:\/\/jsxgraph.org\/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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});\n   \n   var A = board.create('point',[-1,1]);\n   var B = board.create('point',[1,1]);\n   var line = board.create('line',[A,B]);\n   var C = board.create('point',[0,-1]);\n   var par = board.create('parabola',[C,line]);\n<\/jsxgraph>","link":"https:\/\/jsxgraph.org\/share\/example\/conic-section-parabola","link_raw":"https:\/\/jsxgraph.org\/share\/raw\/conic-section-parabola","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Conic section: parabola

Curves JSXGraph objects

Have also a look at "Conic section: ellipse"or "Conic section: generic through 5 points"or "Conic section: hyperbola".

The input elements for a parabola are - a point and a line: focus and the directrix

// Define the id of your board in BOARDID

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

var A = board.create('point',[-1,1]);
var B = board.create('point',[1,1]);
var line = board.create('line',[A,B]);
var C = board.create('point',[0,-1]);
var par = board.create('parabola',[C,line]);

/*
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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = board.create('point',[-1,1]);
var B = board.create('point',[1,1]);
var line = board.create('line',[A,B]);
var C = board.create('point',[0,-1]);
var par = board.create('parabola',[C,line]);

<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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});
    
    var A = board.create('point',[-1,1]);
    var B = board.create('point',[1,1]);
    var line = board.create('line',[A,B]);
    var C = board.create('point',[0,-1]);
    var par = board.create('parabola',[C,line]);
 </script>

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Conic section: parabola" description="This construction was copied from JSXGraph examples database: https://jsxgraph.org/share/" useGlobalJS="false">
   /*
   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 board=JXG.JSXGraph.initBoard(BOARDID,{boundingbox:[-3,3,3,-3], keepaspectratio:true});
   
   var A = board.create('point',[-1,1]);
   var B = board.create('point',[1,1]);
   var line = board.create('line',[A,B]);
   var C = board.create('point',[0,-1]);
   var par = board.create('parabola',[C,line]);
</jsxgraph>

/*
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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});

var A = board.create('point',[-1,1]);
var B = board.create('point',[1,1]);
var line = board.create('line',[A,B]);
var C = board.create('point',[0,-1]);
var par = board.create('parabola',[C,line]);

<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,{boundingbox:[-3,3,3,-3], keepaspectratio:true});
    
    var A = board.create('point',[-1,1]);
    var B = board.create('point',[1,1]);
    var line = board.create('line',[A,B]);
    var C = board.create('point',[0,-1]);
    var par = board.create('parabola',[C,line]);
 </script>

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Conic section: parabola" description="This construction was copied from JSXGraph examples database: https://jsxgraph.org/share/" useGlobalJS="false">
   /*
   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 board=JXG.JSXGraph.initBoard(BOARDID,{boundingbox:[-3,3,3,-3], keepaspectratio:true});
   
   var A = board.create('point',[-1,1]);
   var B = board.create('point',[1,1]);
   var line = board.create('line',[A,B]);
   var C = board.create('point',[0,-1]);
   var par = board.create('parabola',[C,line]);
</jsxgraph>