Geometry Expressions software offers many amazing opportunities for learning mathematics, even beyond its unique blending of constraint-based dynamic geometry and computer algebra. The ability to create GX documents and then export these to a variety of formats is a powerful feature - the focus in these pages, of course, lies in exporting to the web, using HTML5 and JavaScript.
When seeking to create interactive online activities we demonstrate here that it is possible to go even further - using JavaScript to read properties from the embedded GX applet,and to write to the applet from the web page.
Of course, you might wonder why someone would want to do these things. The examples shown in the Geometry Expressions Showcase demonstrate the power to create interactive assessment/exploration tasks perfect for online learning built around an embedded GX applet - students can even explore STEM applications using the in-built sensors on their mobile devices!
Here we will consider four stages in opening up your embedded GX applet:
The sample used in the following step-by-step process is the (relatively simple) Meeting a Friend task.
Step 1.1
Create a Geometry Expressions model for your task. Ideally, it will have at least one "driver point" (here labelled "x") corresponding in this case to the constrained length of a segment on the x-axis. There will also be some output value - in this case, the area of the shaded polygon.
GX Pro-Tip #1: You can add a graphable function to your model. Construct a new function, and simply call it f(X) or g(X), etc. Go to the Variables/Functions menu and replace the text there with your own choice (like x). This will now appear as an editable text box.
Step 1.2
When you are satisfied with your model, select File -> Export -> HTML5 / JavaScript App.
GX Pro-Tip #2: Create a draggable point in GX and constrain it to the default, (x0, y0). When you export your file, this point remains draggable, as expected. BUT if you HIDE the point and export, you will get the option for sliders for your coordinates!
Step 1.3
You will be presented with a JavaScript Applet Generator menu for your applet. You should note that you will generally have some choice of output options, especially the UI Type - Slider, Text Box...
Step 1.4
The output will be an HTML file. It will work very well in this form, but for our purposes we will use a text editor to open this document and take it apart.
At this point, you might be interested to have a look (and a play if you like) with the actual code that GX exports to make this applet. Be warned - it is VERY long, but you will notice that there are three sections:
First, down to the <script type="text/javascript"> tag you will see the initial HTML code for the HEAD of the web page - here you will see mainly style commands which determine the appearance of the page elements.
Next - and this is the long part - the JavaScript code which makes all the magic happen!
Finally the last section of perhaps 50 lines is the HTML code which lays out the elements of the page.
Adding the ability to write to your embedded applet is very straightforward: go to two lines before the end of the code (between </div></div> and </body></html>) and insert the following:
var gxval = eval(document.getElementById('gxText').value).toFixed(2);
document.getElementById('UIx').value = gxval;
document.getElementById('UIINUIx').textContent = gxval;
onTime();
var mins = eval(60*gxval).toFixed(1);
var area = areaOUT0;
var prob = eval(100*area).toFixed(1);
var gxTxt = "<P style='color:red; font-size=24px;'><b>When wait time is " + mins + " minutes, the chance of meeting is " + prob + "%</b></P>";
document.getElementById('gxResult').innerHTML = gxTxt;
}
</script>
The first paragraph adds a text box (called "gxText") for inputting values for x. The initial value is set as 0.5.
The next paragraph creates a section (DIVision) into which text can be inserted.
The script does the work, defining a function, setGX(), which defines a variable for the value of the textbox, and then assigns that value to both the slider ("UIx") and the label for x, ("UIINUIx").
The onTime() function serves to literally do a full update of the applet, resetting to the new value for x. The output value from the main applet script ("areaOUT0") is read, and a text summary is displayed.
The use of a text box for input is arbitrary - any type of input will work - even sensor readings from a mobile device!
Setting up to read FROM your applet is also very straight forward.
You need to make two changes to the document's main script code. As shown, search for the term "function doFullUpdate". Enter the following text at the end of this function (directly after "updateOutputs();"). Feel free to copy and paste from this page - if typing, note that JavaScript code IS case-sensitive!
Now do exactly the same paste at the end of "function doAnimationUpdate" (you will find it a few lines after "function doFullUpdate").
Try changing the slider now and see those changes reflected in the text box value. Start the animation and see the text box value change!
Notice, too, that a function graphing input has also been added - very useful!
This is also a good time to make those precision values more readable - search through and change any references to toPrecision(8) to toPrecision(3), or perhaps toFixed(2) - or even, in this case toFixed(1) (as shown above). Try these out and see which works best for you.
Studying the samples provided in the Geometry Expressions Showcase, you should have observed that each task is broken into four component files:
test.html: The base HTML document which is essentially a template easily used for multiple activities. This is the editable text box document in the GX Showcase. Editing of this document should be minimal.
sharedcodegx.js: The JavaScript code shared by all activities. No editing should be required.
testgx.js: The JavaScript code for the GX web applet. As described below, the only editing here is the addition of two lines of code (and perhaps some cosmetic/precision improvements).
test.js: The JavaScript code for the context specific elements - the title, introductory text and assessment questions.
Step 4.1
In the first few lines of the HTML code, you will find the beginning of the JavaScript which creates the applet. Look for the <script type="text/javascript"> line which opens the script.
As shown, select from the next line - var FIXED_ASPECT_RATIO = 1;
Step 4.2
Drag to select almost to the very end of this document (some 3000 lines!) until you reach the closing script command - </script>.
Now COPY the selection, create a new text document, and PASTE. SAVE this document as testgx.js. (Feel free to replace the word "test" with your own task name when doing this yourself).
Step 4.3
Back to the original HTML document. Find the end of the script that you just copied from this document (look for </script>). Three lines later, you will find <div id="gxWrapper">.
COPY the text from this line down to
</div></div>
just before </body>.
This code is the visible HTML code which displays our model.
Step 4.4
You will paste this HTML code into the "test.js" document, which contains all the specific information for your particular task - the introductory text, the questions and the GX model. Feel free to change the text in this file for your purposes - topic, shortname, intro text...
Step 4.5
Scroll down until you find var gxWebCode and PASTE your text in place of that shown. Make sure that your text begins and ends with a backtick (`) as shown.
Step 4.6
At the end of this document, you will find the important setGX() function, which will also need to be updated to use your variables. The first section should work in most cases where your variable is "x". The second half will depend on what you are doing with "x" and what output you are displaying.
If you plan to create an online assessment task similar to what I have done, you should now work your way through this document, inserting YOUR text and your questions. Obviously, you will need to make changes to the calculations and variables that you will be using. You have multiple models provided here, so feel free to study these and reuse what is relevant.
If you are new to HTML and JavaScript, then feel free to drop me an email and I will help if I can.
Step 4.7
Adjust your initial <body onload... list: You will need an mqSetup for each question for which you want students to type text.
Step 4.8
Finally, adjust the names of your JavaScript source documents - and you are done!
