Half surprised that a search for “phet” doesn’t return any result. Maybe Hypers are unfamiliar with PhET but the potential overlap in interests between Hype and PhET is pretty wide. It’s a collection of interactive simulations for physics and other STEM disciplines. The simulations were originally created in Flash but they’ve been converting many of them to HTML5 by hand-coding the whole thing.
Sounds to me like Hype could be of great use to them and I did mention Tumult’s core app in a post on their own forum. Not sure that will get much traction, but it was worth a try.
Something which got me thinking is Hype’s export in iBooks widget. Thanks to that, was able to package a PhET simulation as a widget and add it to an ePUB iBook through iBooks Author (posted about that as well). Sounds simple and it wasn’t that completely successful, but it made me daydream about creating rich eBooks with all sorts of animations. Especially useful in education.
Though I first bought Hype a few years ago, I have yet to really get into it. I’m a bit overwhelmed but Michael’s “A Book about Hype” is helping me a bit. Reason I’d like to delve deeper into Hype is that I work with college teachers and would like to get them to build interesting content, including HTML5 animations (and, potentially, SCORM packages; though that’s a separate topic).
So, if you have advice about building from the PhET simulations, I’m all ears.
Soooo… Did experiment a bit, and it does look like adding those sims as HTML widgets with the original HTML does work, with a few caveats.
Worked with five sims so far and four of them seem to work fairly well on an iPad 3rd generation, a 13" late 2013 Retina MacBook Pro, and an iPhone 6s Plus (although, it’s a bit difficult to see the details in the iPhone version).
Here are the four simulations which work well in the eBook version:
- pH Scale
- Wave on a String
- Area Builder
- Forces and Motion: Basics
The last two are recent additions to the PhET catalogue and, for some reason, they don’t finish loading in Hype. Because of this, each widget had its loading screen as a Default.png. Ended up adding screenshots to make the widgets appear in a more informative way.
A fifth sim, Build an Atom, doesn’t seem to produce a working widget. No idea why. It’s not even as big as number 1 and 4, in terms of filesize. Maybe it relies on something which isn’t available in this context.
Put the resulting iBooks Author file and ePub on Dropbox.
Something which is kind of funny is that the four original HTML files total 4.6MB while the iBooks Author containing the Hypified widget version is 2.3MB and the ePub version of the same is 1.2MB. There’s surely room for actual optimization but it doesn’t look like too much overhead is added by either Hype or iBooks Author, at least in terms of filesize. There might a slight difference in load time (didn’t perceive one) but the sims are as functional on the Web as in the ePub, once each is loaded.
The overall process is dead simple.
- Create a new Hype document (set to 800px by 600px).
- Add a new HTML Widget element covering the whole scene.
- Export as a widget (and maybe replace the loading images with screenshots).
- Add widget to an iBooks Author document through drag-and-drop, setting the animation to play in fullscreen.
Was mostly having issues with sizes. Tried different things but it worked best when I did things this way, which is actually more straightforward than playing with flexible layouts or some such.
Getting the white flash issue, as described in Apple’s support topic on HTML widgets in iBooks Author. It might be relatively easy to solve in the sim’s code.
It’s quite possible that those sims could be added directly to an ePub file, by pasting the code in a plain text editor. Might play with that as well. But playing with code can get scary for some people.
All in all, widgetizing these sims through Hype is a pretty effective demonstration of something which teachers can do to make interactive books using existing material. Getting them to create their own sims or animations using Hype or other methods might be more challenging, but it’s bound to be easier once they start imagining what can be done.
If you have advice on doing other things with these sims or if you know of similar sources of pedagogical simulations in appropriate format, feel free to point me in the right direction.