Share JSXGraph: example "Inverse composition rules"

JSXGraph
Share JSXGraph: example "Inverse composition rules"
This website is a beta version. The official release will be in **2023**.
f(x) sin(x) cos(x) tan(x) x2 sinh(x) exp(x)
 
g(x) arcsin(x) arccos(x) arctan(x) √(x) arcsinh(x) log(x)
 
Composition f(g(x)) g(f(x))        
         
<table style="padding:5px; margin:2px">
 <tr style="color:blue">
   <th>f(x)</th>
   <td>sin(x)</td>
   <td>cos(x)</td>
   <td>tan(x)</td>
   <td>x<sup>2</sup></td>
   <td>sinh(x)</td>
   <td>exp(x)</td>
 </tr>
 <tr>
   <td> </td>
   <td><input type="radio" name="f" value="sin" checked onChange="change(this, 'f')"></td>
   <td><input type="radio" name="f" value="cos"         onChange="change(this, 'f')"></td>
   <td><input type="radio" name="f" value="tan"         onChange="change(this, 'f')"></td>
   <td><input type="radio" name="f" value="square"      onChange="change(this, 'f')"></td>
   <td><input type="radio" name="f" value="sinh"        onChange="change(this, 'f')"></td>
   <td><input type="radio" name="f" value="exp"         onChange="change(this, 'f')"></td>
 </tr>
 <tr style="color:green">
   <th>g(x)</th>
   <td>arcsin(x)</td>
   <td>arccos(x)</td>
   <td>arctan(x)</td>
   <td>√(x)</td>
   <td>arcsinh(x)</td>
   <td>log(x)</td>
 </tr>
 <tr>
   <td> </td>
   <td><input type="radio" name="g" value="asin" checked onChange="change(this, 'g')"></td>
   <td><input type="radio" name="g" value="acos"         onChange="change(this, 'g')"></td>
   <td><input type="radio" name="g" value="atan"         onChange="change(this, 'g')"></td>
   <td><input type="radio" name="g" value="sqrt"         onChange="change(this, 'g')"></td>
   <td><input type="radio" name="g" value="asinh"        onChange="change(this, 'g')"></td>
   <td><input type="radio" name="g" value="log"          onChange="change(this, 'g')"></td>
 </tr>
 <tr style="color:red">
   <th>Composition</th>
   <td>f(g(x))</td>
   <td>g(f(x))</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
 <tr>
   <td> </td>
   <td><input type="radio" name="fg" value="fg" checked onChange="compose(this)"></td>
   <td><input type="radio" name="fg" value="gf"         onChange="compose(this)"></td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
</table>
// Define the id of your board in BOARDID

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

var f, g, fg, plotf, plotg, plotfg;

// Change function f or g
var change = function(obj, name) {
    var t = obj.value + '(x)';
    
    if (obj.value === 'square') {
        t = 'x * x';
    }
   
    if (name === 'f') {
        f = board.jc.snippet(t, true, 'x');
        plotf.Y = f;
        plotf.updateCurve();
    } else {
        g = board.jc.snippet(t, true, 'x');
        plotg.Y = g;
        plotg.updateCurve();
    }
    board.update();
}

// Change composition order
var compose = function(obj) {
    var t = obj.value;

    if (t == 'fg') {
        fg = (x) => f(g(x));
    } else if (t == 'gf') {
        fg = (x) => g(f(x));
    }
    plotfg.Y = fg;
    plotfg.updateCurve();
    board.update();
}

f = (x) => Math.sin(x);
g = (x) => Math.asin(x);
fg = (x) => f(g(x));

plotf = board.create('functiongraph', [f, -2, 2], {dash: 2, strokeColor: 'blue', strokeWidth: 3});

plotg = board.create('functiongraph', [g, -2, 2], {dash: 3, strokeColor: 'green', strokeWidth: 3});

plotfg = board.create('functiongraph', [fg, -2, 2], {strokeColor: 'red', strokeWidth: 3});