\n f(x)<\/th>\n | sin(x)<\/td>\n | cos(x)<\/td>\n | tan(x)<\/td>\n | x2<\/sup><\/td>\n sinh(x)<\/td>\n | exp(x)<\/td>\n <\/tr>\n | \n \u00a0<\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n <\/tr>\n | \n g(x)<\/th>\n | arcsin(x)<\/td>\n | arccos(x)<\/td>\n | arctan(x)<\/td>\n | \u221a(x)<\/td>\n | arcsinh(x)<\/td>\n | log(x)<\/td>\n <\/tr>\n | \n \u00a0<\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n <\/tr>\n | \n Composition<\/th>\n | f(g(x))<\/td>\n | g(f(x))<\/td>\n | \u00a0<\/td>\n | \u00a0<\/td>\n | \u00a0<\/td>\n | \u00a0<\/td>\n <\/tr>\n | \n \u00a0<\/td>\n | <\/td>\n | <\/td>\n | \u00a0<\/td>\n | \u00a0<\/td>\n | \u00a0<\/td>\n | \u00a0<\/td>\n <\/tr>\n<\/table>\n","post":"","number_of_boards":1,"description":"","dimensions":[{"width":"100%","height":"","aspect-ratio":"1 \/ 1"}],"large_in_db":0,"license":{"title":"Creative Commons Attribution 4.0 International","identifier":"CC BY 4.0","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by\/4.0\/88x31.png","rank":0},"timestamp":"2023-02-14 15:00:42","deleted":0,"tags":[{"id":108,"alias":"basic-calculus","name":"Basic calculus"},{"id":106,"alias":"calculus","name":"Calculus"}],"groups":[],"refers_to":[],"authors":[],"unique_ids":["jxgbox-6567dbad389e0"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n axis: true,\n boundingbox: [-3, 3, 3, -3]\n});\n\nvar f, g, fg, plotf, plotg, plotfg;\n\n\/\/ Change function f or g\nvar change = function(obj, name) {\n var t = obj.value + '(x)';\n \n if (obj.value === 'square') {\n t = 'x * x';\n }\n \n if (name === 'f') {\n f = board.jc.snippet(t, true, 'x');\n plotf.Y = f;\n plotf.updateCurve();\n } else {\n g = board.jc.snippet(t, true, 'x');\n plotg.Y = g;\n plotg.updateCurve();\n }\n board.update();\n}\n\n\/\/ Change composition order\nvar compose = function(obj) {\n var t = obj.value;\n\n if (t == 'fg') {\n fg = (x) => f(g(x));\n } else if (t == 'gf') {\n fg = (x) => g(f(x));\n }\n plotfg.Y = fg;\n plotfg.updateCurve();\n board.update();\n}\n\nf = (x) => Math.sin(x);\ng = (x) => Math.asin(x);\nfg = (x) => f(g(x));\n\nplotf = board.create('functiongraph', [f, -2, 2], {dash: 2, strokeColor: 'blue', strokeWidth: 3});\n\nplotg = board.create('functiongraph', [g, -2, 2], {dash: 3, strokeColor: 'green', strokeWidth: 3});\n\nplotfg = board.create('functiongraph', [fg, -2, 2], {strokeColor: 'red', strokeWidth: 3});","code_execute_html":" <\/div>\n
<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});
| |