You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close

How to create formulas within Canvas Pages and Assessments

Displaying equations within an internet browser is challenging, especially making them display in a way that is useable and readable for all students with a variety of abilities and who may be using a variety of assistive technology. When equations are displayed as textual objects, and not as images, assistive technology allows your students to magnify and explore the equation with the assistive technology speaking the parts of the equation. Canvas supports including equations within Canvas pages and assessment questions using LaTeX and MathML. Support for each and how to create equations is outlined in this article.

Using MathML in Canvas

Due to an issue with the code that renders MathML causing problems in exam questions, we do not currently have our MathML display plugin integrated in Canvas. At this time it is best to use the LaTeX option.

This is the preferred method for rendering equations in Canvas as it displays well in the browsers that we have found to work best with Canvas and its associated applications: Firefox and Google Chrome (with an add-on installed).

Step-by-step directions for using MathML in Canvas

Once you have the MathML notation for the equation, you can add it to your Canvas page or assessment instructions using the Canvas Rich Content Editor. Follow these directions:

  1. Use one of the W3C's equation editors to create equations. If you have a touchscreen device, there are editors that will allow you to essentially write out the equation as you would on paper and then convert it into a MathML expression. If you already have LaTeX equations, use one of the equation converters to assist in the creation of MathML equation notation. Once you have the MathML notation for the equation, you can then put it into Canvas.
  2. In the rich content editor, click the Upload/Record Media icon and then select Upload/Record Media.
    (Click image below to enlarge it)

    If you are adding an equation to a Canvas Quiz question, you may first need to expand the rich content editor menu by clicking on the three stacked dots. Then the Upload/Record Media icon will appear.
  3. In the Upload Media window that appears, select Embed.
  4. Within the Embed Code box, paste the MathML equation notation and then click Submit.
    Keep in mind: When pasting in the notation, be sure to include the initial <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> notation tag. This tells Canvas the notation is MathML.
  5. At this point, the equation will be on the page or in the Canvas quiz question, but it will not display correctly. This is normal; the equation only fully forms once you have saved the Canvas Page or Assessment question.
    (Click the image below to enlarge it)
  6. Once you have clicked Save below the content editor, you will then be able to see how the equation will display for your students.
    (Click the image below to enlarge it)

There are no limits to the number of MathML equations you can be have in a Canvas page and there are no limits to the equation’s complexity that MathML is able to render. Remember: The rendering of the equation is textual, not image-based. This means that students using assistive technology, such as screen readers, will have the ability to have the equation read out to them. Assistive technology also allows your students to enlarge the equation and look at specific parts of it.

MathML background information

MathML (Math Markup Language) was created in 1998 by the World Wide Web Consortium (W3C) as a potential standard for displaying equations on the Internet. While many Internet browsers support MathML, it has failed to become universally accepted. Additionally, how each web browser implements MathML and renders the equations varies. Below is a table listing popular web browsers and their support of MathML. Despite its less than ubiquitous adoption, MathML is still one of the best solutions for displaying equations within Canvas for cross platform compatibility. Please note that we recommend Firefox and Chrome for best user experience in Canvas.

Browser Operating System MathML Support
Firefox All Native Support
Chrome All OS Non-native, limited support using add-ons
Safari MacOS and iOS Native Support
Internet Explorer Windows Non-native, limited support using add-ons
Microsoft Edge Windows Not supported

The difficulty with MathML is that its markup language is not easy to read or create. For instance, this is the MathML notation to render the fraction ½:

<math xmlns="http://www.w3.org/1998/Math/MathML"> <mfrac><mn>1</mn><mn>2</mn></mfrac></math>

It is important for your students to use a browser that is compatible with both Canvas and MathML rendering. We typically recommend using Google Chrome or Firefox because we have found these browsers experience fewer display issues than others.

Using LaTeX equations in Canvas

The Canvas Rich Content Editor has supported creating equations based on LaTeX notation for many years. The equation editor in the Rich Content Editor converts the final equation into an image, which is not accessible to all students (Learn more about LaTeX accessibility issues). However, a recent change has been made to allow LaTeX equations to be rendered as text objects instead, and it requires using the steps below.

Step-by-step directions for using LaTeX in Canvas

  1. Use one of the W3C's equation editors to create LaTeX equations. Once you have the LaTeX notation for the equation, you can then put it into Canvas.
  2. In the rich content editor, click the Upload/Record Media icon and then select Upload/Record Media.
    (Click image to enlarge it)

    If you are adding an equation to a Canvas Quiz question, you may first need to expand the rich content editor menu by clicking on the three stacked dots. Then the Upload/Record Media icon will appear.
  3. In the Upload Media window that appears, select Embed.
  4. Within the Embed Code box, paste the LaTeX equation notation and then add the symbols below to the beginning and end of the notation depending on how you want it to display on the page. Then, click Submit.

    For in-line display (equation should be part of a sentence): add \( to the beginning of the equation notation, and add \) to the end. Here is an example of the quadratic equation:
    \(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$\)


    For display as a separate element (on its own line, centered on the page): add $$ to the beginning and end of the equation notation. Here is an example of the quadratic equation:
    $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
     
  5. At this point, the equation will be on the page or in the Canvas quiz question, but it will not display correctly. This is normal; the equation only fully forms once you have saved the Canvas Page or Assessment question.
    (Click the image below to enlarge it)
  6. Once you have clicked Save below the content editor, you will then be able to see how the equation will display for your students.
    (Click the image below to enlarge it)

LaTeX background information

Canvas's built-in equation editor simply converts LaTeX equations into an image.

(Click image to enlarge it)
 

Being an image, the equation is guaranteed to appear correctly in all browsers and on all devices, but once created the equation becomes fixed and inflexible. You cannot make any changes or revisions to the equation image - you would have to recreate the equation image entirely. Additionally, being an image, it is not accessible and thus requires the creator to create a suitable alternate textual (alt-text) description. The initial alt-text created by the equation editor is simply the LaTeX notation of the equation. This is not an acceptable alt-text as by itself, in general, the meaning of the notation is not clear or understandable. For these reasons, we recommend that you use steps detailed above to add LaTeX equations in Canvas.

Due to certain limitations present in web browsers and within the equation rendering software that our Canvas instance uses, some LaTeX functions do not work or are only partially supported. Using \\ to indicate a line break is not supported. For these situations, each line of the equations should have its own set of opening and closing $$. In cases where there is little or no support for a function, the function will render red or an error message will be displayed. Currently there is no comprehensive list of what is and is not supported. That said, the list of unsupported functions is not extensive and decreasing with each release of the equation rendering software. Equation support based on operating system and browser match the table included above in the MathML background section.

  • 1567
  • 26-May-2020
  • 1045 Views