This program demonstrates a program using JSXGraph written in TypeScript and hosted in STEMCstudio.
This program was created by Igor Pesek at JSXGraph Conference 2020. Igor has created a fabulous JSXGraph resource for learning and using JSXGraph, the JSXGraph Book.
JSXGraph was developed by the Center for Mobile Learning with Digital Technology – Universität Bayreuth, Germany.
| if (JXG.Options.point) { | |
| JXG.Options.point.color = 'deeppink' | |
| JXG.Options.point.size = 3 | |
| } | |
| if (JXG.Options.text) { | |
| JXG.Options.text.useMathJax = true | |
| } | |
| /** | |
| * Attributes used to initialize the JXG.Board. | |
| */ | |
| export const boardAttribs: Partial<JXG.BoardAttributes> = { | |
| axis: true, | |
| boundingBox: [-5, 5, 5, -5], | |
| showCopyright: true, | |
| showNavigation: true, | |
| showFullscreen: true, | |
| showScreenshot: true | |
| } | |
| export const perpStyle: JXG.PerpendicularAttributes = { | |
| dash: '1', | |
| strokeWidth: '1', | |
| strokeColor: '#30510b' | |
| } | |
| export const centroidStyle: JXG.SegmentAttributes = { | |
| dash: '1', | |
| strokeWidth: '1', | |
| strokeColor: '#dc3cd3' | |
| } | |
| export const circaStyle: JXG.PerpendicularAttributes = { | |
| dash: '1', | |
| strokeWidth: '1', | |
| strokeColor: '#ffc300' | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <base href="/"> | |
| <style> | |
| body { | |
| background: #cccccc; | |
| } | |
| pre code.hljs { | |
| display: block; | |
| } | |
| code.hljs { | |
| display: inline; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraph.css"> | |
| <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/system.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| System.config({ | |
| "warnings": false, | |
| "map": {} | |
| }); | |
| </script> | |
| <div id="box" class="jxgbox" style="width:500px; height:500px"></div> | |
| <ul> | |
| <li> | |
| <a href="http://jsxgraph.uni-bayreuth.de" target="_blank" class="JXGtext">JSXGraph Home Page</a> | |
| </li> | |
| </ul> | |
| <script> | |
| System.register('./boardAttribs.js',[],function(a,b){'use strict';var c,d,e,f;var g=b&&b.id;return{setters:[],execute:function(){if(JXG.Options.point){JXG.Options.point.color='deeppink';JXG.Options.point.size=3}if(JXG.Options.text){JXG.Options.text.useMathJax=true}a('boardAttribs',c={axis:true,boundingBox:[-5,5,5,-5],showCopyright:true,showNavigation:true,showFullscreen:true,showScreenshot:true});a('perpStyle',d={dash:'1',strokeWidth:'1',strokeColor:'#30510b'});a('centroidStyle',e={dash:'1',strokeWidth:'1',strokeColor:'#dc3cd3'});a('circaStyle',f={dash:'1',strokeWidth:'1',strokeColor:'#ffc300'})}}});System.register('./index.js',['./boardAttribs.js'],function(d,b){'use strict';var a;var c=b&&b.id;return{setters:[function(b){a=b}],execute:function(){$(document).ready(function(){var b=JXG.JSXGraph.initBoard('box',a.boardAttribs);var c=b.create('point',[-2,-1]);var d=b.create('point',[2,1.5]);var e=b.create('point',[3,-4]);var f=b.create('segment',[c,d]);var g=b.create('segment',[c,e]);var h=b.create('segment',[d,e]);var l=b.create('perpendicular',[g,d],a.perpStyle);var m=b.create('perpendicular',[h,c],a.perpStyle);b.create('perpendicular',[f,e],a.perpStyle);var n=b.create('intersection',[m,l],{name:'H'});var i=b.create('midpoint',[c,d],{name:''});var j=b.create('midpoint',[c,e],{name:''});var k=b.create('midpoint',[d,e],{name:''});var o=b.create('segment',[i,e],a.centroidStyle);var p=b.create('segment',[j,d],a.centroidStyle);b.create('segment',[k,c],a.centroidStyle);var q=b.create('intersection',[o,p],{name:'G'});var r=b.create('perpendicular',[f,i],a.circaStyle);var s=b.create('perpendicular',[g,j],a.circaStyle);b.create('perpendicular',[h,k],a.circaStyle);var t=b.create('intersection',[r,s],{name:'Q'});b.create('circle',[t,c]);b.create('line',[n,q])})}}}) | |
| </script> | |
| <script> | |
| System.defaultJSExtensions=true;System.import('./index.js').catch(function(a){console.error(a)}) | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang='en'> | |
| <head> | |
| <base href='/'> | |
| <link rel='stylesheet' href="style.css" /> | |
| </head> | |
| <body> | |
| <div id='box' class='jxgbox' style='width:500px; height:500px'></div> | |
| <ul> | |
| <li> | |
| <a href='http://jsxgraph.uni-bayreuth.de' target='_blank' class='JXGtext'>JSXGraph Home Page</a> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
| import { boardAttribs, centroidStyle, circaStyle, perpStyle } from './boardAttribs' | |
| $(document).ready(function() { | |
| const board = JXG.JSXGraph.initBoard('box', boardAttribs) | |
| const A = board.create('point', [-2, -1]) | |
| const B = board.create('point', [2, 1.5]) | |
| const C = board.create('point', [3, -4]) | |
| // triangle | |
| const segAB = board.create('segment', [A, B]) | |
| const segAC = board.create('segment', [A, C]) | |
| const segBC = board.create('segment', [B, C]) | |
| // orthocenter | |
| const pB = board.create('perpendicular', [segAC, B], perpStyle) | |
| const pA = board.create('perpendicular', [segBC, A], perpStyle) | |
| board.create('perpendicular', [segAB, C], perpStyle) | |
| const H = board.create('intersection', [pA, pB], { name: 'H' }) | |
| // centroid | |
| const midpAB = board.create('midpoint', [A, B], { name: '' }) | |
| const midpAC = board.create('midpoint', [A, C], { name: '' }) | |
| const midpBC = board.create('midpoint', [B, C], { name: '' }) | |
| const centSegA = board.create('segment', [midpAB, C], centroidStyle) | |
| const centSegB = board.create('segment', [midpAC, B], centroidStyle) | |
| board.create('segment', [midpBC, A], centroidStyle) | |
| const G = board.create('intersection', [centSegA, centSegB], { name: 'G' }) | |
| // circumcenter | |
| const circA = board.create('perpendicular', [segAB, midpAB], circaStyle) | |
| const circB = board.create('perpendicular', [segAC, midpAC], circaStyle) | |
| board.create('perpendicular', [segBC, midpBC], circaStyle) | |
| const Q = board.create('intersection', [circA, circB], { name: 'Q' }) | |
| board.create('circle', [Q, A]) | |
| board.create('line', [H, G]) | |
| }) |
| { | |
| "description": "Igor Pesek Workshop", | |
| "dependencies": { | |
| "jquery": "^2.1.4", | |
| "jsxgraph": "^1.1.0", | |
| "mathjax": "^3.1.2" | |
| }, | |
| "name": "project-1", | |
| "version": "1.0.0", | |
| "linting": true, | |
| "author": "David Geo Holmes", | |
| "keywords": [ | |
| "JSXGraph Conference 2020" | |
| ] | |
| } |
| body { | |
| background: #cccccc; | |
| } | |
| pre code.hljs { | |
| display: block; | |
| } | |
| code.hljs { | |
| display: inline; | |
| } |
| { | |
| "allowJs": true, | |
| "checkJs": true, | |
| "declaration": true, | |
| "emitDecoratorMetadata": true, | |
| "experimentalDecorators": true, | |
| "jsx": "react", | |
| "module": "system", | |
| "noImplicitAny": true, | |
| "noImplicitReturns": true, | |
| "noImplicitThis": true, | |
| "noUnusedLocals": true, | |
| "noUnusedParameters": true, | |
| "preserveConstEnums": true, | |
| "removeComments": true, | |
| "skipLibCheck": true, | |
| "sourceMap": false, | |
| "strictNullChecks": true, | |
| "suppressImplicitAnyIndexErrors": true, | |
| "target": "es5", | |
| "traceResolution": true | |
| } |
| { | |
| "rules": { | |
| "array-type": [ | |
| true, | |
| "array" | |
| ], | |
| "curly": false, | |
| "comment-format": [ | |
| true, | |
| "check-space" | |
| ], | |
| "eofline": true, | |
| "forin": true, | |
| "jsdoc-format": true, | |
| "new-parens": true, | |
| "no-conditional-assignment": false, | |
| "no-consecutive-blank-lines": true, | |
| "no-construct": true, | |
| "no-for-in-array": true, | |
| "no-inferrable-types": [ | |
| true | |
| ], | |
| "no-magic-numbers": false, | |
| "no-shadowed-variable": true, | |
| "no-string-throw": true, | |
| "no-trailing-whitespace": [ | |
| false, | |
| "ignore-jsdoc" | |
| ], | |
| "no-var-keyword": true, | |
| "one-variable-per-declaration": [ | |
| true, | |
| "ignore-for-loop" | |
| ], | |
| "prefer-const": true, | |
| "prefer-for-of": true, | |
| "prefer-function-over-method": false, | |
| "prefer-method-signature": true, | |
| "radix": true, | |
| "semicolon": [ | |
| true, | |
| "never" | |
| ], | |
| "trailing-comma": [ | |
| true, | |
| { | |
| "multiline": "never", | |
| "singleline": "never" | |
| } | |
| ], | |
| "triple-equals": true, | |
| "use-isnan": true | |
| } | |
| } |