moodle plug-in for JSXGraph
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Moodle JSXGraph plugin

About JSXGraph

JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser. JSXGraph is implemented in pure JavaScript and does not rely on any other library. Special care has been taken to optimize the performance.

  • Euclidean and projective Geometry
  • Curve plotting
  • Open source
  • High-performance
  • Small footprint
  • No dependencies
  • Multi-touch support
  • Backward compatible down to IE 6

Our filter

This is a plugin for Moodle to enable function plotting and dynamic geometry constructions with JSXGraph within a Moodle platform. Using the JSXGraph filter makes it a lot easier to embed JSXGraph constructions into Moodle online documents, e.g. in contents like page, quiz, link,... .


Installation with Moodle routine (by Moodle admin)

To install the filter for moodle2.9+ you can follow the steps below:

  1. Download the entire master branch as a ZIP-compressed folder via the GitHub download button
    Do not unpack the ZIP directory!
  2. In Moodle, navigate to Site administration -> Plugins -> Install plugins
  3. Under Install plugin from ZIP file, drag and drop the downloaded ZIP directory into input field und click on Show more...
  4. Choose the plugin type Text filter (filter)
  5. Rename the root directory to jsxgraph by filling the input (be sure to write correctly)
  6. Click on Install plugin from ZIP the file and follow the instructions
  7. After installing go to Moodle -> Site administration -> Plugins -> Filters -> Manage filters and switch the Active?-attribute of JSXGraph to on

Installation in Moodle directory (by file server admin)

Otherwise, you can also install the filter with the following steps:

  1. Download the entire master branch as a ZIP-compressed folder via the github download button
  2. Create a folder jsxgraph in the directory moodle -> filter of your Moodle installation (be sure to write correctly)
  3. Upload the files and folders contained in the ZIP directory to the directory just created (screenshots directory is not needed anymore)
  4. Open site root of your Moodle installation and follow the steps to install plugin
  5. After installing go to Moodle -> Site administration -> Plugins -> Filters -> Manage filters and switch the Active?-attribute of JSXGraph to on


  1. In a Moodle course you can add an board to different types of content, i.e.:

    • Add an activity or resource -> Page
    • Add an activity or resource -> Link
    • Add an activity or resource -> Quiz
    • ...
  2. Write content. At the position the construction should appear, create a construction by:

    • switching to the code input, i.e. to "HTML source editor"
    • inserting a <jsxgraph> tag with all required parameters


    <jsxgraph width="600" height="500">
        (function() {
            var brd = JXG.JSXGraph.initBoard('box0', {boundingbox:[-5,5,5,-5], axis:true});
            var p = brd.create('point', [1,2]);
    <jsxgraph width="600" height="500" box="mybox">
        (function() {
            var brd = JXG.JSXGraph.initBoard('mybox', {boundingbox:[-5,5,5,-5], axis:true});
            var p = brd.create('point', [1,2]);

For tag attributes and global settings have a look at Attributes and settings in this documentation.

Be aware of the fact, that you don't see the construction unless you leave the editor and save your document. On reopening it later, you will notice the code rather than the <jsxgraph> tag. To edit your content later, again switch to the code input.

Using JSXGraph in quiz questions needs a workaround:
When adding or editing a question, insert the <jsxgraph> tag into the Question tag-input and choose "HTML format".

Attributes and settings

Admin settings

As moodle administrator, you can make the following settings:

JSXGraph from server You can decide whether the used JSXGraph core is loaded from server or if the filter uses the locally provided one supplied with the plugin.
server version Type the version number, which should be loaded, when JSXGraph from server is checked.
HTMLentities If this setting is set to true, HTMLentities like "&", "<", etc. are supported within the JavaScript code for JSXGraph.
Global JavaScript In this textbox you can type a general JavaScript code to be loaded before loading specific tag code.
div id ID of the division containing JSXGraph.
width and height Dimensions of JSXGraph container.

<jsxgraph> tag attributes

Within the <jsxgraph> tag different attributes can be declared: <jsxgraph width="..." height="..." entities="..." useGlobalJS="..." box="..." board="...">

width and height Dimensions of JSXGraph container. Overrides the global settings locally. Type only Integers without "px".
entities If HTMLentities like "&", "<", etc. should be supported within the JavaScript code set the attribute to "true". To override a global true type "false".
useGlobalJS Decide whether global JavaScript from admin settings should be loaded before your code. Possible values: "true", "false".
box This attribute defines, which id the graph of JSXGraph will have. It has to be equal to the first parameter in JXG.JSXGraph.initBoard(...). Look at the second example at Usage.

Using MathJax within the board

To use the pre-installed MathJax notation within the board, your Moodle admin first has to make some settings:

  1. Go to Moodle -> Site administration -> Plugins -> Filters -> Manage filters
  2. If not already done, enable the MathJax filter
  3. Arrange the filters so, that MathJax is before JSXGraph.
  4. If the TeX notation filter is activated, this must be arranged below MathJax

After this changes everyone can use MathJax notation $$(...)$$ within the board of JSXGraph as follows:

  • Instead of using \ between <jsxgraph>-tags you have to escape the backslash by using \\
    e.g. \frac --> \\frac
  • To prevent unpredictable behavior you should set parse: false
  • optional: To make the font bigger, use the fontSize-attribute

Look at this example:

<jsxgraph width="600" height="600" box="box">
    (function() {
        var brd = JXG.JSXGraph.initBoard('box', {boundingbox:[-6,6,6,-6], axis:true});
        var t = brd.create('text', [1,4, '$$( \\sqrt{1},\\frac {8}{2} )$$'],{parse: false, fixed: true, fontSize: 20});
        var s = brd.create('text', [-5,2.5, '$$( 1-6,\\sum_{n=0}^\\infty (3/5)^n )$$'], {parse: false});

Using the MathJax filter within the board is supported in moodle2.x and moodle3.x.

Build Plugin (how to release a new version)

This plugin no longer needs to be explicitly build.

To release a new version of JSXGraph into the filter, just replace the file jsxgraphcode.js in branches master and MOODLE_2. Please update version tag in thirdpartylibs.xml! In addition, the value of $plugin->version should be adjusted in the file version.php.


All bugs, feature requests, feedback, etc., are welcome.

License GNU GPL v3 or later