# H5P activities UI and UX review

Review date: 6 November 2026. Scope: the complete H5P activities workspace, chooser, activity list, content editors for all eight supported types, placement, shared design, learner behavior, preview, media selection, recovery, and accessibility.

This is an evidence-based source and DOM interaction review. Live Chrome inspection was unavailable because Computer Use could not confidently verify its current URL. Screenshots, responsive appearance, actual H5P iframe playback, assistive-technology behavior, live backend persistence, and exported SCORM execution in an LMS were not verified in this review. DOM player tests simulate parts of those flows; they do not replace those checks.

No application code was changed during the original review. The subsequently authorized implementation is recorded at the end of this file. Existing unrelated workspace changes were preserved.

## Main assessment

The product has a useful authoring foundation. The main improvement should be a clearer, more predictable authoring workflow, rather than another set of controls. Prioritize editing continuity, trustworthy manipulation, actionable validation, and a consistent content-to-preview path before cosmetic changes.

Keep the existing searchable chooser, per-slide cards, restore, shared/custom design inheritance, keyboard positioning, media-overlap warnings, guarded revision saves, and dedicated Drag the Words/Drag and Drop editors. These are existing capabilities, not missing features.

## Evidence and test results

- Rebuilt the current workspace test fixture with `npm run build:test-workspace`.
- Ran `node --test tests/h5p-authoring.test.mjs tests/h5p-state.test.mjs tests/h5p-preview.test.mjs tests/h5p-export-player.test.mjs`: **21 passed**.
- Ran `node --test --test-name-pattern="H5P|h5p|overall design" tests/editor-workspace.test.mjs`: **12 passed**.
- Separately exercised the activity-card duplicate/remove/restore/move integration flow.
- Added three temporary DOM audit probes against the real integrated workspace, with mocked APIs. All three reproduced the behaviors described in findings 1–3 below. Passing a probe means the problematic current behavior was confirmed; it does not mean the behavior is correct. The temporary probe file was removed after the review.

Important limitation: existing drag performance/cancellation tests cover the inner Drag and Drop authoring canvas. They do not establish the same behavior for the outer slide-placement canvas or Image Hotspots editor.

## Prioritized findings

Evidence labels: **Reproduced** = observed in the DOM interaction harness; **Source** = directly established by current implementation; **Design recommendation** = proposed improvement requiring usability/visual validation. P1 = next implementation batch; P2 = subsequent workflow improvement; P3 = polish after the workflow is stable.

### 1. P1 — Keep editing available while autosave runs

**Reproduced.** After changing the title and waiting for autosave, the containing content fieldset becomes disabled for the duration of the save request. Background saves use the same `busy` state as operations that require a full UI lock. This interrupts editing on slower connections and creates focus/caret risks that still require browser verification.

Separate saving, uploading, loading, and permission locks. Continue accepting edits while saving a snapshot, queue the next revision, and show a quiet save status. Keep package generation and destructive replacements guarded independently. Verify slow saves, rapid typing, switching activities, and edits arriving during an in-flight save.

Source: `studio/h5p-workspace.tsx:170`, `:251`, `:837`.

### 2. P1 — Make cancelling a placement gesture actually restore its starting position

**Reproduced.** On the outer slide canvas, a pointer drag writes changes immediately. `pointercancel` only clears the drag reference. A probe starting at `{x:5,y:60,width:30,height:12}` saved `{x:16,y:70,width:30,height:12}` after cancellation, with grid snapping enabled.

Use a local gesture preview and commit once on release. Restore the original on pointer cancellation, lost capture, or Escape. Verify foreign-pointer release and navigation during a gesture. Apply the same policy to Image Hotspots, whose source also updates the document during movement. Add activity-level Undo/Redo for content, placement, object deletion, and design changes.

Source: `studio/h5p-workspace.tsx:369–395`, `:708–715`; `studio/h5p-hotspot-editor.tsx:53–61`. The inner drag editor already has a better local-preview/commit pattern.

### 3. P1 — Correct separate-screen labeling

**Reproduced.** A saved activity with `mode: "screen"` appears in the activity list as “Action button.” The card renderer distinguishes inline from everything else.

Represent all three modes consistently: Button, Inline, and Separate screen. Show a short explanation such as “Appears after slide 3.” Use the same labels in cards, chooser follow-up, settings, and preview.

Source: `studio/h5p-activity-list.tsx:30`.

### 4. P1 — Turn validation into a repair workflow

**Source.** Content issues appear as joined messages above the form. The custom forms do not map them to individual fields with `aria-invalid` and `aria-describedby`. The top-level error state is also reused for load, save, upload, and preview problems, with a generic Retry action wired to saving.

Give each issue an activity, field, plain-language explanation, and “Fix” action. Add a linked error summary and focus the first invalid field when appropriate. Separate network, conflict, upload, content, and preview errors; each needs its own recovery action. Preserve the draft throughout recovery. Translate field-level issues, including backend messages.

Source: `studio/h5p-workspace.tsx:529–546`, `:832–835`; `studio/h5p-content-form.tsx`; backend `H5pStudioAuthoring.php:149`, `:176`, `:189`.

### 5. P1 — Let authors preview a valid activity independently

**Source.** Learner preview is blocked if any non-removed activity on the slide has issues. An incomplete sibling therefore prevents checking a complete activity.

Provide “Preview this activity” and “Preview slide.” Keep incomplete items visibly marked. Block invalid publishing/building where necessary, while allowing inspection of valid work. Add an explicit return-to-editor control and preserve the selected activity and inspector section.

Source: `studio/h5p-workspace.tsx:490–505`; `studio/h5p-runtime.tsx:65`.

### 6. P1 — Make preview loading and failure states recoverable

**Source.** The appearance-preview component renders an iframe and sends theme messages on load. It has no explicit loading overlay, ready acknowledgement, timeout state, or retry control at this component boundary. This is a source-level recovery gap, not evidence that a particular preview currently fails.

Distinguish Loading, Ready, Invalid content, Unavailable type, Expired preview access, and Network failure. Retry the appropriate request without discarding the draft. Offer desktop/tablet/mobile preview widths and clearly label simulated progress.

Source: `studio/h5p-runtime.tsx:48–67`.

### 7. P2 — Establish one clear layout and navigation model

**Design recommendation grounded in source.** Authors navigate Activities/Overall settings, Edit/Learner preview, Content/Placement/Learner behavior, a settings drawer, appearance preview, and potentially a larger drag editor. At laptop breakpoints the inspector moves into another grid row; on narrow screens it becomes a drawer.

Use a compact sticky header with slide context, Add activity, Preview, and save status. Use an activity navigator, a large central work surface, and a contextual inspector. On laptops, prioritize the work surface and make secondary panes collapsible. On mobile, use a deliberate full-screen editing flow with a visible Back action. Keep exact breakpoints subject to browser testing.

Source: `studio/h5p-workspace.tsx:517`, `:595`, `:773`, `:795`; `studio/h5p-workspace.css:589–600`, `:657–668`.

### 8. P2 — Add a course-wide activity view

**Source / design recommendation.** The main list is filtered to the current slide. There is no equivalent search/filter manager for all course activities.

Keep the per-slide view as default, and add “All slides” with search and filters for type, required/optional, needs attention, and custom design. Show the destination slide in each result and support “Go to slide.” Add course and slide issue counts.

Source: `studio/h5p-workspace.tsx:233–240`; `studio/h5p-activity-list.tsx:57–75`.

### 9. P2 — Separate activity sequence from visual layer order

**Source / design recommendation.** Bring to front and Send to back reorder the underlying activity array. Separate-screen navigation also follows activity order. Authors have no explicitly named sequence-management UI.

Provide Move earlier/later or drag-and-keyboard reordering with a visible sequence number for separate screens. Store or clearly separate sequence and stacking order so a visual layering action cannot unexpectedly change navigation order. Preserve tracking identity.

Source: `studio/h5p-workspace.tsx:956–975`; `tests/h5p-state.test.mjs:27`.

### 10. P2 — Explain presentation choices visually

**Design recommendation.** Replace the presentation dropdown with three illustrated choices: Button opens an activity, Inline occupies part of the slide, Separate screen follows the slide. Show only the relevant controls, plus a small timeline example for separate screens.

Source: `studio/h5p-workspace.tsx:859–909`.

### 11. P2 — Improve choosing an activity type

**Source / design recommendation.** Search, descriptions, unavailable-library labels, and empty search recovery already exist. Extend these with small examples, outcome-based groups such as Check understanding / Practice / Explore, and a preview-before-adding action. Keep unavailable types understandable rather than relying only on disabled cards. Retain type-specific terminology without requiring authors to know H5P library names.

Source: `studio/h5p-activity-chooser.tsx`.

### 12. P2 — Make shared-design changes predictable

**Source / design recommendation.** Shared versus custom design is already supported, and bulk replacement already asks for confirmation. Improve it with an affected-activity count, a list of affected custom designs, accessible preset palettes, contrast feedback, and an Undo action for replacement. Make inclusion of removed activities explicit in the selection scope rather than a surprising side effect.

Avoid offering both a dropdown and a separate button group for the same shape selection unless they have distinct purposes.

Source: `studio/h5p-overall-panel.tsx:67–80`; `studio/h5p-design-editor.tsx:20–30`; `studio/h5p-color-control.tsx`.

### 13. P2 — Improve media selection and uploads

**Source / design recommendation.** Forms primarily use native file inputs and asset-name dropdowns. The workspace shares one busy state across upload and save. Card and draggable-image alt text exists; the Image Hotspots form does not offer an equivalent background-description field.

Add a reusable asset picker with thumbnails, search, file dimensions and size, upload progress, contextual failure/retry, and replace/remove actions. Display allowed formats and the actual configured size limit before upload. Provide meaningful image descriptions where the content type supports them, including a deliberate decorative option when appropriate.

Source: `studio/h5p-content-form.tsx:125–169`, `:190–218`; `studio/h5p-drag-drop-editor.tsx:59–62`, `:107–109`; `studio/h5p-workspace.tsx:403–446`.

### 14. P2 — Make removed activities understandable

**Source.** Removed activities are collected across the project, but restoration buttons show the activity title without its destination slide. Restoration does not select or navigate to the restored activity.

Show type, title, original slide, and removal state. Offer Restore and go to activity. Use an immediate Undo notification for accidental removal. Keep permanent deletion outside the routine authoring flow.

Source: `studio/h5p-workspace.tsx:557–579`.

### 15. P2 — Standardize editor structure and terminology

**Source / design recommendation.** Dedicated drag editors coexist with generic “Entry 1” fieldsets. Common feedback/retry/solution controls differ by type. Multiple Choice currently means one correct answer, as the catalog explicitly states; this is not a multi-answer control.

Use consistent sections: Instructions, Content, Answers/Interactions, Feedback, and Completion. Replace “Entry” with Answer, Card, Section, or Hotspot. Offer formatting controls where content supports them. Clearly name single-answer choice, and consider a separate multi-answer mode only if supported end to end. Do not silently change stored behavior.

Source: `studio/h5p-content-form.tsx:173–177`, `:221–238`; `studio/h5p-model.ts:109`; `studio/h5p-drag-settings.tsx`.

### 16. P2 — Improve Arabic and mixed-language authoring

**Source / design recommendation.** Some content previews use `dir="auto"`, and physical canvas coordinates correctly remain independent of RTL. Most generic text inputs do not declare content direction. Shared-design samples call `defaultContent(type)` without requesting Arabic defaults.

Use automatic or explicit direction for author-entered content, keep tool chrome in the UI language, and preview mixed Arabic/English strings. Localize samples and validation. Preserve physical X/Y coordinates. Test long Arabic labels, diacritics, number formatting, and narrow layouts with the actual fonts.

Source: `studio/h5p-content-form.tsx:31–49`; `studio/h5p-overall-panel.tsx:26`; `studio/h5p-words-editor.tsx:32`; `studio/h5p-hotspot-editor.tsx:31`.

### 17. P2 — Complete the accessibility interaction patterns

**Source / design recommendation.** The outer settings tabs have roles and arrow-key handling, but lack explicit tab-to-panel IDs/associations. The inner settings switcher uses pressed buttons instead of a tab pattern. The outer canvas nests a resize button inside an element with button semantics. The mobile CSS deliberately excludes the slide resize handle from its general 44px minimum target rule.

Complete tab/panel relationships, choose one consistent inner-navigation pattern, and separate object selection from resize controls. Verify focus restoration, focus visibility, Escape behavior, and announcement frequency. Aim for generous touch hit areas; verify actual dimensions rather than asserting a WCAG failure from CSS alone. Keep numeric placement controls as a non-drag alternative.

Source: `studio/h5p-workspace.tsx:517–526`, `:660`, `:724`, `:795`; `studio/h5p-workspace.css:206–218`, `:600`.

### 18. P3 — Improve visual hierarchy and legibility

**Source / design recommendation.** Activity metadata and badges use 0.67rem and 0.65rem, respectively. The inspector has its own scroll area inside a scrollable workspace. Symbol-based type icons and repeated badges add density.

Use a readable type scale, consistent icons, fewer persistent badges, stronger selected-item treatment, and contextual detail on demand. Reduce nested scrolling, keep the selected activity visible, and make primary actions visually dominant. Validate these changes at real browser sizes before claiming visual improvement.

Source: `studio/h5p-workspace.css:9`, `:227–228`, `:523–525`; `studio/h5p-activity-list.tsx:6`.

## Improvements by content type

| Type | Keep | Highest-value next improvement |
|---|---|---|
| Multiple Choice | Explicit single correct-answer radio | Named answer cards, reorder/duplicate, clear validation and answer-specific feedback where supported |
| True / False | Simple correct-answer selection | Clear statement/answer grouping, quick learner preview, consistent feedback controls |
| Fill in the Blanks | Native H5P syntax compatibility | Select text → Make blank, blank chips, syntax validation and a live reading preview; reuse the existing Drag the Words interaction |
| Drag the Words | Selection-to-blank, hints, distractors, static preview | Visual blank editing that reduces exposure to asterisk/escape syntax, clearer distractor separation and limits |
| Drag and Drop | Local gestures, larger editor, image items, numeric geometry | Persistent object/layer list, visual item-to-region connections, duplication, alignment, snapping, zoom, and Undo |
| Dialog Cards | Independent images and alt text | Two-sided card preview, named collapsible cards, reorder/duplicate, bulk text entry |
| Accordion | Structured title/body rows | In-place expandable preview, reorder/duplicate, focused formatting and completion explanation |
| Image Hotspots | Independent positions, click placement, keyboard movement | Larger canvas mode, local/cancellable gestures, marker appearance choices, descriptions, and retry without reopening |

## Proposed workspace

Desktop: a compact header with course/slide context, Add activity, Preview, and save status. Below it, an activity navigator on the start side, a large central canvas or content editor, and a contextual inspector on the end side. Keep course-wide search available without replacing the per-slide workflow. Put low-frequency design and exact geometry controls behind named expandable sections.

Laptop: collapsible activity navigator and inspector, with a stable central work surface. Mobile: a list-first view and a full-screen editor with a clear Back action and preview switch. These are proposed layouts, not browser-verified designs.

## Recommended delivery order and acceptance checks

1. **Trust and continuity:** non-blocking autosave; correct cancellation; Undo; precise validation/recovery; correct mode labels; selected-activity preview. Accept when editing continues through a delayed save, cancelled gestures do not persist, and invalid siblings do not block valid individual previews.
2. **Authoring workflow:** consistent editor sections; course-wide manager; explicit ordering; visual presentation choices; better media and shared-design controls. Accept when an author can create, locate, move, preview, and repair an activity without guessing its scope or losing selection.
3. **Visual and accessibility validation:** typography, pane behavior, touch targets, focus, tabs, RTL, and preview device widths. Test 1440/1280 desktop, 1024 tablet/laptop, and 390 mobile; English and Arabic; keyboard-only; 200% zoom; slow/failed requests; invalid siblings; removed activities; multiple separate screens; and long content. Check native H5P runtime and exported SCORM separately.

Preserve revision checks, permissions, activity identity, tracking keys, content JSON compatibility, completion rules, media privacy, and SCORM contracts throughout these changes.

## External guidance and design-skill research

- [Frontend Design skill, official Anthropic source](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md): reviewed as design research, not installed or treated as a replacement for this product's established design system. Its scope is visual design rather than a complete usability audit.
- [NN/g: Progressive Disclosure](https://www.nngroup.com/articles/progressive-disclosure/): supports keeping frequent tasks prominent and deferring specialized controls.
- [W3C: Form notifications](https://www.w3.org/WAI/tutorials/forms/notifications/): supports clear overall feedback and field-level repair guidance.
- [W3C APG: Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): keyboard behavior and tab/panel associations.
- [W3C: Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements): a non-drag pointer alternative is distinct from keyboard access; numeric controls can help satisfy it.
- [W3C: Target Size Minimum](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum): the AA minimum is 24×24 CSS pixels subject to exceptions; 44×44 is a stronger touch-usability target, not the universal AA minimum.
- [H5P: Content type recommendations](https://help.h5p.com/hc/en-us/articles/7505649072797-Content-types-recommendations) and [accessibility statement](https://help.h5p.com/hc/en-us/articles/7505444789405-Accessibility-statement-for-H5P-com): distinguish learner-runtime accessibility from authoring-tool accessibility. Their current conformance statements cannot be assumed to certify this project's pinned legacy libraries or custom authoring UI.

## Implementation record — 6 November 2026

The application changes for all 18 findings have been implemented. Automated checks are listed below. Browser visual/responsive validation and a real LMS run remain separate, outstanding acceptance checks; this record does not claim WCAG certification or production validation.

| Finding | Implementation |
|---|---|
| 1. Editing during autosave | Background saving no longer disables the editor. A single save loop drains newer edits using the returned revision before close/build/preview can proceed. Uploading has its own state and progress. |
| 2. Cancellation and history | Outer slide placement and Image Hotspots preview gestures locally and commit on release. Cancellation, foreign pointers, lost capture and Escape are handled. Workspace Undo/Redo restores author intent while preserving server revisions, tracking identity, grants and retained records. |
| 3. Presentation labels | Cards distinguish Button, Inline and Separate screen; separate screens show their parent slide. |
| 4. Repair workflow | Immediate field-specific content validation, linked issue summaries, focus to the affected control, inline descriptions, invalid-field semantics and Arabic messages. Load, upload, save, conflict and content recovery are distinguished. Backend validation remains authoritative. |
| 5. Independent preview | Preview this activity and Preview slide are separate. Valid work can be previewed with incomplete siblings excluded and identified. Back to editor preserves the selection. |
| 6. Preview recovery | Loading and validated readiness messages, timeout/connection/expired-grant feedback, refreshed access, retry, and desktop/tablet/mobile width choices. Readiness accepts only the owning frame, origin, identity, revision and nonce. |
| 7. Layout/navigation | Compact sticky actions, collapsible activity navigator, contextual inspector, laptop drawer, full-screen narrow editor with Back, and native-dialog focus ownership. |
| 8. Course manager | This slide / All slides, title/type/slide search, type and status filters, issue counts, destination context and navigation through the existing selected-slide state. |
| 9. Ordering | Explicit earlier/later screen sequence controls. Reordering screens and stacking ordinary slide activities preserve each other's array slots and other slides. |
| 10. Presentation choices | Illustrated Button / Inline / Separate screen choices, scoped controls and a screen-sequence explanation. Canonical stored mode values are unchanged. |
| 11. Chooser | Learning-goal filters, recognizable type icons, examples before adding, unavailable-library explanations and an explicit Use this activity type action. Examples do not create project activities. |
| 12. Shared design | Affected-custom-design list and count, opt-in inclusion of removed activities, confirmation, Undo, palette presets and text contrast feedback. Duplicate shape-selection UI removed. Contrast feedback does not certify an activity's full accessibility. |
| 13. Media | Reusable thumbnail/search picker, dimensions and file sizes, replace/remove selection, configured upload-size hints, upload progress/retry and target protection. Background descriptions and marker styles persist into native hotspots. Decorative card-image intent is explicit. |
| 14. Removed activities | Restore shows type and original slide, restores and navigates to the activity, and provides a contextual Undo notification. No permanent-delete operation was added. |
| 15. Editor consistency | Named collapsible Answer/Card/Section/Hotspot entries, reorder and duplicate, per-answer feedback, card previews, accordion previews, card bulk entry and safe line-break/bullet controls. Fill in the Blanks reuses visual blank authoring without introducing drag-only fields. |
| 16. Arabic/mixed text | Automatic direction on author text, translated controls/validation, Arabic shared samples and native sample content, and direction-aware inspector tab navigation. Physical canvas coordinates remain unchanged. |
| 17. Accessibility patterns | Associated tabs/panels, roving tab focus, native selection buttons with sibling resize buttons, visible focus styling, numeric geometry alternatives, larger resize hit areas and nested-dialog Escape handling. |
| 18. Hierarchy/legibility | Larger metadata/badges, less persistent badge clutter, stronger selection treatment, consistent type icons, contextual groups, sticky actions and responsive pane behavior. Visual acceptance is still pending. |

### Editor-specific additions

- Multiple Choice retains its single-correct-answer contract; optional answer hints and chosen/not-chosen feedback round-trip to native H5P.
- True/False retains the native answer and feedback behavior, with clearer guidance and structural text controls.
- Fill in the Blanks and Drag the Words offer selection-to-blank, editable blank answers, hints and a reading preview. Fill in the Blanks does not acquire unsupported drag settings.
- Drag and Drop adds object/region navigation, connections, duplication with valid answer mappings, alignment, snapping, zoom and layering. Workspace history covers its committed edits.
- Dialog Cards adds front/back preview, reorder/duplicate, bulk entry and decorative-image intent.
- Accordion adds named collapsible sections, reorder/duplicate and an expandable reading preview.
- Image Hotspots adds the larger editor, cancellable gestures, image retry, descriptions and native marker appearance controls.

### Verification

- Full frontend test suite: **248 tests passed, zero failures or skips**. Includes authoring, course workspace, localization, preview/player state and export-player regression coverage.
- Presentation editor: **155 tests passed across 27 files**, including imported text font sizes, text/shape scaling, resize cancellation, content geometry and Undo/Redo.
- Backend `H5pStudioTest` plus `ScormPackageBuilderTest`: **24 tests passed, 1,404 assertions**, using configured SQLite `:memory:` testing—not the live application database.
- Backend `NativePresentationTest` plus `WorkspaceFontTest`: **21 tests passed, 206 assertions**.
- Focused ESLint for H5P components and new state/validation helpers: passed.
- TypeScript and production frontend build: passed. The existing large-chunk advisory remains.
- Native round-trip tests cover hotspot descriptions/icons/colors, answer-specific feedback, decorative card images, Arabic samples and configured image limits.
- Added English/Arabic edit/validate/serialize/reopen coverage for all eight H5P activity types. The installed official `H5P.Blanks 1.14` parser was also executed to verify hints, alternative answers, Arabic and literal feedback-like characters; this native-parser test ran without skipping.
- Still outstanding: visual browser inspection at the target viewports, 200% zoom, assistive-technology testing, real network/runtime behavior in the open project, and exported SCORM playback in a real LMS. Automated DOM tests are not substituted for these.

### Issues reproduced and fixed during the comprehensive regression pass

1. Fill in the Blanks exposed per-blank Drag the Words feedback syntax. The pinned Blanks library reads that syntax as literal answer content. Its editor now offers native hints without the unsupported per-blank feedback controls; activity-level feedback remains available.
2. Appearance preview accepted an initial progress message as readiness before library initialization. It now waits for authenticated `ready`. The native bridge retains and replays readiness or failure if initialization finishes before the parent nonce handshake.
3. Reordering image hotspots could move selection to a different point. Selection now follows the moved row, and duplicating a hotspot selects its copy.
4. Preview slide with a separate-screen activity selected could hide the parent slide. Slide preview now renders the parent slide and its on-slide activities; Preview this activity retains separate-screen behavior.

Each fix has a regression test. This pass added 22 frontend tests beyond the previous 226-test baseline. No failed automated checks remain in the suites above. Browser and LMS acceptance checks remain outstanding, so this is not a claim that every possible issue has been eliminated.

### Preview retest requested after the comprehensive pass

Repeated the complete frontend build and test suite: **248 passed, zero failed or skipped**. This reran the preview ownership/readiness/recovery checks, independent activity and parent-slide preview regressions, native bridge handshake tests and all eight English/Arabic authoring cases. Re-inspected preview mounting, viewport-width selection and shared player styles in source; source inspection does not establish rendered layout correctness.

Repeated backend H5P and SCORM package verification: **24 passed, 1,404 assertions**, against SQLite `:memory:`.

The live browser retry reported `The browser access host is unavailable`, with no browser tabs available to inspect. Consequently clipping, font rendering, responsive layout and real preview interactions have not received visual sign-off. No new application change was made based solely on this blocked visual check.

### Additional preview layout correction

Source inspection found that the loading/error wrapper introduced around the appearance iframe did not participate in its parent's flex layout. The iframe's `flex: 1` therefore no longer sized it to the preview canvas, allowing the default iframe height instead. The wrapper now fills the remaining height and establishes a column flex layout, with scrollable overflow and non-shrinking status/error messages. This applies to both the activity appearance and overall activity-color preview. The correction is based on the actual DOM/CSS relationship; rendered desktop/mobile appearance still requires browser verification.

After this correction, the full frontend production build and **248 tests passed with zero failures or skips**. Another live-browser inventory attempt still reported that the browser access host was unavailable.

### Activity loading screen refinement

Replaced the runtime's plain `Loading H5P…` paragraph with a centered, responsive loading surface shared by authenticated previews and newly exported SCORM activities. It uses the activity palette, a compact spinner, a clear heading and supporting text, with English/Arabic content and document direction present before JavaScript starts. Reduced-motion preferences disable the spinner animation; status text remains available to assistive technology.

The screen remains visible until native initialization succeeds, then hides and clears the activity's busy state. Initialization failures now retain the same styled surface, show a localized explanation and reveal a keyboard-accessible Try again button that reloads the isolated activity. Internal error details continue through the existing bridge without appearing in the learner-facing message. Existing downloaded packages need rebuilding to receive this change.

Verification after the loading change: production build and **251 frontend tests passed**, with zero failures or skips; backend runtime-document, H5P and SCORM package checks **25 passed, 1,420 assertions**. PHP syntax checks passed. Added cases cover busy-state cleanup, localized error recovery and escaped localized HTML. Live visual verification remains pending because browser access was unavailable.

### Expanded activity preview dialog

Preview this activity now opens the native activity directly in a separate centered modal rather than mounting its saved slide button/inline placement inside the slide canvas. The viewport fills the available screen height and width, with full-screen treatment on narrow displays. The header stays outside the activity iframe, and long native content remains scrollable. Tablet/mobile width controls keep the same mounted iframe, so changing viewport width does not restart the preview.

Activity appearance and shared activity-color previews also offer Expand activity preview. The native modal provides focus containment, supports Escape and Back to editor, restores the triggering control's focus, and locks background scrolling while open. Arabic controls use explicit RTL direction across the portal. Attempts remain preview-only; saved activity modes, slide geometry and exported learner presentation choices are unchanged.

Verification: **252 frontend tests passed with zero failures or skips**, including a new modal lifecycle regression covering direct activity loading, width changes without iframe replacement, closing, focus restoration, reopening and cancellation. Focused ESLint passed. DOM tests do not verify native focus trapping or actual rendered viewport dimensions; browser visual acceptance remains outstanding.

### Chooser examples and fit-to-viewport correction

The earlier dialog change omitted the chooser's See example action. That action now opens a separate full-screen activity dialog above the chooser, with Close example and Use this activity type in its header. Closing or cancelling the example returns to the chooser without adding content; cancellation does not close the underlying chooser. The small inline example section has been removed.

Activity dialogs now request authenticated fit mode from the isolated runtime. The runtime measures the native content, proportionally reduces it when needed, and centers it horizontally and vertically inside the available viewport. It remeasures on viewport resize, content mutations, element resizing, image loads and font readiness, including content expansion. Fit mode hides document overflow instead of requiring nested scrollbars. The loading screen remains unscaled and the duplicate outer loading paragraph is omitted in fitted dialogs. This supersedes the earlier scrolling behavior for activity dialogs; normal learner playback retains its existing sizing unless fit mode is explicitly requested.

Added coverage for all eight See example actions, returning to the chooser, cancellation, explicit activity selection, and authenticated runtime scaling as the viewport/content sizes change. Automated geometry checks do not establish visual acceptance or verify native drag interactions under scaling.

Verification after this correction: production build and **261 frontend tests passed, zero failures or skips**; backend runtime-document/H5P/package suites **25 passed, 1,420 assertions**; focused ESLint passed. Browser visual verification remains outstanding.

### Modern shared activity theme

Refined the shared runtime theme for all eight pinned activity types. Multiple Choice and True/False use roomier rounded answer cards; Fill in the Blanks has distinct rounded inputs; Drag the Words uses soft tiles and dashed answer slots; Drag and Drop has softer draggable/target surfaces; Dialog Cards has elevated card surfaces; Accordion uses separate rounded sections; Image Hotspots has framed imagery and elevated detail panels. Shared typography, instructions, buttons, feedback, focus treatment and reduced-motion behavior remain consistent across types.

Selectors were checked against the installed native library styles. Activity palette variables, native answer states, marker icons, authored drag geometry and native transforms are retained. The theme is shared by authenticated previews and newly rebuilt SCORM packages; existing downloaded packages are unchanged. Actual visual acceptance and native interaction testing remain pending browser access.

Verification after the theme refresh: **261 frontend tests passed**, production build passed, and **25 backend tests passed with 1,420 assertions**. The shared stylesheet parsed successfully with PostCSS. These checks validate regression behavior, package generation and CSS syntax, not rendered visual quality.

### Professional learning-card redesign

The first theme pass did not address the weak layout shown in the True/False screenshot. This revision introduces a real shared learning-card shell with a localized activity label, compact icon and type-specific guidance. The header has a restrained tinted surface; the reading area has consistent internal padding, stronger question typography and a separate action footer. True/False answers now form two substantial equal-width tiles rather than small pills, and Multiple Choice uses full-width answer cards. Blanks and word tasks have dedicated work surfaces, while cards, accordion sections and hotspot details share the same spacing and hierarchy.

The new shell participates in fit-to-viewport measurement so its heading, instructions and activity scale together. Native scoring, answer state colors, drag coordinates and geometry remain unchanged. No fabricated progress or completion indicators were added. The shell and stylesheet are used by previews and newly rebuilt exports, including initial English/Arabic labels before JavaScript executes. Visual acceptance remains pending browser access.

Dynamic preview HTML, theme CSS and bridge responses now use private no-store caching so reopening a preview requests current styling instead of briefly showing a cached earlier design. Native library caching is unchanged. Regression coverage checks the shell during fitting, localized initial headers and preview response caching.

Verification: production build and **262 frontend tests passed, zero failures or skips**; **25 backend tests passed, 1,424 assertions** before the additional targeted cache regression. PHP syntax and PostCSS parsing passed. Automated checks do not establish visual design acceptance.

### Preview loading performance and drop-area refinement

A read-only local HTTP diagnostic found that the True/False example requested **38 separate JavaScript/CSS files**; individual API requests were roughly 200–230 ms during the initial sample. Signed asset URLs also changed each time a document was refreshed. The preview now combines verified library files in dependency order into one JavaScript and one CSS response. Original native metadata and files remain available under `libraries/`; optimized previews use a separate `preview-libraries/` namespace to avoid mixing older cached metadata with the new bundle layout. Relative CSS font/image URLs are rebased to their original library directories. Every bundled source is checked against its installed SHA-256 inventory, and signatures, expiry and project scope checks remain in force. SCORM packages retain their native files.

Signed URLs now remain stable within five-minute windows while still expiring within the previous one-hour maximum. Verified library/core responses can be privately cached for up to five minutes, capped by the grant's remaining lifetime; preview HTML/theme/bridge remain private and uncached. The local sequential HTTP comparison measured **5.40 seconds for 38 original JS/CSS requests versus 0.32 seconds for 2 bundled requests**. This measures the asset download phase, not browser first paint or time to interactive.

The green drop-area block came from a separately styled native inner surface. The theme now explicitly styles that surface as a light outlined target, with a separate caption and clear drag-over/answer states. Draggable cards have quieter handles and raised white surfaces. The chooser's Drag and Drop example now uses a clean two-column matching board without the decorative circle background; existing authored projects and legacy acceptance fixtures are preserved. Authored target coordinates and hit areas are unchanged.

All eight generated native JavaScript bundles passed syntax parsing, and all eight bundled stylesheets plus the shared theme passed PostCSS parsing. Regression coverage includes dependency ordering, two asset requests per type, untouched original metadata, signed URL reuse, rejection of tampered files and the new example geometry. Browser visual and native drag-under-scaling acceptance remain unverified.

Final verification for the loading/drop-area changes: **262 frontend tests passed with zero failures or skips**, production build passed, and **27 backend tests passed with 1,725 assertions** against SQLite `:memory:`. The HTTP timing comparison used read-only requests against the local application; no live project or database records were modified for that diagnostic.

### Matching target fit correction

Reduced the chooser example's drop targets from 37% × 23% to 35.8% × 17.5% around the existing 35% × 16% cards. At the native canvas size this leaves approximately 5 px total clearance on each axis, which scales proportionally with the activity. Target rows now align with their source cards. Removed the unintended outer target border and duplicate inset frame so the target presents one dashed outline. Authored project geometry is not rewritten. Added a native-unit regression requiring small, uniform horizontal/vertical clearance.

### Compatibility and deployment

No database migration is required. New authoring controls are additive JSON fields validated and mapped by the existing H5P adapter. Deploy the backend changes with the rebuilt frontend. `H5P_MAX_IMAGE_UPLOAD_KB` is optional and defaults to the previous 10,240 KB image limit; its actual value is returned to the editor. Existing content, permissions, revision checks, private assets, tracking keys, single-answer scoring and SCORM contracts are retained.

Formatting controls intentionally produce plain text, line breaks and bullet characters; arbitrary HTML was not enabled. Previously downloaded SCORM packages remain unchanged and must be rebuilt to include newly authored content or appearance controls.