Share JSXGraph: example "Inverse composition rules"

Share JSXGraph: example "Inverse composition rules"
This website is a beta version. The official release will be in **2023**.

Inverse composition rules

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">
   <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 style="color:green">
   <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 style="color:red">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <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>
// 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;
    } else {
        g = board.jc.snippet(t, true, 'x');
        plotg.Y = g;

// 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;

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});