Engaging students with cutting-edge science
Let kids play with lasers!
The Lawrence Hall of Science came to ProjectEd to build out a website and interactive educational tools to teach students about cutting-edge microscopy techniques. Their goal was to offer:
…an opportunity for students to connect the science concepts and practices they learn about in school to cutting-edge applications outside of school. The diverse group of scientists featured in the app share their research, as well as aspects of their own stories, providing windows into rich and exciting science and engineering careers.
My role was to translate mockups and several prototypes by ProjectEd's Chief Design Officer Mo Riza so they could be used at the Lawrence Hall of Science on kiosk iPads and on the web. Knowing that the project would require animation, scripting, and to be accessible via the web, I chose Tumult Hype as the authoring tool.
I polished and optimized illustrations and videos, drew vectors for components requiring more intricate animation, and wrote JavaScript to manage animation timelines and set control tab indexes for accessibility. I enjoyed combining interactive design and development to bring the tools to life.
Dealing with browser support differences
I ran into issues using JavaScript to set the playbackRate of multiple videos to convey relative units of time. High values worked nicely in Chrome and Firefox, but not Safari. With the documentation being light on details, I had to find the supported rates for the major browsers by looking into their source code.
| Browser | Maximum | Source Code Link |
|---|---|---|
| Chrome | 16.0 | Chromium source code |
| Firefox | 16.0 | Firefox source code |
| Safari | 2.0 | I could not find where it's defined in the WebKit source code. The minimum and maximum values may be set in the closed-source Safari code. The 2.0 value is based on personal testing and reports from video player authors. |
Because WebKit (Safari) sets a very low maximum speed (perhaps to avoid battery drain), we had to adjust our approach for the Time Scale Tool to show paused videos for larger time units when selecting the smallest several.
Breaking out of a fixed path
For the “Peeking inside batteries” tool, the Lawrence Hall team wanted to allow students to proceed through the nine required scans in any order. I first had to define a timeline for each scan position, which required careful positioning of the scan plate graphic and redrawing the emitter beam to fall at the proper position on it. With each scan, a counter variable is incremented so the Process button is only presented once all scans are complete.
More fun with lasers
The videos here are short excerpts to demonstrate the animations. You can try out all of the tools yourself at the LHS Strobe site. Credit for the Strobe site goes to Junko Bridston for the design and Sean Snyder for development.