# Image Hotspots positioning

The activity content editor displays the selected project background image with numbered hotspot markers. Choose a hotspot in **Selected hotspot**, then click the background or drag its marker. Focused markers also support arrow keys (1 percentage point, or 5 with Shift). Numeric X/Y controls remain available.

Previously, every added hotspot started at X=50%, Y=50%, stacking markers in the image centre. New entries now choose an unoccupied starting location. Existing positions and hotspot labels/descriptions are retained; use the selector to reposition previously overlapping entries individually.

Coordinates remain independent image percentages within the existing 5–95% bounds. The editor follows the image's natural aspect ratio and physical left/top axes, including RTL layouts. Saving uses the existing revisioned H5P document API and native H5P position mapping; no database migration is needed.

Background images are served through an authenticated, project-scoped endpoint. Both the upload response and reloaded document provide the image URL. Publish the matching frontend and backend, rebuild the frontend, and refresh any cached Laravel routes using the normal deployment procedure. Re-export a course after changing its hotspot positions to update its ZIP.

Validation: production frontend build, focused ESLint, nine focused frontend H5P tests, and 13 backend H5P tests (1,064 assertions) passed. Backend tests use guarded in-memory SQLite and fake storage, covering save/reopen/text edits, preview/export coordinates, private image access and cross-project rejection. Browser checks using the real content form in a disposable fixture covered mouse drag, touch pointer drag, reload persistence, 390px RTL image alignment and horizontal overflow. Target Moodle and physical-device acceptance remain separate checks.