Activity Details Page
Consolidated five distinct activity types — assessment, flashcard, lesson, interactive video, and reading passage — into a single page component. Led adoption of the design system, streamlined monetization logic, and improved metrics by an average of 5pp across all CTAs.
THE PROBLEM
The platform supported five different content types — assessments, flashcards, lessons, interactive videos, and reading passages — but each had a fragmented preview experience. Passage and interactive video were second-class citizens with incomplete rendering, and adding a new content type meant duplicating page scaffolding across multiple files.
Monetization logic (CTAs, content gating, sign-up prompts) was inconsistent across types, leading to missed conversion opportunities. The design system had been adopted piecemeal with no stability testing on a high-traffic public page.
+5pp
Average improvement across all CTAs
5 Types
Assessment, Flashcard, Lesson, Video, Passage
3 Versions
V1 (mobile-first) → V2 (sidebar) → V3 (tabs)
LIVE EXAMPLES
One page component, five content types. Each link below opens the same Activity Details Page rendering a different content shape.
Assessment
Multiple choice quiz with 13 questions about solar and lunar eclipses
Presentation
Earth, Sun, Moon Cycles lesson with 27 slides and embedded questions
Interactive Video
Video with timestamp markers that link to comprehension questions
Flashcard
26 flashcards covering Moon Cycles vocabulary with definitions and images
Reading Passage
English reading passage with comprehension questions about pronouns
CONTENT TYPE MATRIX
A single page component handles five completely different content shapes. The rendering path is determined by the quiz type and the presence of comprehension questions.
| Content Type | Main Content | Side Content | Special Features |
|---|---|---|---|
| Assessment | Questions list | Student preview | Content gate after 10 Qs |
| Flashcard | Questions list | Student preview | Term + definition cards |
| Lesson | Slideshow (desktop) / Questions (mobile) | — | No quality card, no preview |
| Interactive Video | Questions list | Video player + transcript | Timestamp markers link to questions |
| Reading Passage | Questions list | Passage viewer (resizable) | Narration link, split view |
How Content Type is Detected
quiz.type === FLASHCARD
Flashcard rendering
quiz.type === LESSON
Lesson slideshow
COMPREHENSION_VIDEO in questions
Interactive video split
COMPREHENSION in questions
Reading passage split
Default (no match)
Standard assessment
COMPONENT ARCHITECTURE
A leaf package with no stores and no services. All data flows through props and provide/inject — making it consumable by any host application.
Top-Down Data Flow
Host Application
Fetches quiz data, recommendations, determines page version
Activity Details Page (V1 / V2 / V3)
Provide / Inject to Children
Activity Info
Content Preview
Questions Section
Recommendations
THREE PAGE VERSIONS
Same data contract, different layouts. Each version gets progressively simpler while adding features — enabling A/B testing and gradual rollout via feature flags.
V1
Single Column
V2
3 + 9 Grid
V3
4 + 8 Grid
Progressive Simplification
V1
636 lines
V2
410 lines
V3
237 lines
DATA FLOW
The useActivityDetails composable filters comprehension questions from the quiz data to drive the entire layout decision — split view or single list.
Raw Quiz (prop)
Full quiz object with all questions including comprehension parents
useActivityDetails(quiz)
Filters out COMPREHENSION and COMPREHENSION_VIDEO questions from the array
Output determines layout
filteredQuiz
Questions minus comprehension
passageQuestion
The COMPREHENSION question (if any)
containsPassage
Boolean → show passage split
containsVideo
Boolean → show video split
Layout Decision
Single Column
Standard assessment / flashcard
Split View
Passage or video + questions
CONTENT GATING
A growth/conversion mechanism: anonymous users see a preview, authenticated users see everything. This directly contributed to the +5pp CTA improvement.
Quiz has < 10 questions
Show all questions immediately — no gate
Quiz has 10+ questions
Questions 1–6: Fully visible
Content Blocker overlay appears
"Sign up to see all questions" CTA
Questions 7–10: Rendered but hidden
Pre-rendered for SEO, hidden from view
User signs up or has cookie
showHiddenQuestions = true → all questions visible, blocker removed
ACTION SYSTEM
Left Actions (Utility)
Right Actions (Primary CTAs)
Dropdown Actions
KEY DECISIONS
Leaf Package with No Stores
The Activity Details Page has zero coupling to data fetching — it receives a Quiz object as a prop and renders it. No Pinia stores, no API services. This makes it consumable by any host application (SSR or SPA) and trivially testable with mock data.
Comprehension Filtering as Layout Driver
Rather than using explicit type checks everywhere, the useActivityDetails composable detects passage/video comprehension questions and separates them. This single filter drives the entire layout decision: split view (passage + questions or video + questions) vs. single column. Adding a new comprehension type requires zero layout changes.
Three Versioned Components, One Data Contract
V1, V2, and V3 all accept the same props interface. The host application picks which version to render via feature flag. This enabled safe A/B testing (V1 vs V2), gradual rollout (V2 → V3), and instant rollback — all without changing the data layer.
Content Gating for Growth
The 10-question gate with a sign-up wall after question 6 was a deliberate conversion mechanism. Questions 7-10 are pre-rendered (for SEO) but hidden. On sign-up, a cookie is set that immediately reveals all content. This single pattern directly contributed to the +5pp improvement across all CTAs.
Design System Adoption as Proving Ground
Led adoption of the company's design system on this high-traffic public page — the first major consumer. This tested the system's stability under real conditions, uncovered edge cases (responsive grid, conditional slots, theming), and gave confidence for broader rollout across the platform.
Built with Vue 3, Composition API, TypeScript, and the Design System