Example parabola Math4U

by pedritomelenas

HTML

<!-- Include JSXGraph -->
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<!-- Include MathJax -->
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<!-- JSXGraph div -->
<div id="jxgbox" class="jxgbox" style="max-width:800px; aspect-ratio:1/1">
</div>

JavaScript

// Enable MathJax for all JSXGraph elements!
// Use '\\( ... \\)' or '\\[ ... \\]` for LaTeX math text
JXG.Options.text.useMathJax = true;

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5],
    axis: true,
    pan: { enabled: true },      // Disable pan for 3D view
    zoom: { enabled: true }      // Disable zoom for 3D view
});

const zero = board.create('point', [0, 0], { name: 'O', size: 3, color: 'black', visible: false });
const leftaxis = board.create('line', [[-3, 0], [0, 0]], {visible: false });
const rightaxis = board.create('line', [[0, 0], [3, 0]], {visible: false });

const pointa = board.create('glider', [-1.5, 0,leftaxis], { name: '-a', size: 3, color: 'red'});
const pointb = board.create('glider', [1, 0,rightaxis], { name: 'b', size: 3, color: 'red'});
let pointA = board.create('point', [()=>pointa.X(), ()=> pointa.X()**2], { name: 'A', size: 2, color: 'blue' });
const segmentA = board.create('segment', [pointa, pointA], { strokeColor: 'green', strokeWidth: 2, dash: 2 });

let pointB = board.create('point', [()=>pointb.X(), ()=> pointb.X()**2], { name: 'B', size: 2, color: 'blue' });
const segmentB = board.create('segment', [pointb, pointB], { strokeColor: 'green', strokeWidth: 2, dash: 2 });

const parabola = board.create("functiongraph",[(x)=>x**2,-10,10], {strokeColor:'blue', strokeWidth:2, name:"f", withLabel:true,
    label: {
        //anchorX: 'middle',
        //anchorY: 'middle',
        offset: [-10, -10],
        fontSize: 16,
        distance: 1.5,
        position: '42% left'
    }
});

const line = board.create('line', [pointA, pointB], { strokeColor: 'orange', strokeWidth: 2, name:"p", withLabel: true, label: {
        //anchorX: 'left',
        //anchorY: 'middle',
        offset: [0, 10],
        fixed: true,
        distance: 1,
        position: '10% left'
    } });

const yaxis = board.create('line', [[0, -10], [0, 10]], {visible: false });

const...