All projects · UI Components & Interactions
CASCO Insurance Progressive Disclosure Form & Actuarial Calculator
An interactive automotive CASCO insurance calculator engineered with a strict progressive disclosure design pattern.
An interactive automotive CASCO insurance calculator engineered with a strict progressive disclosure design pattern. Features sequential question gating (Vehicle Type -> Brand & Model -> Valuation & Risk Factors -> Live Quotation), dynamic actuarial pricing algorithms, light/dark mode parity, live state machine telemetry, and an 8-point automated diagnostic test suite.
- Faithful 1:1 visual recreation of the challenge screenshot CASCO price calculator with authentic car, taxi, and electric vehicle line-art icons
- Strict progressive disclosure architecture where downstream stages reveal only after prerequisite questions are satisfactorily answered
- Real-time actuarial calculation engine computing annual and monthly premiums based on vehicle coefficients, driver age, and experience surcharges
- Interactive deductible elasticity selector (€250, €500, €1,000, 0%) updating risk quotes dynamically without full form recalculation
- Comprehensive state machine telemetry HUD with real-time stage gates, active form state JSON inspector, and cognitive ergonomics metrics
- Instant one-click presets for BMW M2 (Challenge Reference), Tesla Model Y (Electric), and Mercedes E-Class (Taxi Fleet)
- Zero external framework dependencies: lightweight, accessible, mobile-responsive vanilla HTML/CSS/JavaScript
- Built-in 8-point automated in-browser diagnostic test suite validating isolation, disclosure transitions, validation, and reset cycles
Built with: Progressive Disclosure, Form UX, State Machine, Actuarial Engine, Vanilla JavaScript, Micro-Animations, WCAG Accessibility, CSS Grid