1 / 66

Exploring Geometry with GeometryEditor: A Dynamic Web-Based Learning Tool

GeometryEditor, formerly known as GeoSVG, is a web-based dynamic geometry system designed for exploring mathematical concepts. It allows users to create and manipulate geometric figures without any software installation. Built entirely on HTML, SVG, and JavaScript, GeometryEditor supports various geometrical objects, operations, and user interactions. Ideal for developers, it provides a framework to build sophisticated web applications that require geometric drawing capabilities. Compatible with major browsers, it serves as a powerful tool for both education and application development.

anahid
Télécharger la présentation

Exploring Geometry with GeometryEditor: A Dynamic Web-Based Learning Tool

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GeometryEditor Crash Course July 11, 2007 Xun Lai Department of Computer Science Kent State University

  2. GeometryEditor • Previously called GeoSVG • A Dynamic Geometry System to explore mathematical concepts • A Web-based system • No software installation required • (for developers) A package for building more sophisticated Web applications that need mathematical drawing support • GeoSite, BBS, DMAD and so on…

  3. Working Environment • Purely based on HTML, SVG, and javascript • Full Features (menu, toolbar, the graphical area, and interaction between SVG and HTML) work • on Firefox on all platforms • on Windows IE with ASV • on Opera (partially tested) • Only graphical area works • on Mac Safari with ASV • on Netscape on all platforms with ASV

  4. What a manipulative looks like • Menu & Toolbar • An author needs to customize what menu items and toolbar buttons to be available to users • Graphical area (canvas) • An author can add objects to the canvas

  5. What a manipulative looks like

  6. Objects you can author • Implemented • Point • Line/ray/segment • Circle • Polygon • Scratch • Coordinate System • Function graph • Locus • Plain text • User input • Button • Measurement • To be implemented • Vector, regular polygon, arc and conics • Slide bar

  7. Objects you can author

  8. Menu Introduction:Draw Menu • Once a drawing tool in the Draw menu is selected, you can create objects by clicking and moving the mouse • Select or move object(s) • Pencil • Free Point • Line/Ray/Segment • Compass Circle • Macro

  9. Draw Menu

  10. Draw Menu:Macro Support • Grouping several steps as one new tool • Objects involved with a macro are divided into • Givens • Selected by a user from an object on the canvas • Automatically generated • Associated with an object on the canvas (to be finished) • Results • Descendents of the givens • A macro can come from a data string or a URL • A macro can be saved with a manipulative • Examples

  11. Menu Introduction:Create Menu • With some objects selected, you can define a construction, in which one or more new objects will be created. • MidPoint of a segment • Circle by a center and a segment • Parallel/Perpendicular line • Polygon • Point on a line/circle/canvas • Perpendicular Point (the foot of the altitude, or perpendicular foot) • Parallelogram Point

  12. Create Menu

  13. Things you need to know:Two types of operations • Select an operation from the menu or toolbar, and then begin to draw on the canvas • Select one or more objects, and then go to the menu or toolbar to apply an operation to it (them) • Sometimes, the operation may invoke a dialog

  14. Things you need to know:Menu and Toolbar Enabling and Disabling • Menu items and toolbar buttons are enabled or disabled automatically based on the objects selected and the current system status

  15. Things you need to know:The property dialog • To inspect the relations among objects via the parents/children relation • To see how an object was named and labeled by the system, or to label it yourself • To customize properties of an object • To check if your construction is correct • To study how a manipulative was created

  16. Property Dialog – to inspect relations among objects

  17. Property Dialog – to customize properties of an object

  18. Things you need to know:Naming and labeling of objects • Naming • The name of an object is used whenever a description of the object is needed • In the property dialog shown in the previous slide • In an mathematical expression • An object is usually named in this way: object type plus object label • If an object has not been labeled, an object will be named like “Circle #3”, “Polygon #2”. The index numbers are assigned to objects of the same type in their creation order

  19. Things you need to know:Naming and labeling of objects (cont.) • Labeling • You can label the object yourself. • If an object has not been labeled, when the object is measured, a label will be automatically assigned. • For example, labels of circles will be assigned as c1, c2, and so on

  20. Menu Introduction:Measure Menu • Measurements • Line length, and slope • Circle radius, diameter, circumference, and area • Polygon perimeter, and area • Distance between a point and a point/line/circle • Angle • Coordinates, abscissa, and ordinate

  21. Measure Menu

  22. Menu Introduction:Transform Menu • Possible transformations • Translation • x-y direction translation • Polar (angle/distance) translation • Vector translation • Rotation around a center • Reflection about a mirror • Dilation about a center • Most of the transformation operations will invoke a dialog, which will invoke the calculator

  23. Transform Menu

  24. Dialogs invoked by dilation

  25. Result after the dilation

  26. Property of the dilated triangle

  27. Things you need to know:The dynamic calculator • The dynamic calculator can be used to • define a function • define a calculation • set numeric properties of objects • Depth of an iteration • Coordinates of a point • Unit length of an axis • Properties in a transformation • Dilation factor of a synchronized copy

  28. Calculator for defining a function

  29. Calculator for setting the depth of an iteration

  30. Things you need to know:The dynamic calculator (cont.) • The calculator can form very meaningful expression by referring to the names or labels of objects • An expression is unit sensitive • 9cm+3inches will give you 10.18inches • Distance units: cm/inches/pixels • Angle units: radians/degrees • By clicking an object on the canvas, an author can insert the object into the expression

  31. Things you need to know:The dynamic calculator (cont.) • An expression is entered in infix format, and it will be parsed and evaluated immediately. Invalid expression won’t be allowed. • The expression for a numeric property of an object can be changed even after the object is created.

  32. Things you need to know:The dynamic calculator (cont.) • The calculator provides lots of built-in functions • sin, cos, tan, abs, sqrt, log, ln, arcsin, arccos,and arctan • max, min, avg, and sum of a sequence of numbers • sgn, fac, round, and trunc • pick that is similar to the “? :” operator • The calculator can handle boolean expressions

  33. Things you need to know:Interaction between the canvas and a dialog • Some dialogs expect the user to click an object on the canvas as an input • Calculator as you have seen already • Synchronized copy dialog • Iteration dialog

  34. Menu Introduction:Graph Menu • Coordinate system • Point plotting • Function definition and plotting

  35. Graph Menu

  36. Graph Menu:Coordinate System • Usually, you just click OK in the dialog to create a new coordinate system • You can also • Configure the unit length of an axis controlled by another axis in another coordinate system • Specify value per unit • Specify the range of an axis

  37. A coordinate system

  38. The coordinate system dialog

  39. Menu Introduction:Edit Menu • Undo/Redo/Delete • Unlimited undo and redo for • Object(s) creation • Object(s) deletion • Object(s) movement • And some other operations • Properties • Properties of an object • Redefine *** • Preferences • Global properties of a manipulative • Menu Customization/Toolbar Customization

  40. Menu Introduction:Edit Menu (cont.) • Line style dialog • for setting the style of a geometric object • Color palette • for setting the color of a geometric object • Show/hide object(s) • Set object(s) manipulable or NOT manipulable

  41. Edit Menu

  42. Line Style Dialog and Color Palette

  43. The preferences dialog

  44. Menu Introduction:Objects Menu • Action button control • Show/Hide • Movement • Presentation • Circulation Events • Animation • User input control • Text block • Rulers, protractor, and grids

  45. Objects Menu

  46. Menu Introduction:Advanced Menu • Advanced constructions • Calculation • Synchronized Copy • Locus • Iteration • They are advanced either because • the mathematics or the logic behind is sophisticated, or • the dialog assisting authoring is quite complex

  47. Advanced Menu

  48. Advanced Menu:Calculation • Calculation • The calculator will be invoked to define an expression in terms of other calculations, measurements, and user input controls

  49. Advanced Menu:Synchronized Copy • Synchronized copy dialog • The mathematical relations among copied objects are always the same as the source objects

  50. One triangle is a synchronized copy of another triangle

More Related