Implementing drag and drop functionality for JSXGraph in STACK questions using custom bindings
Bernhard Gailer
Ostbayerische Technische Hochschule Amberg-Weiden, Fakultät Elektrotechnik, Medien und Informatik, Kaiser-Wilhelm-Ring 23, 92224 Amberg, Germany
Abstract
At the OTH Amberg-Weiden digital self-learning modules for engineering mathematics are developed in the context of the project IdeaL – Innovationsnetzwerk für digitale adaptive Lehre (Innovation network for digital adaptive teaching). The learning modules are developed by means of STACK questions in the learning management system Moodle. JSXGraph is used as dynamic geometry software to link symbolic and graphical content and to assess mathematical skills within STACK questions.
In our learning module for linear algebra, we use many JSXGraph applets to visualize vectors in the Euclidean plane. We often use interactive applets inside STACK questions in which the students have to move vectors to the correct position oder can play little animations. To assess the movement of vectors in STACK questions, the JSXGraph binding functions for input binding are used (https://docs.stack-assessment.org/en/Authoring/JSXGraph/#general-considerations-when-building-interactive-graphs).
In one particular question, we wanted the students to drag and drop different terms to the corresponding objects in one of the JSXGraph applets. Instead of using the moodle question type “drag and drop onto image” with an Image of the applet, we decided to implement this functionality inside JSXGraph and STACK. This has some benefits over using the drag and drop moodle question type, as we can use drag and drop inside STACK questions. Furthermore, we can use dynamic JSXGraph applets together with the drag and drop feature instead of using a static image. Regarding the technical side, there are two main challenges for using the drag and drop feature:
- Using JSXGraph objects for the droppable items and creating dropzones
- Binding of the interactivity on the board and the STACK question inputs
To meet these two challenges, a custom input binding together with the JSXGraph concept of “magnetized points” was used.
In the talk, the general approach for binding inputs to JSXGraph applets will be shown first. This includes the binding functions provided by STACK, as well as the approach for a custom binding and when to use custom bindings. Next, a question prototype from the learning module where the JSXGraph drag and drop functionality is implemented will be shown. In this question, we go over the code and look at the custom binding that is used for the drag and drop functionality. Next to the custom binding, the “JSXGraph way” for drag and drop using magnetized points is shown and explained.
The talk focuses on the technical aspects of implementing the drag and drop functionality using custom bindings in JSXGraph and is intended for JSXGraph developers who want to use custom input bindings in STACK questions together with JSXGraph to create new possibilities of interaction with their JSXGraph applets.