[Edu-sig] interactive code example

Jason Cunliffe jason.cunliffe at verizon.net
Tue Dec 30 15:15:22 EST 2003

> http://www.jurjans.lv/flash/shape.html

hmm.. just in case it is not obvious, this is what I wanted to bring to your

- Click on 'tutorials'
- Then roll the mouse over the code sections
- Right hand pane changes to illustrate geometrically what the code is doing
or solving.

- The main "with" phrase pop-up includes a small sublink "it can be
calculated" in red type.
- Rollover over that to see an additional illustration.

I think there is a good idea here, but the implementation is

-The type is far too small, and needs intuitive zoom method to fix that.
- How to print ?
..what a shame :-(

Both of these can be easily addressed in Flash, especially now since the
latest version handles mousewheel events. [Great for scrolling and zooming.]
Printing is just a little more work for the developer, but Flash offers good
control of print. However Without implementing it at all, if you try to
print this page now from your web browser you'll get a disappointing blank
where the swf file is embedded.

I'd like to see 2-way interactivity, where the geometric illustrations are
active so one can select parts of them ala Geometer. Where relevant grabbing
the parts of the drawing could feedback dynamically to highlight the code
and/or description. A technique used in the famous Edu-TV series "The
Mechanical Universe" explaining off Kepler's equations and Newton's Laws of

For me this flash example hints at a healthy bridge between Mathematica
Notebooks, and interactive visual Python type programming. One wants the
ability and encouragement to dive in hands-on and explore code and results
"live", but also to have a teacher/programmers metaview - an durable
explanation which marries the back-of-napkin sketch algorthmic thinking with
the reality of working code.

One difficulty for learning programming is that key sections of code are
very powerful and important - the core algorithms but you can't easily see
or discuss them until the whole program is often constructed. Here then is a
way to provide that overview while exploring sections.

I can imagine a cool tagging system to facilitate authoring meta data
illustrations. Authors could tag sections of their code with some minimal
dictionary pair [id, name]. Then a subsequent authoring/presentation tool
could be used to add more complete metadata, descriptions, illustrations

Leo provides one good structure for this.
Leo helps one break up code to suit context and readability, without
sacrificing formal language requirements. It's 100% XML-based so
meta-anything is implicit. And Leo embraces many kinds of language, code,
text, lists, links etc. Written in Python, it has an open  plug-in
architecture. Existing Python projects can be imported into Leo easily and
then additional non-Python materials added.

Finally one needs a dynamic presentation tool. Flash offers one obvious
platform, but there others.
Not sure where PythonCard fits into this dream.

happy new year all
- Jason

More information about the Edu-sig mailing list