Using Equations in Web Pages

At the present time I’m working on the new N5 Maths book with Bright Red Publishing, and part of this is creating math equations in a Web page. The MathJax is an excellent plug-in for Web pages which will resolve a Tex format into an equation. I use MVC ASP.NET 4.0, which makes it easy to create dynamic equations. First you need to add:

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Next in our cshtml page, we add the Tex equation to render:

<P>[<a href="javascript:history.go(-1)">Back</a>] Solves $ax^2 + bx + c = 0$. Enter values, and then 
press the button and it will calculate the result. </P>

where I have used an in-line format, by defining:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>

To see how this renders for x^2 -1 [which is (x+1)(x-2)], click here:

http://www.asecuritysite.com/Coding/calc_q?sortBy=1%2C0%2C-1

This should give roots of +1 and -1.

Dynamic Equations

With MVC, we can then create a dynamic equation with the values entered by the user by adding the @Html.Display(“b”) tags, which will fill the value for the controller:

<p>$x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}$</p> gives: 
  $x = \frac{-(@Html.Display("b"))\pm\sqrt{(@Html.Display("b"))^2-4(@Html.Display("a"))
  (@Html.Display("c"))}}{2(@Html.Display("a"))}$</p>

Next we can add arguments in generating the pages:

  • x2−1=0 gives (x+1)(x−1) to give roots of +1,-1 a=1,b=0,c=-1
  • x2+3x+2=0 gives (x+2)(x+1) to give roots of -2,-1 a=1,b=3,c=2
  • x2+x−2=0 gives (x+2)(x−1) to give roots of -2,1 a=1,b=1,c=-2
  • x2+x−2=0 gives (x+2)(x−1) to give roots of -2,1 a=1,b=1,c=-2

Creating a generic page for a range of equations

With these examples, I have taken a page of the form a=b*c, which fits equations such as F=m*a, V=I*R, P=V*I, and so on The first example takes V, I and R:

http://www.asecuritysite.com/Coding/calc_eq?sortBy=V%2CI%2CR

Now we will change it to P, V and I:

http://www.asecuritysite.com/Coding/calc_eq?sortBy=P%2CV%2CI

and change to F, m and a:

http://www.asecuritysite.com/Coding/calc_eq?sortBy=F%2Cm%2Ca

In this way I take the passed argument, and then parse it, and fill the page up with the required unit.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s