LaTeX Math for e-Learning in D2L

I am teaching MCF3M online this semester, so I need to be able to include math notation in my online content, quizzes, etc. I know how to write math notation using LaTeX from my days at the University of Waterloo, and I find it a lot faster than using a graphical equation editor. I’ve tried Microsoft Word’s editor, which accepts LaTeX-like input as well as graphical input, but I still find it frustrating to use.
I’m teaching in the Desire2Learn/BrightSpace learning environment, so I need to ensure my content works well in there. Last semester I taught Computer Science/Programming and used PDF files that I created in Word Online, and I considered doing the same thing again.

But D2L has an equation editor as part of its HTML editor for webpages, discussion posts, etc. Could it be all I need?

I’ve taken it for a spin before. Here’s the workflow:

Create a new page and type into the HTML editor.

latex01

Expand the toolbar so that the Equation tools are available.

latex02

Choose \∑ LaTeX equation.

latex03

Type in the LaTeX expression, using \( and \) as delimiters for inline mode (otherwise it defaults to block mode).

latex04

latex05

Looks good.

latex12

But look at the source HTML code:

latex07

Uh-oh… that’s MathML (Math Markup Language), not LaTeX. What if I want to change something in my original LaTeX?

Well, you can see at the bottom that my LaTeX code is still there, but it’s not being used. I could remove all the MathML, cut out my LaTeX, modify it, and re-insert it using the LaTeX equation editor.

Ugh.

I thought that MathJax, the rendering engine that D2L uses for math notation, could only handle MathML (since notation from both LaTeX and graphical editors are converted to MathML), but it turns out that’s not true. MathJax can do LaTeX.

So I tried putting LaTeX directly into the WYSIWYG editor:

latex10

No dice.

latex11

The trouble is that D2L has parameters on its JavaScript call to MathJax:

latex08

That config=MML_HTMLorMML bit is saying that only MathML is acceptable input (and HTML or MathML can be output).

So I added another call directly to MathJax in my own source code:

latex09

I set the parameter to be config=TeX-AMS_HTML, which will accept my LaTeX input and render in HTML/JavaScript.

latex12

Magic.

But this is kind of a pain.

I can use D2L’s editor to insert math, but I get MathML (which I find hard to edit).

I can write in LaTeX and have it be preserved, but I need to add a script call to the start of the HTML source code (a hassle, but not too serious, I suppose).

Or I can write in some other (offline) development environment, include my script call all the time, and just upload my completed HTML files to my course. This has the advantages of being independent of D2L, available without internet access, and very shareable.

So that’s what I’ve decided to do, at least for now. So I’ve learned a little CSS to make my pages less vanilla/more functional, and I’ll try to improve the look and feel as the semester progresses.

Wish me luck.

Advertisements

4 thoughts on “LaTeX Math for e-Learning in D2L

  1. I was overjoyed when I discovered D2L has a LaTeX equation editor, but like you, somewhat dismayed at the MathML output. Why bother to include MathJax only to force it to use MathML, especially when not every browser supports it?

    Are you aware you can edit the original LaTeX equation in the WYSWIG editor?

    1. If you click on the big yellow square representing the equation you want to edit, the Equation tools icon on the toolbar will automatically switch to LaTeX if it’s not already selected, and it will become blueish.
    2. Click on the Equation tools icon now.
    3. The LaTeX equation editor will open, with your original LaTeX displayed in the textarea.
    4. Change the LaTeX, and click Insert.
    5. Save the changes to your HTML file.

    When you view the saved file, you will see your equation has been updated.

    I’ve also been playing around with using D2L’s document templates feature. It allows you to create a template file that you can insert into a blank content file as a starting point. So you could add your call to the MathJax script to this template file, along with calls to a stylesheet, etc., and that way you wouldn’t have to add all that manually to the HTML source every time you make a new page.

    • I didn’t know you could edit like that… I’ll have to take a look! I’ll be sure to share that with the other math e-Learning teachers in my board (we’re meeting in a week).

      I’m still hesitant to rely on that feature, since the LaTeX isn’t “active” in the page that D2L “generates”. If we were ever to move away from D2L, I might lose any easy way to edit my math… tough call.

      I think I’ll stick with writing my own webpages for now. It won’t be great for sharing with other non-LaTeX math teachers, but it works for me. Now if only I had a WYSIWYG HTML editor that produced *simple* HTML code, instead of the overly-complicated mess that most of them seem to create… :(

      • Re: “if only I had a WYSIWYG HTML editor that produced *simple* HTML code”, it seems like us mathies have wanted this forever. This is definitely something that we struggle with in our office when creating and supporting courses.

      • Agreed, Carrie. The amount of weird markup that D2L’s editor inserts behind my back is sometimes bizarre; it goes through weird contortions of logic that only make sense to an algorithm. For some reason in inserts both “sup” tags *and* a span with a class of “superscript” around superscripted things. o_O And tons of span tags to “correct” line-height.

        Until someone produces the holy grail of WYSIWYG HTML editing, I’d almost prefer having a Markdown editor side-by-side with a real-time preview pane. People with some HTML/CSS skill could define template divs and stuff for the fancier boxes, and everyone else could use those and the relatively simple syntax of Markdown and see the results in real-time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s