Using JSXGraph
in Numbas

JSXGraph Conference 2021

Christian Lawson-Perfect

Newcastle University

A beach crowded with people. There is a lighthouse in the far distance

Numbas

An open-source e-assessment system designed for mathematical subjects.

Developed at Newcastle University for >10 years.

Included a JSXGraph extension from the beginning.

More than 4,000 questions using the extension, more than 1,000 published under Creative Commons licences.

Still the most popular extension (≈2× GeoGebra).

Sorry for lurking!

I proposed this talk to pressure myself to do more work on JSXGraph.

Aims

Minimise code.

A domain-specific language for diagrams, such as Eukleides, Asymptote or TikZ.

Integrate with randomised question variables.

Use the state of the diagram in marking.

Two-way link between diagram and numerical/mathematical expression inputs.

Benefits

  • Self-contained
  • Fast
  • Good for illustration and exploration

Barriers to use

  • Constructing diagrams in JavaScript is fiddly
  • Styling is complicated
  • Accessibility - keyboard nav, ARIA labels
  • Objects draggable by default
  • Is JessieCode abandoned?
  • API is hard to use - lots of time looking at the docs!
  • Examples wiki is a bit sprawling.

Demo

A few questions using JSXGraph

Use - JavaScript

var div = extensions.jsxgraph.makeBoard('400px','400px');
var board = div.board;
var a = board.create('point', [5,7]);
return div;

Example using student input

Use - JessieCode

jessiecode(
  600,600,
  """
    A = point(-2,-2);
    B = point(2,-2);
    C = point(1,2);
    circumcenter = circumcenter(A,B,C) << name: "circumcenter" >>;
    circle(A,B,C) << strokeOpacity: 0.3 >>;
  """,
  [
    "axis": false
  ]
)

Source

Use - JME

jsxgraph(
  600,600,
  [
    ['point',[-2,-2],["name":"A"]],
    ['point',[2,-2],["name":"B"]],
    ['point',[1,2],["name":"C"]],
    ['circumcenter',['A','B','C'],["name":"circumcenter"]],
    ['circle',['A','B','C'],["strokeOpacity": 0.3]],
  ],
  [
    "axis": false
  ]
)

Source

Link to answer inputs

Hard to make an easy system to link diagrams to answer inputs.

Want:
Change input → redraw diagram
and
Move object → change input.

Two-way link is hard!

Kinds of input

Numeric parameter for a construction
Length of a side; $t$ for a curve $(x(t),y(t))$
Coordinates for a point
Two number inputs or one vector input
Formula
For a parametric curve, or varying position or parameter over time
Tick boxes
Hide/show objects

Kinds of output

Position of a point
A vector, or just one coordinate, or position along a parametric curve
Numeric property of an object
Area; length; angle
Boolean property of an object
Visibility; "contained in"; "to the left of"

Marking

student_gradient: jxg_slope(diagram["l"])

correct_gradient (Does the student's line have the right gradient?):
  if(student_gradient = gradient, 
    add_credit(0.5, "Your line has the right gradient."),
    negative_feedback("Your line's gradient is {student_gradient}.")
  )

student_intercept: jxg_rise(diagram["l"])

correct_intercept (Does the student's line have the right y-intercept?):
  if(student_intercept = y_intercept, 
    add_credit(0.5, "Your line has the right $y$-intercept."),
    negative_feedback("Your line's $y$-intercept is {student_intercept}.")
  )

Source

Linking to part inputs

new in the last 10 minutes!!!

jxg_input:
  [ jxg_set_position(diagram["A"],studentMatrix[0]) ]

jxg_output:
  let([x,y],jxg_position(diagram["A"]),
    [[string(x),string(y)]]
  )
Source

Thanks!

Numbas
numbas.org.uk
JSXGraph extension
github.com/numbas/numbas-extension-jsxgraph
Contact us
numbas@ncl.ac.uk
@NCLNumbas
Newcastle University