Moodle plugins directory: JSXGraph

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.

Features

• 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,... .

Usage

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

   Examples:

   <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>
    
   <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]);
       })();
   </jsxgraph>

For tag attributes and more settings have a look at https://github.com/jsxgraph/moodle-jsxgraph-plugin/blob/master/README.md.

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