Article
Creating Math Material Using HTML and MathML — Accessible on Windows or iOS Devices
Learn how to transform math material such as worksheets and textbooks into HTML content that students can access on iOS devices or a WINDOWS computer.
Learn how to transform math material such as worksheets and textbooks into HTML content that students can access on iOS devices or a WINDOWS computer.
I am using the following tools to complete these tasks:
Simple HTML Editor is like a word processing document that understands HTML code–this is the code that one uses to create a web page. For this type of project, you could use any type of HTML editor on a Windows computer or Mac. There are definitely more robust options out there, but this one is simple, free, and effective. I obtained it through the Microsoft Store using a Windows 10 Computer. You will also need a MathML editor. MathML stands for Mathematical Markup Language. MathML adds special tags to HTML so that math can be displayed on the web in a way that other computers understand–not just as pictures. As with the HTML editor, there are lots of options out there, but I have chosen MathCast. MathCast is free, open source, and fairly easy to use once you get acquainted with it. In addition, I like it because it gets along nicer with a screen reader than most other free MathML editors.
UPDATE 2/1/17: Before beginning you will want to make sure you have the necessary settings in place for MathCast. From the MathCast Home Screen, go down to Settings. A new window will open. Make the following changes if needed: Clipboard Copy Format (MathML) and Display Type (Inline).
Practice Creating Mathematical Expressions and Equations
For most people, creating a web page using HTML might seem a bit daunting. Afterall, most of us didn’t go to school to become computer programmers. To begin we’ll just start with the basics of getting the math code we need. LET’S DO THIS!
First, you just need to become familiar with the process and how your code is going to look. The basic steps are:
- Create your mathematical expression in MathCast.
- Copy the MathML code for the expression
- Paste the code into the HTML editor
- SAVE
In the video below, I will walk you through these basic steps for some simple and some more advanced expressions.
Creating Numbered Exercises and Combining Text
Obviously we don’t want to have to create a web page for every single math expression our students are going to encounter on a handout, worksheet, or textbook. Next, you’ll need to know a little bit of how HTML works, a little bit of specialized code, and how you can combine all these things to get something that looks more complete.
Let’s assume we need to make a simple document called “Arithmetic”, and it is laid out like a worksheet. It has directions for the student and then five exercises in all with the following problems four plus seven, nine minus six, twelve times two, and twenty divided by ten. There will also be an exercise with some text that says “Find the sum, ten plus two”. You can start by creating the MathML code for these expressions just as you did earlier using MathCast. However, instead of copying and pasting the code into the Simple HTML Editor, I suggest you paste the code for ALL of the exercises into one Word Document, or as I have done, in Notepad. For the last exercise, you will want to go ahead and create the MathML code for the expression “ten plus two”.
In the video below, I will show you how to bring all this together. As you will see, I am also using some specialized code which you can find at the bottom of this post in a Word Document called List Template. Without this code, the exercise numbers (number one, number 2, etc.) may show up in print, but a screen reader may not actually read them. If you feel like you’re getting confused don’t worry. Go ahead and make your MathML files and then watch or listen to the video.
To recap, here are the steps taken:
- Create the first mathematical expression using MathCast
- Copy the MathML code for the expression
- Paste the code into a Word Doc or Notepad
- Repeat for each expression or exercise
- SAVE your Notepad or Word Doc.
- Open the List Template document.
- Copy and Paste all of the code into the HTML Editor
- Type your title on line one.
- Put ”
” in front of your title and “
” after your title.
- Type your directions
- Put “” in front of your directions and “” after your directions.
- Copy and paste the math code for each math expression from Notepad into the HTML editor. Replace the math code (or additional text) in place of where the current code says “List item x”
- SAVE
For more information on how your students can access this type of content, stay tuned….
Attached File(s)
https://www.perkins.org/wp-content/uploads/elearning-media/List%20Template.docx
By Shannon Pruitt
