Authoring eLearning with the SCORM Editor

A step-by-step guide to building SCORM courses — from a single screen to a full multi-module unit with images, quizzes and a graded assessment.

Everything runs in your browser. Nothing you load or build is uploaded anywhere — the course is assembled locally and downloaded as a standard SCORM .zip you can put on any learning management system (LMS).

1. What this tool does

The editor lets you create a SCORM course from scratch or open an existing SCORM package, edit it visually, and repackage it. A finished package is a self-contained website plus a manifest the LMS reads. You don't need to touch code — you fill in fields, add screens and questions, upload images, and click download.

A SCORM course produced here can:

• Present reading screens, images, a glossary, scenarios and quizzes.
• Run a graded assessment and report a pass/fail and score back to the LMS.
• Resume where a learner left off, and issue a printable completion certificate.

2. Starting a course

On the opening screen you have two choices:

• Create a new course — builds a fresh, working course (a welcome screen, one content screen, one graded question and a results screen) that you then edit.
• Open an existing .zip — load a SCORM package you (or someone else) built on this model to keep editing it. You can also drag a .zip straight onto the window.

3. The interface

Once a course is loaded you'll see four tabs across the top:

The Build tab

The Build tab is the heart of authoring. The left outline lists the whole course in order, grouped into collapsible modules; click any screen to edit it in the right pane. Because only the selected screen is open at a time, editing, adding paragraphs or inserting components no longer scrolls you around — your place is kept.

• + Add (top of the outline) inserts a screen of the chosen type after the selected one; + Module starts a new module.
• Each module header has a title you can rename, a caret to collapse/expand, and buttons to add a screen to it or delete it. A screen's Module dropdown (in the editor) moves it between modules.
• Drag the ⠿ handle to reorder screens (within or between modules) and to reorder whole modules; the ↑ ↓ buttons do the same for keyboard users.

The Download .zip button (top right) builds your finished package at any time. Across the tabs, these controls recur:

• ↑ ↓ — move an item up or down (reorder).
• ⧉ — duplicate a screen or question.
• ✕ — delete an item (you'll be asked to confirm for screens/questions).
• ↶ ↷ — undo / redo (also Ctrl/Cmd + Z and Ctrl/Cmd + Shift + Z).

Saving progress — drafts vs the final package

There are two ways to save, for two different purposes:

• Save draft (top bar) downloads a small .scorm-project.json working file. Keep it anywhere — your computer, a shared drive, a USB stick — and reopen it later with Open draft to carry on exactly where you left off (text, images, audio and all). This is the file to use while a course is in progress; save a new one whenever you want a checkpoint or a named version.
• Download .zip is the finished SCORM package you upload to an LMS. (It also reopens here via Open SCORM .zip if you ever need to edit a published course.)

Both round-trip losslessly, so nothing is lost either way — the distinction is just which one signals "still working" versus "ready to publish".

4. How a course is built

A course is an ordered list of screens. Learners move through them one at a time with Back / Continue. Each screen has a type that controls how it looks and behaves:

A typical flow reads top to bottom:

welcome → [module 1 screens] → [module 2 screens] → … → summary → [assessment questions] → final

5. Course settings

Open the Course settings tab and fill in:

1. Title — the course name. This is shown in the player and written into the manifest and metadata, so it's what your LMS displays in its catalogue.
2. Subtitle — a secondary line shown on the certificate.
3. Glossary intro & Glossary — optional. Add terms (with definitions) and they appear behind a Glossary button available on every screen. Click + Add glossary term to add the first one.
4. Pass mark (%) — the score a learner needs on the graded questions to pass. Changing it updates the package's mastery score automatically on download.
5. Package metadata — Description and Keywords help the LMS catalogue your course; Identifier is a unique id for the package (e.g. COM.YOURORG.COURSENAME); Learning time is an estimate in ISO‑8601 format, e.g. PT30M for 30 minutes or PT1H30M for 90 minutes.

Theme & branding

The Theme & branding section lets you make the course your own without touching code:

• Primary colour — used for headings, buttons and the header bar. Pick a dark colour so text stays readable.
• Accent colour — used for eyebrows, highlights and the score circle.
• Font — choose a font family for the whole course.
• Logo — upload a logo to show in the course header.

Use Preview to see the branding live, or Reset to default theme to clear it.

Accessibility check

At the bottom of Course settings, click Run accessibility check for a quick scan of common problems: images missing alt text, videos with no title, links with no text or a placeholder URL, low-contrast branding colours, and graded questions missing feedback. Each result has a Go → button that jumps you to the screen to fix it. It's a helper, not a full WCAG audit — but it catches the most common misses.

6. Building content screens

Add a screen

1. Go to the Build tab.
2. In the outline, pick the type from the dropdown next to + Add (content, welcome, summary, the question types, or results).
3. Click + Add — the new screen is inserted after the selected one (inheriting its module) and opens in the editor on the right.

Edit a content screen

Select a screen in the outline to edit it on the right:

• Eyebrow — a small label above the heading. With modules on, this is set for you (Module 2 of 5); see section 8.
• Title — the screen heading.
• Body — your main text, as one or more paragraphs. Click + Add item to add another paragraph; use ↑ ↓ to reorder and ✕ to remove one.

Formatting text

Text fields that support formatting (body, lists, card text, glossary definitions) are what-you-see-is-what-you-get: type directly into them and the text shows the way learners will see it. To format, select some text and click B (bold), i (italic), 🔗 (link), or • List (bullet list) in the toolbar above the field.

Pasting from Word or a web page drops the messy original formatting and pastes plain text, so you can format it cleanly yourself.

Duplicate, delete, reorder

Use the icons in each screen's header: ⧉ duplicates the whole screen (handy for making the next module's screens), ✕ deletes it, and ↑ ↓ move it through the course.

Inserting rich components

Beyond plain paragraphs, content screens can hold designed components. At the bottom of a content screen, next to Insert component:, choose one and click + Insert. It's added with one empty entry ready to fill in; use the component's own + Add button for more entries, ↑ ↓ to reorder them, and the ✕ in the component's header to remove the whole component.

7. Adding images & video

Images live on content (and welcome) screens.

1. On the screen's card, find the Images section.
2. Click + Upload image and pick a file (PNG, JPG, GIF, WebP or SVG). A thumbnail appears immediately.
3. Fill in Alt text — a short description of the image. This is important for accessibility and is read aloud by screen readers.
4. Optionally add a Caption (shown under the image) and a Max width in px to stop large images dominating the screen.
5. Add more images, reorder them with ↑ ↓, or remove one with ✕.

Uploaded images are stored inside the package under images/ and listed in the manifest automatically — you don't manage files by hand.

Background images

Any screen can have a full-screen background image. In the screen editor, scroll to Appearance → Background image and click + Upload background. The screen's text sits on a legible frosted panel, and a Dim overlay slider darkens the image behind it so text stays readable — turn it up for busy or light photos.

To brand the whole course at once, set a Default background image in Course settings → Theme & branding; every screen uses it unless it has its own. Backgrounds work in Preview and in the downloaded package. Choose calm, low-detail images and keep the overlay high enough for contrast (see the Media tab for file sizes).

Image layout & zoom

Each image has a Layout option: Default size (respects your max width) or Full width (spans the content column — good for banners and diagrams). On the published page, learners can click any image to enlarge it in a full-screen lightbox (Esc or the ✕ closes it).

Image hotspots (labeled graphics)

Turn an image into an interactive diagram. On a content screen, choose Insert component → Image hotspots, upload the base image, then + Add point for each marker:

1. Set the marker's X and Y position as percentages from the image's top-left corner (e.g. X 30, Y 40).
2. Give it a Label and a Description (shown when clicked).

In the course, numbered markers sit on the image; clicking one reveals its description below. It's great for anatomy, equipment, dashboards, maps and process diagrams.

Adding video (Vimeo / YouTube)

Content screens also have a Videos section for embedding video.

1. Click + Add video.
2. Paste the video's link into Video URL or ID — a Vimeo link (https://vimeo.com/123456789, or an unlisted link with its hash https://vimeo.com/123456789/abcd1234), a YouTube link, or just a Vimeo ID. A line underneath confirms what was recognised (e.g. ✓ Vimeo · video 123456789).
3. Add a Title (used by screen readers) and an optional Caption.
4. Use Preview to watch it play — the video sits in a responsive 16:9 frame that scales on mobile.

Adding audio narration

Content screens have an Audio narration (MP3) section to add a voiceover.

1. Click + Upload audio and choose an .mp3 file. A small player appears so you can check it.
2. Add a Label (e.g. “Narration — Module 1”) shown above the player.

The player only appears on screens that have audio. Unlike video, the audio file is stored inside the package (under audio/), so it works offline — but it adds to the download size (roughly ~1 MB per minute of MP3).

8. Building a multi-module unit

Modules are a real structure in the Build tab — group your screens into them and the editor handles the learner-facing labels for you. Here's a 3-module unit:

1. Create the modules. In the Build outline, click + Module three times. Rename each header (click the title) to e.g. "Why this matters", "The procedure", "Your responsibilities".
2. Add screens to each module. Use a module header's ＋ button (or select a screen in that module and click + Add) to add content screens, then write each one in the right-hand editor.
3. Reorder freely. Drag the ⠿ handle to move a screen within or between modules, or to reorder whole modules. A screen's Module dropdown does the same by keyboard.
4. Add a summary and the assessment. Add a summary screen and your graded questions via + Add (questions can sit in a module too, or after the last one — see section 9).
5. That's it. The welcome screen's module map and each screen's "Module N of M" eyebrow are generated automatically from your modules (toggle this off in Course settings → Modules if you'd rather write eyebrows by hand).

9. Questions & assessment

In the Build tab, click + Add and choose a question type. The types are:

Mark a question graded (the default for everything except scenarios) and it counts toward the final score.

Edit a question

1. Fill in the Question text (for scenarios, the Setup and Prompt).
2. Mark the correct answer(s): the radio button for single-answer questions, or tick every correct checkbox for multiple-response. For fill-in-the-blank, list the Accepted answers (one per line — any match counts; the first is shown as the model answer).
3. Click + Add option for more choices; reorder with ↑ ↓; remove with ✕.
4. Write feedback: the "Correct" and "Not quite" messages (scenarios have a message per option).

Question bank (randomised draw)

With more than one graded question, a Question bank control appears at the top of the Build outline. Set it to draw, say, 5 of 10 graded questions and each learner gets a random 5 — great for re-sits. Leave it blank to ask them all. (The score is out of however many are drawn.)

10. The Media tab

The Media tab lists every image and audio file in the package with a preview, path, file size, and the screens that use it. Files not referenced by any screen are tagged Unused. Click Remove to delete a file from the package (this also strips references to it from screens). It's the easy way to keep the download lean.

11. Raw files (advanced)

The Raw files tab lets you open and edit any text file in the package directly. Most authors never need it.

12. Scoring & the certificate

• The score is the percentage of graded questions answered correctly.
• If it meets the pass mark (Course settings), the learner passes; the final screen shows the score, a completion certificate (with the learner's name from the LMS) and a Print / save certificate button.
• If they fall short, the final screen lists the questions they got wrong with explanations and offers a Retake assessment button that resets the graded questions.
• Completion, score and pass/fail are reported back to the LMS automatically.

13. Preview & test

Quick preview (in the editor)

At any time, click Preview in the top bar. Your course — with all unsaved edits, including images and components you've just added — opens in a new browser tab exactly as a learner would see it. Click through every screen, check images and layout, and try the questions. Close the tab to return to editing; nothing is downloaded.

Preview from a specific screen. While editing, each screen and question card has a ▷ button in its header. Click it to open the preview starting on that screen, so you don't have to click through the whole course to check the one you're working on.

Full test (on a SCORM service)

To confirm the course reports correctly to a real system before publishing:

1. Click Download .zip.
2. Upload the .zip to a free SCORM test service such as SCORM Cloud, which simulates an LMS and shows the completion, score and pass/fail data your course reports.

14. Download & deploy to an LMS

1. Click Download .zip. You get a complete SCORM package.
2. In your LMS, create/upload a new SCORM course and select this .zip. The LMS reads the manifest and registers the course.
3. Publish/enrol learners as your LMS requires.

What happens on download: your course content is regenerated, the manifest's titles, identifier and mastery score are synced, the file list (including images) is rebuilt, and the metadata is updated. The package targets SCORM 1.2, which virtually every LMS supports.

15. Best practices

• Always write alt text for images, and keep language plain — many learners rely on it.
• One idea per screen. Short screens beat long ones; split dense material across several content screens within a module.
• Label modules consistently with the eyebrow (Module 1 of 4).
• Keep questions unambiguous with exactly one correct option, and write feedback that teaches, not just "correct/incorrect".
• Compress images and remove unused ones from the Media tab.
• Test the download by opening index.html before publishing.
• Save versions with Save draft (a .scorm-project.json working file) while editing, and keep each Download .zip as a published milestone — either reopens for further edits.

16. Troubleshooting

17. Quick reference

Screen types

Controls

Learning-time format (ISO 8601)

PT15M = 15 min · PT30M = 30 min · PT1H = 1 hour · PT1H30M = 90 min.

Ready to build? ← Back to the editor