Presentation Arithmetic

16 July 2013

Interactive Content, Education, Production Challenges,  ePub3, E0-ebook Zero, IGP:FoundationXHTML, IGP:Digital Publisher

Most of the e-books we have seen with any sort of arithmetic use images or simple text. There is not a lot of effort to really get the sums looking really great. Here we give it a shot

This post continues with the education content theme. It is specifically about creating and publishing arithmetic content cost-effectively and well.

We have the requirement to deliver interactive arithmetic available in text books and as other learning resources. These have to be available in multiple languages and with locale themes. Publishers want both interactivity and high quality narrative presentation. 

Arithmetic teaching at any level requires a textbook narrative instructional flow to explain the core concepts. The interactive components supports this. Because of the page-count limitations of print books these are usually done as a narrative section, a set of examples and then some "try it" exercises. They sometimes use frightenly small font sizes. The number and range of examples that can be given is determined to a large extent on the number of pages and cost of paper. They rely on there being competent teaching talent in the loop (which is a good thing).

Video Learning Resources

In recent years there have been a number of wonderful video services that have sprung-up to help learning in nearly every empirical subject. mathispower4u and Khan Academy, both available on YouTube are just two examples that handle arithmetic (and a lot more) very well.

The problems with video education/instructional services are:

  1. They are nearly all in English and immediately inaccessible to most of humanity. The effort and cost of creating similar videos in dozens if not hundreds of languages is pretty frightening, but it is being done.
  2. The videos are linear in nature. You can of course pause, click back and review. But no matter how many times that is done it is the same content repeated.
  3. The user must have online access. This is not available for more than 50% of Earth's young learners.
  4. They can't evaluate the learner. They deliver straight-line teaching with the hope that learning is taking place.

So more tools are required for the disconnected parts of the world, and done right they can be pretty useful for the whole world.

Presentation Arithmetic

Most of the e-books we have seen with any sort of arithmetic use images or simple text. There is not a lot of effort to get the sums looking really great.

Arithmetic is not handled by MathML and I suppose there is no real requirement as arithmetic is basically tabular in nature. It can also be relatively ugly and difficult to engage with on the page if the various numbers are just typed in as linear text. After some experimenting we developed an arithmetically correct suite of presentation tables for inline, short and long arithmetic.

These are IGP:FoundationXHTML tagging pattern templates and match the arithmetic presentation matched with the Interactive ALL-IN modules announced earlier. The advantage of this tagging pattern approach to arithmetic is it can be done incredibly fast to a consistent high standard. It removes the fear of digitizing existing texts or creating new ones.

Here is an AZARDI screenshot of one of the ALL-IN interactive arithmetic modules in ePub3. It can be configured for arithmetic complexity, test or practice mode and of course language. Note the keyboard is built in and doesn't rely on a tablet keypad to keep the interface "whole". 

We needed a nice round hand-writingish font and selected the SIL Licensed URWGothicL. It particularly had good differentiation with 0 and O (Zero and Oh) and 1 and l (One and El). Another benefit is is has a handwritten lowercase a if needed. We also use STIXGeneral where serif is more appropriate. 

Here are some presentation arithmetic examples...


1 1 2 1  
  8 4 9 2
  9 6 9 9
+   3 2 8
1 8 5 1 9

Long addition has addends and the answer is the sum. In addition it needs a carry row. The CSS uses these terms in the table rows. 

Long Subtraction

      1 1  
  6 8 4 1 6
-   3 7 5 6
    -1  -1    
  6 4 6 6 0

Back to school with subtraction. There is a minuend, subtrahend and the answer is the difference. Included are carry forward and payback rows.

Long Multiplication

 3 5  5 2      
  - - - -    
    2 3 3 1  
      4 6 6 3
     \times   8 1 6
1 1 1 2 1    
    2 7 9 7 8
    4 6 6 3 0
3 7 3 0 4 0 0
3 8 0 5 0 0 8

Multiplication has a Multiplicand, multiplier (also called factors) and the answer is the product with a number of carry rows for the multiplication, and a carry row for the final addition of the work rows.

Long Division

Long division was the most challenging, not just for learning but for getting a reasonable presentation as well. We found out from Wolfram that the long division symbol has no proper accepted name. It is available as Unicode Character U+27CC but is hard to work with scale and position with the top rule. We fell back onto an SVG character that would scale nicely with the table and characters.

        2 5 9 R 1
2 9   7 5 1 2    
      5 8        
      1  7 1      
      1 4 5      
        2 6 2    
        2 6 1    

Long division has a divider, dividend and the answer is the quotient perhaps with remainders. There are a number of work rows.

Going Tutorial

With all those parts in place, and with a strong Widget strategy in the AZARDI Interactive Engine it was relatively easy to pull the two concepts together and create a poor-man's, no-audio, interactive tutorial framework.

100s 10s 1s
4 5 6
+ 2 7

We are going to add 27 to 456.

First set the sum up vertically being careful to line up the place values.

See how the ones, tens and hundreds are all in their correct column.

Remember our vocabulary terms. The big number 456 is an addend and the smaller number 27 is also an addend.

When we have added them together the result is the sum.

Step 1

4 5 6
+ 2 7

First we add the units column.  7 is added to 6.

Adding 7 plus 6 gives a result 13.

The number 13 has 1 tens and 3 ones.

The ones value 3 is placed in the units answer line and the 1 is carried forward to the tens column.

Step 2

4 5 6
+ 2 7

Next we add the 10's column.

Add 2 and 5. The answer is 7.

The 1 that was carried forward in the tens column must also be added to the total.

Step 3

4 5 6
+ 2 7
  8 3

We added 2 plus 5 plus the carried-forward 1.

The total is 8.

This is the value for the 10s column so we put it in the answer line.

This time there was no carried forward number.

Step 4

4 5 6
+ 2 7
4 8 3

The last step is to add the units of the hundreds column. There is only one value 4 in this column.

The 4 in the hundreds column can be put directly into the answer line.

Step 5

4 5 6
+ 2 7
4 8 3

Here is the final answer.

The sum of 27 added to 456 is 483.

Step 6

 ◄ Slide for more ►

OK so this example is not the richest arithmetic tutorial ever created, but it gives the idea of the potential of the approach (I hope). One interesting little tidbit is that the equation sizing was done with a CSS transform scale and position, Otherwise is identical to the other presentation arithmetic sums. CSS transforms can really make your life easy sometimes. 

The advantage of the interactive tutorial  approach is that more examples with a range of difficulties can be assembled easily and it can be browsed as easily as a video.

It is straight forward to make simple, medium and complex examples, plus additional tutorial sets that reinforce and dwell on some of the harder to learn concepts.

The tutorial is created with FX tagging patterns in HTML5, CSS and Javascript and runs in AZARDI and iBooks in ePub3. Identical to the ones in the Widget World demonstration book. It can be used in both of these ePub3 reading systems in either fixed layout and reflowing mode. The AZARDI advantage is the tutorial sections can be reflowable while fixed layout interactive sections can be included in the same book.

The tutorials could be animated with audio narration added, that takes more production effort obviously. The advantage is that with an HTML5 tagging pattern approach changing languages is easy at the text and even the audio level. For example it is easy to use the Devanagari number set.

The final output can be packaged into a digital book format such as ePub3 or E0, turned into a WebApp and published to a website or even an LMS. The options are open.

Summing it up!

Publishers in countries around the world have considerable pressure on them to create interactive digital versions of their books. The interesting thing about digital content is it has the potential to go much further than print books (although we have to give paper and a pencil their correct Number One place in the learning continuum).

This is an introduction to our approach for creating locale neutral arithmetic for better presentation, reuse and extension. Of course you have to have the reading systems to take advantage of this sort of agressive presentation and styling if you are publishing in e-book formats such as ePub3 or E0.

Numeracy and literacy at a young age are important. With the move towards digital content on a multitude of devices for the delivery of learning experiences,  publishers need good tools that are easy to use, predictable and reliable across platforms. It starts with the content, it ends with the learner.

As time permits we will post a tutorial page on the APEX@IGP site with the full presentation arithmetic tagging patterns and CSS styling details.

Posted by Richard Pipe


Start a real digital content strategy with

IGP:Digital Publisher

The complete digital publishing content management and production solution.

Available as for Small and Medium publisher:

Subscription Portals

Production Service Portals

IGP:Digital Publisher is also available as a full site license purchase.

Contact us for more information...

Use one master XHTML file to instantly create multiple print, e-book and Internet formats.

comments powered by Disqus