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