Skip to content

HTML Document

Jump to bottom
Arne Westphal edited this page Oct 21, 2018 · 5 revisions

HTML-Document and language selection

You can skip this section if you want to use a tool like atom-elearnjs or vsc-elearnjs. Those plugins will create the document and language selection for you automatically including elearn.js extensions. The following sections of this Wiki will still be useful.

If you want to create an elearn.js document on your own, you will need to create an Html file. It is recommended to use the template in this repository. You can either use the empty template or use the example template. Both of these files contain comments for explanation and fit the basic structure.

Basic Directory Structure

The elearn.js usually works with the following directory structure:

  • Project Directory
    • assets
      • js
        • elearn.js
        • min.js
      • css
        • elearn.css
      • font
        • (bundled fonts)
      • img
        • haken.svg
        • logo-uhh.gid
      • lang
        • elearnjs-de.js
        • elearnjs-en.js
    • index.html
    • download.zip (optional)
    • page.pdf (optional)
    • page.epub (optional)

It is recommended and partly necessary to keep this structure and only add files. The example files already link to this correct files. The folder assets/img/template-media can be removed if you do not use the example files.

Basic Structure of the Document

A HTML document should always contain a <head> and a <body>. In the head scripts and stylesheets are defined or loaded. This will define not only the style but also the behavior of the page. In the examples necessary scripts are already included. If you really want to use the extensions please check the Extension section.

There are multiple meta elements in the head which can and should be changed. Most are filled with example content. Also the title element should be changed.

In the body there are also necessary elements, which are already contained in the example files.

You will always need a div#wrap (div element with the id wrap) which contains a div.page (div element with the class page). The div.page is meant to contain all the page's content. It should always start with a <section name="YOUR SECTION NAME"> and end with </section>. No visible content should be outside of section elements. The script in the example is not visible and thus can be outside of any section. Although it is recommended to include all script and link elements in the head. More about section elements can be found in the Section Wiki page.

Imprint

In the example files there is the additional element div#info containing div.lightbox, div.info-wrapper. These elements are used to display an imprint, when the corresponding element in the elearn.js page menu is selected.

These elements should also always be contained and filled with your information. You can use any html in here.

Manual Script Inclusion

If you want to manually add elearn.js to an existing document please add the following lines:

<link rel="stylesheet" type="text/css" href="assets/css/elearn.css">
<script type="text/javascript" src="assets/js/min.js"></script> <!-- von UHH verwendetes JQuery -->
<script type="text/javascript" src="assets/js/elearn.js"></script> <!-- eLearn.js -->

This needs the Basic Directory Structure explained above. Make sure to include the lang and font folders even though they are not explicitly included.

It is recommended to use one of the example files linked above to not miss anything.

Manual Creation without atom-elearnjs or vsc-elearnjs

If you do not want to use the package atom-elearnjs or vsc-elearnjs you can include elearn.js in your html file directly. It is recommended to write all user changes in seperate files to not be overwritten by an elearn.js update. So do not change the files elearn.js and elearn.css. Which files might be overwritten by an update is described in the following section.

You should include style changes (CSS) in the html page itself or a separate file.

Update an elearn.js script manually

The most simple way is to use a markdown file and the atom-elearnjs or vsc-elearnjs package as described before. The atom-elearnjs and vsc-elearnjs packages will always include the latest stable releases.

Updating a script manually needs a few more steps.

  1. Download the repository (as zip or clone)
  2. Copy the Template/assets/ in your script overwriting your assets folder
  3. You can delete the folder assets/img/template-media
  4. Check if the version displayed in the script imprint matches the current version:
    • Open your script in a browser
    • Select the menu (top right) and then the imprint
    • The version is displayed in a grey bar at the bottom
    • The version of the downloaded script can be found in assets/js/elearn.js at the top

If you have changed some of the elearn.js assets you downloaded, these changes will be overwritten and lost.

Language Selection

In the example files there is already a script with a lot of comments describing possibly useful functions. These are only described in german though. Please check the Settings Wiki for more information on these functions.

If you only want to select you language you can insert the following script into your document's head:

<script>
  $(document).ready(function() {
    eLearnJS.setLanguage("en"); // for english
    eLearnJS.setLanguage("de"); // for german
  });
</script>

This does only set the language for the basic elearn.js. Please check the settings of other packages on how to select their languages. When using elearnvideo.js or quiz.js you can simply add the following into the inner function:

quizJS.setLanguage("en");
eLearnVideoJS.setLanguage("en");

Extension Usage

In the not empty index.html example file, extensions are already loaded from a CDN. This is not recommended and only used to keep the extensions out of the repository.

If you want to use the extensions, please download them from the linked repositories and update the src and href attributes to your files. You should copy the downloaded extensions into the assets folder to keep a consistent structure.

Clone this wiki locally