Derek Dorsett
← Back to work

Front-end · Interactive demos

Interactions I designed & hand-coded

No authoring-tool templates here. Each of these is a self-contained, accessible single-file HTML/CSS/JS web object (Articulate Rise compatible) that I designed and built — keyboard-navigable, screen-reader-announced, and WCAG 2.1 AA. Open any one and try it.

Forklift Stability Triangle simulator — a top-down forklift on a navy stage with the stability triangle and a live STABLE status readout.

Simulation · physics

Forklift Stability Triangle

An interactive SVG simulator — drag load height, mast tilt, and turn, and watch the center of gravity leave the triangle and tip the truck. Discovery challenges gate the takeaways.

Launch the demo →
Name That Part interaction — a forklift with numbered teal hotspot markers and a slide-up detail card.

Hotspot · component ID

Name That Part

A tap-to-explore equipment diagram: numbered hotspots reveal close-up detail cards, with a progress tracker that confirms every part has been reviewed.

Launch the demo →
Counterfeit-parts image quiz — two product boxes side by side with a green CORRECT feedback banner.

Image quiz

How to Identify Counterfeit Parts

A two-up image-comparison quiz with instant, explained feedback — spot the counterfeit across ten real-world tells.

Launch the demo →
Pre-use inspection marking form — equipment items each marked Acceptable, Unacceptable, or N/A, with teal selection states.

Decision · marking activity

Pre-Use Inspection Sort

A judgment activity: mark each component Acceptable, Unacceptable, or Not Applicable, then a graded review distinguishes judgment errors from discipline errors.

Launch the demo →

Built as reusable Rise web objects on a versioned design system, then reskinned here to my own brand. The same engines drive drag-and-drop sorts, branching scenarios, and hazard-spotting activities — full source and additional interactions available on request.