Problem
Learners disengaged from text-heavy health education content. Passive reading produced low retention and near-zero behavior transfer. Complex science topics needed a visual language to become accessible to non-clinical audiences.
Interactive Media & Educational Technology
Interactive Education — HTML5 Knowledge Checks & Animation
Blending pedagogy with pixels: custom HTML5 knowledge check modules and Adobe After Effects animations that make complex health and science concepts engaging, accessible, and measurable.
Screenshot — Knowledge Check UI
Replace with a screenshot of a knowledge check module showing question layout, answer choices, and feedback state
Project Snapshot
The design challenge, approach, and measurable outcomes for this
interactive media collection.
Design Goal
Produce interactive HTML5 knowledge checks that keep learners active in the content, and pair them with short animated explainers that replace walls of text with motion, metaphor, and narrative.
Outcomes
- Measurable increase in post-module quiz completion rates
- Animated explainers averaged 80%+ play-through rate
- Learners self-reported higher confidence after interactive content
- Reusable component library reduced production time for future modules
HTML5 Knowledge Checks
How the custom HTML5 components were designed and why they
outperform standard quiz tools for this audience.
Design Principles
- Immediate feedback: Correct and incorrect responses trigger contextual coaching, not just a red X
- Low stakes: No score reporting to create psychological safety for exploration
- Mobile-first: Touch-friendly tap targets and responsive layouts for phone-based learners
- Plain language: Question stems written at a 7th-grade reading level
Technical Build
- Vanilla HTML, CSS, and JavaScript — no framework dependency
- Accessible: keyboard-navigable, ARIA labels, high-contrast mode compatible
- Embeddable in any CMS, LMS, or static site via iframe or direct include
- State persisted via sessionStorage for multi-page module flows
Benefit: A learner on a low-end Android phone at a rural health fair gets the same experience as a desktop user in a clinic.
Live Knowledge Check Demo
Which of the following best describes a "social determinant of health"?
Animation & Motion Design
How Adobe After Effects animations are used to replace
text-heavy explanations with visual narratives.
Video — Animation Reel
Replace with an embedded MP4 or YouTube/Vimeo link to your 60–90 second explainer animation reel
Explainer Animations
Short 60–90 second motion graphics segments introduce complex concepts — social determinants of health, medication adherence cycles, rural health access barriers — before learners engage with the knowledge checks.
Production Workflow
Script → Storyboard → Asset design in Canva/Illustrator → Animation in After Effects → Compressed MP4 export → Embedded in module with captions and transcript.
Document — Storyboard Sample
Replace with a scan or screenshot of a storyboard panel showing scene layout, narration notes, and motion callouts
Accessibility
Every animation includes closed captions, a downloadable transcript, and a static image fallback for low-bandwidth environments — meeting WCAG 2.1 AA requirements.
ID Connection: Why Interaction Matters
Active Recall Over Passive Reading
Research consistently shows that retrieval practice — being asked to recall information rather than re-read it — produces stronger long-term retention. Every knowledge check in this collection was designed as a retrieval event, not a comprehension check. The goal is to make the learner's brain do the work, not just confirm they read the page.
Cognitive Load Management
Animations reduce extraneous cognitive load by externalizing the mental model. Instead of asking learners to construct a mental image from text, the animation builds it for them — freeing working memory for the deeper processing the knowledge check then demands.