Handouts for ICTCM workshop on GeoGebra, March 2007 By Mike May, S.J. mikemaysj@gmail.com

Using GeoGebra to create applets for visualization and exploration. Overview: I) We will start with a fast tour of a number of applets that have been created with GeoGebra. These applets are available at http://www.slu.edu/classes/maymk The applets were chosen to demonstrate some of the possibilities in constructing visualizations. II) Having looked at GeoGebra as a tool to prepare visualizations in advance, we then look at GeoGebra as a free form exploration tool, combining graphics, with algebraic description. III) We will then work through constructing a demonstration in GeoGebra, saving it as a dynamic web page, and polishing the demonstration. We will start with an application that demonstrates a standard theorem from geometry. IV) As part of the polishing process, we will look at issues that should be considered in designing a pedagogical tool, making it effective for students. V) The use of javascipt will be introduced. VI) We will discuss resources for future work and projects for consideration.

GeoGebraApplets http://www.slu.edu/classes/maymk/GeoGebra/

1 of 2 3/17/08 1:47 PM

GeoGebra AppletsGeoGebra is a GNUed software package for mathematics visualization. The home for the applicationsis http://www.geogebra.at.

Educational material for GeoGebra is available at http://www.geogebra.at/en/wiki

The following are some Applets pages I have created with the software.

Some of the applet pages look at standard constructions from calculus, making the pictures dynamicsand subject to manipulation by the instructor.

The tangent as the limit of secant lines. The slope of tangents and the derivative of a function. The graph of a function and its first and second derivatives in the same window.The Newton's Method page illustrates the use of tangent lines to find roots of functions. It alsogives examples where the technique fails.The Taylor polynomial approximation of a function.

Some pages look at precalculus material to allow a quick review,

The Linear Equations page connects the normal ways of defining a line, either by giving twopoints, or by giving a point and a slope, or by giving the slope and intercept. Each windowconnects a set of information with a line and derives the other presentations of the line.The Quadratic Equations applet allows you to make connections between the graph of a quadraticfunction, and various ways to write the equation, focusing either on roots or the vertex of theparabola.Conic Sections - The Ellipses and Hyperbolas applet lets you specify a conic section byspecifying the length from the center to a vertex on the major axis and the length to a focus. Youget either an ellipse or a hyperbola, depending on which length is bigger. The Parabolas appletlooks at Parabolas defined by a focus and a directrix. The General Conic Sections applet lets youexplore the graph of a quadratic relation in general format.Graphs of related functions -The family of curves applet lets you graph a function with threeparameters and then vary those parameters with a slider. The Translations and Compressions Applet lets you compare the graph of a function with the graph of a function transformed bytranslations and compressions or expansions.Trigonometric Functions - The Trig Review applet connects the values of the 6 basic trigfunctions with segments on the unit circle. The Sin Curve Fitting applet lets you fit a sinusoidalcurve to a pair of specified points.

Some of the applet pages look at standard results in the construction of triangles.

The side-side-side applet, lets you construct a triangle by specifying the lengths of the three sides. If such a triangle can be constructed, it is unique. The side-angle-side applet, lets you construct a triangle by specifying the lengths of two of thesides and the included angle. If such a triangle can be constructed, it is unique. The angle-side-angle applet, lets you construct a triangle by specifying the lengths of two of thesides and the included angle. If such a triangle can be constructed, it is unique. The side-side-angle applet, lets you construct a triangle by specifying the lengths of two of thesides and an non-included angle. If such a triangle can be constructed, it may not be unique.The angle bisector applet looks at the theorem that the three angle bisectors of a triangle all meet ina single point. The first frame lets the student explore the result with various triangles. A second

GeoGebraApplets http://www.slu.edu/classes/maymk/GeoGebra/

2 of 2 3/17/08 1:47 PM

construction adds details that give a framework for a proof.The side bisector applet looks at the theorem that the three perpendicular bisectors of the sides of atriangle all meet in a single point. The first frame lets the student explore the result with varioustriangles. A second construction adds details that give a framework for a proof.The concurrent medians applet looks at the theorem that the three medians of a triangle all meet ina single point. The first frame lets the student explore the result with various triangles. A secondconstruction gives a framework for establishing a lemma about tiling an area with congruenttriangles. The third construction uses the lemma to adds details that give a framework for a proof.The concurrent altitudes applet looks at the theorem that the three altitudes of a triangle all meet ina single point. The first frame lets the student explore the result with various triangles. A secondconstruction adds details that give a framework for a proof.The Pythagorean theorem applets walks through a visual proof of the Pythagorean theorem.

Some of the pages are of interest to explore some of the features of GeoGebra.

The Regular Polygon and Circle applet looks at constructions with sequences.

The applet on constructing triangles and quadrilaterals has two copies of the applet running on the samepage.

This Blank GeoGebra page applet opens with a blank page, but double clicking on the page launches theapplication on your machine. From there you can make clean constructions and save them yourself.

Return to the Applets for courses below calculus page.

Return to the Calculus Applet page.

Last updated By Mike May, S.J., November 21, 2007.

Items to note: 1) Sliders with dynamic control of values. 2) Javascript line for controlling viewing window 3) Javascript line that gets and returns function definition, using parameters 4) Javascript line for drop down menu of examples 5) Customizations - Restricted toolbar with only 4 tools available; No command line; No algebra window. Notes on use:

Items to note: 1) The Javascript line for controlling viewing window has been repeated as have the customizations. 2) The Javascript line for the function has a second input for guessing the derivative. (This is the dotted line in the default picture. It has been set incorrectly so the students need to produce it.) 3) The value of the point T is in a separate Javascript line since the point and functions will be changed at different times.

Items to note: 1) The Javascript line for controlling viewing window has been repeated as have the customizations. 2) The Javascript line for the function has extra information that one would want in doing taylor polynomials. 3) The text area gives a lot of textual information.

Items to note: 1) The Javascript line for controlling viewing window has been repeated as have the customizations. 2) The center, the lengths of the major and minor axes, and the point on the conic can be changed by dragging. 3) A lot of information about the conic is given as text with an organization of regions as controls, measurements, and summary data. 4) (Below) Changing the focus lenth and major length changes the kind of conic, with different text showing up using conditional definitions.

Items to note: 1) Several GeoGebra windows are used in a single page. 2) Text, objects, and labels are connected by use of color.

Items to note: 1) Check boxes are used to make items appear and disappear.

Items to note: 1) The slider walks students through the steps of a proof. 2) The vertices are dynamic and can be changed by dragging.

An overview of the functionality of GeoGebra

Many of the geometric object can be created using the icon menus. The composite picture above shows the icons in the pictures. Most are clear enough to understand from the icon. The next page shows each menu along with the text descriptions that accompany the icons. GeoGebra also has more algebraic commands available from the input line. (The commands invoked by the icons each have text based versions.) I have organized some of those common courses in the pages that follow.

It is useful to see a screen where some objects have been created.

One should also note that properties of objects can be modified.

GeoGebra Commands of interest for conic sections General x(P), y(P) Parametric curves Curve[expression e1, expression e2, parameter t, number a, number b]: Conics - construction Conic[point A, point B, point C, point D, point E]: Conic section through five

points A, B, C, D, and C. Note: No four of the points lie on one line. Circle[point M, number r]: Circle with midpoint M and radius r Circle[point M, segment s]: Circle with midpoint M and radius equal to Length[s] Circle[point M, point A]: Circle with midpoint M through point A Circle[point A, point B, point C]: Circle through three points A, B and C Ellipse[point F, point G, number a]: Ellipse with focal points F and G and

principal axis length a. Note: Condition: 2a > Distance[F, G] Ellipse[point F, point G, segment s]: Ellipse with focal points F and G where the

length of the principal axis equals the length of segment s (a = Length[s]). Hyperbola[point F, point G, number a]: Hyperbola with focal points F and G and

principal axis length a. Note: Condition: 0 < 2a < Distance[F, G] Hyperbola[point F, point G, segment s]: Hyperbola with focal points F and G

where the length of the principal axis equals the length of segment s (a = Length[s]) Parabola[point F, line g]: Parabola with focal point F and directrix g Conics – Related information Asymptote[hyperbola h]: Both asymptotes of a hyperbola h Tangent[point A, conic c]: (All) tangents through point A to conic section c Tangent[line g, conic c]: (All) tangents to conic section c that are parallel to line g Directrix[parabola p]: Directrix of a parabola p Excentricity[conic c]: Excentricity of a conic section c FirstAxis[conic c]: Principal axis of a conic section c FirstAxisLength[conic c]: Length of a conic section c’s principal axis SecondAxis[conic c]: Second axis of a conic section c SecondAxisLength[conic c]: Length of a conic section c's second axis Vertex[conic c]: (All) vertices of a conic section c Diameter[line g , conic c]: Diameter conjugate to line g relative to conic section c Diameter[vector v, conic c]: Diameter with direction vector v relative to conic section

c

GeoGebra Commands of interest for college algebra/pre-calculus General x(P), y(P) Polynomial investigation f(x) = x^3 - 3 x^2 + 1 R = Root[polynomial f]: All roots of polynomial f (as points) Parametric curves Curve[expression e1, expression e2, parameter t, number a, number b]: Asymptote[hyperbola h]: Both asymptotes of a hyperbola h Centroid[polygon poly]: Centroid of a polygon poly Circle[point M, number r]: Circle with midpoint M and radius r Circle[point M, segment s]: Circle with midpoint M and radius equal to Length[s] Circle[point M, point A]: Circle with midpoint M through point A Circle[point A, point B, point C]: Circle through three points A, B and C Direction[line g]: Direction vector of line g. Note: A line with equation ax + by = c has

the direction vector (b, - a). Directrix[parabola p]: Directrix of a parabola p Ellipse[point F, point G, number a]: Ellipse with focal points F and G and

principal axis length a. Note: Condition: 2a > Distance[F, G] Ellipse[point F, point G, segment s]: Ellipse with focal points F and G where the

length of the principal axis equals the length of segment s (a = Length[s]). Excentricity[conic c]: Excentricity of a conic section c FirstAxis[conic c]: Principal axis of a conic section c FirstAxisLength[conic c]: Length of a conic section c’s principal axis Hyperbola[point F, point G, number a]: Hyperbola with focal points F and G and

principal axis length a. Note: Condition: 0 < 2a < Distance[F, G] Hyperbola[point F, point G, segment s]: Hyperbola with focal points F and G

where the length of the principal axis equals the length of segment s (a = Length[s]) Div[number a, number b]: Integer quotient when number a is divided by number b Line[point A, point B]: Line through two points A and B Line[point A, line g]: Line through point A parallel to line g Line[point A, vector v]: Line through point A with direction vector v Mod[number a, number b]: Remainder when number a is divided by number b Parabola[point F, line g]: Parabola with focal point F and directrix g SecondAxis[conic c]: Second axis of a conic section c SecondAxisLength[conic c]: Length of a conic section c's second axis Vertex[conic c]: (All) vertices of a conic section c

GeoGebra Commands of interest for calculus General x(P), y(P) Polynomial investigation f(x) = x^3 - 3 x^2 + 1 R = Root[polynomial f]: All roots of polynomial f (as points) E = Extremum[f] I = InflectionPoint[f] Derivative[f] Derivative[f, 2] Standard Calculus Derivative[function f]: Derivative of function f(x) Derivative[function f, number n]: nth derivative of function f(x) Root[function f, number a]: One root of function f with initial value a (Newton's

method) Root[function f, number a, number b]: One root of function f on interval [a, b]

(regula falsi) Tangent[number a, function f]: Tangent to function f(x) at x = a Tangent[point A, function f]: Tangent to function f(x) at x = x(A) TaylorPolynomial[function f, number a, number n] Curvature[point A, function f]: Curvature of function f in point A CurvatureVector[point A, function f]: Curvature vector of function f in point A OsculatingCircle[point A, function f]: Osculating circle of function f in point A Integral[function f]: Indefinite integral for function f(x) Integral[function f, number a, number b]: Definite integral of function f(x) from

number a to b. Note: This command also draws the area between the function graph of f and the x-axis.

Integral[function f, function g, number a, number b]: Definite integral of the difference of the functions f(x) - g(x) from number a to number b. Note: This command also draws the area between the function graphs of f and g.

LowerSum[function f, number a, number b, number n]: Lower sum of function f on the interval [a, b] with n rectangles. Note: This command draws the rectangles of the lower sum too.

UpperSum[function f, number a, number b, number n]: Upper sum of function f on the interval [a, b] with n rectangles. Note: This command draws the rectangles of the upper sum too.

Parametric curves Curve[expression e1, expression e2, parameter t, number a, number b]: Derivative[curve c]: Tangent[point A, curve c]: Tangent to curve c in point A Curvature[point A, curve c]: Curvature of curve c in point A CurvatureVector[point A, curve c]: Curvature vector of curve c in point A OsculatingCircle[point A, curve c]: Osculating circle of curve c in point A

The following gives some sample code from Applet web pages. It is intended to give examples so that you can understand enough to copy paste and modify. *****************Applet code Name added to generated code <applet code="geogebra.GeoGebraApplet" name="ggbApplet" codebase="./" archive="geogebra.jar" height="500" width="730"> <param name="filename" value="FamilyOfFunctions_worksheet.ggb"> <param name="framePossible" value="true"> <param name="showResetIcon" value="true"> <param name="enableRightClick" value="false"> <param name="showMenuBar" value="false"> <param name="showToolBar" value="true"> <param name="showToolBarHelp" value="true"> <param name="showAlgebraInput" value="false"> Sorry, the GeoGebra Applet could not be started. Please make sure that Java 1.4.2 (or later) is installed and activated. (<a href="http://java.sun.com/getjava">click here to install Java now</a>)</applet> *******************Comments The block of code above is from the page for the families of functions applet. 1) In the first line, which begins with "applet", the string name="ggbApplet" was added to the code generated by GeoGebra. This names the applet so that I can communicate with the applet using javascript. 2) In the second line codebase="./" indicates where the geogebra.jar file is to be found. In this case, the file is to be found in the same directory as the html file. 3) The value of the filename parameter indicates the Geogebra file to be used. 4) The remaining lines show options that can be set for the web page. These can be set with advanced features when the web page is exported. They can also be changed by changing the values true and false.

From that Family of Functions Applet, we want to focus on two lines of the web page. There is a line to either get the function f from the applet or to send a new definition of f to the applet. There is also a line that sets the viewing window. We will be looking at Javascript for two forms (FunctionForm and ViewForm) and three functions. (setFunction, getFunction, and setView) ************************************** Function sending Info to Applet <script type="text/javascript"> function setFunction(objName) { var applet = document.ggbApplet; var f= document.functionForm.FunctionField.value; applet.evalCommand(f); } Function getting info from applet function getFunction(objName) { var applet = document.ggbApplet; var f= applet.getDefinitionString("f"); document.functionForm.FunctionField.value = f } Function to send view window info function setView(objName) { var applet = document.ggbApplet; var LowX = document.ViewForm.LowXField.value; var HighX = document.ViewForm.HighXField.value; var LowY = document.ViewForm.LowYField.value; var HighY = document.ViewForm.HighYField.value; applet.setCoordSystem(LowX, HighX, LowY, HighY); } </script> Form to show/get function <form name="functionForm" onsubmit="setFunction('T'); return false;"> <input value="get function" onclick="getFunction('T');" type="button">&nbsp; <input name="FunctionField" size="40"value="f(x) = a*x^2+b*x+c" type="text">&nbsp; <input value="set function" onclick="setFunction('T');" type="button"> </form> Form to collect view window info <form name="ViewForm" onsubmit="setView('T'); return false;"> Min X = <input name="LowXField" size="5" onchange="setView('T');" value="-10" type="text"> Max X = <input name="HighXField" size="5" onchange="setView('T');" value="10" type="text"> Min Y = <input name="LowYField" size="5" onchange="setView('T');" value="-10" type="text"> Max Y = <input name="HighYField" size="5" onchange="setView('T');" value="10" type="text"> <input value="Set Window" onclick="setView('T');" type="button"> </form> ***********************Comments 1) In javascript, document refers to the current web page. As noted above, the applet is named ggbApplet and the forms are functionForm and viewForm. 2) The 3 functions provided above can be separated into separate scripts.

From that Family of Functions Applet, we now want to focus on line of the web page that provided a list of examples. Note that each menu choice has us executing several commands. Function to load selected example <script type="text/javascript"> function ExampleLoader(objName) { var applet = document.ggbApplet; var n= document.ExampleForm.ExampleSelect.value; if (n==0) { var f="f(x)=a*x^2+b*x+c"; applet.setCoordSystem(-10, 10, -8, 8); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} else if (n==1) { var f="f(x)=a*(x-b)*(x-c)"; applet.setCoordSystem(-10, 10, -8, 8); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} else if (n==2) { var f="f(x)=a*(x-b)^2+c"; applet.setCoordSystem(-10, 10, -8, 8); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} else if (n==3) { var f="f(x)=a*sin(b*(x-c))"; applet.setCoordSystem(-7, 7, -4, 4); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} else if (n==4) { var f="f(x)=a*sin(x)+b*cos(x)"; applet.setCoordSystem(-7, 7, -4, 4); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} else if (n==5) { var f="f(x)=a*ln(b*x)+c"; applet.setCoordSystem(-1, 10, -8, 8); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} else if (n==6) { var f="f(x)=a*b^x+c"; applet.setCoordSystem(-10, 10, -8, 8); applet.evalCommand(f); document.functionForm.FunctionField.value = f;} } </script> Form with drop down menu of examples <form name="ExampleForm"> <select name="ExampleSelect" size="1"> <option value ="">Example Families</option> <option value =0>General Quadratic: a*x^2+b*x+c</option> <option value =1>Factored Quadratic: a*(x-b)*(x-c)</option> <option value =2>Vertex Parabola: a*(x-b)^2+c</option> <option value =3>Sin Curve with Phases: a*sin(b*(x-c))</option> <option value =4>Linear Combination of sin and cos: a*sin(x)+b*cos(x)</option> <option value =5>Logrithmic Curve: a*ln(b*x)+c</option> <option value =6>Exponential Curve: a*b^x+c</option> </select> <input value="Load Example" onclick="ExampleLoader(this)" type="button"> </form>

This last page of code comes from the Taylor Polynomial Approximation applet page. It is noteworthy since it gathers a lot of information together, both for input and output. ********************************** <script type="text/javascript"> Setting functions and parameters function setFunction(objName) { var applet = document.ggbApplet; var f= document.functionForm.setFunctionField.value; applet.evalCommand("f(x)="+f); var n= document.functionForm.setTaylorDegree.value; applet.evalCommand("n="+n); var x0= document.functionForm.setx0.value; applet.evalCommand("x_0="+x0); var x1= document.functionForm.setx1.value; applet.evalCommand("x_1="+x1); }

gathering lots of output together function setOutput(objName) { var applet = document.ggbApplet; var TaylorPoly= applet.getValueString("TaylorPoly"); var TaylorDegree = applet.getValue("n") var x0 = applet.getValue("x_0") var x1 = applet.getValue("x_1") var T1y = applet.getYcoord("T_1") var P1y = applet.getYcoord("P_1") var E1y = applet.getYcoord("E_1") document.outputForm.TextAreaOutput.value = "We are looking at the Taylor polynomial of degree " + TaylorDegree + "\ncentered at x_0 = " + x0 + "\n" + "At x_1 = " + x1 + " the function has value " + P1y + "\nwhile the polynomial approximation is " + T1y + "\ngiving an error of " + E1y + "\n" + TaylorPoly } </script> Function data form <form name="functionForm" onsubmit="setFunction('T'); return false;"> <input value="set values" onclick="setFunction('T');" type="button">&nbsp; f(x) = <input name="setFunctionField" onchange="setFunction('T');" size="30" value="3*sin(x/2)+5*cos(x)" type="text"><br> Degree of Approximation = <input name="setTaylorDegree" size="5" onchange="setFunction('T');" value="4" type="text"> , x_0 = <input name="setx0" size="10" onchange="setFunction('T');" value="1" type="text"> , x_1 = <input name="setx1" size="10" onchange="setFunction('T');" value="2" type="text"> </form> Test area output form <form name="outputForm" onsubmit="setOutput('T'); return false;"> <input value="Get output" onclick="setOutput('T');" type="button"><br> <textarea name="TextAreaOutput" rows="10" cols="90" value=" " onchange="setOutput('T');"></textarea> </form> *****************************Comments 1) The output to the textarea is made up of a collection of things concatenated together with plus signs. The character ”\n” gives a new line.