JSXGraph
JSXGraph share

Share

Type of a Triangle (assessment)
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/type-of-a-triangle-assessment" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Type of a Triangle (assessment)" 
    allowfullscreen
></iframe>
This code has to 
<h4>Question</h4>
Change the position of points \(A\), \(B\) and \(C\) to get a \(\{type\}\) triangle \(ABC\).

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

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}]\)

<h4>Output</h4>

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}, \{type\}]\)
<p></p>
\(acute: type = 0\)
<p></p>
\(right: type = 1\)
<p></p>
\(obtuse: type = 2\)

<script type = "text/javascript"> 
    /*
    This example is not licensed.
    */
    
    const BOARDID = 'board-0';

    // input data from LMS
    
    let input = [
        2, 2,   // point A(x, y)
        12, 3,  // point B(x, y)
        8, 12   // point C(x, y)
    ];
    
    // JSXGraph board
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [0, 15, 15, 0],
        snapToGrid: true,
        showNavigation: false,
        showCopyright: false
    });
    
    // triangle ABC
    
    let A = board.create('point', [input[0], input[1]], {
        name: '\\(A\\)',
        snapToGrid: true,
        label: {offset: [-25, -10], fontSize: 16}
    });
    let B = board.create('point', [input[2], input[3]], {
        name: '\\(B\\)',
        snapToGrid: true,
        label: {offset: [10, -5], fontSize: 16}
    });
    let C = board.create('point', [input[4], input[5]], {
        name: '\\(C\\)',
        snapToGrid: true,
        label: {offset: [0, 15], fontSize: 16}
    });
    let ABC = board.create('polygon', [A, B, C], {
        borders: {strokeWidth: 2}
    });
    
    // angles alpha, beta, gamma
    
    let alpha = board.create('nonreflexangle', [B, A, C], {
        orthoType: 'square',
        withLabel: false,
        visible: false
    });
    let beta = board.create('nonreflexangle', [C, B, A], {
        orthoType: 'square',
        withLabel: false,
        visible: false
    });
    let gamma = board.create('nonreflexangle', [A, C, B], {
        orthoType: 'square',
        withLabel: false,
        visible: false
    });
    
    // the following properties are visible: true / invisible: false
    
    let opt = false;
    
    // show right angle
    
    alpha.setAttribute({
        visible: () => {
            return opt;
        }
    });
    beta.setAttribute({
        visible: () => {
            return opt;
        }
    });
    gamma.setAttribute({
        visible: () => {
            return opt;
        }
    });
    
    // output data for LMS, additional binding to LMS necessary
    
    let output = function () {
        let type = -1;
        if (Math.max(alpha.Value(), beta.Value(), gamma.Value())<0.5*Math.PI)
            type = 0; // acute
        else if (Math.max(alpha.Value(), beta.Value(), gamma.Value()) == 0.5 * Math.PI)
            type = 1; // right
        else
            type = 2; //obtuse
        return [
            A.X(), A.Y(),   // point A(x, y)
            B.X(), B.Y(),   // point B(x, y)
            C.X(), C.Y(),   // point C(x, y)
            type            // 0: acute, 1: right, 2: obtuse
        ];
    }
    
    // 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 show() {
        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 = [
    2, 2,   // point A(x, y)
    12, 3,  // point B(x, y)
    8, 12   // point C(x, y)
];

// JSXGraph board

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [0, 15, 15, 0],
    snapToGrid: true,
    showNavigation: false,
    showCopyright: false
});

// triangle ABC

let A = board.create('point', [input[0], input[1]], {
    name: '\\(A\\)',
    snapToGrid: true,
    label: {offset: [-25, -10], fontSize: 16}
});
let B = board.create('point', [input[2], input[3]], {
    name: '\\(B\\)',
    snapToGrid: true,
    label: {offset: [10, -5], fontSize: 16}
});
let C = board.create('point', [input[4], input[5]], {
    name: '\\(C\\)',
    snapToGrid: true,
    label: {offset: [0, 15], fontSize: 16}
});
let ABC = board.create('polygon', [A, B, C], {
    borders: {strokeWidth: 2}
});

// angles alpha, beta, gamma

let alpha = board.create('nonreflexangle', [B, A, C], {
    orthoType: 'square',
    withLabel: false,
    visible: false
});
let beta = board.create('nonreflexangle', [C, B, A], {
    orthoType: 'square',
    withLabel: false,
    visible: false
});
let gamma = board.create('nonreflexangle', [A, C, B], {
    orthoType: 'square',
    withLabel: false,
    visible: false
});

// the following properties are visible: true / invisible: false

let opt = false;

// show right angle

alpha.setAttribute({
    visible: () => {
        return opt;
    }
});
beta.setAttribute({
    visible: () => {
        return opt;
    }
});
gamma.setAttribute({
    visible: () => {
        return opt;
    }
});

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

let output = function () {
    let type = -1;
    if (Math.max(alpha.Value(), beta.Value(), gamma.Value())<0.5*Math.PI)
        type = 0; // acute
    else if (Math.max(alpha.Value(), beta.Value(), gamma.Value()) == 0.5 * Math.PI)
        type = 1; // right
    else
        type = 2; //obtuse
    return [
        A.X(), A.Y(),   // point A(x, y)
        B.X(), B.Y(),   // point B(x, y)
        C.X(), C.Y(),   // point C(x, y)
        type            // 0: acute, 1: right, 2: obtuse
    ];
}

// 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 show() {
    opt = !opt;
    board.update();
}
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

Change the position of points \(A\), \(B\) and \(C\) to get a \(\{type\}\) triangle \(ABC\).

Result

[Change JSXGraph construction.]

Additional elements

Input

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}]\)

Output

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}, \{type\}]\)

\(acute: type = 0\)

\(right: type = 1\)

\(obtuse: type = 2\) 
<h4>Question</h4>
Change the position of points \(A\), \(B\) and \(C\) to get a \(\{type\}\) triangle \(ABC\).
// Define the id of your board in BOARDID

// input data from LMS

let input = [
    2, 2,   // point A(x, y)
    12, 3,  // point B(x, y)
    8, 12   // point C(x, y)
];

// JSXGraph board

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [0, 15, 15, 0],
    snapToGrid: true,
    showNavigation: false,
    showCopyright: false
});

// triangle ABC

let A = board.create('point', [input[0], input[1]], {
    name: '\\(A\\)',
    snapToGrid: true,
    label: {offset: [-25, -10], fontSize: 16}
});
let B = board.create('point', [input[2], input[3]], {
    name: '\\(B\\)',
    snapToGrid: true,
    label: {offset: [10, -5], fontSize: 16}
});
let C = board.create('point', [input[4], input[5]], {
    name: '\\(C\\)',
    snapToGrid: true,
    label: {offset: [0, 15], fontSize: 16}
});
let ABC = board.create('polygon', [A, B, C], {
    borders: {strokeWidth: 2}
});

// angles alpha, beta, gamma

let alpha = board.create('nonreflexangle', [B, A, C], {
    orthoType: 'square',
    withLabel: false,
    visible: false
});
let beta = board.create('nonreflexangle', [C, B, A], {
    orthoType: 'square',
    withLabel: false,
    visible: false
});
let gamma = board.create('nonreflexangle', [A, C, B], {
    orthoType: 'square',
    withLabel: false,
    visible: false
});

// the following properties are visible: true / invisible: false

let opt = false;

// show right angle

alpha.setAttribute({
    visible: () => {
        return opt;
    }
});
beta.setAttribute({
    visible: () => {
        return opt;
    }
});
gamma.setAttribute({
    visible: () => {
        return opt;
    }
});

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

let output = function () {
    let type = -1;
    if (Math.max(alpha.Value(), beta.Value(), gamma.Value())<0.5*Math.PI)
        type = 0; // acute
    else if (Math.max(alpha.Value(), beta.Value(), gamma.Value()) == 0.5 * Math.PI)
        type = 1; // right
    else
        type = 2; //obtuse
    return [
        A.X(), A.Y(),   // point A(x, y)
        B.X(), B.Y(),   // point B(x, y)
        C.X(), C.Y(),   // point C(x, y)
        type            // 0: acute, 1: right, 2: obtuse
    ];
}

// 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 show() {
    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>

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}]\)

<h4>Output</h4>

\([\{x_{A}\}, \{y_{A}\}, \{x_{B}\}, \{y_{B}\}, \{x_{C}\}, \{y_{C}\}, \{type\}]\)
<p></p>
\(acute: type = 0\)
<p></p>
\(right: type = 1\)
<p></p>
\(obtuse: type = 2\)

This example is not licensed.