Home
Random example
Search
Applications
Chemistry
Economy
Famous theorems
Geography
Physics
Sports
Test
Assessment
Calculus
3D
Applied calculus
Basic calculus
Differential equations
Function plotting
Implicit plotting
Sequences and series
Charts and data
Charts
Statistics
Curves
Interpolation
Intersection, Union, Difference
Lindenmayer Systems
Splines
Geometry
3D
Analytic
Euclidean
Basic constructions
Mappings
Non-Euclidean
Projective
Symmetry
Technical
Animation
Roulettes
Board options
First steps
Images
JSXGraph objects
Arcs and angles
Axes
Circles
Groups
Lines and arrows
Point
Polygons
Slider
Turtle
Vectors
JessieCode
Texts
Transformations
Video
jsxgraph.org
JSXGraph logo
JSXGraph
JSXGraph share

Share

Trigonometric Function (assessment)
Show plain example
QR code
<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>
This code has to
<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();
}

Trigonometric Function (assessment)

Assessment
Basic calculus
Function plotting
This example can be used for assessment tasks with graphical input. The input variables have to be generated by the course system (e.g randomly). The output variables must be binded to the course system's answer method. If you change elements within the board, you will find the result below.

Question: Trigonometric Function

Complete the trigonometric function (blue part) by changing the sliders accordingly (red part).

Result

[Change JSXGraph construction.]

Additional elements

Input

\([\{a_0\}, \{b_0\}, \{c_0\}]\)

Output

\([\{a\}, \{b\}, \{c\}]\)
<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.