JSXGraph

Filters ::: filter_jsxgraph
Maintained by Andreas Walter
JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser. 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,... .
Latest release:
292 sites
180 downloads
17 fans
Current versions available: 2

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.

Have a look at www.jsxgraph.org.

Features

  • Open source
  • High-performance, small footprint
  • No dependencies
  • Multi-touch support

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
    • Each <div> that contains a JSXGraph board needs a unique ID on the page. You can specify this ID within the tag (see here). Otherwise an ID is generated automatically. Reference it within the JavaScript using the constant BOARDID.

    Example:

    <jsxgraph width="600" height="500">
        var brd = JXG.JSXGraph.initBoard(BOARDID, {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.

For using JSXGraph within a formulas question see here: https://github.com/jsxgraph/moodleformulas_jsxgraph/blob/master/README.md.

Have a look to this 

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 multipe boards in one tag

It is possible to replace a jsxgraph tag with more than one board. To do this, enter a number in the tag attribute numberOfBoards. This does the following:

  • Instead of BOARDID, the unique ids can now be found in BOARDID0, BOARDID1, BOARDID2, ...
  • 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.

Example:

<jsxgraph width="500,200" height="500,200" numberOfBoards="2">
   var board = JXG.JSXGraph.initBoard(BOARDID0, {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true, showNavigation:false});
   var board2 = JXG.JSXGraph.initBoard(BOARDID1, {boundingbox: [-1, 1.33, 7, -1.33], showNavigation:false});

   board.suspendUpdate();
   var b1c1 = board.create('circle', 0,0], [1,0, {fixed:true});
   var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
   var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
   var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
   board.unsuspendUpdate();

   board2.suspendUpdate();
   var xax2 = board2.create('axis', 0,0], [1,0);
   board2.create('axis', 0,0], [0,1);
   board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
   
   // sine:
   var b2p1 = board2.create('point', [
                function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); }, 
                function() { return b1p1.Y() }], 
                {fixed: true, trace: true, color: '#ff0000', name: 'S'});
   // cosine:
   var b2p2 = board2.create('point', [
                function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); }, 
                function() { return b1p1.X() }], 
                {fixed: true, trace: true, color: '#0000ff', name: 'C'});
   // Dependencies (only necessary if b2p1 or b2p2 is deleted)
   b1p1.addChild(b2p1);
   b1p1.addChild(b2p2);
   board2.unsuspendUpdate();

   board.addChild(board2);
</jsxgraph>

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4
Screenshot #5
Screenshot #6
Screenshot #7

Contributors

Andreas Walter (Lead maintainer): Developer
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Sat, Jul 14, 2018, 10:20 PM
    Approval issue created: CONTRIB-7388
  • Ricardo Caiado
    Sat, Sep 12, 2020, 10:30 PM
    Hi,

    Right after installing "JSXGraph" plugin in Moodle I´ve got this error message:

    "Fatal error: Cannot redeclare get_jsxfilter_version() (previously declared in /XXX/XXX/filter/jsxgraph/settings.php:55) in /XXX/XXX/filter/jsxgraph/settings.php on line 54"

    Moodle 3.9.1+, PHP 7.4, PostgreSQL 12, Ubuntu 20.04
  • Sun, Sep 13, 2020, 8:09 PM
    This was solved by version 2020091300
  • Ricardo Caiado
    Wed, Jan 27, 2021, 2:16 AM
    Hi,

    Right after installing "JSXGraph" plugin in Moodle I´ve got this error message:

    "Fatal error: Cannot redeclare get_delivered_version_with_prefix() (previously declared in /XXX/XXX/filter/jsxgraph/settings.php:81) in /XXX/XXX/filter/jsxgraph/settings.php on line 80"

    Moodle 3.9.1+, PHP 7.4, PostgreSQL 12, Ubuntu 20.04
  • Wed, Jan 27, 2021, 2:23 AM
    I am so sorry. A fatal typo had crept in. The new version (v1.2.1-f02) fixes this.
  • Ricardo Caiado
    Wed, Jan 27, 2021, 2:28 AM
    "There is a request to install plugin JSXGraph (filter_jsxgraph) version 2021012601 from the Moodle plugins directory on this site. However, the plugin installation pre-check failed (reason code: remoteunavailable)."
  • Wed, Jan 27, 2021, 2:34 AM
    Unfortunately I cannot understand your mistake. Could you please post a detailed description of the error including a screenshot on our github?
  • Ricardo Caiado
    Wed, Jan 27, 2021, 2:37 AM
    I am installing from Moodle Directory, not from GitHub.

  • Ricardo Caiado
    Wed, Jan 27, 2021, 2:38 AM
    It seems everything is ok now...
  • Wed, Jan 27, 2021, 2:41 AM
    Our bug tracker is on GitHub (see link above).
    But your problem seems to be a Moodle/cache bug: https://moodle.org/mod/forum/discuss.php?d=398091.
  • Ricardo Caiado
    Wed, Jan 27, 2021, 2:48 AM
    Thanks. Installation was successful!

Please login to post comments