JSFiddle - React, Tailwind, and code Playground

by amca01

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Four point parabolas</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!--
    <link href="jsxgraph.css" rel="stylesheet" type="text/css" />
    <script src="jsxgraphcore.js" charset="UTF-8"></script>
    -->
    <script
      type="text/javascript"
      charset="UTF-8"
      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"
    />
    <script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>

    <!-- The next line is optional: MathJax -->
    <script
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
      id="MathJax-script"
      async
    ></script>
  </head>
  <body>
    <!-- Change the height and width in pixels as necessary -->

    <div id="jxgbox" class="jxgbox" style="width: 600px; height: 600px"></div>

    <script type="text/javascript">
      //
      // Change the bounding box as necessary
      // (upper left x, y coordinates, then lower right x, y coordinates.
      //

      var board = JXG.JSXGraph.initBoard("jxgbox", {
        boundingbox: [-10, 10, 10, -10],
        keepaspectratio: true,
        axis: true,
        defaultAxes: {
          x: { ticks: { label: { visible: false } } },
          y: { ticks: { label: { visible: false } } },
        },
      })
      //
      var noshow = { visible: false, label: { visible: false } }

      var p0 = board.create("point", [2, 3], { name: "p_0" })
      var p1 = board.create("point", [2, 1], { name: "p_1" })
      var p2 = board.create("point", [-4, 1], { name: "p_2" })
      var p3 = board.create("point", [1, 0], { name: "p_3" })
      
      var M = math.matrix([
        [p0.X(), p0.Y(), 1],
        [p1.X(), p1.Y(), 1],
        [p2.X(), p2.Y(), 1],
      ])
      console.log(p0.X())
     ...