How to Convert an HTML File to SCORM
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 create a SCORM package out of your HTML. Technically, it’s not a conversion, because it’ll still be HTML, but with added reporting capabilities and LMS compatibility, you can upload it to Moodle and other systems. We’ll tell you how to do it manually or using eLearning authoring tools.
What is Your HTML?
First, 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 complete 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 pages with pictures and schemas into SCORM packages (SCO in other words), it’s quite doable manually if you know the course structure. There is a definite SCORM packaging description for developers on the official SCORM website, but we can download an SCO example and learn the ropes along the way.
For 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 an LMS yet, try out iSpring Learn; 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 normally uses PPT slides as a project base for your courses, which you can enrich with quizzes, interactions, etc. Alternatively, you can create standalone quizzes, books, and interactions without MS PowerPoint.
You’ll need to copy and paste the text, pictures, and videos from your HTML pages 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 talk about the benefits and downsides of creating your 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 trial to play around with generating SCORM packages from your HTML files.
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 LMS, it knows what to do and where to find your course elements, such as text files, MP4 videos, quizzes, etc. Read more about SCORM →
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. 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 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.
Why can neither tool convert HTML 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.
Related Articles
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.
