{"id":18246315,"url":"https://github.com/jsxgraph/moodle-filter_jsxgraph","last_synced_at":"2025-04-04T14:31:15.111Z","repository":{"id":19493804,"uuid":"87164974","full_name":"jsxgraph/moodle-filter_jsxgraph","owner":"jsxgraph","description":"moodle plug-in for JSXGraph","archived":false,"fork":false,"pushed_at":"2025-02-26T11:27:50.000Z","size":6426,"stargazers_count":1,"open_issues_count":1,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-20T14:40:25.300Z","etag":null,"topics":["analysis","dynamic","geometry","jsxgraph","mathematics","moodle","plugin"],"latest_commit_sha":null,"homepage":"https://jsxgraph.org","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsxgraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-04T08:43:32.000Z","updated_at":"2025-02-26T11:22:52.000Z","dependencies_parsed_at":"2023-12-18T11:28:52.844Z","dependency_job_id":"d9db3d1a-3f95-44d4-9332-ceef5a9f2df9","html_url":"https://github.com/jsxgraph/moodle-filter_jsxgraph","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsxgraph%2Fmoodle-filter_jsxgraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsxgraph%2Fmoodle-filter_jsxgraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsxgraph%2Fmoodle-filter_jsxgraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsxgraph%2Fmoodle-filter_jsxgraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsxgraph","download_url":"https://codeload.github.com/jsxgraph/moodle-filter_jsxgraph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247193967,"owners_count":20899401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analysis","dynamic","geometry","jsxgraph","mathematics","moodle","plugin"],"created_at":"2024-11-05T09:25:24.861Z","updated_at":"2025-04-04T14:31:12.978Z","avatar_url":"https://github.com/jsxgraph.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSXGraph Moodle filter \u003c!-- [![Build Status](https://travis-ci.org/jsxgraph/moodle-filter_jsxgraph.svg?branch=master)](https://travis-ci.org/github/jsxgraph/moodle-filter_jsxgraph) --\u003e \n\nAlso listed in [Moodle plugins directory](https://moodle.org/plugins/filter_jsxgraph).\n\n### About JSXGraph\n\nJSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.\nJSXGraph is implemented in pure JavaScript and does not rely on any other library. Special care has been taken to optimize the performance.\n\nHave a look at [www.jsxgraph.org](https://jsxgraph.org/).\n\n##### Features\n- Open source\n- High-performance, small footprint\n- No dependencies\n- Multi-touch support\n- Backward compatible down to IE 6\n\n### Our filter\n\nThis is a plugin for [Moodle](http://moodle.org) to enable function plotting and dynamic geometry constructions with [JSXGraph](http://jsxgraph.org) within a Moodle platform.\nUsing the [JSXGraph](http://jsxgraph.org) filter makes it a lot easier to embed [JSXGraph](http://jsxgraph.org) constructions into Moodle online documents, e.g. in contents like page, quiz, link,... .\n\n## Installation\n\nYou can download the filter here: [Moodle plugins directory](https://moodle.org/plugins/filter_jsxgraph).\nA video about the installation process is available on [YouTube](https://youtu.be/nQvUKg-qD4g).\n\nTo find out more about the installation, you can also [read on here](#installing-the-filter-step-by-step).\n\n## Usage\n\nIn a Moodle course you can add a board to different types of content, i.e.: `Page`, `Link`, `Quiz`, ...\n\nAt the position the construction should appear, create a construction by:\n* switching to the code input, i.e. to \"HTML source editor\" **(*)**\n* inserting a `\u003cjsxgraph\u003e` tag with all required parameters\n* Each \u003ccode\u003e\u003cdiv\\\u003e\u003c/code\u003e that contains a JSXGraph board needs a unique ID on the page. This ID is generated automatically. Reference it within the JavaScript using the constant \u003ccode\u003eBOARDID\u003c/code\u003e.\n\n**(*) Important notice:**   \nPlease note that some Moodle editors remove the `\u003cjsxgraph\u003e` tag when saving.\nAs a result, the construction may not be displayed correctly or at all.\nYou should therefore always use the \"Plain text editor\".\nSome also report that the \"Atto HTML editor\" works, too.\n\nExample: \n\n```html\n\u003cjsxgraph width=\"500\" aspect-ratio=\"1/1\"\u003e\n   var brd = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,5,5,-5], axis:true});\n   var p = brd.create('point', [1,2]);\n\u003c/jsxgraph\u003e\n```\n   \nGet many examples for constructions at [https://jsxgraph.org/share](https://jsxgraph.org/share). There you can export them to the JSXGraph Moodle filter format.\n   \n***For tag attributes and global settings have a look at [Attributes and settings](#attributes-and-settings) in this documentation.*** \n \nHave a look to this [video](https://youtu.be/gHsFA1upQLc).\n\nBe aware of the fact, that you don't see the construction unless you leave the editor and save your document.\nOn reopening it later, you will notice the code rather than the `\u003cjsxgraph\u003e` tag. To edit your content later, again switch to the code input.\n\n### Using multipe boards in one tag\n\nIt is possible to replace a `\u003cjsxgraph\u003e` tag with more than one board. To do this, enter a number in the tag attribute `numberOfBoards`. This does the following:\n\n- Instead of `BOARDID`, the unique ids can now be found in `BOARDID0`, `BOARDID1`, `BOARDID2`, ...\n- All IDs are stored in an array `BOARDIDS` additionally. It looks like: `BOARDIDS = [BOARDID0, BOARDID1, BOARDID2, ...]`\n- The attributes `width`, `height`, `title` and `description` can contain several values. These are separated by commas. The first value applies to the first board, the second value to the second, etc. If not enough values are given (especially only one), the first value is used for the other boards.\n\nHere is an example:\n![multiple boards](screenshots/multiple-boards.png)\n\n````html\n\u003cjsxgraph width=\"500,200\" aspect-ratio=\"1/1\" numberOfBoards=\"2\"\u003e\n   var board = JXG.JSXGraph.initBoard(BOARDID0, {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true, showNavigation:false});\n   var board2 = JXG.JSXGraph.initBoard(BOARDID1, {boundingbox: [-1, 1.33, 7, -1.33], showNavigation:false});\n\n   board.suspendUpdate();\n   var b1c1 = board.create('circle', [[0,0], [1,0]], {fixed:true});\n   var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});\n   var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);\n   var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);\n   board.unsuspendUpdate();\n\n   board2.suspendUpdate();\n   var xax2 = board2.create('axis', [[0,0], [1,0]]);\n   board2.create('axis', [[0,0], [0,1]]);\n   board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});\n   \n   // sine:\n   var b2p1 = board2.create('point', [\n                function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); }, \n                function() { return b1p1.Y() }], \n                {fixed: true, trace: true, color: '#ff0000', name: 'S'});\n   // cosine:\n   var b2p2 = board2.create('point', [\n                function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); }, \n                function() { return b1p1.X() }], \n                {fixed: true, trace: true, color: '#0000ff', name: 'C'});\n   // Dependencies (only necessary if b2p1 or b2p2 is deleted)\n   b1p1.addChild(b2p1);\n   b1p1.addChild(b2p2);\n   board2.unsuspendUpdate();\n\n   board.addChild(board2);\n\u003c/jsxgraph\u003e\n````\n\n### JSXGraph and formulas - a filter extension\n\nTo use an JSXGraph board in a formulas question you can use \u003ca href=\"https://github.com/jsxgraph/moodleformulas_jsxgraph\" target=\"_blank\"\u003eour filter extension for formulas\u003c/a\u003e.\nIts files are already contained in this filter (see [here](libs/formulas_extension)). You can load them by [admin settings](#admin-settings) or [tag attributes](#jsxgraph-tag-attributes).\nPlease note the [documentation](libs/formulas_extension/README.md) of this extension, especially the installation instructions.\n\n### JSXGraph and STACK \n\nThis filter is not necessary to use JSXGraph with [STACK](https://moodle.org/plugins/qtype_stack). STACK has its own extension for JSXGraph.\nPlease refer \n[STACK Documentation](https://stack2.maths.ed.ac.uk/demo2018/question/type/stack/doc/doc.php/Authoring/JSXGraph.md) and\n[GitHub](https://github.com/maths/moodle-qtype_stack/blob/master/doc/en/Authoring/JSXGraph.md).\n\n\u003ci\u003eNote that this STACK extension is not developed, updated or managed by the JSXGraph developing team.\u003c/i\u003e\n\n\n## Attributes and settings\n\n### Dimensions\n\nIn the global settings and in your `\u003cjsxgraph\u003e` tag you can specify several dimensions for the board:\n\n- aspect-ratio\n- width\n- height\n- max-width\n- max-height\n\nTo use the responsiveness of the boards, you have to use `width` and `aspect-ratio`. If `width` and `height` are given, `aspect-ratio` is ignored.\n\n_***Use-cases:***_\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e#\u003c/td\u003e\n            \u003ctd\u003egiven\u003c/td\u003e\n            \u003ctd\u003ebehavior\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e1\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e in any combination (max-/...)\u003c/td\u003e\n            \u003ctd\u003e\n                The dimensions are applied to the boards \u003ccode\u003ediv\u003c/code\u003e. Layout is like in the css specification defined. See notes (a) and (b). \u003ccode\u003easpect-ratio\u003c/code\u003e is ignored in this case. Please note also (c).\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e2\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003easpect-ratio\u003c/code\u003e and \u003ccode\u003e(max-)width\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                The boards width ist fix according its value. The height is automatically regulated following the given \u003ccode\u003easpect-ratio\u003c/code\u003e.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e3\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003easpect-ratio\u003c/code\u003e and \u003ccode\u003e(max-)height\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                The boards height ist fix according its value. The width is automatically regulated following the given \u003ccode\u003easpect-ratio\u003c/code\u003e. This case doesn\\'t work on browsers which doesn\\'t support \u003ccode\u003easpect-ratio\u003c/code\u003e. The css trick (see (a)) can not help here.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e4\u003c/td\u003e\n            \u003ctd\u003eonly \u003ccode\u003easpect-ratio\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe \u003ccode\u003efallback width\u003c/code\u003e from admin settings is used. Apart from that see case 2.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e5\u003c/td\u003e\n            \u003ctd\u003enothing\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003easpect-ratio\u003c/code\u003e is set to `fallback aspect-ratio` from admin settings and then see case 4.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n_***Notes:***_\n\n**(a)** Pay attention: the `div` uses the css attribute `aspect-ratio` which is not supported by every browser. If the browser does not support this, a trick with a wrapping `div` and `padding-bottom` is applied. This trick only works, if `aspect-ratio` and `(max-)width` are given, not in combination with `(max-)height`! For an overview of browsers which support `aspect-ratio` see \u003ca href=\"https://caniuse.com/mdn-css_properties_aspect-ratio\" target=\"_blank\"\u003ecaniuse.com\u003c/a\u003e\n\n**(b)** If the css trick is not needed, the result is only the `div` with id `BOARDID` for the board. The value of tag attribute `wrapper-class` is ignored. In the trick the `div` is wrapped by a `div` with id `BOARDID`-wrapper. This wrapper contains the main dimensions and the board-`div` gets only relative dimensions according to the case, e.g. `width: 100%`.\n\n**(c)** If only `width` is given, the height will be `0` like in css. You have to define an aspect-ratio or height to display the board!\n\n### Admin settings\n\nAs moodle administrator, you can make the following settings:\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eJSXGraph version\u003c/th\u003e\n        \u003ctd\u003eOur filter delivers all versions of JSXGraph. Here you can choose which version to use. If \u003ccode\u003eautomatically\u003c/code\u003e is selected (recommended), the latest version will be used automatically.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003eextension for question type \u003ca href=\"https://moodle.org/plugins/qtype_formulas\" target=\"_blank\"\u003eformulas\u003c/a\u003e\u003c/th\u003e\n        \u003ctd\u003eHere you can determine whether the external library for \u003ca href=\"https://github.com/jsxgraph/moodleformulas_jsxgraph\" target=\"_blank\"\u003eusing JSXGraph in fomulas questions\u003c/a\u003e is loaded or not.\u003cbr\u003eIf you want to use the library in individual tags (and global setting says \"deactivated\"), set the corresponding attribute to true.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003eHTML entities\u003c/th\u003e\n        \u003ctd\u003eIf this setting is set to \u003ccode\u003etrue\u003c/code\u003e, HTML entities like \"\u0026\", \"\u003c\", etc. are supported within the JavaScript code for JSXGraph.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003econvert encoding\u003c/th\u003e\n        \u003ctd\u003eDecide wether the encoding of the text between the JSXGraph tags should be converted to UTF-8 or not.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003eglobal JavaScript\u003c/th\u003e\n        \u003ctd\u003eIn this textbox you can type a general JavaScript code to be loaded before loading specific tag code.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003ewidth\u003cbr\u003eheight\u003cbr\u003easpect-ratio\u003cbr\u003emax-width\u003cbr\u003emax-height\u003c/th\u003e\n        \u003ctd\u003eDefault dimensions of JSXGraph container. See \u003ca href=\"#dimensions\"\u003edimensions\u003c/a\u003e. Is used if no information is given in the tag.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003efallback width\u003cbr\u003efallback aspect-ratio\u003c/th\u003e\n        \u003ctd\u003eThis values are relevant if no dimension or only an aspect-ratio is given. See \u003ca href=\"#dimensions\"\u003edimensions\u003c/a\u003e for more information.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003edivid\u003c/th\u003e\n        \u003ctd\u003e\u003cb\u003eDeprecated\u003c/b\u003e\u003cbr\u003e\u003csmall\u003ePrefix for the automatically generated divid of every JSX construction.\u003c/small\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### `\u003cjsxgraph\u003e` tag attributes\n\nWithin the `\u003cjsxgraph\u003e` tag different attributes can be declared, e.g. `\u003cjsxgraph width=\"...\" height=\"...\" entities=\"...\" useGlobalJS=\"...\"\u003e` \n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003enumberOfBoards\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eHere you can enter the number of boards by which the JSXGraph tag will be replaced. A corresponding number of BOARDIDs is generated. See also \u003ca href=\"#using-multipe-boards-in-one-tag\" target=\"_self\"\u003ehere\u003c/a\u003e.\u003cbr\u003eDefault: \u003ccode\u003e1\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003etitle\u003c/code\u003e and \u003ccode\u003edescription\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eThis information is used for better accessibility. Since JSXGraph version 1.2, the board attributes \u003ccode\u003etitle\u003c/code\u003e and \u003ccode\u003edescription\u003c/code\u003e are used to create elements for \u003ccode\u003earia-labelledby\u003c/code\u003e and \u003ccode\u003earia-describedby\u003c/code\u003e of the board. Title ans description are set by specification in this tag attributes.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003cbr\u003e\u003ccode\u003eheight\u003c/code\u003e\u003cbr\u003e\u003ccode\u003easpect-ratio\u003c/code\u003e\u003cbr\u003e\u003ccode\u003emax-width\u003c/code\u003e\u003cbr\u003e\u003ccode\u003emax-height\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eDimensions of JSXGraph container. Overrides the global settings locally. You can use any CSS unit here. If no unit but only an integer is specified, \"px\" is automatically added. See chapter \u003ca href=\"#dimensions\"\u003edimensions\u003c/a\u003e for more information.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eclass\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eHere you can specify css classes for the boards \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e.Please have a look at \u003ca href=\"#dimensions\"\u003edimensions\u003c/a\u003e for understanding the HTML tree construction.\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003ewrapper-class\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eDepending on the clients browser and the given dimensions a \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e is wrapping the board. Here you can specify its css classes. It may be that this value is ignored. Please have a look at \u003ca href=\"#dimensions\"\u003edimensions\u003c/a\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eforce-wrapper\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eDepending on the clients browser and the given dimensions a \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e is wrapping the board. Here you can force adding this \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eext_formulas\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eDetermine whether the external library for \u003ca href=\"https://github.com/jsxgraph/moodleformulas_jsxgraph\" target=\"_blank\"\u003eusing JSXGraph in fomulas questions\u003c/a\u003e is loaded or not.\u003cbr\u003ePossible values: \u003ccode\u003e\"true\"\u003c/code\u003e, \u003ccode\u003e\"false\"\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eentities\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eIf HTML entities like \"\u0026\", \"\u003c\", etc. should be supported within the JavaScript code set the attribute to \u003ccode\u003e\"true\"\u003c/code\u003e. To override a global \u003ccode\u003etrue\u003c/code\u003e type \u003ccode\u003e\"false\"\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003euseGlobalJS\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003eDecide whether global JavaScript from admin settings should be loaded before your code.\u003cbr\u003ePossible values: \u003ccode\u003e\"true\"\u003c/code\u003e, \u003ccode\u003e\"false\"\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eboardid\u003c/code\u003e or \u003ccode\u003ebox\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003e\u003cb\u003eDeprecated\u003c/b\u003e\u003cbr\u003e\u003csmall\u003eThis attribute defines, which id the graph of JSXGraph will have. Please use the id stored in the constant \u003ccode\u003eBOARDID\u003c/code\u003e within the JavaScript block, especially for the first parameter in \u003ccode\u003eJXG.JSXGraph.initBoard(...)\u003c/code\u003e. Look at the examples at \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e.\u003c/small\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nThese attributes can be defined for each board by separating with `,`:\n- title\n- description\n- width\n- height\n- aspect-ratio\n- max-width\n- max-height\n- class\n- wrapper-class\n- box\n- boardid\n\n## Use the JSXGraph filter together with other filters\n\nTo avoid conflicts the order of filters should follow this rules:\n\n- `MathJax` is **before** `JSXGraph`\n- `Convert URLs into links and images` is **after** `JSXGraph`\n\n## Using MathJax within the board\n\nTo use e.g. the pre-installed `MathJax` notation within the board, your **Moodle admin** first has to enable the `MathJax` filter\nin `Moodle -\u003e Site administration -\u003e Plugins -\u003e Filters -\u003e Manage filters`. If the `TeX notation` filter is activated, this must be\narranged below `MathJax`.\n\nAlso comply with the above-mentioned filter order.\n\nAfter this changes **everyone** can use `MathJax` notation `$$(...)$$` within the board of JSXGraph as follows:\n\n- Instead of using ` \\ ` between `\u003cjsxgraph\u003e` tags you have to escape the backslash by using ` \\\\ ` \u003cbr\u003e\n  e.g. `\\frac` --\u003e `\\\\frac`\n- To prevent unpredictable behavior you should set `parse: false`\n- *optional:* To make the font bigger, use the `fontSize`-attribute\n\nLook at this example:\n\n```html\n\u003cjsxgraph width=\"100%\" height=\"600\"\u003e\n    var brd = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-6,6,6,-6], axis:true});\n    var t = brd.create('text', [1,4, '$$( \\\\sqrt{1},\\\\frac {8}{2} )$$'],{parse: false, fixed: true, fontSize: 20});\n    var s = brd.create('text', [-5,2.5, '$$( 1-6,\\\\sum_{n=0}^\\\\infty (3/5)^n )$$'], {parse: false});\n\u003c/jsxgraph\u003e\n```\n\nUsing the `MathJax` filter within the board is supported in `moodle2.x` and up. \n\n## Installing the filter step by step\n\n### Installation with Moodle routine (by Moodle admin)\n\nTo install the filter for moodle2.9+ you can follow the steps below:\n\n1. Download the entire `master` branch as a ZIP-compressed folder via the GitHub download button\u003cbr\u003e\n   **Do not unpack the ZIP directory!**\n2. In Moodle, navigate to `Site administration -\u003e Plugins -\u003e Install plugins`\n3. Under `Install plugin from ZIP file`, drag and drop the downloaded ZIP directory into input field und click on `Show more...`\n4. Choose the plugin type `Text filter (filter)`\n5. Rename the root directory to `jsxgraph` by filling the input (be sure to write correctly)\n6. Click on `Install plugin from ZIP the file` and follow the instructions\n7. After installing go to `Moodle -\u003e Site administration -\u003e Plugins -\u003e Filters -\u003e Manage filters` and switch the `Active?`-attribute of JSXGraph to `on`\n\n### Installation in Moodle directory (by file server admin)\n\nOtherwise, you can also install the filter with the following steps:\n\n1. Download the entire `master` branch as a ZIP-compressed folder via the github download button\n2. Create a folder `jsxgraph` in the directory `moodle -\u003e filter` of your Moodle installation (be sure to write correctly)\n3. Upload the files and folders contained in the ZIP directory to the directory just created\n4. Open site root of your Moodle installation and follow the steps to install plugin \n5. After installing go to `Moodle -\u003e Site administration -\u003e Plugins -\u003e Filters -\u003e Manage filters` and switch the `Active?`-attribute of JSXGraph to `on`\n\n## Build Plugin (how to release a new version)\n\nThis plugin no longer needs to be explicitly build. To release a **new version of JSXGraph** into the filter follow the steps in: [RELEASE.txt](RELEASE.txt). \n\n## Feedback\n\nAll bugs, feature requests, feedback, etc., are welcome.\n\n## License\n\nhttp://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n\n[![ITEMS](img/items_logo_blue.png)](https://itemspro.eu)\n[![Cofunded by the Erasmus+ programme of the European union](img/eu_flag_co_funded_pos_rgb_left_small.jpg)](https://ec.europa.eu/programmes/erasmus-plus/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsxgraph%2Fmoodle-filter_jsxgraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsxgraph%2Fmoodle-filter_jsxgraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsxgraph%2Fmoodle-filter_jsxgraph/lists"}