How to Convert HTML to SCORM — A Complete Guide

Q: ✔️ What makes an HTML file SCORM?

The SCORM wrapper. Your HTML files get equipped with a JavaScript file that transmits whatever actions you do to an LMS in a certain way. For example, if you read all the pages, the wrapper sends cmi.core.lesson_status: “completed”. This will add a record to your LMS account that the course has been completed.

Q: ✔️ Can iSpring convert HTML files created by me to SCORM?

iSpring is an authoring tool that is capable of publishing various file formats in SCORM format, such as PPT, PDF, and a few proprietary formats (e.g., quizzes), but it can’t convert your HTML files to SCORM directly. There’s no easy way of going about it manually using any tool on the market. This article covers a few workarounds for regular users and refers to SCORM API for developers.

If you have tons of learning materials in HTML and want to upload them to your LMS, you’ll need to turn your HTML pages to SCORM somehow. The SCORM format provides a more enjoyable learning experience with more controllable automatic progress reporting.

In this article, you’ll learn how to convert HTML to SCORM. Technically, it’s not a conversion process, because it’ll still be HTML, but with added reporting capabilities and LMS compatibility, you can upload it to Moodle and other LMS platforms. We’ll tell you how to do it manually or using eLearning authoring tools.

Benefits of Converting HTML Content to SCORM Format

First, let’s look at some benefits of creating a SCORM package out of your HTML content.

Compatibility. When you convert HTML content to a SCORM file, it becomes compatible with various learning management systems (LMS). This means your eLearning content can be used on different systems without compatibility issues.
Tracking and reporting. The SCORM format allows you to track user interaction and provide detailed reporting on learners’ activities. This includes tracking the time spent on the content, the completion status, and assessment results. For example, if you convert an HTML quiz to SCORM, you can track how many users attempted the quiz, their scores, and how much time they spent on each question.
Reusability and portability. Once content is in SCORM format, it can be reused in different eLearning courses and modules. This makes it easy to repurpose content across various learning materials. Additionally, SCORM content is portable, which means it can be transferred from one LMS to another easily.

Which Format Is Your HTML?

It’s important to clarify what type of HTML files you need to make SCORM compliant because HTML can contain pretty much anything, from pages with static text and pictures to entire websites and HTML5 games with quizzes.

Some tasks can be done manually, while others will require a developer’s attention or even hiring a team for a project. There are a variety of typical HTML-to-SCORM tasks, from doable to very complex:

Plain HTML pages — doable after reading this article
Multi-page HTML websites — doable, but an LMS won’t track page views
Interactive HTML5 pages and websites (with JS code) — this will require a developer’s assistance with experience in SCORM/LMS projects, or you can follow the workaround below.

Turning HTML to SCORM: The Manual Way

If you need to convert plain HTML with pictures and schemas into SCORM packages (aka SCO), it’s quite doable manually if you know the course structure. There is a SCORM packaging description for developers on the official SCORM website, but we can download an SCO example and learn the ropes as we go.

To get off to a quick start, it’s recommended that you select a single SCO download option for SCORM 1.2. Without further ado, let’s integrate our HTML example into this learning course.

1. Right click on the downloaded zip file, select Extract All and then go the containing folder:

2. Go to the res folder (resources) and replace the index.html file with whatever HTML you have, but rename it to ‘index’ as well.

3. Navigate one folder up and open the imsmanifest.xml file with any text editor (brackets.io or Notepad++).

4. Change both <title> tags to whatever course name you want it to be (here, it’s called SCORM course).

5. List all the resources that your HTML page includes.

6. Zip the course root folder (with the manifest file) by selecting all the files and clicking Send to > Compressed (zipped) folder:

7. Give it a unique and descriptive name and get ready for uploading.

8. Test your course in SCORM Cloud or upload it directly to your LMS.

Here’s our custom HTML webpage running nicely in SCORM Cloud:

If you haven’t selected a learning management system yet, give iSpring Learn a try; it has SCORM support too.

Turning HTML to SCORM with Authoring Tools

As mentioned above, fiddling with SCORM structures manually is possible, but time consuming. Plus, it may not cover all the reporting capabilities. If you need to make HTML5 interactions such as quizzes and games in SCORM, you’ll probably need to hire developers to integrate your source HTML in learning environments such as Moodle or your corporate learning management system.

If hiring a team of developers isn’t an option for your project, the easiest way would be to break down your HTMLs into PowerPoint slides and publish them with an authoring tool like iSpring Suite. It’ll pack everything into a standardized SCO, ready for uploading to your LMS.

Note: iSpring Suite has an intuitive interface and normally uses PPT slides as a project base. It allows you to create engaging courses with quizzes, videos, interactions, etc. Alternatively, you can create standalone quizzes, books, and role-plays with branching scenarios without using MS PowerPoint.

You’ll need to copy and paste the text, pictures, and videos from your HTML into PowerPoint. Feel free to use all the PowerPoint effects and animations, because they’ll be precisely reproduced in HTML5 by the iSpring conversion engine. If you have quizzes, you’ll also need to recreate them with the iSpring QuizMaker component that comes with the Suite. QuizMaker supports batch question import from an Excel spreadsheet to minimize routine work.

Let’s examine the benefits and downsides of creating SCORM-compliant courses from the ground up and publishing with an authoring tool.

Pros

You’ll save money by not hiring developers
You’ll save time not learning and experimenting with SCORM on your own
Courses will submit completion progress in detail
Familiar PowerPoint course creation environment
QuizMaker tool and other editors for audio/video, etc.

Cons

You’ll need to do some routine copying and pasting work
PowerPoint has its limitations, and obviously not everything can be recreated there
The cost of an authoring tool (nothing compared to hiring a team of developers)

If you have any further questions or concerns, shoot iSpring support a message, and you’ll get your questions answered. If you’re ready to modernize your courses, download a fully functional iSpring Suite free trial to experiment with generating SCORM packages from your HTML content.

HTML-to-SCORM Conversion FAQ

What is SCORM?

SCORM is an eLearning format that most LMSs work with. It describes a course’s structure, reporting, etc., so when you upload it into your learning management system, it knows what to do and where to find your course elements, such as text files, MP4 videos, and quizzes.
Read more about SCORM →

What makes an HTML file SCORM?

The SCORM wrapper. Your HTML gets equipped with a JavaScript file that transmits whatever actions you do to an LMS in a specific way. For example, if you read all the pages, the wrapper sends cmi.core.lesson_status: “completed”. This will add a record to your LMS account that the course has been completed.
Read more on SCORM wrappers in our blog →

What about HTML5 to SCORM?

Everything about HTML is true for HTML5 because it’s virtually the same thing, plus JavaScript and CSS. While HTML is usually referred to as static pages, HTML5 might include rich media interactions, buttons, animations, etc.

Can iSpring convert HTML files created by me to SCORM?

iSpring is an authoring tool that can publish various file formats in SCORM format, such as PPT, PDF, and a few proprietary formats (e.g., quizzes). However, it cannot convert your HTML files to SCORM files directly. There’s no easy way of going about it manually using any tool on the market. This article covers a few workarounds for regular users and refers to SCORM API for developers.

Why can neither tool convert HTML content to SCORM?

Because an HTML page may include pretty much everything, while an eLearning authoring tool needs a standardized source. iSpring, for example, uses PowerPoint as a project source and converts it to HTML5 pages with a SCORM wrapper that makes it SCORM compliant.

What do you need to consider when converting HTML files to SCORM?

There are a few things to consider:

You’ll need to make sure that the course content is organized in a way that an LMS can easily track. This includes adding navigation and tracking features to the HTML content.
You should consider how assessments and other interactive elements within the HTML content will be converted to SCORM. Here, you’ll need specialized software like iSpring Suite.
You need to ensure that the converted SCORM package works well in your LMS and can be accessed easily by learners.

Check out these articles on how iSpring Suite can help you turn legacy content into full-fledged SCORM courses that are ready for uploading to any modern LMS.

How to Convert an HTML File to SCORM

Benefits of Converting HTML Content to SCORM Format

Which Format Is Your HTML?

Turning HTML to SCORM: The Manual Way

Turning HTML to SCORM with Authoring Tools