Learn How 2: GXWeb

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Creating Beautiful Mathematics ← Geometry Expressions Showcase: Learn How 2: GXWeb

Learn How 2: Take GXWeb to the Next Level

Create Your Own Live Mathematics and STEM Web Pages

W3Schools.com: Taking Your Web Page Skills to the Next Level

Saltire Software, home of Geometry Expressions and GXWeb

Symbolic computations on this page use the Nerdamer Symbolic JavaScript to complement the in-built computer algebra system of GXWeb.

Learn How (1): Create Your Own GXWeb Task

Introduction

Build and Refine your GXWeb applet

Add Math Boxes and Function Graphs

Add Nerdamer CAS

Add Lists 1: Area under a Curve

Add Lists 2: Cobweb Plot

Add Lists 3: Continued Fraction Model

Add Lists 4: Farey Numbers and Ford Circles

Putting it all together: GXWeb Math Explorer

Introduction

In the previous lesson, we saw how it is possible to take a GXWeb applet and add GX-like features, including coloured shapes and function graphs. Here we take GXWeb even closer to the capabilities of Geometry Expressions, adding computer algebra system (CAS) support through the Nerdamer Symbolic JavaScript libraries, as well as objects based upon lists, opening the doors for all manner of mathematical tools and opportunities. These include integral areas under curves, continued fraction models and more.

The GXWeb construction which we begin with here is intentionally simple - a point \((x, y)\) defined by two axis-based intervals (providing two sliders for \(x\) and \(y\)) and a quadratic function graph \(a \cdot x^2 + b \cdot x + c \) which offers three more sliders for the variables \(a\), \(b\) and \(c\).

This applet provides the basis for a powerful general tool for exploring algebra, geometry and number, as exemplified by the GXWeb Math Explorer, which brings together all of the components described here.

However, you are free to pick and choose from these features, as in the continued fraction model described at Stage 7.

From...

to...

Stage 1: Build and Refine Your GXWeb Applet

Back to Top

As described above, the creation of the original GXWeb applet is relatively straightforward. Draw two segments, originating at the origin and aligning with x and y axes. Constrain their lengths to x and y. Construct two more segments to form a quadrilateral, and then set a couple of these to be perpendicular to a neighbour, ensuring a rectangle. From the sidebar, set both x and y to 1, with limits between -5 and 5.

Now choose the function sketch option from the Construct menu and draw a parabola, \(a\cdot x^2+b\cdot x + c\). As before, set values this time to 0, and limits again to be -5 to 5.

Click and hold down on open space and save or copy the app. Well done! - you should have something like...

gxw00.html.

Back to Top

Well, not quite what we were after.

Perhaps the first thing you might notice is that, in spite of setting the three graph variables to values of 0, the result is not, in fact, a line aligned with the x-axis. Something happens in the transition from GXWeb construction to web applet that throws out the accuracy of such values - but this is readily fixed.

First, a little housekeeping - not required but a good idea: we restrict the domain a little.

If you check the function setMinBounds(wrld), you will notice that, despite the variables all being restricted to domains between -5 and 5, the function graph is defined between -10 and 10. For my purposes, I prefer a more limited initial domain, say -1 to 2 (-5 to 5 would also work). This expands automatically as required as the variables change.

At the very beginning of the web code, I added two new variables to serve as minimum bound values: minb1 and minb2, and then adjusted the setMinBounds function accordingly:

addFunctionBounds(wrld, JGOB9Y, minb1, minb2);

gxw0.html.

gxgxw0.js.

Now the essential part: replace the updateInputs function with that shown. Can you see what is happening here? As described in the first GXWeb lesson, the double eval with toFixed(1) nicely rounds and tidies the decimal values for both slider and label.

function updateInputs()
{
c = rangeVal(sliderUIc, rangeUIc);
textUIINUIc.innerHTML = eval(c).toPrecision(5);
b = rangeVal(sliderUIb, rangeUIb);
textUIINUIb.innerHTML = eval(b).toPrecision(5);
a = rangeVal(sliderUIa, rangeUIa);
textUIINUIa.innerHTML = eval(a).toPrecision(5);
x = rangeVal(sliderUIx, rangeUIx);
textUIINUIx.innerHTML = eval(x).toPrecision(5);
y = rangeVal(sliderUIy, rangeUIy);
textUIINUIy.innerHTML = eval(y).toPrecision(5);
}

⇒

function updateInputs()
{
c = rangeVal(sliderUIc, rangeUIc);
c = eval(eval(c).toFixed(1));
textUIINUIc.innerHTML = c;
b = rangeVal(sliderUIb, rangeUIb);
b = eval(eval(b).toFixed(1));
textUIINUIb.innerHTML = b;
a = rangeVal(sliderUIa, rangeUIa);
a = eval(eval(a).toFixed(1));
textUIINUIa.innerHTML = a;
x = rangeVal(sliderUIx, rangeUIx);
x = eval(eval(x).toFixed(1));
x_0 = x;
textUIINUIx.innerHTML = x;
y = rangeVal(sliderUIy, rangeUIy);
y = eval(eval(y).toFixed(1));
y_0 = y;
textUIINUIy.innerHTML = y;
}

Back to Top

Finally, using the method described in the first tutorial, it is relatively straightforward to add text input boxes to each slider, and a setGXW() function to link these. This supports changing values in the new text boxes for x and y, and having these trigger changes in both graph and slider.

To capture changes made by the slider and have these reflected in the text boxes and graph, we can actually add the following to the end of the updateInputs function from above:

document.getElementById("gxText").value = x;
document.getElementById("gyText").value = y;
document.getElementById("aText").value = a;
document.getElementById("bText").value = b;
document.getElementById("cText").value = c;

It also makes life easier to separate the HTML section of the code from the GXWeb construction code.:

gxw1.html.

gxgxw1.js.

Back to Top

Stage 2: Add Math Boxes and Function Graphs

Back to Top

Now that we have a functional base from which to build, we can add power features from the previous tutorial: MathQuill mathBoxes and functions for graphing. You are referred back to those instructions for the details.

gxw2.html.

gxw2.js.

gxgxw2.js.

Back to Top

Stage 3: Add Nerdamer CAS

Back to Top

Now the fun really starts - adding the Nerdamer Symbolic JavaScript libraries is really just a matter of loading a bunch of script libraries to the body of the HTML code, and then linking to these in appropriate ways. In our case, this involves adding a series of buttons and accompanying help instructions to form a CAS Toolkit (look in gxw3.js), which may be readily reused by copying and pasting into future documents.

Supporting functions for solving derivatives, integration and more are added in the sharedcodend.js file.

gxw3.html.

gxw3.js.

gxgxw3.js.

sharedcodend.js.

Back to Top

Stage 4: Add Lists 1: Area under a Curve

Back to Top

Adding CAS is clearly a powerful improvement in terms of teaching and learning opportunities. However, the last image also makes painfully clear what is still missing - the visual element which is so important for a deep understanding of many of the mathematical processes at play here.

Two such visual mathematical elements stand out - the area under a curve as defined by the integration of a function between two limits, and the tangent and normal to a curve at a point.

The latter can be readily achieved with the appropriate calculation of gradient and intercepts of straight lines - something we can do with the tools already in hand.

The area under the curve, however, is not able to wrangled, even from the impressive tool set of Geometry Expressions. It is achievable, though, through the addition of lists to the GXWeb code.

Begin by defining some new variables: xlist and ylist, obviously, and the limits, the number of steps and a variable to control whether the shaded area is visible or not:

var umin = 0;
var umax = 1;
var usteps = 51;
var xlist = [];
var ylist = [];
var showArea = 0;

Next, to the end of function recalcGeometry() to add the part that does all the work, calculating the x and y coordinates of each "slice" of the function:

xlist = [];
ylist = [];
for (i = umin*usteps ; i<= eval((umax)*usteps) ; i++)
{

var s = eval(i/usteps);
var yv = eval(f(s));
xlist.push(s);
ylist.push(yv);

}

At the end of function setMinBounds(wrld) we define the bounds for our list elements:

for (i = 0 ; i<=eval(Math.floor((umax-umin)*usteps)) ; i++) {

wrld.extend(xlist[i],ylist[i]);

}

All that remains is to make our list elements visible at the start of function drawShapes, as a series of connected points which start at the minimum limit on the x-axis, up to meet the curve at that x-value, across the boundary points of the function, down to the x-axis and back to the initial point. This polygon is then shaded.

if (showArea > 0){

if (xlist.length > 0){

submitBeginPath(ctx)
if (xlist.length > 0){

submitMoveTo(TranMat, ctx, new Point(xlist[0], ylist[0]));

}

for (i = 0 ; i<=eval(Math.floor((umax-umin)*usteps)) ; i++)
{

if (xlist.length > 0){

submitLineTo(TranMat, ctx, new Point(xlist[i], 0));

}

}

if (xlist.length > 0){

submitLineTo(TranMat, ctx, new Point(xlist[eval(Math.floor((umax-umin)*usteps))], ylist[eval(Math.floor((umax-umin)*usteps))]));

}

for (i = 0 ; i<=eval(Math.floor((umax-umin)*usteps)) ; i++)
{

if (xlist.length > 0){

submitLineTo(TranMat, ctx, new Point(xlist[eval(Math.floor((umax-umin)*usteps))-i], ylist[eval(Math.floor((umax-umin)*usteps))-i]));

}

}

if (xlist.length > 0){

submitLineTo(TranMat, ctx, new Point(xlist[0], ylist[0]));

}

submitFill(ctx, 191, 216, 216, 0.60);
submitStroke(ctx, "#000000", 1);

}

}

Quite a lot to take in, so why not take a few moments to play with this integral feature: try out the CAS Toolkit Help menus, before you head back into the code.

gxw4.html.

gxw4.js.

gxgxw4.js.

sharedcodend.js.

Back to Top

Stage 5: Add Lists 2: Cobweb Plot

Back to Top

Consider a population, say of fish in a pond. If the pond is fixed in size and limited in the amount of food which it can provide, then the population of fish cannot grow unbounded. In fact, the size of the population itself will limit the growth - as the number of fish (\(x\)) gets large, it will act to slow down the rate of population growth (\(r\)). A simple model of this situation over time is given by the relationship: \[f(x)=r\cdot x\cdot (1-x)\]

In this simple model, the values of \(x\) may range between 0 and 1, and \(r\) is the growth rate of the population. This is an example of the logistic equation for population growth, a useful model for studying real-world populations. (Notice that as \(x\) approaches the upper value of 1, this will cause the population to decrease).

An essential principle of Chaos Theory is that, for complex systems, a very small change in one part of the system can result in huge changes overall.
In our model, the variable \(a\) controls the growth rate of our population (between 0 - no growth - and 4 - chaos!)

\(b\) controls the initial value of the population, between 0 and 1, and \(c\) gives the number of iterations (years) over which we observe this population.

Just as in the previous example, there four steps in upgrading the Stage 4 mdel above:

This time we just need xlistr and ylistr but set minb1 = 0; AND minb2 = 0; (restricting all elements to just the domain defined by the points - between 0 and 1.

var minb1 = 0;
var minb2 = 0;
var xlistr = [];
var ylistr = [];

Next, to the end of function recalcGeometry():

xlistr = [b, b];
ylistr = [0, b];
for (i = 1; i <= 2*c; i++)
{

var xv1 = xlistr[2*i-1];
xv1 = eval(xv1);
var yv1 = a*xv1*(1-xv1);
yv1 = eval(yv1);
xlistr.push(xv1);
ylistr.push(yv1);
xlistr.push(yv1);
ylistr.push(yv1);

}

At the end of function setMinBounds(wrld) we define the bounds for our list elements:

if (xlistr.length > 0){

for (i = 0 ; i<=xlistr.length; i++) {

wrld.extend(xlistr[i],ylistr[i]);

}

}

And on to the end of drawShapes for a much simpler conclusion than the area model above:

for (i = 0 ; i

{

drawLine(TranMat, ctx, xlistr[i], ylistr[i], xlistr[i-(-1)], ylistr[i-(-1)], "#000000", 1, 0);

}

}

gxw5.html.

gxw5.js.

gxgxw5.js.

Visit GXWeb Chaos Theory to explore these ideas further.

Back to Top

Stage 6: Add Lists 3: Continued Fraction Model

Back to Top

Another lovely application of the use of lists can be found in the visual modelling of continued fractions.

For this, we actually use two pairs of lists: the first to divide the base rectangle into sub-rectangles, which are then coloured in different shades. The second pair of lists serves to subdivide each rectangle into squares.

For example, The continued fraction of \(\frac{37}{15}\) is \([2,2,7]\).

The first rectangle is 37 x 15 units, for which 37 = (2 x 15) + 7.

If we carve off the two 15 x 15 squares, a 15 x 7 rectangle remains, which divides into 2 x 7 + 1.

Remove the two 7 x 7 squares to leave a 7 x 1 rectangle.

Rather than try to reproduce the code here, please refer to the gxgxw6.js code directly - and don't forget to PLAY!

gxw6.html.

gxgxw6.js.

Visit GXWeb Fractured Fractions to explore these ideas further.

Back to Top

Stage 7: Add Lists 4: Farey Numbers and Ford Circles

Back to Top

And a bit of a favourite... have fun!

Suppose you wanted to make a list of all the rational numbers between 0 and 1.

How would you start?

One approach might be to begin with the denominators of the fractions: first, list those with denominator 1 - zero and 1: \(\frac{0}{1}, \frac{1}{1} \).

Next, add those with denominator 2: \(\frac{0}{1}, \frac{1}{2}, \frac{1}{1} \).

Add those with denominator 3 ( \(\frac{0}{1}, \frac{1}{3}, \frac{1}{2}, \frac{2}{3}, \frac{1}{1} \)) and you are on your way to the Farey Sequence! This last would be referred to as the Farey Sequence of Order 3.

index.html.

fareygx.js.

gxfarey.js.

Visit Farey Numbers and Ford Circles to explore these ideas further.

Back to Top

Stage 8: Putting it all together: GXWeb Math Explorer

Back to Top

Take some time to play and to explore this example in which all of the ideas developed here (and a few more!) have been implemented:

Questions, corrections, comments are always most welcome - feel free to drop me an email.

gxw.html.

gxwgx.js.

gxcfrac.js.

sharedcodend.js.

Visit GXWeb Math Explorer to explore these ideas further.

Back to Top

Back to Top

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Creating Beautiful Mathematics ← Geometry Expressions Showcase: Learn How2: GXWeb