Hyping PhET Simulations and Generating iBook Widgets

Enkerli · January 3, 2016, 4:56am

(Updated…)

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.

Maybe Hype is overkill to transform these simulations into widgets but, if not, I was wondering what would be the best way about it. Will probably try a few things anyway, but some insight might be useful. Does it make sense to add the whole simulation as a single element and then export to an iBooks widget? Any chance there might be clashes between the JavaScript those simulations contain and what Hype adds to any project? As some simulations are relatively simple, would it make more sense to build them from scratch in Hype?

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.

Thanks!

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:

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.

Cheers!

Daniel · January 4, 2016, 7:39pm

These are really cool!

This is likely because of the ZIP compression used in the Epub format -- since your images are base64 they compress pretty easily. They load pretty quick on my iPad.

That's odd -- can you share your Hype document for these two? It would be nice to see how you're structuring this.

We do have some protection for this problem, but we listen to when the Hype document is ready and swap out the background image (default.png), which may come sooner if your HTML content takes a bit longer to load.

johnapurdy · January 4, 2016, 7:43pm

@Enkerli / Alex -

Thanks for the detailed info on using Hype with PhET. While not familiar with PhET, one of the areas I've used Hype the most for is e-Learning and training. I started using it in 2011 to convert Flash-based courses to HTML5-based online courses and iBooks widgets for the Dallas County Community College District. It was very successful; we created several hundred modules this way. Since Hype is timeline-based, like Flash, it lends itself well to animated sequences. As you've discovered, also, it's pretty easy to add interactivity either through built-in Actions or via JavaScript.

If you're only using it that way to create widgets, it might be overkill but my belief is if a method saves time and is easy to use, it's never overkill.

The Tumult team would have the best answer about that but I'd say most likely not. Hype's internal use of JavaScript is very custom to Hype so it would likely be rare for conflicts to crop up.

I'd recommend considering building them in Hype if they don't have highly sophisticated math and physics involved. If you design and plan your simulations carefully, you should be able to develop some templates that can be re-used and modified for the simpler material.

I've had a strong interest in and experience with STEM learning for several decades and love to see good online physics, math, etc. courses and simulations like PhET. Creating these with HTML5-based tools like Hype is the right direction to be moving in. It makes deploying on multiple devices and platforms much easier.

I'd enjoy discussing this further with you if you have more questions; you can contact me directly here: jp [at] creativecatmedia.net. ... John

Daniel · January 4, 2016, 7:48pm

I can see how Hype can be a good packager for your pre-made documents: you can place your pre-made HTML within an HTML widget and get going very quickly.

I don't foresee any issues with Hype's JS conflicting with your documents if they are placed within an HTML widget. HTML widgets are insulated from Hype's runtime.

A more common conflict we see (for embedded content within regular elements) are CSS rule conflicts when using pre-built HTML/CSS. This can sometimes have the effect of making buttons too small, or changing text styles in your Hype document. It doesn't look like you will hit this problem.

For the simulations you can recreate in Hype, you could use scenes to split up pre-made or new content. That way, the large HTML snippet used to run your pre-made visualizations will only load when their scene is loaded.

One performance note: the more iframes loaded in iBooks, the slower the page will become, so try to keep each scene to a maximum of one widget (iframe) per scene.

Enkerli · January 7, 2016, 7:44pm

Very good to know.

Neat!

Also useful.

It’s clear from these points (as with Michael’s book) that optimization is a key concern. Hadn’t thought so much about it, to be honest. But then, reading Maciej’s rant in parallel with my Hype experiments gave me a deeper awareness of the issue. Last thing we want is for animations to render sites and books unusable. So, though these suggestions are somewhat specific, they take part in a broader set of best practices.

Thing is, though, these considerations do add a layer to the learning process. It’s essential to raise awareness of potential pitfalls and the importance of efficient code, but my worry is that it can detract learners from at least trying some things. Hype makes it so easy to get started that it hides this complexity. But maybe people will start panicking once they get to those considerations? Let’s hope not.

Then again, the problem might be with my own lack of expertise and experience with coding.

Actually, getting these answers is reassuring. Maybe we can just start experimenting without worrying too much about breaking things (or optimizing our animations).

Enkerli · January 7, 2016, 7:52pm

Doh! Should have thought of that. Knew a .epub was a zipped folder, but forgot about that while looking at the size.