← All work

Using HTML, JavaScript, and CSS

Using code to build highly interactive learning experiences.

  • HTML/CSS/JS
  • Scenario-based assessment
  • Claude Code
Audience
Pathologists
My role
Design, development
Tools
Visual Studio Code, Claude Code
Format
Demo with fictional content

The challenge

Storyline is a powerful authoring tool, but it has limits. When a client asked for a course with an interactive assessment, I saw that the project needed functionality beyond what Storyline offers. Scenarios also give learners a richer experience than standard multiple-choice questions.

This demo uses a fictional patient, biomarkers, and drugs. The client project is confidential.

My role

Instructional design, Storyline development, and custom HTML, CSS, and JavaScript for the assessment.

Process

  1. Task analysis: broke an oncology patient's story into a sequence of decision points.
  2. Storyboard: wrote one question per decision point and embedded pathology slides where learners needed to review them.
  3. Prototype: built a web page that embeds a slide viewer in a scored assessment, then linked it into Storyline.
  4. Review: walked through the prototype with the SME and revised the questions as needed.

The solution

Four patient journeys, each presenting a patient's history and 6 to 8 case-specific questions. The demo below shows one fictional journey with single-answer, matching, and select-all questions, a running score, and feedback after every question.

Interactive demo with fictional content. Open full screen

Have a course that needs to work better for learners?

I'd love to hear about it.