<\/p>\n\\(acute: type = 0\\)\n
<\/p>\n\\(right: type = 1\\)\n
<\/p>\n\\(obtuse: type = 2\\)\n","numboards":1,"description":"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.\n","dimensions":[{"width":"100%","height":"","aspect-ratio":"1 \/ 1"}],"wider":0,"license":null,"timestamp":"2023-05-22 15:05:09","visible":1,"tags":[{"id":152,"alias":"assessment","name":"Assessment"},{"id":121,"alias":"geometry","name":"Geometry"},{"id":139,"alias":"polygons","name":"Polygons"}],"tag_ids":[152,121,139],"refers_to":[],"refers_to_ids":[],"authors":[],"authors_ids":[],"unique_ids":["jxgbox-6750fe3b09d59"],"code_display":"\/\/ Define the id of your board in BOARDID\n\n\/\/ input data from LMS\n\nlet input = [\n 2, 2, \/\/ point A(x, y)\n 12, 3, \/\/ point B(x, y)\n 8, 12 \/\/ point C(x, y)\n];\n\n\/\/ JSXGraph board\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n boundingbox: [0, 15, 15, 0],\n snapToGrid: true,\n showNavigation: false,\n showCopyright: false\n});\n\n\/\/ triangle ABC\n\nlet A = board.create('point', [input[0], input[1]], {\n name: '\\\\(A\\\\)',\n snapToGrid: true,\n label: {offset: [-25, -10], fontSize: 16}\n});\nlet B = board.create('point', [input[2], input[3]], {\n name: '\\\\(B\\\\)',\n snapToGrid: true,\n label: {offset: [10, -5], fontSize: 16}\n});\nlet C = board.create('point', [input[4], input[5]], {\n name: '\\\\(C\\\\)',\n snapToGrid: true,\n label: {offset: [0, 15], fontSize: 16}\n});\nlet ABC = board.create('polygon', [A, B, C], {\n borders: {strokeWidth: 2}\n});\n\n\/\/ angles alpha, beta, gamma\n\nlet alpha = board.create('nonreflexangle', [B, A, C], {\n orthoType: 'square',\n withLabel: false,\n visible: false\n});\nlet beta = board.create('nonreflexangle', [C, B, A], {\n orthoType: 'square',\n withLabel: false,\n visible: false\n});\nlet gamma = board.create('nonreflexangle', [A, C, B], {\n orthoType: 'square',\n withLabel: false,\n visible: false\n});\n\n\/\/ the following properties are visible: true \/ invisible: false\n\nlet opt = false;\n\n\/\/ show right angle\n\nalpha.setAttribute({\n visible: () => {\n return opt;\n }\n});\nbeta.setAttribute({\n visible: () => {\n return opt;\n }\n});\ngamma.setAttribute({\n visible: () => {\n return opt;\n }\n});\n\n\/\/ output data for LMS, additional binding to LMS necessary\n\nlet output = function () {\n let type = -1;\n if (Math.max(alpha.Value(), beta.Value(), gamma.Value())<0.5*Math.PI)\n type = 0; \/\/ acute\n else if (Math.max(alpha.Value(), beta.Value(), gamma.Value()) == 0.5 * Math.PI)\n type = 1; \/\/ right\n else\n type = 2; \/\/obtuse\n return [\n A.X(), A.Y(), \/\/ point A(x, y)\n B.X(), B.Y(), \/\/ point B(x, y)\n C.X(), C.Y(), \/\/ point C(x, y)\n type \/\/ 0: acute, 1: right, 2: obtuse\n ];\n}\n\n\/\/ output events (only necessary for demonstration in share database, not needed in LMS)\n\nA.on('up', function (e) {\n document.getElementById('outputID').innerHTML = output();\n});\nB.on('up', function (e) {\n document.getElementById('outputID').innerHTML = output();\n});\nC.on('up', function (e) {\n document.getElementById('outputID').innerHTML = output();\n});\n\n\nlet show = function show() {\n opt = !opt;\n board.update();\n}","code_execute_html":"
<iframe src="https://jsxgraph.uni-bayreuth.de/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>
<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(); }
<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.