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

Charts (assessment)
Show plain example
QR code
<iframe 
    src="https://jsxgraph.org/share/iframe/chart-assessment" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Charts (assessment)" 
    allowfullscreen
></iframe>
This code has to
<h4>Question</h4>
In the parliamentary election, party \(\{label1\}\) received \(\{value1\}\) % of the votes and party \(\{label2\}\) got
\(\{value2\}\) %.
Parties \(\{label3\}\) and \(\{label4\}\) each received \(\{value3\}\) % (=\(\{value4\}\) %).
The rest went to the remaining parties \(\{label5\}\).
Adjust the chart according to the election results by adjusting the green handle.

<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>Input</h4>
\([\{label1\}, \{label2\}, ..., \{labelN\}]\) and
<p/>
\([\{value1\}, \{value2\}, ... , \{valueN\}]\)

<h4>Output</h4>
\([\{value1\}, \{value2\}, ... , \{valueN\}]\)
<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

        // input data from LMS
    
        let inputLabel = [
            'A',   // label A
            'B',   // label B
            'C',   // label C
            'D',   // label D
            'E'   // label E
        ];
        let inputValue = [
            20,   // value A
            40,   // value B
            10,   // value C
            35,   // value D
            5     // value E
        ];
    
        // number of bars
    
        let max = inputValue.length;
    
        // bar width
    
        let width = 35 - max;
    
        // JSXGraph board
    
        const board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-0.5, 55, max + 1, -5],
            axis: true,
            defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}},
            showNavigation: false,
            showCopyright: false
        });
    
        // bars with glider for adjustment
    
        let G = [];
        for (let i = 0; i < max; i++) {
            let par = board.create('segment', [[i + 1, 0], [i + 1, 100]], {name: '', fixed: true, visible: false});
            G[i] = board.create('glider', [i + 1, inputValue[i], par], {
                name: '',
                snapToGrid: true,
                face: 'minus',
                size: width / 2,
                strokeWidth: 4,
                strokeColor: '#00cc00',
                showInfoBox: false
            });
            board.create('segment', [[i + 1, 0], G[i]], {
                name: '',
                fixed: true,
                visible: true,
                strokeWidth: width,
                strokeColor: 'rgb(' + 255 * (max - i) / max + ', 0, ' + 255 * i / max + ')',
                highLightstrokeColor: 'rgb(' + 255 * (max - i) / max + ', 0, ' + 255 * i / max + ')'
            });
            board.create('text', [i + 1, -2, inputLabel[i]], {name: '', fixed: true, anchorX: 'middle'});
            G[i].on('up', function (e) {
                document.getElementById('outputID').innerHTML = output();
            });
        }
    
        // output data for LMS, additional binding to LMS necessary
    
        let output = function () {
            let out = [];
            for (let i = 0; i < max; i++)
                out.push(G[i].Y());
            return out;
        }
    
        // output events (only necessary for demonstration in share database, not needed in LMS)
    
        for (let i = 0; i < max; i++)
            G[i].on('up', function (e) {
                document.getElementById('outputID').innerHTML = output();
            });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

    // input data from LMS

    let inputLabel = [
        'A',   // label A
        'B',   // label B
        'C',   // label C
        'D',   // label D
        'E'   // label E
    ];
    let inputValue = [
        20,   // value A
        40,   // value B
        10,   // value C
        35,   // value D
        5     // value E
    ];

    // number of bars

    let max = inputValue.length;

    // bar width

    let width = 35 - max;

    // JSXGraph board

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-0.5, 55, max + 1, -5],
        axis: true,
        defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}},
        showNavigation: false,
        showCopyright: false
    });

    // bars with glider for adjustment

    let G = [];
    for (let i = 0; i < max; i++) {
        let par = board.create('segment', [[i + 1, 0], [i + 1, 100]], {name: '', fixed: true, visible: false});
        G[i] = board.create('glider', [i + 1, inputValue[i], par], {
            name: '',
            snapToGrid: true,
            face: 'minus',
            size: width / 2,
            strokeWidth: 4,
            strokeColor: '#00cc00',
            showInfoBox: false
        });
        board.create('segment', [[i + 1, 0], G[i]], {
            name: '',
            fixed: true,
            visible: true,
            strokeWidth: width,
            strokeColor: 'rgb(' + 255 * (max - i) / max + ', 0, ' + 255 * i / max + ')',
            highLightstrokeColor: 'rgb(' + 255 * (max - i) / max + ', 0, ' + 255 * i / max + ')'
        });
        board.create('text', [i + 1, -2, inputLabel[i]], {name: '', fixed: true, anchorX: 'middle'});
        G[i].on('up', function (e) {
            document.getElementById('outputID').innerHTML = output();
        });
    }

    // output data for LMS, additional binding to LMS necessary

    let output = function () {
        let out = [];
        for (let i = 0; i < max; i++)
            out.push(G[i].Y());
        return out;
    }

    // output events (only necessary for demonstration in share database, not needed in LMS)

    for (let i = 0; i < max; i++)
        G[i].on('up', function (e) {
            document.getElementById('outputID').innerHTML = output();
        });

Charts (assessment)

Assessment
Charts
Charts and data
Statistics
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

In the parliamentary election, party \(\{label1\}\) received \(\{value1\}\) % of the votes and party \(\{label2\}\) got \(\{value2\}\) %. Parties \(\{label3\}\) and \(\{label4\}\) each received \(\{value3\}\) % (=\(\{value4\}\) %). The rest went to the remaining parties \(\{label5\}\). Adjust the chart according to the election results by adjusting the green handle.

Result

[Change JSXGraph construction.]

Input

\([\{label1\}, \{label2\}, ..., \{labelN\}]\) and

\([\{value1\}, \{value2\}, ... , \{valueN\}]\)

Output

\([\{value1\}, \{value2\}, ... , \{valueN\}]\)
<h4>Question</h4>
In the parliamentary election, party \(\{label1\}\) received \(\{value1\}\) % of the votes and party \(\{label2\}\) got
\(\{value2\}\) %.
Parties \(\{label3\}\) and \(\{label4\}\) each received \(\{value3\}\) % (=\(\{value4\}\) %).
The rest went to the remaining parties \(\{label5\}\).
Adjust the chart according to the election results by adjusting the green handle.
// Define the id of your board in BOARDID

    // input data from LMS

    let inputLabel = [
        'A',   // label A
        'B',   // label B
        'C',   // label C
        'D',   // label D
        'E'   // label E
    ];
    let inputValue = [
        20,   // value A
        40,   // value B
        10,   // value C
        35,   // value D
        5     // value E
    ];

    // number of bars

    let max = inputValue.length;

    // bar width

    let width = 35 - max;

    // JSXGraph board

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-0.5, 55, max + 1, -5],
        axis: true,
        defaultAxes: {x: {ticks: {label: {visible: false}}}, y: {ticks: {label: {visible: false}}}},
        showNavigation: false,
        showCopyright: false
    });

    // bars with glider for adjustment

    let G = [];
    for (let i = 0; i < max; i++) {
        let par = board.create('segment', [[i + 1, 0], [i + 1, 100]], {name: '', fixed: true, visible: false});
        G[i] = board.create('glider', [i + 1, inputValue[i], par], {
            name: '',
            snapToGrid: true,
            face: 'minus',
            size: width / 2,
            strokeWidth: 4,
            strokeColor: '#00cc00',
            showInfoBox: false
        });
        board.create('segment', [[i + 1, 0], G[i]], {
            name: '',
            fixed: true,
            visible: true,
            strokeWidth: width,
            strokeColor: 'rgb(' + 255 * (max - i) / max + ', 0, ' + 255 * i / max + ')',
            highLightstrokeColor: 'rgb(' + 255 * (max - i) / max + ', 0, ' + 255 * i / max + ')'
        });
        board.create('text', [i + 1, -2, inputLabel[i]], {name: '', fixed: true, anchorX: 'middle'});
        G[i].on('up', function (e) {
            document.getElementById('outputID').innerHTML = output();
        });
    }

    // output data for LMS, additional binding to LMS necessary

    let output = function () {
        let out = [];
        for (let i = 0; i < max; i++)
            out.push(G[i].Y());
        return out;
    }

    // output events (only necessary for demonstration in share database, not needed in LMS)

    for (let i = 0; i < max; i++)
        G[i].on('up', function (e) {
            document.getElementById('outputID').innerHTML = output();
        });
<h4>Result</h4>
[<span id="outputID">Change JSXGraph construction.</span>]

<h4>Input</h4>
\([\{label1\}, \{label2\}, ..., \{labelN\}]\) and
<p/>
\([\{value1\}, \{value2\}, ... , \{valueN\}]\)

<h4>Output</h4>
\([\{value1\}, \{value2\}, ... , \{valueN\}]\)

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.