Tools and workflow for the development of interactive JSXGraph applets in a Moodle course
Bernhard Gailer
Ostbayerische Technische Hochschule Amberg-Weiden, Fakultät Elektrotechnik, Medien und Informatik, 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. Technically, to integrate JSXGraph into Moodle, the JSXGraph Moodle plugin is used on the one hand, and the JSXGraph version integrated into STACK on the other.
For programming the applets within Moodle, various text editors are available, such as the HTML editor Atto or a plain text editor. For STACK, the plain text editor is recommended to avoid problems with automatic formatting of WYSIWYG editors. These editors have limited functionality and are not fully designed for web development with JavaScript. For example, there is no syntax highlighting or linting in the plain text editor and only limited source code checking in the Atto editor. This makes the code difficult to debug and to read. Moreover, the ability to preview questions is only possible after saving the entire question. Development with direct output of the program code and automatic refresh, as is possible in web development with IDEs, cannot be achieved within Moodle editors. This makes applet development within Moodle less intuitive and a lot more time consuming compared to web development in an IDE.
Another problematic aspect of question development in Moodle is tracking changes made to the developed questions, which is especially relevant in projects with multiple STACK developers. Adjustments made to a STACK question by other team members cannot be identified in the question. Version management can help here, but this is limited in Moodle.
From a developer’s perspective, consistent programming based on style guides and layout templates is advantageous for better maintainability of the code. For instance, the consistent design and structuring of the questions content and the applets that appear in them can help developers to quickly understand the code and add new features. This is especially important in projects with multiple STACK developers and ensures an efficient programming workflow.
For the reasons mentioned above, the IdeaL project team tested various development tools outside of Moodle and developed a best-practice approach to the programming workflow of JSXGraph applets. Along with these tools, templates and style guides for programming are used to simplify the development process. In addition, a Gitlab project hosted on the university server was set up for version management and documentation of best-practices.
The workshop aims to give an overview over the tools used for JSXGraph programming within Moodle and to provide a hands-on experience in developing JSXGraph applets for a Moodle course. This workshop is intended for JSXGraph developers who construct JSXGraph applets in the Moodle editor (using the Moodle JSXGraph Plugin or JSXGraph in STACK).
In the workshop, the development tools used for programming JSXGraph applets in the project will be shown first. For each tool, the advantages for development will be explained. Based on this, the best practice approach for development in the project will be presented. In the second half of the workshop, a JSXGraph applet for visualizing complex numbers and Euler’s formula will be developed in a live demo. In doing so, the previously presented workflow will be applied as part of the best-practice approach shown before. The coding basis for the live demo is a JSXGraph template, which will be made available to the participants. Finally, the developed code for the applet will be integrated into the learning module in the project’s Moodle course.
The result will look like this:
The participants have thus gained an insight into the workflow of JSXGraph programming in the project IdeaL and have become familiar with tools for developing JSXGraph applets outside of Moodle.