Import Self Contained Html in course

This article describes how you can use a self-contained HTML page (or multiple pages) that are present in a filesystem folder with all the necessary images, CSS, and scripts as your course content. This self-contained folder of HTML can be added to an EduBrite course as a SCORM package. With minimum effort, you can easily package your content as a SCORM file by following the instructions below. 

  • First make sure that your HTML loads properly in the browser when you double click on it from the filesystem (to test all references to any external CSS, JavaScript, and images that are relative to the HTML). 
  • In the root folder where your HTML files are present, create a text file named imsmanifest.xml (this is the SCORM descriptor file), and edit it in any text editor.
  • Enter the following example content in this file. 
<?xml version="1.0" encoding="utf-8"?>
<manifest identifier="custom_course_id" version="1.0" xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
  <metadata>
    <schema>ADL SCORM</schema>
    <schemaversion>1.2</schemaversion>
    <lom xmlns="http://www.imsglobal.org/xsd/imsmd_rootv1p2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd">
      <general>
        <title>
          <langstring xml:lang="x-none">Example Custom Package</langstring>
        </title>
      </general>           
    </lom>
  </metadata>
  <organizations default="custom_ORG">
    <organization identifier="custom_ORG">
      <title>Custom Package</title>
      <item identifier="index_SCO" isvisible="true" identifierref="index_RES">
        <title>My Custom Package</title>
      </item>
    </organization>
  </organizations>
  <resources>
    <resource identifier="index_RES" type="webcontent" href="index.html" adlcp:scormtype="sco">    
    </resource>
  </resources>
</manifest>
  •  Our assumption here is that your html folder contains an index.html file that acts like starting page, but you can have any different file name also; that will be fine. Notice the yellow highlighted text above; if your starting file's name is different, just change the text to match with the file name. Names are case-sensitive. 
  • Now zip all the files under your root folder together in a zip archive file - say Archive.zip 

  • Upload this Archive.zip file as a SCORM 1.2 module in a course
  • Launch the course in preview and test it.
  • Download this example archive file to unzip it to see the structure of the zipped contents. You can upload it to your course for testing; the example consists of two pages linked together, CSS and images to highlight how self-contained HTML can be packaged.  

 


Rating: