# H5P drag authoring

Open an activity in the production editor's H5P workspace, then choose Content.

## Drag the Words

1. Write the exercise text. Select a word or phrase and choose **Make blank**.
2. Expand a blank to add a hint and feedback, or turn it back into ordinary text.
3. Add extra incorrect words, one word or phrase per line.
4. Expand **Feedback and behaviour** to control retry, solutions and immediate checking.
5. Use Learner preview to try the actual H5P interaction.

Existing asterisk-based text remains editable. The structured hint controls generate the pinned library's native syntax. Avoid asterisks inside hints and feedback; the editor removes them because they delimit blanks.

## Drag and Drop

1. Choose **Open larger editor** for a bigger canvas. **Done** returns to the settings panel; Escape also closes it.
2. Add text, images or regions. Drag objects to move them and use the resize handle to change their size.
3. Select an item and check its correct regions. Leave all regions unchecked to create a distractor.
4. Select a region to change its name, visible label, capacity, hint and feedback. Several correct items can share one region.
5. Use **Background and canvas** to choose a background image and canvas height. Use **Exact position and size** for precise percentage coordinates.

Arrow keys move focused objects in the physical direction of the arrow, including in RTL. Shift + arrows resize. The object selector provides access to overlapping objects. Image items require alternative text before preview/export.

Pointer movement and resizing use a local preview limited to one update per animation frame. The workspace receives one content change when the pointer is released, so normal autosave runs after the gesture rather than rerendering the workspace on every pointer event. Cancelled or interrupted gestures restore the saved geometry. Tests cover cancellation, release before a pending animation frame, and ignoring another pointer's release. English/Arabic browser checks at 1280px and 390px confirmed zero document updates during 100 movement events and one commit per completed gesture.

Legacy pairs are displayed at their existing percentage positions. Their first content edit stores the independent canvas representation; simply opening them does not rewrite them. Drafts may be unfinished, but missing answers are reported and must be completed before export. Region removal clears its answer references. Image files retain project ownership and private asset delivery.

## Compatibility and validation

Playback uses the existing pinned H5P.DragText 1.10 and H5P.DragQuestion 1.15 libraries. Both frontend and backend must be deployed together. No schema migration is needed for these authoring fields. Existing imports retain their review workflow; course grading is unchanged.

Canvas positions and dimensions are stored as percentages. The native adapter converts dimensions to H5P's em units using the task dimensions and its 16px base font; positions remain percentages. This preserves proportions when the learner's viewport changes.

This conversion also applies to the older pairs-based format and catalog samples. Preview and new exports regenerate the correct dimensions without rewriting stored answers, content files, tracking keys or revisions. Reload an open preview after updating the backend. Previously downloaded SCORM ZIPs must be exported again to include the fix.

Local validation covers frontend authoring and player regression tests, backend save/reopen, private image ownership, native preview/export parity, and English/Arabic browser fixtures at 1280px and 390px. Browser fixtures exercise physical pointer movement/resizing, text selection, and the larger editor. Authenticated project acceptance and Moodle import/resume remain separate deployment checks.

The exported native activities were also opened locally at 1000px and 390px: reusable text and an image were placed into the correct regions for 3/3 points, and the correct word earned 1/1 with instant feedback. Runtime geometry matched the configured percentages, and disabled retry/solution controls remained absent. The focused frontend suite passed 20 tests and the backend H5P suite passed 19 tests (1,236 assertions). The production build and lint of the changed H5P files passed. Full-project lint still reports unrelated existing prototype errors.