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

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