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