<iframe src="https://jsxgraph.org/share/iframe/trigonometric-function-assessment" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: Trigonometric Function (assessment)" allowfullscreen ></iframe>
<h4>Question: Trigonometric Function</h4> Complete the trigonometric function (blue part) by changing the sliders accordingly (red part). <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> <h4>Result</h4> [<span id="outputID">Change JSXGraph construction.</span>] <h4>Additional elements</h4> <button onclick="show();">Show/hide additional elements!</button> <h4>Input</h4> \([\{a_0\}, \{b_0\}, \{c_0\}]\) <h4>Output</h4> \([\{a\}, \{b\}, \{c\}]\) <script type = "text/javascript"> /* This example is not licensed. */ const BOARDID = 'board-0'; // input data from LMS let input = [ 4, 3, 4, // param a0, b0, c0 for given function 2, 7, 6 // param a, b, c ]; // JSXGraph board const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], keepAspectRatio: true, axis: true, showNavigation: false, showCopyright: false }); // function (given/blue part) let f = board.create('functiongraph', [input[0] + '*sin(' + input[1] + '*x-' + input[2] + ')', -10, 0], { name: '\\(f\\)', strokeWidth: 2 }); // sliders a, b, c let a = board.create('slider', [[-9, 9], [-3, 9], [1, input[3], 10]], { name: 'a', ticks: { visible: false }, snapWidth: 1 }); let b = board.create('slider', [[-9, 8], [-3, 8], [1, input[4], 10]], { name: 'b', ticks: { visible: false }, snapWidth: 1 }); let c = board.create('slider', [[-9, 7], [-3, 7], [1, input[5], 10]], { name: 'c', ticks: { visible: false }, snapWidth: 1 }); // function (red part) let g = board.create('functiongraph', [ (x) => { return a.Value()*Math.sin(b.Value()*x-c.Value()); }, 0, 10], { name: '\\(f\\)', strokeColor: '#cc0000', strokeWidth: 2 }); // function term let t = board.create('text', [1, 8, () => { return 'f(x)='+a.Value()+'*sin('+b.Value()+'*x-'+c.Value()+')'; }], { name: '\\(f\\)', strokeColor: '#cc0000', strokeWidth: 2 }); // the following elements are visible: true / invisible: false let opt = false; let h = board.create('functiongraph', [input[0] + '*sin(' + input[1] + '*x-' + input[2] + ')', 0, 10], { name: '', strokeColor: '#cccccc', strokeWidth: 1, visible: () => { return opt; } }); // output data for LMS, additional binding to LMS necessary let output = function () { return [ a.Value(), b.Value(), c.Value() // param a, b, c ]; } // output events (only necessary for demonstration in share database, not needed in LMS) a.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); b.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); c.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); let show = function () { opt = !opt; board.update(); } </script>
/* This example is not licensed. */ const BOARDID = 'your_div_id'; // Insert your id here! // input data from LMS let input = [ 4, 3, 4, // param a0, b0, c0 for given function 2, 7, 6 // param a, b, c ]; // JSXGraph board const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], keepAspectRatio: true, axis: true, showNavigation: false, showCopyright: false }); // function (given/blue part) let f = board.create('functiongraph', [input[0] + '*sin(' + input[1] + '*x-' + input[2] + ')', -10, 0], { name: '\\(f\\)', strokeWidth: 2 }); // sliders a, b, c let a = board.create('slider', [[-9, 9], [-3, 9], [1, input[3], 10]], { name: 'a', ticks: { visible: false }, snapWidth: 1 }); let b = board.create('slider', [[-9, 8], [-3, 8], [1, input[4], 10]], { name: 'b', ticks: { visible: false }, snapWidth: 1 }); let c = board.create('slider', [[-9, 7], [-3, 7], [1, input[5], 10]], { name: 'c', ticks: { visible: false }, snapWidth: 1 }); // function (red part) let g = board.create('functiongraph', [ (x) => { return a.Value()*Math.sin(b.Value()*x-c.Value()); }, 0, 10], { name: '\\(f\\)', strokeColor: '#cc0000', strokeWidth: 2 }); // function term let t = board.create('text', [1, 8, () => { return 'f(x)='+a.Value()+'*sin('+b.Value()+'*x-'+c.Value()+')'; }], { name: '\\(f\\)', strokeColor: '#cc0000', strokeWidth: 2 }); // the following elements are visible: true / invisible: false let opt = false; let h = board.create('functiongraph', [input[0] + '*sin(' + input[1] + '*x-' + input[2] + ')', 0, 10], { name: '', strokeColor: '#cccccc', strokeWidth: 1, visible: () => { return opt; } }); // output data for LMS, additional binding to LMS necessary let output = function () { return [ a.Value(), b.Value(), c.Value() // param a, b, c ]; } // output events (only necessary for demonstration in share database, not needed in LMS) a.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); b.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); c.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); let show = function () { opt = !opt; board.update(); }
<h4>Question: Trigonometric Function</h4> Complete the trigonometric function (blue part) by changing the sliders accordingly (red part).
// Define the id of your board in BOARDID // input data from LMS let input = [ 4, 3, 4, // param a0, b0, c0 for given function 2, 7, 6 // param a, b, c ]; // JSXGraph board const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], keepAspectRatio: true, axis: true, showNavigation: false, showCopyright: false }); // function (given/blue part) let f = board.create('functiongraph', [input[0] + '*sin(' + input[1] + '*x-' + input[2] + ')', -10, 0], { name: '\\(f\\)', strokeWidth: 2 }); // sliders a, b, c let a = board.create('slider', [[-9, 9], [-3, 9], [1, input[3], 10]], { name: 'a', ticks: { visible: false }, snapWidth: 1 }); let b = board.create('slider', [[-9, 8], [-3, 8], [1, input[4], 10]], { name: 'b', ticks: { visible: false }, snapWidth: 1 }); let c = board.create('slider', [[-9, 7], [-3, 7], [1, input[5], 10]], { name: 'c', ticks: { visible: false }, snapWidth: 1 }); // function (red part) let g = board.create('functiongraph', [ (x) => { return a.Value()*Math.sin(b.Value()*x-c.Value()); }, 0, 10], { name: '\\(f\\)', strokeColor: '#cc0000', strokeWidth: 2 }); // function term let t = board.create('text', [1, 8, () => { return 'f(x)='+a.Value()+'*sin('+b.Value()+'*x-'+c.Value()+')'; }], { name: '\\(f\\)', strokeColor: '#cc0000', strokeWidth: 2 }); // the following elements are visible: true / invisible: false let opt = false; let h = board.create('functiongraph', [input[0] + '*sin(' + input[1] + '*x-' + input[2] + ')', 0, 10], { name: '', strokeColor: '#cccccc', strokeWidth: 1, visible: () => { return opt; } }); // output data for LMS, additional binding to LMS necessary let output = function () { return [ a.Value(), b.Value(), c.Value() // param a, b, c ]; } // output events (only necessary for demonstration in share database, not needed in LMS) a.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); b.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); c.on('up', function (e) { document.getElementById('outputID').innerHTML = output(); }); let show = function () { opt = !opt; board.update(); }
<h4>Result</h4> [<span id="outputID">Change JSXGraph construction.</span>] <h4>Additional elements</h4> <button onclick="show();">Show/hide additional elements!</button> <h4>Input</h4> \([\{a_0\}, \{b_0\}, \{c_0\}]\) <h4>Output</h4> \([\{a\}, \{b\}, \{c\}]\)
This example is not licensed.