DragMath equation editor

Introduction

DragMath is an applet-based WYSIWYG equation editor created by Christoper Sangwin and Alexander Billingsley at the University of Birmingham as part of the STACK project. DragMath allows students to build mathematical expressions in a traditional two-dimensional way using a graphical drag-and-drop interface. DragMath can output the finished expression in any of several computer-oriented linear syntaxes, including LaTeX. Since Moodle already supports LaTeX (with the TeX filter) LaTeX was used as the "bridge" for Moodle integration.

You can see a demo of the DragMath editor here. The DragMath interface is highly intuitive and anyone can be using it productively after a few minutes of trial-and-error. If you have questions about the editor, there is a short manual here.

Integrating the DragMath editor with Moodle

Important Note: The DragMath editor does not come supplied with Moodle. You (or your administrator) will have to install it.

DragMath is integrated with Moodle through a new button on the HTML editor toolbar. This way, the DragMath editor is available most everywhere that you or your students are called upon to enter text.

See the screenshot below. Suppose that you're entering text in the HTML editor and you reach a point where you want to insert a mathematical expression. Pushing the DragMath button launches the DragMath editor in a small popup window (Note: the first time you do this, there will be a delay of a few seconds due to applet initialization). Create the math expression in DragMath and click the "Insert button" when you're done. The editor will disappear and the LaTeX markup (with $$ delimiters added at both ends) will be inserted into your text at the current cursor position.

Installing Dragmath

You install DragMath in two steps

1. install the DragMath package
2. install the DragMath Integration package

Install the DragMath package

Download the latest DragMath zip file from sourceforge and unzip it in the $CFG->dirroot/lib/editor/htmlarea/popups directory (where $CFG->dirroot is your "moodle" directory as defined in config.php). This will create a new directory under popups called DragMath containing all the necessary DragMath components.

Install the DragMath Integration package

Important Note: These instructions will REPLACE the smiley button on the HTML editor toolbar with the DragMath editor button. This was done to keep the installation relatively simple. If want to keep your smiley button, there are postings in the Mathematical Tools forum that explain what else needs to be done.

Download the latest DragMath integration package from the modules and plugins database. In the zip archive, you will find two files.

• dlg_ins_smile.php -- Copy this file to your $CFG->dirroot/lib/editor/htmlarea/popups directory, overwriting the existing file (you may want to make a copy of the original file before overwriting it)
• icon_smile.gif -- Copy this file to your $CFG->dirroot/lib/editor/htmlarea/images directory, overwriting the existing file (you may want to make a copy of the original file before overwriting it)

You must also change two lines in the file $CFG->dirroot/lib/editor/htmlarea/dialog.js

• around line 34 you will see the line:

case "dlg_ins_smile": x = 330; y = 320; break;

Change this line to

case "dlg_ins_smile": x = 540; y = 340; break;

• around line 47, you will see a line that begins

var dlg = window.open(url, "ha_dialog", "toolbar=no, menubar=no, ...

Modify this line, changing

resizable=no

to

resizable=yes