1. Using GeoGebra To Create Interactive Web Content
Dave Matthews
Minnesota West Community
and Technical College
Video Tutorials and Examples at:
Geogebra Home:

2. What is GeoGebra?
Free Java-Based Dynamic Mathematics Software

3. Where’s it from?

4. What can it do?
Static Images for Export to PowerPoint, Windows, LodeStar
or to Print

5. Interactive Applets for Classroom Demonstration

6. Dynamic Web Pages For Student Explorations

7. Simple point-and-click constructions
Graphics/Text/Image Integration
Support for Geometric Constructions and Transformations
Complete Graphing Calculator Capabilities
Fairly Extensive and Growing CAS
Full Conic Section Support
One-Click Web Page Authoring
Platform Independent, Java-Based, No Plug-Ins
Customizable Toolbars
Construction Protocol (Frames) Option
Open Source (GPL License, NSF Supported)
Extensive Built-In Help
Active Wiki Community
Free, Fully Functional Application Available On Any Computer with a simple double-click option

8. Enough Advertising, let’s do it already!
Go to
Click “Start GeoGebra”
Click “GeoGebra Webstart”
Tutorial available at:
1. Downloading GeoGebra and getting started

10. Task #1:
Make some blank graph paper, with axes, and export it to Microsoft Word (or similar)

11. Webstart guarantees the latest stable version
Right-clicking on any object brings up the “properties” option
To copy the current contents of the drawing pad to the clipboard, do: “File -> Export -> Export Drawing Pad To Clipboard
Contents can then be pasted into Word, or PowerPoint or wherever

12. Create a picture, using the tool buttons, and the text boxes
Task #2
Create a picture, using the tool buttons, and the text boxes
Try to include:
Angles
Colors
Text
No axes or grid, when you’re done
(See
2. Making a right triangle, for a similar example)

13. My example:

14. Most tools create points as needed, or use existing ones, depending on where you click
Use the axes and the grid as guides to place your objects, then hide them later
As objects are created on the Drawing Pad, they are listed in the Algebra Window (except text objects)
To change the properties of an object, you can either right-click on it on the Drawing Pad or in the Algebra Window
Text boxes are objects, and can be moved around on the drawing pad after being created. To change their properties, you must right-click on them on the Drawing Pad.

15. Make a dynamic right triangle
Task #3
Make a dynamic right triangle
Allow all the vertices to be adjustable
Constrain their motion so that you always have a right triangle
Rename the objects so that the right angle is called “C”
Show the location of the right angle using the angle tool
Hide the objects that were needed for construction, but you don’t want seen on the triangle
(See
3. Making a “dynamic” right triangle, for an example)

16. Placing a point on a line, curve or axis restricts that point’s motion to the line, curve or axis.
Lines can be defined algebraically, using the input field, or geometrically, using the line tool.
Objects can be renamed by right-clicking and naming.
Objects can be hidden, by right-clicking and deselecting the “show object” property

17. Task #4 Making Dynamic Text
Create a dependent object, made up of several free objects
Create a text box that contains both static text and dynamic text – text that changes as the value of some object changes
Link the text box to an object, so that when the object moves, the location of the text moves with it
(See
4. Working with dynamic text, for an example)

18. The default assumption is that text is static
The presence of quotation marks in a text box is the signal that what is inside the quotes is static text, while what is outside refers to some already named variables
Dynamic text reflects the value of the variable, not its name
To begin with dynamic text, start with an empty string, “”
Plus symbols connect static text via “concatenation”
An example is worth a thousand bullet points: If there was a line segment named “c” of length 5, and you typed into the text box: “The length of segment c is ” + c You’d see: The length of segment c is 5 And when you change the length of “c”, the number 5 would change accordingly.
GeoGebra will attempt to operate on variable values within a text box. “” + b*c will attempt to multiply the values of variables b and c
The location of the text box can be hooked to an object by using the “position” property

19. Task #5 Making and Exporting Dynamic Web Pages
Take the dynamic object, with dynamic text that you created in Task #4, and export it to a folder on your computer as a dynamic web page.
Add some text above and below the Java applet on the web page.
Make the applet “double-clickable” to open the full application
Find the two files created in your folder that will need to be uploaded to your web site
(See
5. Making and exporting dynamic web pages, for an example)

20. Be sure that the Drawing Pad is exactly the size you want it to be, before exporting.
Decide whether you want the Algebra Window showing or not, before exporting.
Remember that you don’t want the Java applet too big on the web page (some people have lower resolution monitors!)
File -> Export -> Dynamic Worksheet As Web Page
Be SURE to check the advanced options
Double-Click Opens Application Window
Java Applet archive= etc. Checked insures that the applet will find the GeoGebra .jar file stored at
Remember to upload BOTH the .gbb file, and the .html file

21. Functions, If/Then/Else,
Task #6
Functions, If/Then/Else,
Trace,Sliders
Define a function using f(x)= in the input field
Make a multi-part function using the If command
Change some parameter on the function using a slider object
Use the “trace on” property of a point
(See
6. The input field, functions and if/then/else, for an example)

22. Functions are designated by the (x) = in the name, e. g
Functions are designated by the (x) = in the name, e.g. Foo(x)= would be the function known as “Foo.”
GeoGebra has an extensive library of built in functions. See the documentation under “help” for a complete list.
Axes can be scaled by grabbing and dragging using the “Move Drawing Pad” tool
If[condition,do] is an “If/Then;” If[condition,do,else] is an “If/Then/Else.”
If’s can be nested: If[condition,do,If[condition,do,else]], etc.
Slider variables can be created, then used to define other objects: create slider variable k, then f(x)=k*x will change its slope as you slide the value of k back and forth.
“Trace on” for a point paints a trail of where the point has been

23. Task #7 Importing Images
Make a dynamic web page using some of the knowledge you’ve picked up today, that incorporates an image you’ve imported off of the web or from your computer.
Play around with some features we haven’t covered.
Be prepared to share your knowledge and questions, if not your final result.

24. Thoughts? Comments? Questions?

25. Topics for another day:
Construction Protocols
Lists
Check Boxes (“Booleans”)
Conditions for Visibility
Statistical Functions
Curve Fitting
Computer Algebra System (Integral, Derivative, etc.)
Customizable Toolbars

26. Using GeoGebra To Create Interactive Web Content