Animating GeoGebra

After having my students work on the projectile motion applets, I realized that I'd like to have them create an applet modeling linear motion during the first semester.  This will not only help nail down the ideas of linear relationships, but it will also help with the programming aspect of the more complex projectile applet they'll do in the second semester. To test it out, I created this applet this morning. 

I can copy and paste with the best of them.  That's a good thing because I know very little about HTML and almost nothing about javascript.  So, it's time to pay it forward.  Big thanks go out to Linda Fahlberg-Stojanovska for setting me up with the code.  So, if you'd like to animate a GeoGebra applet, do this:

Choose your variables

In the race car applet, I needed variables for time (t0), velocity(v1 and v2), head start (s1 and s2) and race distance (f).  (Start with "t0" for time.  We'll change it later.)

If you would like to use the "manual animation" feature on your applet, set the condition to show object to "manual."

Define Your Motion Point


I've attached the green car to Point A.  (Notice that my time variable is 't' and not 't0.')  More on that later.  You can change the size of the image by determining the location of the corners.  Be sure you define your image using the motion point (Point A in this case). 

When to End Animation
At this point, t0 should have a minimum of 0, but the maximum is whatever you arbitrarily decided upon when you started the applet.  Now we have to decide when to end the animation.  I decided to let the animation end when the Green Car (Point A) reaches the finish line (variable 'f').  All we do here is use the distance formula to determine when the race ends.  So basically, we want to know when...

(v1)(t0) + s1 = f

...which simplifies quite nicely to

t0 = (f-s1)/v1

So regardless of how we change our variables, this is when the race will end. 

Redefine t0
Change the maximum for 't0' to 1 and make the increment '0.01.'

Define 't'

Once you have defined t based on when the problem ends, go back through and redefine all points that used 't0' in terms of 't.' (See above)

Now that everything is in place, hide all of the sliders by right clicking and selecting "show object" so they don't show up in the applet. 

Export

Save the ggb and jar files

Exporting to .html will result in about 6 different files. Make sure to save them in the same folder. The two files you're most interested in are the .html and .ggb files. 

Go to the folder and right click on the .html file and open with Word Pad.

Select all of the code, delete it and replace it with this animation code.  From here, all you need to do is change the red text according to your title, slider names, variable descriptions and initial values. 

Make sure to save and then double click on the html file and you should get something that looks like this:

If there is anything I need to clear up, don't hesitate to ask.