Using JSXGraphin Numbas

JSXGraph Conference 2021

Newcastle University

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

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

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

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_intercept: jxg_rise(diagram["l"])

correct_intercept (Does the student's line have the right y-intercept?):
if(student_intercept = y_intercept,
)

Source

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