<iframe 
    src="http://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>