How to embed a calculator in a Canvas or Moodle course

A calculator inside the course page means students work on the problem and the calculation in one place. Both Canvas and Moodle can show a calculator widget, as long as you paste its code into the HTML view of the editor rather than the normal text view.

The code you will paste

Find a calculator in the calculator widget gallery and press Copy code. For a maths or engineering course, this is the code for the Scientific Calculator, unchanged:

<iframe src="https://widemath.com/embed/scientific-calculator/" title="Scientific Calculator by WideMath" width="100%" height="760" style="border:0;max-width:460px" loading="lazy" allow="clipboard-write; fullscreen"></iframe>
<p style="margin:6px 0 0;font:14px/1.4 sans-serif"><a href="https://widemath.com/scientific-calculator/">Scientific Calculator</a> by WideMath</p>

The iframe loads the calculator from widemath.com/embed/, a page made for frames with no menus and no ads. The credit line under it links to the full tool. Please keep it; it is the one thing we ask in return for the free widget.

Canvas: step by step

Canvas offers two ways in. Both are from the Canvas Instructor Guide.

Through the HTML editor (Canvas guide to the HTML editor):

1. Open a Page, an Assignment description or any other place with the Rich Content Editor, and click Edit.
2. Click the HTML Editor icon at the bottom of the editor. It opens the pretty HTML view; Switch to raw HTML Editor gives plain text.
3. Paste the code where the calculator should appear.
4. Click Save.

Through the Embed tool (Canvas guide to embedding external media): click the Embed icon (if you cannot see it, click the Options icon first), or open the Insert menu and choose Embed. Paste the code in the Embed Code field and click Submit.

Canvas keeps only the HTML on its HTML editor allowlist and removes the rest when you save. We checked the widget code against it: src, width, height, loading and allow are allowed on iframes, and style and title are allowed on any element, so the code survives intact. The exception is calendar event descriptions, where Canvas removes iframes that do not point to Canvas itself.

Check the result with Student View in your course settings before students see it.

Moodle: step by step

In Moodle, put the calculator in a Page or a Text and media area (the activity formerly called a Label). These steps follow MoodleDocs for the current 5.x version: Page resource, Text and media area and TinyMCE editor.

1. Switch on Edit mode in your course and open the activity chooser in the section you want.
2. Choose Page, or Text and media area to show the calculator directly on the course page.
3. In the content box, open the editor's source code view. MoodleDocs calls this tool View source code; it is in the editor's Tools menu.
4. Paste the code, close the source window, and click Save and display (or Save and return to course).

A Text and media area shows the calculator between the activities on the course page, so keep it to the narrow scientific calculator or a single small tool. A Page gives a larger tool, such as the Graphing Calculator, the room it needs.

When Moodle removes the frame

Moodle is stricter than Canvas, and where you paste matters. The MoodleDocs page on iframes says iframe code is not allowed in activities that all class members can contribute to, such as forums, wikis, glossaries, blogs and assignment submissions, and that it is stripped when those posts are saved. Pages and Text and media areas are written by teachers, so they are the right home for a widget.

If the calculator still vanishes from a Page after saving, the cause is a site setting, and only your administrator can change it. MoodleDocs names these:

• Enable trusted content, in the site security settings. MoodleDocs says that by default Moodle "will always thoroughly clean text that comes from users", and that trusted text is not cleaned. It works together with the moodle/site:trustcontent capability, which the default manager and teacher roles have.
• Extended valid elements, under Site administration, Plugins, Text editors, TinyMCE editor. It lets an administrator allow tags that the editor would otherwise strip out.
• Allow EMBED and OBJECT tags covers those two older tags, not iframes, so turning it on will not help here.

The safest request to your administrator is short: "Please let teachers keep iframes from https://widemath.com in Pages."

Accessibility for students

• Keep the title attribute. Screen readers announce a frame by its title, here "Scientific Calculator by WideMath". The W3C lists this as technique H64 for meeting WCAG. Do not delete it when you edit the code.
• Say what the tool is for. Put one sentence above the frame, such as "Use this calculator for questions 3 to 6. Fractions stay exact." Students using a screen reader then know why the frame is there before they enter it.
• Give a way out. The credit line and the "Open on WideMath" link in the widget's top bar open the full calculator in a new tab. Students who zoom their browser to 200% or use a screen magnifier often find the full page easier than a fixed-height frame.

The calculations run in the student's own browser, and students do not sign in. We count how often widgets load with Google Analytics, as described in our privacy policy. If your institution lists third-party tools used in courses, add WideMath to that list.

Which calculators suit a course

For maths and physics, the scientific calculator widget is the usual choice. Statistics courses use the statistics calculator widget, chemistry labs the molarity calculator widget, and networking courses the subnet calculator widget. Engineering students preparing for the FE exam can practise on the TI-36X Pro style widget. The full list by subject is in free calculator widgets for teachers, and other platforms are covered in the complete guide to adding a calculator to your website.

Questions people ask