JSFiddle - React, Tailwind, and code Playground

by Alison Shelton

HTML

<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>

JavaScript

var board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-10, 10, 10, -10],
    keepaspectratio: true,
    axis: true
});

//vertex
var vertex = board.create('point', [3, -4], {
    name: "vertex",
    strokeColor: 'black'
});

//slider
var s2 = board.create('slider', [
    [-9.5, 3],
    [-9.5, -3],
    [3, 0.25, -3]
], {
    name: 'a',
    snapWidth: 0.01
});


//parabola based on vertex and slider value
var parab = board.create('functiongraph', function (x) {
    return s2.Value() * (x - vertex.X()) * (x - vertex.X()) + vertex.Y();
}, -5 - 5);


//display vertex
//display formulas in color: a=red, vertex=blue, green
board.create('text', [-10, -7, function () {
    return 'vertex = (<span style="color:blue">' +
        JXG.autoDigits(vertex.X()) +
        '</span>, <span style="color:green">' +
        JXG.autoDigits(vertex.Y()) +
        '</span>)';
}]);

board.create('text', [-10, -8, function () {
    var signX = '+',
        signY = '+',
        textX = JXG.autoDigits(Math.abs(vertex.X())),
        textY = JXG.autoDigits(Math.abs(vertex.Y()));
    
    if (vertex.X() < 0) {
        signX = '-';
    }
    
    if (vertex.Y() < 0) {
        signY = '-';
    }
    
    return 'f(x) = <span style="color:red">' +
        s2.Value() +
        '</span>(x ' +  signX +
        ' <span style="color: blue">' + textX +
        '</span>)<sup>2</sup>' + signY +
         ' <span style="color:green">' + textY +
         '</span>';
}]);