Widgets Using JSXGraph

For examples, open Derivita - Authoring Examples > Author Training Archives > Graphing > JSXGraph

JSXGraph Docs

Cheat sheet

JSXGraph.org docs

The file containing each element's default options

Helper functions to create JSX boards

The options parameter is the same options you would pass to JSX.Board.create()

derivita.createDiagram(options) Not interactive, no axes, keepAspectRatio = true

derivita.createPlot(options) Axes shown, not interactive

derivita.createInteractivePlot(options) Axes shown, info box enabled, objects draggable by default

derivita.createBoard(options) Blank interactive board

Interacting with the Question

Functions you can call

derivita.getSize() Returns an object with keys 'width' and 'height', containing the current size of the widget.

derivita.resize(width, height) Resizes the widget to the specified width and height.

derivita.reportScore(earned_points, max_points) Report a score from a self-checking widget.

derivita.saveInput(values...) Value(s) to return to the question code. Each value can be either a number or a string.

derivita.isInputDisabled() Returns true if input is disabled (e.g. when viewing a submitted assignment you can only view the answer not change it).

derivita.compileExpr(string) Converts an Omaha string to a JavaScript function.

Functions you can define

function render(args...) { } Called to draw the widget. Any extra arguments passed to jsx_input() or jsx_graph() in the question code are passed here.

function restoreInput(values...) {} Called to restore input. Typically this happens when viewing a student's previous submission. The values passed as arguments are the values you previously returned using derivita.saveInput()

Helper functions for loading remote Javascript, CSS and DOM Elements

derivita.loadCss(url:string)

Loads a remote CSS file at the URL given into the sandbox.

derivita.loadCss("//example.com/styles.css");

derivita.loadScript(url:string, cb?:Function):Promise<Event>;

Loads a remote Javascript file into the sandbox. The second parameter is an optional callback which will be invoked on a successful fetch of the script. This function returns a Promise, which is quite useful to use in tandem with the render() function for these sandboxes as you can make sure the library is loaded before you start doing things with it.

awesomeLibraryLoaded = derivita.loadScript("//example.com/webgl-wrapper.js") // => returns a promise

function render(){

  awesomeLibraryLoaded.then(function(){
    Amazing3DGraphingLibrary.draw();
  });
}

derivita.createDom(element:string, parameters?:{}, content?:string)

This is the goog.createDom method placed into the derivita namespace.

This creates DOM Elements and has some optional parameters. If the second parameter is a string it sets it to be the class of the node. It can also be a object (key value pairs) of attributes too.

d = derivita.createDom('div', 'class')

figure = derivita.createDom('script', {'type':'text/latex', 'data-var':'checked'}, "This is the content of the node.");

This just creates the node, you still have to stick it into the html document.

document.body.appendChild(derivita.createDom('h2', null, "Hello World."));