Tutorial – how to port MathJax to Windows 8 store applications

By Shiv Shankar,

In this tutorial, I will explain how to display math equations in Windows 8 store applications using MathJax.  MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers. MathJax enables your web site or application show mathematics equations.

The scope of this tutorial is limited to Windows 8 store applications written in HTML/CSS/Javascript.

I’ll cover the following topics in detail in the following sections:

  1. How to setup your development environment?
  2. How to make MathJax work in IE10 and Windows 8 app?
  3. How to reduce the size of the MathJax to a smaller size by removing unnecessary files?
  4. How to configure to ensure MathJax works properly?
  5. How to render math content runtime?
  6. How to prepare and publish a Windows 8 app that has math content?

1. How to setup your development environment?

I have used the following development environment and recommend the following setup:

  1. Mac with Parallels 8 Desktop.
  2. Windows 8 Enterprise Evaluation Edition (valid for 90 days).
  3. Visual Studio Express 2012 for Windows 8.
  4. MathJax 2.1 beta or above.

We are also going to use some unix specific tool like iconv. If you don’t have access to unix like machines you may want to setup GNU tools in your Windows machine.

2. How to make MathJax work for IE10 and Windows 8 app?

The Windows 8 application written in javascript runs in the embedded version of IE10 in Windows. Our first step is to ensure that we have a version of MathJax that runs properly in the IE10 browser. At the time of this writing, MathJax 2.1 beta is available that works in IE10.  As a first step, from your Windows IE10 visit

http://www.mathjax.org

to check whether the math equations are displayed correctly.

Download the latest version of MathJax in a separate folder outside the Visual Studio project. Do not try to adding the whole MathJax to Visual Studio; this will make Visual Studio hang!

We will be using the unpacked version of the MathJax stored in the unpacked directory.

Windows apps are not allowed access to window.clipboardData and will get a runtime error: "access denied". We are going to fix this problem first.

Edit the file Mathjax.js in the unpacked directory.

Replace the following line the near line #2332:

isMSIE: (window.ActiveXObject != null && window.clipboardData != null)

with:

 isMSIE: (window.ActiveXObject != null )

3. How reduce the size of the MathJax to a smaller size by removing files?

MathJax has around 30,000 files and occupies around 30MB disk space. It is essential to reduce the size and the number of files. The core strategy is remove the fonts that are not used by IE10. Further optimizations can be done by deleting unused files in the output directory.

Through some trial and errors, I kept only the following files and directories.

MathJax-2.1/images/*
MathJax-2.1/fonts/HTML-CSS/TeX/woff/*
MathJax-2.1/unpacked
   MathJax-2.1/unpacked/MathJax.js
   MathJax-2.1/unpacked/config/default.js 
   MathJax-2.1/unpacked/extensions/*
   MathJax-2.1/unpacked/jax/element/mml/*
   MathJax-2.1/unpacked/jax/input/*
   MathJax-2.1/unpacked/jax/output/HTML-CSS/*

Total size: 3.5MB

Further optimizations are possible.

Once you have done the optimizations, copy the above folders/files to your Visual Studio project and add the top level folder (MathJax-2.1) to the solution.

4. How to configure to ensure MathJax works properly?

Standard configurations work without any issues. Typically in an app environment math content is fetched using AJAX and are displayed dynamically.

<script src="plugins/MathJax-2.1/unpacked/MathJax.js?config=default">
</script>

Note: You need to include all the required files in Visual Studio. You can not dynamically include scripts from an external web-site.

5. How to render Math content runtime?

Once you receive the AJAX response, you dynamically populate HTML content and call the processMath function:

<div id="mymathcontent">
     LaTeX: 
     <span class="dynamic_content">
       $$J_\alpha(x) = \sum\limits_{m=0}^\infty \frac{(-1)^m}{m! \,
       \Gamma(m + \alpha + 1)}
       {\left({\frac{x}{2}}\right)}^{2 m + \alpha}$$
     </span>
</div>

window.processMath = function (id) {
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, 
                      document.getElementById(id)]);
};

processMath("mymathcontent");

6. How to prepare and publish the app that has math content?

You need to convert MathJax javascript files to UTF8 encoding with BOM (Byte Order Marking). Otherwise the Windows self certification test will fail and your app submission will be rejected.

We need couple of scripts to do the conversion.

PHP script outputbom.php creates the BOM header.

<?php

  echo chr(239) . chr(187) . chr(191);

?>

C-shell toutf8.csh script converts a javascript file to UTF8 encoding with BOM header.

#!/bin/csh
echo Converting $1
mv $1 $1.orig
php ~/tools/outputbom.php >  $1
iconv -t UTF8 $1.orig >> $1

Store both theses files under tools directory under your home directory.

The following find command does the bulk conversion.

%  find unpacked   -name "*.js" -exec ~/tools/toutf8.csh {} \;

You can test whether the conversion works by building the app, running the app, and running the Windows self certification test.

Delete the .orig files after the tests.

Closing

I hope you enjoyed the tutorial. Please send your questions or feedback to shiv@learnhive.net.

Acknowledgements

Thanks to Davide Cervone and  Peter Krautzberger for their feedback and corrections.

How to get the awesome results from parent teacher meetings?

By Captain Unni Krishnan,

The days of “Acharya  devo bhava” ( teachers are god) probably no more exist , reasons for this may be many.  The dynamics of  student teacher and in turn parent teacher relationship in this era in our country has a new dimension. To make a positive influence on the child’s development, it is essential that interactions between teacher and parent are productive and positive. We all understand that both parents and teachers aim at the student doing well in life but for the parent the child and probably the siblings or a few children in the neighborhood are the only benchmark and many a time the reaction is more emotional. The teacher has a larger spectrum of children in the class, is more clinical in observation and hence is able to assess more dispassionately.

Photo credit: http://www.sxc.hu/photo/180602

In an exchange of notes, if both are mature and the aim is to not blame the child but help overcome the shortcomings, the result will be very positive. Often it happens that the teacher is critical about the child and immediately, the parent becomes defensive, as a result the communication is more of a confrontation and a fault-finding session commences which does not benefit any one.

Parents and teachers in their discussions must consider themselves to be on the same side that will help them look at the child from the same angle. While it is essential to be positive and motivate children but we must also understand that children have to realize the fact that excellence comes from hard work. If parents negotiate top grades and positions then children will become lazy and shun hard work.

Another important aspect where parents tend to shield children is punishments (of course now schools do not award any physical punishment but limit it to restrictions or notes in student diary), Mistakes are a part of growing up, and every one makes mistakes and gets punished as a correction process.  If children are playing they are bound to have arguments, fall, get hurt, these are natural. So also, children fight and make up but it becomes an issue when it comes up for discussion in parent teacher meetings (many a times it is the children who fight regularly who turn out to be the best of friends).

How to conduct a fruitful Parent Teacher meeting? It would be ideal if both the parent and the teacher prepare on a positive note. Approach the meeting with the intent to listen to the other party rather to put across concerns on their list. Teachers must make notes of the concerns expressed by parents. Teachers along with their concerns must suggest possible remedies. Parents and teachers must consider each other to be on equal footing rather than on a talk down approach.

Most importantly Parents must understand the limitation of the school which functions for a community of students and is not a one on one solution and hence cannot cater to individual needs of each child.

About the Author:

Captain Unni Krishnan is a Founder and Director of LearnHive; he is also the Founder and Managing Trustee of Primus Public School, Bangalore. Prior to that he was the Founder and Trustee of Indus International School. At Primus, he has been instrumental in implementation of new teaching pedagogies. He has seamlessly integrated the International and Indian syllabi to help prepare students for higher studies both in India and Overseas. Capt. is a ‘Sword of Honor’ from the prestigious Officers Training Academy of the Indian Army.

 About Learnhive: 

Learnhive is a leading provider of technology based learning solutions for K12 students, parents, and tutors. Our goal is to make curriculum based learning more effective and fun. We specialize in providing after school learning solutions for students and parents. Our flagship product, Personal Concept Tutor™ gives students the flexibility to learn concepts at their own pace using a wide variety of materials and resources suited for their individual needs. Our technology is compatible with multiple device formats such as desktops, laptops, tablets and smart phones to make learning more fun, interactive and available to students anywhere and at anytime. Signup for free to access the learning materials (lessons and exercises).