feat: Add SingleQuestion layout for slideshow-style activity presentation#541
Closed
dougmartin wants to merge 1 commit intomasterfrom
Closed
feat: Add SingleQuestion layout for slideshow-style activity presentation#541dougmartin wants to merge 1 commit intomasterfrom
dougmartin wants to merge 1 commit intomasterfrom
Conversation
…tion Implements a new activity layout that presents content one item at a time in a presentation/slideshow format, while keeping all iframes rendered to maintain inter-embeddable communication. Core features: - Full-screen layout (100vh/100vw) with header, content area, and scrubber - All embeddables rendered once on mount, visibility controlled via CSS - Keyboard navigation: arrows, Home/End, Page Up/Down, Escape, ? - Position persistence via sessionStorage - Support for activities and sequences Components added: - SingleQuestionContent: Main container with navigation state management - SingleQuestionHeader: Compact header with logo, breadcrumbs, username - SingleQuestionMain: Slide container with CSS-based visibility toggling - SingleQuestionScrubber: Dot-based navigation with page/activity markers - SingleQuestionKeyboardHelp: Modal showing available keyboard shortcuts - SingleQuestionErrorBoundary: Graceful error handling per slide - Slide types: intro, page-header, section-header, completion, embeddable Navigation scrubber: - Individual dots for each slide (4px default, 6px current) - Color-coded dots: gray (questions), orange (pages), purple (activities), green (intro/completion) - Vertical separator lines before page and activity boundaries - Prev/Next, Home/End buttons with WCAG-compliant touch targets Visual polish: - Confetti celebration animation on completion slide - Slides centered horizontally and vertically - Hidden scrollbars with maintained scroll functionality - Smooth fade transitions between slides Accessibility (WCAG 2.1 AA): - Full keyboard navigation support - ARIA labels and live regions for screen readers - Respects prefers-reduced-motion for all animations - Minimum 44x44px touch targets - Inert attribute on hidden slides to prevent focus trapping Utilities: - flattenActivityToSlides(): Converts activity structure to flat slide array - Question numbering across pages - Source page tracking for navigation context Includes unit tests for slide flattening logic and sample activity JSON.
Member
Author
|
Closed - I just added this to document the branch. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements a new activity layout that presents content one item at a time in a presentation/slideshow format, while keeping all iframes rendered to maintain inter-embeddable communication.
Core features:
Components added:
Navigation scrubber:
Visual polish:
Accessibility (WCAG 2.1 AA):
Utilities:
Includes unit tests for slide flattening logic and sample activity JSON.