ICTCM 2008

Steal this Applet!!!

Doug Ensley, Shippensburg University

Barbara Kaskosz, University of Rhode Island

The material presented in this workshop is also available on the site http://webspace.ship.edu/deensley/stealthisapplet/

Minicourse Outline Overview of the www.flashandmath.com Project

An Introduction to XML: The nuts and bolts of stealing our applets

Presentation of the Applets

Overview of Flash Programming and Resources Available

Discussion of Future Developments for this Project

Flash and Math The website http://www.flashandmath.com was launched in July 2007 as a resource for mathematics and science

educators, but it has quickly grown into a very popular site for Flash Developers in general. While increasingly general in

scope, we have not lost sight of our origins, so the context for many of examples and the focus of many of our tutorials

remains the use of mathematics in Flash and the use of Flash for mathematics.

Ensley & Kaskosz – ICTCM 2008

Page 2

Introduction to XML in Flash In this tutorial, we will show how to edit an external data file that has been created in tandem with a Flash applet. The

advantage of this approach is the flexibility that it allows for the finished applet file. With this technique, a single applet

file can be used to host multiple activities or problem sets. Even more importantly, an instructor who knows nothing of

Flash programming can customize an application for his or her own needs.

Part 1: Before and After Comparison. Let’s pretend that you have browsed the Math Flash Forum site and come across

a mathlet written by Ensley & Kaskosz called polar.fla. The application is the straightforward polar curve graphing utility

shown below:

“Very nice,” you think. “Ensley & Kaskosz are very clever, but I wish this application had some built-in examples for my

students who are just learning about polar curves.” In this tutorial, we will show how to add this functionality in such a

way that the pool of examples can be constantly updated without any additional programming.

Part 2. Using an appropriately structured XML data file

According to the World Wide Web Consortium (http://www.w3.org),

... Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879).

Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an

increasingly important role in the exchange of a wide variety of data on the Web and elsewhere.

If you have used HTML before, then the format of XML will look very familiar to you. The only difference is that in XML,

you create your own tags and tag attributes to make sense for your particular application. Open a text file (say, using

Notepad on a Windows machine) and enter the following text to reflect the information required to completely specify

two examples in the polar.fla application.

<gallery>

<plot func="1 + 2*sin(t)">

<xRange min= "-3.5" max="3.5" />

<yRange min= "-3.5" max="3.5" />

<tRange min= "0" max="2*pi" />

</plot>

Ensley & Kaskosz – ICTCM 2008

Page 3

<plot func="t/4">

<xRange min= "-4" max="4" />

<yRange min= "-4" max="4" />

<tRange min= "0" max="5*pi" />

</plot>

</gallery>

The tags <gallery>, <plot> , etc. and the attributes func, min and max are all invented in order to convey the

meaning of the data. ActionScript 3.0 allows the manipulation of this data in a manner that is entirely intuitive. Save

this file as gallery.xml in the same directory that your html and swf files will eventually reside. (Be sure you have not

accidentally saved your file as “gallery.xml.txt.”)

To understand the way XML works, we should define some of the basic terminology using the file described above as an

example.

We can think of the XML object plotDataXML as referring to gallery, which is essentially the root class of objects in

this file. plotDataXML has one type of child called plot, but it has several of them. These are referenced using array

notation as plotDataXML.plot[0], plotDataXML.plot[1], etc. We continue use the “dot” notation to refer

to children, so plotDataXML.plot[0].tRange refers to the tRange node of the first plot data object. To

reference an attribute, we vary this notation slightly adding an @ symbol. The reference

plotDataXML.plot[0].@func refers to the func attribute of the first plot object, and the reference

plotDataXML.plot[0].tRange.@min similarly refers to the min attribute of the tRange node of the first plot

object.

Part 3. Add code to import XML file and parse the data. We can make the following additions (along with adding an

appropriately functioning “Gallery” button on the stage) to polar.fla to create the new Flash file polarGallery.fla.

The gist of the changes is that we define an array for each of the nine input textboxes on the stage so that we can hold

the data for each of the examples in our gallery.xml file. In this way, any student-focused applet can be stocked with a

gallery of pre-defined examples that can be modified from instructor to instructor through manipulation of the data file

with any simple text editor.

We will discuss the code below in more detail at the end of the minicourse.

var arrFunc:Array;

var arrXmin:Array;

Ensley & Kaskosz – ICTCM 2008

Page 4

var arrXmax:Array;

var arrYmin:Array;

var arrYmax:Array;

var arrTmin:Array;

var arrTmax:Array;

var xmlString:URLRequest = new URLRequest("gallery.xml");

var xmlLoader:URLLoader = new URLLoader(xmlString);

xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, noFile);

xmlLoader.addEventListener(Event.COMPLETE, initData);

function noFile(evt:IOErrorEvent):void {

arrFunc = [ "3*cos(t)" ];

arrXmin = [ -5 ];

arrXmax = [ 5 ];

arrYmin = [ -5 ];

arrYmax = [ 5 ];

arrTmin = [ 0 ];

arrTmax = [ 6.3 ];

InputBox1.text = arrFunc[0];

XminEnter.text = arrXmin[0];

XmaxEnter.text = arrXmax[0];

YminEnter.text = arrYmin[0];

YmaxEnter.text = arrYmax[0];

TminBox.text=arrTmin[0];

TmaxBox.text=arrTmax[0];

graphCurve();

}

function initData(evt:Event):void {

var plotDataXML:XML = XML(xmlLoader.data);

var numFuncs:Number = plotDataXML.plot.length();

arrFunc = new Array(numFuncs);

arrXmin = new Array(numFuncs);

arrXmax = new Array(numFuncs);

arrYmin = new Array(numFuncs);

arrYmax = new Array(numFuncs);

arrTmin = new Array(numFuncs);

arrTmax = new Array(numFuncs);

for (var i=0; i < numFuncs; i++) {

arrFunc[i] = plotDataXML.plot[i].@func.toString();

arrXmin[i] = plotDataXML.plot[i].xRange.@min.toString();

arrXmax[i] = plotDataXML.plot[i].xRange.@max.toString();

arrYmin[i] = plotDataXML.plot[i].yRange.@min.toString();

arrYmax[i] = plotDataXML.plot[i].yRange.@max.toString();

arrTmin[i] = plotDataXML.plot[i].tRange.@min.toString();

arrTmax[i] = plotDataXML.plot[i].tRange.@max.toString();

}

InputBox1.text = arrFunc[0];

XminEnter.text = arrXmin[0];

XmaxEnter.text = arrXmax[0];

YminEnter.text = arrYmin[0];

YmaxEnter.text = arrYmax[0];

TminBox.text=arrTmin[0];

TmaxBox.text=arrTmax[0];

graphCurve();

}

Ensley & Kaskosz – ICTCM 2008

Page 5

Derivative Self Test

Notes

In this example we have a simple xml file storing data controlling both the problem sets and parameters that determine

the interaction that the student will see. Note that for each problem, both question and answer are specified. We

check the user answer against the stored answer for a small number of points (numpoints) and if the evaluation stays

within a level of tolerance (tol) for this number of points, we mark the answer as correct. To understand the different

options for student interaction it is recommended that you interchange some true/false values to see the effect.

Set up a subdirectory (folder) on your website. In this folder, place the files Derivatives.swf, Derivatives.html,

AC_RunActiveContent.js, and derivatives.xml provided on the workshop CD in the Derivatives folder. Edit the file

derivatives.xml. (Look below to see an explanation of the various choices you have.) Direct users to

http://[yourdomain/yoursubdirectory]/Derivatives.html, and they will find your version of the applet.

Structure of the derivatives.xml data file

Ensley & Kaskosz – ICTCM 2008

Page 6

Riemann Sums

Notes

This classic applet can be customized with an enhanced gui applet that allows an instructor to choose the specific

examples a student sees and to tailor the functionality of the applet for use as a demo only or as a hands-on tool for

students to explore convergence of numerical integration methods.

Set up a subdirectory (folder) on your website. In this folder, place the files riemann.swf, riemann.html,

AC_RunActiveContent.js, and riemann.xml provided on the workshop CD in the RiemannSums folder. Use the

Instructor’s Tool (shown below) to set up your version. Once the desired settings have been made, click the button

labeled “Done?” to see the XML data that will correspond to your customized applet. Copy this XML code in its entirety

into the riemannData.xml file. Direct users to http://[yourdomain/yoursubdirectory]/riemann.html, and they will find

your version of the applet.

Using the Instructor’s Tool

Ensley & Kaskosz – ICTCM 2008

Page 7

Area Function

Notes

Download the files area_function.swf, area_function.html, AC_RunActiveContent.js, and intData.xml to a subdirectory

(a.k.a., folder) on your website. The final applet is shown below. Edit the file intData.xml. (See below to see an

explanation of the various choices you have.) Direct users to

http://[yourdomain/yoursubdirectory]/area_function.html, and they will find your version of the applet.

Structure of the intData.xml data file

Ensley & Kaskosz – ICTCM 2008

Page 8

Graphing a Function in Two Variables

Notes

Download the Flash player file fun_graph3d_gallery.swf, fun_graph3d_gallery.html, AC_RunActiveContent.js, and

graph3Ddata.xml from Surfaces directory of your workshop CD to a subdirectory (a.k.a., folder) on your website. Edit

the file graph3Ddata.xml to customize the gallery of examples. (Look below to see an explanation of the various choices

you have.) Direct users to http://[yourdomain/yoursubdirectory]/fun_graph3d_gallery.html, and they will find your

version of the applet.

Structure of the graph3Ddata.xml data file

Ensley & Kaskosz – ICTCM 2008

Page 9

Parametric Surfaces in 3D

Notes

This set of three applets serve a similar purpose in teach about parametrically defined surfaces shown in various

standard coordinate systems. The following instructions address all three of the applets, though we only show the XML

data for one of them.

1. Rectangular coordinates. Download the Flash player file surf_graph_rectan.swf, surf_graph_rectan.html,

AC_RunActiveContent.js, and surf_graph_rectan.xml from ParamSurfaces directory of your workshop CD to a

subdirectory (a.k.a., folder) on your website. Edit the file surf_graph_rectan.xml to customize the gallery of

examples. (Look below to see an explanation of the various choices you have.) Direct users to

http://[yourdomain/yoursubdirectory]/ surf_graph_sphere.html, and they will find your version of the applet.

2. Spherical coordinates. Download the Flash player file surf_graph_ sphere.swf, surf_graph_ sphere.html,

AC_RunActiveContent.js, and surf_graph_ sphere.xml from ParamSurfaces directory of your workshop CD to a

subdirectory (a.k.a., folder) on your website. Edit the file surf_graph_ sphere.xml to customize the gallery of

examples. Direct users to http://[yourdomain/yoursubdirectory]/ surf_graph_ sphere.html, and they will find

your version of the applet.

3. Cylindrical coordinates. Download the Flash player file surf_graph_cylin.swf, surf_graph_ cylin.html,

AC_RunActiveContent.js, and surf_graph_ cylin.xml from ParamSurfaces directory of your workshop CD to a

subdirectory (a.k.a., folder) on your website. Edit the file surf_graph_ cylin.xml to customize the gallery of

examples. Direct users to http://[yourdomain/yoursubdirectory]/ surf_graph_ cylin.html, and they will find

your version of the applet.

Structure of the xml data files

All three versions of the applet use a similarly formatted xml file. We show just one example below to illustrate the basic

structure. In the rectangular coordinates example, the three functions 𝑥(𝑠, 𝑡), 𝑦(𝑠, 𝑡) and 𝑧(𝑠, 𝑡) as the xfun, yfun and

zfun attributes of the <plot> tag. In addition, a range for the s and t parameters must be specified.

<rectangular>

<plot xfun="cos(s)" yfun="sin(s)" zfun="t" >

<sRange min= "0" max="2*pi" />

<tRange min= "0" max="3" />

</plot>

<plot xfun="t*cos(s)" yfun="t*sin(s)" zfun="t" >

<sRange min= "0" max="2*pi" />

<tRange min= "0" max="1.5*pi" />

</plot>

<plot xfun="sin(t)*cos(s)" yfun="sin(t)*sin(s)" zfun="cos(t)" >

<sRange min= "0" max="2*pi" />

<tRange min= "0" max="pi" />

</plot>

</rectangular>

Ensley & Kaskosz – ICTCM 2008

Page 10

Custom Grapher

Notes

This is a prototype for more types of interactivity we anticipate using for this project. When feasible we would like the

author to have the ability to lay out the entire applet (content and functionality) using only a drag-and-drop interface.

Using the Instructor’s Tool

Set up a subdirectory (folder) on your website. In this folder, place the files CustomGrapher.swf, CustomGrapher.html,

AC_RunActiveContent.js, and grapherData.xml provided on the workshop CD in the CustomGrapher folder. Use the

Instructor’s Tool (shown below) to set up your version. Once the desired settings have been made, click the button

labeled “SAVE” to see the XML data that will correspond to your customized applet. Copy this XML code in its entirety

into the grapherData.xml file. Direct users to http://[yourdomain/yoursubdirectory]/CustomGrapher.html, and they

will find your version of the applet.

Ensley & Kaskosz – ICTCM 2008

Page 11

Matching Game

Notes

The Matching Game applet is the brainchild of Barbara Margolius of Cleveland State University. Barbara is a “graduate”

of our 2007 summer Flash workshop who has graciously given us permission to use her work here. We have adapted

her original design (for matching (𝑓,𝑓’) pairs) so that the same applet can be used in a precalculus course (matching

(𝑓(𝑥),𝑓(𝑥 + 1)) pairs, e.g.) or in more than one way for calculus (matching 𝑓(𝑥) and 𝐹(𝑥), matching 𝑓(𝑥) and 𝑓’’(𝑥),

e.g.)

Set up a subdirectory (folder) on your website. In this folder, place the files matchXML.swf, MatchingGame.html,

AC_RunActiveContent.js, and matchData.xml provided on the workshop CD in the MatchingGame folder. Edit the file

matchData.xml. (See below to see an explanation of the various choices you have.) Direct users to

http://[yourdomain/yoursubdirectory]/MatchingGame.html, and they will find your version of the applet.

Structure of the matchData.xml data file

Ensley & Kaskosz – ICTCM 2008

Page 12

Scrambled Quiz

Notes

This applet uses a drag-and-drop quiz structure that can be applied to many different problems. The instructor can

customize the quiz content as well as title, instructions, and color scheme.

Set up a subdirectory (folder) on your website. In this folder, place the files ScrambledQuiz.swf, ScrambledQuiz.html,

AC_RunActiveContent.js, and quizData.xml provided on the workshop CD in the Scrambler folder. Edit the file

quizData.xml. (See below to see an explanation of the various choices you have.) Direct users to

http://[yourdomain/yoursubdirectory]/ ScrambledQuiz.html, and they will find your version of the applet.

Structure of the quizData.xml data file

Ensley & Kaskosz – ICTCM 2008

Page 13

Other Quizzes

Notes

Creating a custom quiz is a very common classroom use for Flash applets. It makes sense that the content and type of

quiz should be definable without Flash programming, and this applet allows you to do just that. There are three types of

questions that can be used (radio button, check box, and combobox – try the given example to see the differences).

Certainly the question type and content are easy to specify, but we have also tried to anticipate a few interface issues

that can be equally easily specified through data in the XML file.

Set up a subdirectory (folder) on your website. In this folder, place the files CustomQuiz.swf, CustomQuiz.html,

AC_RunActiveContent.js, and quizData.xml provided on the workshop CD in the CustomQuiz folder. Edit the file

quizData.xml. (See below to see an explanation of the various choices you have.) Direct users to

http://[yourdomain/yoursubdirectory]/CustomQuiz.html, and they will find your version of the applet.

Structure of the xml data file

Ensley & Kaskosz – ICTCM 2008

Page 14

Discrete Mathematics applets for creating XML data There are times when the amount of data necessary to specify content or functionality is overwhelming to a potential

applet “thief.” In these cases, we can create graphical user interfaces (GUI), also in Flash, to help create the XML data.

Most of the examples below are for a unit on Graph Theory in a Discrete Mathematics course. Note that these example

use an older form of the Flash authoring system (and the swf files play in Flash Player 8). The result is that there some

peculiarities with the XML format required. Read the instructions carefully!

Instructions for the Eulerian Graph Tool These instructions will allow you to create customized graph theory problems within the directory MyExercises provided

on the workshop CD.

Step 1. Open the instructor's "GraphMakerEuler" tool in its own window. Print these instructions or resize things to be

able to see these instructions and the GraphMakerEuler tool at the same time.

Step 2. Open the file euler.xml within the MyExercises directory. You will see the following lines:

<?xml version="1.0"?>

<problems>

<NumberToUse>0</NumberToUse>

<graph> </graph>

</problems>

The number 0 between the <NumberToUse> and </NumberToUse> indicates that all of the graphs in this file will

be used. To specify that a subset of the total should be used, change this to the number of graphs you would like to be

part of your problem set. Note that initially there is nothing between the <graph> and </graph> tags. This is where

we will place the data that specifies our graphs. Leave this file open and return to the EulerGraphMaker tool.

Step 3. Follow the instructions in EulerGraphMaker to draw a graph that you want your students to search for Eulerian

trails or circuits. A quick reference for the functions available appears below. After the graph is formed, the student

interace will shrink the scale slightly so that labels can be added automatically. It is strongly recommended that you

preview the labeled graph in the student interface before quitting the EulerGraphMaker tool.

When RemoveNodes, DrawNodes, or EditLines buttons are pressed, you activate/deactivate a mode with

specific editing abilities. You will be able to tell that mode is active by the gray box that appears behind the

relevant button.

o When DrawNodes is active, clicking on the screen will produce a node. Once the maximum allowable

number of nodes is reached, you will be "cut off" from this function.

o When RemoveNodes is active, clicking on a node will delete it along with any incident edges.

o When EditLines is active, clicking on a pair of nodes will either draw an edge between them or remove

the edge between them if an edge is already there.

o When none of this buttons is active, you can freely drag nodes to rearrange your graph.

The Clear button erases your graph so you can start over.

The Finished button leaves the editor and shows you the data that defines your graph.

Step 4. The data for your graph is shown in a text box in the middle of the screen. Use your mouse (or click in the box

and press Ctrl+A to "Select All") to select all text that is there, and press "Ctrl+C" to copy it. Go to the still-open file

euler.xml, and paste (Ctrl+V) this line of data between the tags <graph> and </graph>.) Note that you can then

Ensley & Kaskosz – ICTCM 2008

Page 15

start over building another graph or you can return to edit the one you just copied to the text file. You should make sure

that a graph looks okay in the student interface before starting to build a new graph.

When adding more graphs to the euler.xml file, you will need to type your own <graph> and </graph> tags. Do not put

any space between the tags and the graph data!

Step 5. Test your exercises by opening the file EulerGraphs.html in your browser. You will notice that the problems

are given in random order. Note that you can include more instructions or information before and/or after the actual

Flash applet, if desired.

Other Graph Theory Applets The following applets use the same authoring system and conventions as the Euler graph applet. Specific instructions

for each are given on the website.

Hamilton Graphs

Planar Graphs

Isomorphic Graphs

Ensley & Kaskosz – ICTCM 2008

Page 16

http://www.maa.org/prep/

http://webspace.ship.edu/deensley/prep2008/