ForumOne · 2019

Howard Hughes' BioInteractive

Netflixing science, for kids, on Drupal 8 interactives built to work without a mouse.

Timeline

5 months

Role

Front-End Developer

Stack

Drupal 8 · JavaScript

HHMI's BioInteractive brings free science education resources to classrooms. Working with ForumOne, I helped build custom Drupal 8 components and JavaScript-driven interactives designed to make complex science genuinely engaging for students.

Overview

BioInteractive's whole premise is that science content shouldn't feel like a textbook, it should feel like something you'd actually want to click into. That meant the front end had to carry a lot of the personality: real interactivity, not just video embeds and PDFs.

Working with ForumOne, I built the Drupal 8 templating and the JavaScript layer behind the interactive modules (quizzes, simulations, guided walkthroughs) used across hundreds of lesson pages for classrooms.

What I built

  • Built custom Drupal 8 components for interactive science modules
  • Developed the front-end JS behind classroom interactives: quizzes, simulations, and guided walkthroughs
  • Coded the responsive HTML/CSS layout for the resource library and lesson pages
  • Implemented keyboard and screen-reader accessibility across the interactive modules

Interactives that work without a mouse

A simulation you can only operate by dragging is a simulation half a classroom can't use. Every interactive module (quizzes, guided walkthroughs, the drag-based simulations) got a full keyboard path and live-region announcements, so progress and feedback are spoken aloud rather than only shown. In a product built for schools, that isn't a nice-to-have; it's whether the resource is usable at all.

One module pattern, hundreds of lessons

Rather than hand-building each interactive, I built a small set of Drupal 8 components with a shared JavaScript initialization layer. Educators configure a module's content in Drupal and the front end wires up state, validation, and feedback automatically, which is how the same handful of patterns covers hundreds of lesson pages.

Progressive enhancement, on purpose

School networks are slow and sometimes hostile to JavaScript. The lesson pages render their content server-side first and layer interactivity on top, so if a script fails or is blocked, students still get the material, just without the quiz. Degrading to 'readable' beats degrading to 'blank'.

quiz-module.js
// quiz-module.js: cell division quiz
document.querySelectorAll(".quiz__option").forEach((option) => {
  option.addEventListener("click", () => {
    const correct = option.dataset.correct === "true";
    option.classList.toggle("quiz__option--correct", correct);
    announceResult(correct);
  });
});