# Create SCORM without PowerPoint: frontend prototype

## Open the example

Run the existing documents-generation frontend (`npm run dev` in `documents_generator_tools_frontend`), then open:

**Dashboard → Add new project → Create SCORM** (Arabic: **إنشاء SCORM**). This is the first option and uses one SCORM badge without a source-format/conversion arrow.

Direct address: **http://localhost:5173/tools/build-your-own-scorm** (sign in first). The same project type is available in the home-page toolkit and shared personal/organization project chooser, and the route works in production builds. Its card is marked **Frontend example** because the draft remains browser-local. The old `/prototypes/scorm-create` address remains a development-only alias.

The implementation files are under `app/prototypes/scorm-create`. The project catalogue, shared chooser, translations, home-page link, and application route expose this frontend example; no backend project-creation endpoint has been added.

## What to try

1. Choose **Blank course**, **Learning essentials**, or **Team onboarding**, enter a title, and create the course.
2. Open the dedicated **Design studio**. Select a template element or add text, images, rectangles, ellipses, triangles, stars, arrows, and lines. Drag elements to move, use the corner handle to resize, or enter precise coordinates and rotation in the inspector. Double-click a text box or use **Edit on slide** for inline text editing.
3. Set fonts, font sizes, colors, bold/italic/underline, alignment, line spacing, opacity, borders, and shape corners. Use **Background** for solid, gradient, or uploaded-image backgrounds. **Layers** supports ordering, hiding, and locking; Undo/Redo handles element changes. Use **Add slide** for the existing six starting layouts.
4. Assign each element an entrance effect, duration, and delay under **Animate**. Use **Preview animations** to replay the slide. Native animated artwork is also supplied to the existing learner preview. Reduced-motion preferences are respected.
5. Duplicate and reorder slides. Stable slide IDs retain question/media/activity placement when order changes; copied element documents receive new element IDs.
6. Use the actual existing **Questions**, **Media**, activity chooser/content forms, and **Player** components. Their implementation files are unchanged. Standalone question editing/preview, YouTube configuration, and H5P content forms work against the local demo document.
7. Open **Preview course** to use the existing learner preview for native slides, questions, and locally configured media. H5P runtime generation requires the existing backend and is not included in this local learner preview.
8. Reload the page to restore the draft in the same browser. Starting another course replaces only this prototype draft, after the author submits the new-course form.

The prototype uses a separate localStorage key, `docudeck:native-course-prototype:v1`. It never creates a production project or changes the existing project's slide/question/media/H5P records. The regular application authentication provider still checks the signed-in user's session. Images are browser-local data URLs limited to 2 MB each; storage quota errors are displayed. The draft is not a shared or server-backed project.

## Boundaries

This is a frontend design and interaction example. **Build SCORM**, media file processing/upload, AI narration, and other backend operations explain their integration boundary; they do not pretend to publish or process a course. H5P content uses the current chooser and forms; backend library readiness and package generation are not asserted by this example. Files & Media remains an existing backend-connected feature and is not recreated here. Full group management is part of the production question workflow; the demo focuses on local standalone questions.

The native editor has its own navigation, canvas, element model, inspector, and animation controls under `app/prototypes/scorm-create`. Existing template-only drafts are converted to stable editable element documents on editing. Editing templates does not change existing question/media/activity records. Coordinates use a physical 1280 × 720 canvas in both LTR and RTL. Dragging snaps to slide center; hold Alt to bypass snapping. Shift preserves aspect ratio while resizing. Keyboard controls include arrow nudging (Shift for 10 px), Delete, Ctrl/Cmd+D for duplicate, Ctrl/Cmd+C/V for element copy/paste, and Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z for undo/redo. Undo history is limited to 80 changes in the current mounted slide editor and is not persisted across reloads.

The redesigned **Layers** panel shows element thumbnails, text previews, element types, and explicit eye/lock controls. Layers run from front to back. Drag a row's grip to reorder it, or focus the grip and press Alt+Up/Down. The selected-layer toolbar provides front/forward/backward/back actions with disabled end positions, plus **Edit** to open its properties. Layer reordering participates in undo/redo and remains in the local draft after reload. Pointer/touch dragging uses the same order as the visual list in LTR and RTL. English/Arabic browser checks passed selection, show/hide, locking, pointer/keyboard reorder, arrangement, undo, reload, and editing at 1440, 768, 390, and 320 pixels. The production build and four focused native-document tests passed after this redesign.

Native element animations are shown in the frontend slide/learner previews. Persisting editable native documents on the server and packaging their animations into downloadable SCORM still require backend integration. This example does not claim PowerPoint-level feature parity, advanced image cropping, collaborative editing, or server publishing.

## Feasibility from the current source

Direct creation is feasible without replacing the existing activities, media, questions, or SCORM player:

- `PowerPointToScormConversionController::store` currently requires a `.pptx`, inspects it, and creates the initial conversion. This entry point is the source dependency.
- `ScormPackageBuilder::build` packages active course slides. It accepts rendered images and non-rendered JPG/PNG/SVG slide assets, and requires at least one included slide with available assets. It does not read the PowerPoint source to build the package.
- `CourseSlideService` already represents stable course-slide IDs independently of source slide numbers. Existing blank/uploaded slides demonstrate this distinction.

A production implementation can introduce a direct-authoring project source and creation endpoint, persist native slide documents, and generate safe slide assets for the current package builder. Existing editors can continue to attach activities/media/questions to the same stable course-slide IDs. Source-specific preparation, regeneration, storage accounting, permissions, revision handling, duplication, and package invalidation must be handled explicitly. No production schema or backend behavior was changed for this prototype.

## Local verification

- Existing authoring changes were pushed first: `6084b16` (assessments/H5P) and `04d6c7e` (independent player foundation).
- The frontend production build and all 194 existing frontend tests passed after adding the prototype.
- Before the initial push, the backend suite passed 176 tests with 2,573 assertions and one renderer-dependent skip. The frontend example introduces no backend changes.
- Browser checks covered creation, content edits, key-point slide creation, reorder, unique IDs after duplication, same-browser reload/restore, existing question/media/H5P form mounting, and the existing learner preview. The standalone question editor also opened successfully for a new question.
- English and Arabic creation pages and the structure/questions/media/H5P/player sections passed horizontal-overflow checks at 1440, 768, 390, and 320 pixels. Mobile slide selection works. Desktop and Arabic mobile screenshots were visually inspected, including corrected RTL alignment inside the generated SVG slide artwork.
- The isolated browser checks intercepted authentication reads and observed no writes to the production API.

Screenshots are under the ignored `out/native-authoring/` directory. No Moodle or production deployment validation was performed; actual SCORM publishing from a native course requires the backend integration described above.

### Dedicated element-editor verification

The dedicated editor passed the production frontend build, all 195 pre-existing frontend tests, and four additional native-document tests covering template migration/identity preservation, escaped text/artwork serialization, opt-in animation output, and hidden layers/background preservation. Browser checks exercised text/font/inline editing, physical pointer dragging, rotated resizing, animation timing, locking/hiding/layer ordering, deletion with undo/redo, image insertion, gradient and image backgrounds, reload/restore, and animated artwork in the existing learner preview. English and Arabic layouts were checked at 1440, 768, 390, and 320 pixels; Arabic physical keyboard coordinates, a 28-pixel mobile resize handle, and reduced-motion behavior passed. No authoring API writes were made by those isolated browser checks.