Note: You are currently viewing documentation for Moodle 2.0. Up-to-date documentation for the latest stable version is available here: DragMath equation editor.

DragMath equation editor: Difference between revisions

From MoodleDocs
No edit summary
m (Text replacement - "class="nicetable"" to "class="wikitable"")
 
(117 intermediate revisions by 13 users not shown)
Line 1: Line 1:
=== WARNING ===
<p class="note">As of Moodle 2.x DragMath is now in Moodle core (you need not install the code if you are running Moodle 2.x.) To use DragMath, you are required to activate the TeX filter and ensure that you have Java installed.</p>
You may want to look in the Math Forum for the latest discussion of SEE (Super Equation Editor, an initial nickname for this effort though the product has far outgrown just an equation editor). SEE is a comprehensive set of Math Plugins Mauno Korpelainen has been developing and are discussed here [[Advanced Maths Tools]] - an "alpha" version of docs for installation and use. If these tools are to your liking they will largely eliminate your need to wrestle with TeX (unless you wish so to do.) And, if you want a full distro of TeX, consider doing a local install of TexLive and cobbling your code to eliminate the need for convert.
===Introduction===
===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 [http://www.stack.bham.ac.uk 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.
To quote the W3C [http://www.w3.org/Math/Software/mathml_software_cat_editors.html]:
This is an open-source drag and drop equation editor written in Java.
Once an expression is created the user can convert it into a variety
of different linear syntax for mathematics, including MathML, LaTeX,
Maple, Maxima or any user defined style.
Created by Christoper Sangwin and Alexander Billingsley at the University of Birmingham as part of the [http://www.stack.bham.ac.uk STACK project], DragMath allows students to build mathematical expressions using a graphical drag-and-drop interface similar in appearance to that available in a number of office productivity suites.
 
Initially integrated with Moodle to be used with Moodle's Tex filter,  the export feature available with DragMath has now allowed an integration that supports the creation of LaTex text expressions with and without the doubledollar signs used to signal parsing by the filter as well as AsciiMathML text expressions.
 
To use DragMath, users must have the Java Runtime Environment (JRE) version 1.5 or higher installed on their desktop computers.  Most systems come with the JRE as standard equipment, so you may not have to do anything. If you need to install the JRE manually, you can download it from [http://java.com/en/download/index.jsp here].  Note that the JRE is variously known as Java software for your computer, Java Runtime Environment, the Java Runtime, Runtime Environment, Runtime, Java Virtual Machine, Virtual Machine, Java VM, JVM, VM, or Java download. 
You can see a demo of the DragMath editor [http://www.dragmath.bham.ac.uk/ here].  The DragMath interface is highly intuitive and anyone can be using it productively after a few minutes of trial-and-errorIf you have questions about the editor, there is a short manual [http://www.dragmath.bham.ac.uk/doc/index.html here].
 
===Using DragMath===
DragMath is based on the simple idea that the User who does not know a lot of TeX (pronounced Tech) can still create mathematical formula for publishing. In this case, Moodle is the dispaly agent so the TeX formulae are then rendered to a Moodle screen. This essentially means that with little experience, any Junior High Maths teacher can generate all the formulae they need for most aspects of Maths in Moodle.
 
===Creating simple expressions===
 
To begin, click on the DragMath insertion button. This opens The DragMath interface.
 
[[Image:dragmath02.png|thumb|200px|center|Opening Dragmath]]
 
The toolbar is different than you may expect, we are used to nice neat rows of buttons, but Dragmath has to use tabs. Each tab is tab is a collection of "templates", that is each symbol is a "template" and can be dragged and dropped onto the work space.
 
[[Image:dragmath01.png|thumb|200px|center|The DragMath Interface]]
 
To end editing and insert the script into the Moodle page, click the Insert button. This simple, but not simplistic, interface is a strength of DragMath. It make it easy for even novices to create complex formulae.
 
 
{| class="wikitable" align="center"
|-
| colspan="4"|'''A sequence for DragMath - click an image to enlarge'''
|-
|[[Image:dragmath04f.png|thumb|150px|Select the Tab with the symbols required]]
|[[Image:dragmath03.png|thumb|150px|Click, hold then drag'n'drop a symbol]]
|[[Image:dragmath04.png|thumb|150px|Enter the values, select an operation symbol]]
|[[Image:dragmath04a.png|thumb|150px|Select another symbol and drag'n'drop]]
|-
|[[Image:dragmath04b.png|thumb|150px|Add an equal (or other) sign]]
|[[Image:dragmath04c.png|thumb|150px|Add in a variable, (chi in this case) ]]
|[[Image:dragmath04d.png|thumb|150px|Click Insert]]
|[[Image:dragmath04e.png|thumb|150px|See the encoded result in the editing dialog.]]
|}
 
This same sequence of operations apply equally for all formulae, all insertions, no matter how complex they become.
 
You can insert a template from the toolbar by drag and drop or by a click on the template in the tab, then clicking in the workspace.
 
===Creating more complex expressions===
 
More complex expressions are pretty much more of the same as above. Creating a simple multiplication table matrix, for example, seems complex,but in DragNath, it is actually simple:
 
{| class="wikitable" align="center"
|-
| colspan="4"|'''A sequence for a simple Multiplication Matrice in DragMath - click an image to enlarge'''
|-
|[[Image:dragmath05.png|thumb|150px|Select the Tab and add in the multiplier]]
|[[Image:dragmath05a.png|thumb|150px|Click, hold then drag'n'drop the Matrix symbol]]
|[[Image:dragmath05b.png|thumb|150px|Enter the values, select a equal symbol]]
|[[Image:dragmath05c.png|thumb|150px|Add in the rows required]]
|-
|[[Image:dragmath05d.png|thumb|150px|Add in the columns required]]
|[[Image:dragmath05e.png|thumb|150px|Edit the Matrice ]]
|[[Image:dragmath05f.png|thumb|150px|Add the equal symbol]]
|[[Image:dragmath05g.png|thumb|150px|Add and edit in the second Matrice.]]
|}
 
===Locally saving and restoring a DragMath expression===
When you press the Insert button, DragMath inserts the export string into your text and the DragMath window closes. ''The exported string can no longer be manipulated using DragMath.''  If you decide to change the string, you have two options:
*delete the string (including the dollar signs or other token) and completely recreate it using DragMath
*edit the expression by hand
You can not tell DragMath to re-read the expression and show it again in two dimensions.  This is a theoretical limitation, not a limitation of DragMath.
 
But suppose the expression is very complicated.  It would be impractical to start over just to make a simple change.  Before you Insert the expression, you can save a copy of the expression (a .drgm file) to your local disk using the Save button (see screenshot).  Later, if you need to make a change, you open the saved .drgm file.
 
[[Image:Dragmath_save_and_restore.png|DragMath instructions]]
 
A .drgm file contains three-dimensional representation of your mathematical expression.  It is a binary file that can only be opened by DragMath.
===Additional Editing===


You can see a demo of the DragMath editor [http://web.mat.bham.ac.uk/C.J.Sangwin/dragmath/ 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 [http://web.mat.bham.ac.uk/C.J.Sangwin/dragmath/doc/index.html here].
There are times when '''DragMath''' is not going to have a symbol or something you might want. Or perhaps you left something out of the DragMath constuctor, so you want to include it manually. Most likely, for something like the matrix created earlier, I want to go to 15, which means I have to change the structure of the matrix, and edit in some numbers. This is easily done with a little forethought. Copy and paste and delete or edit what you want and do not want.


===Integrating the DragMath editor with Moodle===
{| class="wikitable" align="center"
The DragMath editor does not come supplied with Moodle. You (or your administrator) will have to install it.
|-
| colspan="4"|'''Manually editing a DragMath construction  - click an image to enlarge'''
|-
|[[Image:dragmath06a.png|thumb|150px|Select, copy and paste the original matrix]]
|[[Image:dragmath06b.png|thumb|150px|Edit to what is actually required]]
|[[Image:dragmath06c.png|thumb|150px|Delete the original matrix]]
|}


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.
Sometimes however, you just want to include something you forgot, or rather, add something that was not there in the first place.  


Suppose that you're entering text in the HTML editor and you reach a point where you want to insert a mathematical expression.  Push the DragMath button to launch DragMath editor in a small popup window. 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.
{| class="wikitable" align="center"
|-
| colspan="4"|'''Accurately editing a DragMath construction manually - click an image to enlarge'''
|-
|[[Image:dragmath06d.png|thumb|150px|Construct the original equation]]
|[[Image:dragmath06e.png|thumb|150px|Copy, then edit to what is actually required]]
|[[Image:dragmath06f.png|thumb|150px|Return to the edited page]]
|}


===Installing Dragmath===
===See Also===
You install DragMath in two steps
* [[Advanced Maths Tools]] For an explanation of the SEE tools
# install the DragMath package
* [[Using TeX Notation]] Some ideas and syntax
# install the DragMath Integration package
* [[TeX notation filter]] Turning TeX on
* [http://www.youtube.com/watch?v=mfc7umQ2xLA| A simple YouTube video] Constructing a simple equation.


====Install the DragMath package====
Download the latest DragMath zip file from [http://sourceforge.net/projects/dragmath sourceforge] and unzip it in the <code>$CFG->dirroot/lib/editor/htmlarea/popups</code> directory (where <code>$CFG->dirroot</code> is your "moodle" directory as defined in <code>config.php</code>).  This will create a new directory under <code>popups</code> called <code>DragMath</code> containing all the necessary DragMath components.


====Install the DragMath Integration package====
'''Note: this will REPLACE the smiley button on the HTML editor toolbar with the DragMath editor button.  It was done this way to keep the installation simple.  If want to keep your smiley button, there are postings in the [http://moodle.org/mod/forum/discuss.php?d=78683 Mathematical Tools forum] that explain what else needs to be done.'''


Download the latest DragMath integration package from the [http://moodle.org/mod/data/view.php?id=6009 modules and plugins database].  In the zip archive, you will find two files.
* <code>dlg_ins_smile.php</code>  -- Copy this file to your <code>$CFG->dirroot/lib/editor/htmlarea/popups</code> directory, overwriting the existing file (you may want to make a copy of the original file before overwriting it)
* <code>icon_smile.gif</code> -- Copy this file to your <code>$CFG->dirroot/lib/editor/htmlarea/images</code> 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 <code>$CFG->dirroot/lib/editor/htmlarea/dialog.js</code>
Discussion of the transition of DragMath to Moodle core: http://moodle.org/mod/forum/discuss.php?d=125977&parent=551794
* around line 34 you will see the line:
: <code>case "dlg_ins_smile": x = 330; y = 320; break;</code>
Change this line to
: <code>case "dlg_ins_smile": x = 540; y = 340; break;</code>
* around line 47, you will see a line that begins
: <code>var dlg = window.open(url, "ha_dialog", "toolbar=no, menubar=no, ...</code>
Modify this line, changing
: <code>resizable=no</code>
to
: <code>resizable=yes</code>


[[Category:Discipline-specific Moodling]]
[[ca:DragMath_editor_d%27equacions]]

Latest revision as of 15:21, 10 August 2021

WARNING

As of Moodle 2.x DragMath is now in Moodle core (you need not install the code if you are running Moodle 2.x.) To use DragMath, you are required to activate the TeX filter and ensure that you have Java installed.


You may want to look in the Math Forum for the latest discussion of SEE (Super Equation Editor, an initial nickname for this effort though the product has far outgrown just an equation editor). SEE is a comprehensive set of Math Plugins Mauno Korpelainen has been developing and are discussed here Advanced Maths Tools - an "alpha" version of docs for installation and use. If these tools are to your liking they will largely eliminate your need to wrestle with TeX (unless you wish so to do.) And, if you want a full distro of TeX, consider doing a local install of TexLive and cobbling your code to eliminate the need for convert.

Introduction

To quote the W3C [1]:

This is an open-source drag and drop equation editor written in Java.
Once an expression is created the user can convert it into a variety 
of different linear syntax for mathematics, including MathML, LaTeX,
Maple, Maxima or any user defined style.

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 using a graphical drag-and-drop interface similar in appearance to that available in a number of office productivity suites.

Initially integrated with Moodle to be used with Moodle's Tex filter, the export feature available with DragMath has now allowed an integration that supports the creation of LaTex text expressions with and without the doubledollar signs used to signal parsing by the filter as well as AsciiMathML text expressions.

To use DragMath, users must have the Java Runtime Environment (JRE) version 1.5 or higher installed on their desktop computers. Most systems come with the JRE as standard equipment, so you may not have to do anything. If you need to install the JRE manually, you can download it from here. Note that the JRE is variously known as Java software for your computer, Java Runtime Environment, the Java Runtime, Runtime Environment, Runtime, Java Virtual Machine, Virtual Machine, Java VM, JVM, VM, or Java download.

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.

Using DragMath

DragMath is based on the simple idea that the User who does not know a lot of TeX (pronounced Tech) can still create mathematical formula for publishing. In this case, Moodle is the dispaly agent so the TeX formulae are then rendered to a Moodle screen. This essentially means that with little experience, any Junior High Maths teacher can generate all the formulae they need for most aspects of Maths in Moodle.

Creating simple expressions

To begin, click on the DragMath insertion button. This opens The DragMath interface.

Opening Dragmath

The toolbar is different than you may expect, we are used to nice neat rows of buttons, but Dragmath has to use tabs. Each tab is tab is a collection of "templates", that is each symbol is a "template" and can be dragged and dropped onto the work space.

The DragMath Interface

To end editing and insert the script into the Moodle page, click the Insert button. This simple, but not simplistic, interface is a strength of DragMath. It make it easy for even novices to create complex formulae.


A sequence for DragMath - click an image to enlarge
Select the Tab with the symbols required
Click, hold then drag'n'drop a symbol
Enter the values, select an operation symbol
Select another symbol and drag'n'drop
Add an equal (or other) sign
Add in a variable, (chi in this case)
Click Insert
See the encoded result in the editing dialog.

This same sequence of operations apply equally for all formulae, all insertions, no matter how complex they become.

You can insert a template from the toolbar by drag and drop or by a click on the template in the tab, then clicking in the workspace.

Creating more complex expressions

More complex expressions are pretty much more of the same as above. Creating a simple multiplication table matrix, for example, seems complex,but in DragNath, it is actually simple:

A sequence for a simple Multiplication Matrice in DragMath - click an image to enlarge
Select the Tab and add in the multiplier
Click, hold then drag'n'drop the Matrix symbol
Enter the values, select a equal symbol
Add in the rows required
Add in the columns required
Edit the Matrice
Add the equal symbol
Add and edit in the second Matrice.

Locally saving and restoring a DragMath expression

When you press the Insert button, DragMath inserts the export string into your text and the DragMath window closes. The exported string can no longer be manipulated using DragMath. If you decide to change the string, you have two options:

  • delete the string (including the dollar signs or other token) and completely recreate it using DragMath
  • edit the expression by hand

You can not tell DragMath to re-read the expression and show it again in two dimensions. This is a theoretical limitation, not a limitation of DragMath.

But suppose the expression is very complicated. It would be impractical to start over just to make a simple change. Before you Insert the expression, you can save a copy of the expression (a .drgm file) to your local disk using the Save button (see screenshot). Later, if you need to make a change, you open the saved .drgm file.

DragMath instructions

A .drgm file contains three-dimensional representation of your mathematical expression. It is a binary file that can only be opened by DragMath.

Additional Editing

There are times when DragMath is not going to have a symbol or something you might want. Or perhaps you left something out of the DragMath constuctor, so you want to include it manually. Most likely, for something like the matrix created earlier, I want to go to 15, which means I have to change the structure of the matrix, and edit in some numbers. This is easily done with a little forethought. Copy and paste and delete or edit what you want and do not want.

Manually editing a DragMath construction - click an image to enlarge
Select, copy and paste the original matrix
Edit to what is actually required
Delete the original matrix

Sometimes however, you just want to include something you forgot, or rather, add something that was not there in the first place.

Accurately editing a DragMath construction manually - click an image to enlarge
Construct the original equation
Copy, then edit to what is actually required
Return to the edited page

See Also



Discussion of the transition of DragMath to Moodle core: http://moodle.org/mod/forum/discuss.php?d=125977&parent=551794