Wednesday, May 3, 2017

Answer: Can you build an interactive widget for the island viewing problem?

Okay... it's NOT May 1!

Sorry about not posting on Monday, but it's been a hectic week. Besides, I've enjoyed reading everyone's comments on the Challenge.   Not only is work busy (and I have a strange cold), but this Challenge is proving to be waaay to much fun.  

The SearchResearch Challenge this past week was to figure out how to make an interactive widget that can interactively show the relationship between height and visible distance in the "island viewing" problem.  That is:  

1.  Can you make an interactive widget that illustrates "how far out to sea can you see" without going into full-developer mode and writing a bunch of HTML, CSS, and Javascript?  

Interestingly, and oddly, before the world-wide web, modern browsers, and Google, this USED to be fairly straightforward.  

There were a number of simple animation tools that would let you (the teacher) create an interactive animation to demonstrate basic physics principles.  In particular, Hypercard (the simple scripting system) was perfect for people who wanted to build such a thing.  (Here's a nice article with the history of Hypercard and Hypertalk, the programming language.)  

But that was back in the 1980s and 1990s.  Yes, it was a LONG time ago.  

Now let me tell you what I found:  Not a lot.  I was looking for a Hypercard-level (i.e., simple) animation tool that would let me do a simple graph + interactive slider + animation.  It's not that hard... But after trying about 15 different charting and animation packages, I didn't find much of anything, despite lots of time wasting explorations. 

I DID find several very nice interactive charting packages: I know how to make interactive bar charts and the like, but not a slightly different chart like the one we wanted to make.  

Luckily... SearchResearchers rose to the Challenge and found some wonderful packages that come really close to our goal.  

Ramón was the first to find systems that are really close to the original statement of the problem.  

Waltis Blog has a great article about Finding the Curvature of the Earth.  This page has all the right concepts, but not quite the interaction we're looking for. 

On the other hand, Cactus2000 has a nice "Distance of the horizon" calculator, which is really close. You can type in the numbers and it calculates the distance.

   And another one at, which ALSO includes atmospheric refraction (which is more than I was looking for, but nice to see--notice how it gives a slightly different answer when you account for refraction).  

Fred found a collection of tools for making interactive widgets, but I wasn't able to get any of them to do exactly what I was looking for.  This collection is called "Exploreable Explanations," a term I really like, but didn't quite get me the diagram I was seeking.

Leia was the first to find GeoGebra and the tools you can create there, including this "Height Obscured by the Horizon" example.  (See below.)  Note that the camera elevation is baked into this interactive animation.  (Bravo to everyone else who found GeoGebra as well.  Nicely done.)  

But this other GeoGebra animation has even more stuff built-in.  This is just about right:  You can grab the camera (the blue diamond) or the target (the blue X) and move it up and down to figure out exactly what you need.  This is beautifully done.  

 GeoGebra interactive animation by Rocketman, Mick West (you can click on their links to see their portfolios)

So for this category of interactive widgets, this looks like the right solution.  

GeoGebra bills themselves as the "The Graphing Calculator for Functions, Geometry, Algebra, Calculus, Statistics and 3D math."  

They certainly seem to have solved this problem nicely.  

Dolphin explained that they found the GeoGebra site by realizing that this was a math/trig problem, and then searching for graphing calculators.  After trying a few, GeoGebra was clearly the best in the class.  

Another solution was also found by Ramón: the Horizon Finder,  which gives a circle of the visible horizon from a spot on the map.  Here I dropped the pin on the beach on the western edge of San Francisco, and found with a camera height of 0.5 meters, the visible horizon is about what you'd expect.  The Farallons are well outside of the visible circle.  

But if you drop the pin on the top of Twin Peaks (that is, near the Radio Tower, at 282 meters), you'll see that from that altitude, the Farallons are easily visible.  

Bottom line:  Although it took some time, by using a search method of looking for the tools we were able to solve this SearchResearch Challenge.  
The one part that's missing, though, is the ability to export the interactive widget to your own web pages.  I wish they had a nice "export widget" function, as that would make all of our lives as teachers / students / developers much simpler.  

Thanks for hanging in there over the past couple of weeks.  
I'll post a new (and easier!) Challenge tomorrow. 

Search on! 


  1. "The one part that's missing, though, is the ability to export the interactive widget to your own web pages. I wish they had a nice "export widget" function, as that would make all of our lives as teachers / students / developers much simpler."
    this might answer that…
    Embedding in Webpages
    share example

    Embedding PowerPoint, Word, PDF or Prezi into a Dynamic Worksheet
    GeoGebra Worksheet Editor
    GeoGebra Docu Team - evolving