Share JSXGraph: example "Charts (assessment)"

JSXGraph
Share JSXGraph: example "Charts (assessment)"
This website is a beta version. The official release will be in **2023**.

Charts (assessment)

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\}]\)