Six mobile-optimized designs using the same style as the exam-taking page
Each variant uses consistent design tokens: colors (#22C55E green, #F59E0B orange, #EF4444 red), 640px max-width, white cards with shadows, 12px border radius, and 48px touch targets.
All variants are fully interactive with sample data. Open any variant to see how it looks and works!
Instagram-style swipeable question cards with navigation dots
Vertical timeline with expandable question details
Dense list view with full-screen slide-in panel for details
Analytics dashboard with visual metrics and grid layout
Tabbed interface separating question types
Instagram/Snapchat-style immersive full-screen cards
Variant 1, 6: Use arrows, swipe, or tap left/right to navigate
Variant 2: Click cards to expand/collapse, or use "Expand All" button
Variant 3: Click any question row to see details in slide-in panel
Variant 4: Click question tiles to open detail modal
Variant 5: Switch between tabs to see filtered views
Variant 6: ESC key to exit, Space/Arrow keys to navigate