The Science Behind the Aurora
I built “Aurora Borealis: A Beautiful Mystery in the Sky” as an experiment in making a complete learning module that presents complex concepts in a visually compelling, engaging way. I chose the aurora as a topic because most people know what it is but there is a lot of science behind why and how it happens, and it lends itself to stunning images and visual explanations.
I developed the module with Claude Code, and it took a total of about 15 hours to get to this level of completion. Claude suggested a 5-part overall structure, and after some refinement of the outline, we worked on each part one by one. Most of the time Claude would describe a high-level idea for the part, we would discuss briefly, and then Claude would make a fully- or mostly-functional prototype. That’s where the real work would begin, with cycles of feedback, discussion and refinement for each part. I sourced images and background music, and Claude plugged them into the module. User testing, debugging, and an accessibility audit were the final steps.
Two spots in the process were trickier than expected:
- Getting the illustration of the earth’s magnetic field to look right took about a dozen attempts, and success happened only after increasingly precise descriptions by me and an example diagram in SVG format. This was a good reminder that while Claude can often make excellent design decisions based on a high-level description, when I know exactly what I want, I need to communicate clearly and provide model examples to Claude when possible.
- After the module had been mostly completed, I discovered a bug caused by a particular touch-gesture on mobile. (See “notes and caveats” below.) Claude is usually good at finding and fixing bugs on its own, but in this case because it could not reproduce the problem in its preview environment, it was hard to pin down the cause of the bug and come up with a fix.
Here is the completed module. (Full screen version is here.)
Notes and Caveats
- The app is a single-file HTML/CSS/Javascript build, along with a folder of media assets. As such, it is easily portable, and easy to convert to a SCORM package.
- There is a known bug that can occur on mobile devices: a big pinch-zoom (spreading two fingers to zoom in on part of the browser window) can cause the app to reset or crash the browser tab. Claude and I worked on fixing this bug, and we got it to the point where a small zoom is unlikely to cause problems, but we did not arrive at a complete fix. Since this is a demonstration project and most users are unlikely to encounter the problem in ordinary use, we decided against investing further effort on this issue at this time, but if this were to be deployed in a situation where we expect mobile use to be common, it would be worth pursuing this further.
- Currently there is no mechanism for saving progress between sessions; if you reload the page or close and then reopen the tab, the module starts over at the beginning.
- The module currently is not set up to report scores or completion to an LMS, though this would be easy to add.
- The module is designed to meet basic accessibility guidelines (alt-text descriptions for all meaningful images, keyboard alternatives for all interactions), but accessibility has not been fully tested and verified, and there are areas for improvement (text labels that are too small in some places, etc.).
- The science is accurate as far as I can tell, but I am not an astrophysicist. A careful review by a subject matter expert would be helpful.