<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/inverse-composition-rules" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Inverse composition rules" 
    allowfullscreen
></iframe>

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


<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

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