The elearn.js script is meant to simplify the creation of an information based Website presented as a digital paper. It can be used for higher education and Open Educational Ressources.
Please check the Wiki for a documentation of the project. Information on how to use this project are focused in this. A basic understanding of HTML (, CSS and JavaScript) is recommended. If you want to minimize the usage of HTML, CSS and JavaScript, check the recommended usage.
The older comprehensive documentation is only available in german at the moment. http://www.sumo.uni-hamburg.de/DigitaleSkripte/. The information in this might not be up to date.
The elearn.js supports a simple language selection. The default language is german. To change it, you can do one of the following:
- A
langattribute will cause this node and all included elearn.js nodes to appear in the selected language. E.g.<html lang="en">to change the language for the whole document. Changing thelangattribute after the document was loaded will not change already localized elements. Use method 2 for this. - The
eLearnJS.setLanguage()function can be used to set the language from inside a script. You can use this for atom-elearnjs projects in the meta custom block. This may be overwritten by the first method if present. A callback is fired after the asynchronous language change is done. It is asynchronous because it might have to load the language files first.
Available languages are:
- de: German (default)
- en: English
You can always create Pull-Requests with your translations. Please check the settings Wiki on how to do so.
For the editor Atom there is the package atom-elearnjs. This package converts Markdown files to HTML and PDF and is specifically designed to use elearn.js for styling and interactive elements. Using it makes the creation of scripts more simple and fast. Another plugin for Visual Studio Code is in progress. Check the status in the vsc-elearnjs repository.
The markdown example Examples/Markdown/elearn_template.md uses atom-elearnjs functions and uses nearly everything elearn.js can do. This file is a good start to get going. Also explanations of what is done are included in the example file.
The examples in this repository are very helpful for beginners or troubleshooting. Most of them are designed to be viewed as source and contain helpful comments.
Following examples are included:
- Markdown: Basic markdown file containing a lot of elearn.js and atom-elearnjs functions.
- ResizingIFrame: Example for an elearn.js script included as
iframe. The example shows how to automatically resize youriframebased on the elearn.js height. - TreeHierarchy: Examples of encapsulated scripts. Helpful for more complex topics or splitting of large scripts into multiple files.
The elearn.js supports a few settings. Check the
settings Wiki
for an overview and more detailed information.
Those have to be set by using
JavaScript. Examples for those settings can be viewed in the file
Template/index.html. The commands are contained
as comments in a <script> block in the file's <head>. Comments are currently
only written in german.
Hint: Using atom-elearnjs you can use these settings as done in
Examples/Markdown/elearn_template.md.
More information about the necessary tag Custom in the meta block
can be found in the documentation of
atom-elearnjs.
There are multiple extensions for the elearn.js. Most of them can also be used on their own:
- quiz.js simple quiz elements
- elearnvideo.js HTML5 video player with support for annotations and user notes
- clickimage.js interactive images
- timeslider.js interactive timeline
Please check the file CHANGELOG.md to get information about changes in different versions.
elearn.js is developed by dl.min of Universität Hamburg.
The software is using MIT-License.
cc-by Michael Heinecke, Arne Westphal, dl.min, Universität Hamburg