Interactive Graph Theory Exercises with JSXGraph and Moodle STACK

Frauke Sprengel

Department of Computer Science, Faculty IV - Business and Computer Science, Hannover University of Applied Sciences and Arts, Hannover, Germany

frauke.sprengel@hs-hannover.de

Abstract

Graph theory is a core topic in mathematics courses for computer science, covering concepts such as directed and undirected graphs, trees and spanning trees, connectivity, and weighted graphs, as well as algorithms operating on them. Understanding this material requires more than reading definitions and studying worked examples: students need to construct graphs with prescribed properties themselves and need to carry out algorithms step by step on concrete instances. Conventional teaching materials such as textbooks, static slides, or pen-and-paper exercises convey the underlying definitions well, but they do not capture the interactive, exploratory character of building a graph or of following an algorithm’s decisions. We developed a framework of interactive graph exercises for Moodle’s STACK question type, built with the dynamic geometry library JSXGraph, that addresses both aspects: a graph editor for constructing graphs with given properties, and exercises for executing graph algorithms.

We embed a JSXGraph-based graph editor in STACK exercises that lets students construct their own graphs interactively on a canvas: creating and deleting vertices and edges, including directed, weighted, and looped edges, with curved edges drawn automatically when needed to avoid visual overlap. Teachers are provided with a library of ready-made exercise templates. These templates include tasks such as constructing a complete graph, a graph with a prescribed vertex degree, a spanning tree, an Eulerian graph, a graph matching a given adjacency matrix, a graph with a prescribed number of components, or a graph with a given total edge weight. Teachers can develop their own exercises by copying and modifying existing templates, and can configure whether a graph should be directed, weighted, or allow loops, can set further task-specific parameters, without needing to adapt the editor itself.

Internally, vertices, edges, and edge labels are stored as JSXGraph objects in dedicated arrays, together with an adjacency matrix that is kept in sync with the graphical representation and simplifies both automated evaluation and deserialization. For automated assessment, the graph is serialized into a JSON structure containing the adjacency matrix, node positions and names, and information on whether the graph is directed and/or weighted; a custom binding function connects this structure to STACK’s underlying computer algebra system Maxima, which cannot interpret JSON directly, so that the required properties can be checked within the feedback tree. Since Maxima has no access to the interactive canvas, all evaluation logic operates purely on the adjacency matrix and the accompanying metadata.

Further, we provide exercises on graph algorithms such as depth-first and breadth-first search, Kruskal’s minimum spanning tree algorithm, and Dijkstra’s shortest path algorithm. Here, randomized planar graph instances are generated with configurable parameters such as minimal and maximal vertex count and edge density, which keeps the graphs easy to click on while still allowing enough variety between instances and adjustable complexity. JSXGraph is used to visualize the graph and to handle mouse interactions, hover effects, and undo functionality. Students interact with the graph by clicking vertices or edges in the correct algorithmic order and receive visual feedback through color-coded selections and progression numbering, closely mirroring how the algorithm would be carried out by hand on paper. The assessment system validates both the resulting structure, such as a spanning tree or a shortest path, and the order in which edges or vertices were selected. Since neither the resulting structure nor a valid selection order is generally unique, the evaluation logic allows for multiple correct solutions. Combined with the randomization of graph instances, this supports repeated practice while preventing straightforward solution sharing between students.

In all exercises, graphs are represented consistently via an adjacency matrix alongside the JSXGraph visualization, and all automated assessment is delegated to STACK’s Maxima backend through a custom binding, keeping the JSXGraph front end and the evaluation logic cleanly separated.

This is joint work with Rahel von Legat, B.Sc., and Shahab Abtahi, B.Sc..