When dragging is not enough: a JSXGraph extension with attached inputs

Johannes Knaut, Bernhard Gailer

OTH Amberg-Weiden, Germany

j.knaut@oth-aw.de , b.gailer@oth-aw.de

Keywords: Interaction Design, Instrumental Interaction, Multiple Representations, Phasors, Complex Numbers, JSXGraph Extensions, STACK

Abstract

Background

The OTH Amberg-Weiden operates a service centre developing digital tasks for Moodle courses, many of them built with STACK and using JSXGraph wherever a task requires graphical interactions.

One recurring case comes from electrical engineering, where alternating voltages and currents are described by phasors. A phasor is an arrow in the complex plane: its length gives the amplitude of the signal, its angle the phase. An earlier series of STACK tasks let students drag such an arrow while its current length and angle were displayed. One of the students named the problem: they calculate the two values on paper and then have to drag until the display happens to show them. This can be tedious, often unsuccessful and frustrating.

Why dragging alone is not enough

Dragging is direct manipulation, the style Ben Shneiderman described in 1983: users act on the object itself and see the effect at once. It is the right mode for exploring. For entering a computed result it fails on two counts.

It is imprecise. JSXGraph offers snapToGrid, but a Cartesian grid is of little help when the target is a length and an angle. A task can accept a wider tolerance, or students can zoom in, but neither is always wanted — and when a value has already been calculated, typing it is simply the better answer.

It is also coupled. One drag of the arrow tip sets both quantities at once, so correcting the angle disturbs the length. Being able to change one quantity at a time would make dragging itself more accurate.

Where the input fields belong

Input fields give exact and separable values, and they usually sit beside the construction. Attaching them to the element makes them an attached instrument in Michel Beaudouin-Lafon’s model of instrumental interaction, which treats interface elements as tools mediating between the user and the object: the instrument is bound to a single object and displayed at it, so the object never has to be specified and its response appears where the action is taken.

The fields are also more than controls. They show the length and angle of the phasor and are thus a symbolic representation of the same object that the arrow represents graphically. Work on multiple external representations (Ainsworth, Duval) treats moving between representations as central to learning and their joint presence as a condition for relating them.

The element

We present a phasor element that offers both modes at once. Dragging works as usual: the foot point, the arrow tip and the whole arrow can be moved. At the arrow itself, a second layer appears in two stages — hovering shows the current length and angle, and clicking or dragging the tip turns that display into two prefilled input fields that stay in step with the arrow. Typing a value moves the tip; a handle switches the angle between degrees and radians.

The two modes chain rather than compete: students drag to get close, then correct the numbers already in front of them.

Implementation

Rather than assembling the parts inside every task, we built the element once with JSXGraph’s extension mechanism. An extension needs two things: a create function that receives the board, its parent elements and attributes and assembles the new element from existing ones, and a registration step binding that function to a name. No source files are touched, and the element is then available through the board’s usual create call, exactly like a built-in one.

Our phasor composes a segment, two points, the input elements and the unit handle into one object, so its parts behave as a single element. Its event handlers control when the fields appear, keep them synchronised with the moving tip, write edited values back, and switch units. The talk walks through the structure of this extension and the design decisions that influenced its implementation: positioning HTML inputs relative to a moving object, enabling both editing and dragging events, and keeping display and input consistent. Although developed for use in STACK tasks, the element is plain JSXGraph.