About Shiv Shankar

Shiv is a founder and the CEO of LearnHive. He cofounded Learnhive committed to creating a unique knowledge ecosystem which will make it easy to create, organize, share and obtain learning materials for K-12 education. He has over 20 years of experience in setting up and managing world-class software product development centers. Most recently, he was the Director of Enterprise Software Technology in Intel. He has a Masters degree in Mechanical Engineering from IIT, Madras, India. He considers teaching his passion and has won several best teacher and mentor recognitions. He is an avid technologist, voracious reader and music composer.

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.

Make learning effective – address the misconceptions

By Shiv Shankar, Founder and CEO, LearnHive

Did you know that kids have strong misconceptions? Watching lecture based video lessons will not help the kids to learn the concepts. This was explained in an recent  article. An example of misconception is that kids believe that the earth is flat. When the (video) teacher explains that the earth is round, the kids imagine that it is like a pancake, round and flat. So, how do we solve this problem and make learning more effective?

It is very important to bring out the child’s misconceptions and replace it with the correct concepts. Following the above example, asking the question whether the earth is like a pancake and explaining that the earth is like a ball will remove the misconception. Derek Muller in his Ph.D. thesis explains the best ways to teach Physics by addressing the common misconceptions.

It is now time to abolish monologue lecture videos as a means to teach concepts. A concept can be taught very effectively if a student is included in the video and there is a dialogue with a student. The student in the video should actively ask questions to clarify the misconceptions. This will help the child who is watching the video to assume the role of the student in the video and activate mirror neurons leading to better learning. Arindam Nag, one of our co-founders has applied this principle and did an excellent job of explaining the concept of infinity to his daughter. You can watch this awesome infinity concept YouTube video .

What common misconceptions do your children have? Share the misconceptions with us and we will help you to  teach the correct concepts.

I have given some references below if you are interested in exploring further.

References:

  1. “Students come to the classroom with preconceptions about how the world works. If their initial understanding is not engaged, they may fail to grasp the new concepts and information that are taught, or they may learn them for purposes of a test but revert to their preconceptions outside the classroom.”- Book: How people learn?
  2. Mental Models of the Earth:  A Study of Conceptual Change in Childhood
  3. Expert gently asks whether Khan’s Academy videos promote meaningful learning
  4. Designing Effective Multimedia for Physics Education
  5. Mirror Neuron – wiki
  6. Learnhive video – Concept of Infinity

About the Author:

Shiv Shankar (shiv@learnhive.net) is the co-founder and CEO of LearnHive. He cofounded Learnhive committed to creating a unique knowledge ecosystem which will make it easy to create, organize, share and obtain learning materials for K-12 education.

 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).