Settings

Settings

You can change specific default settings of elearn.js. To do so, you need to write additional JavaScript code. If you are using one of our conversion Plug-Ins for Markdown, check the custom tag of the meta block described here https://github.com/elb-min-uhh/markdown-elearnjs/wiki/Syntax-Extensions#meta-information.

The basic script you can extend with your custom settings is

<script>
    $(document).ready(function() {
    // YOUR SETTINGS HERE
    });
</script>

In the following sections functions inserted into this code will be explained.

Toggle Sections

By default sections are hidden and only the selected section is visible. If you want to display all sections by default use

eLearnJS.toggleAllSections();

Navigation Title

The navigation title is visible when all sections are displayed. It's the text you click to open the section navigation in the top bar. By default it contains the title Overview or Übersicht in german.

To set this title to a custom text use

eLearnJS.setNavigationTitle("YOUR TITLE");

Language

If you only want to select a language you can insert the following

eLearnJS.setLanguage("en"); // for english

Allowed values are "en" and "de". If you want to add a translation you can always check the assets/lang/elearnjs-en.js file and translate it into your language. For example into elearnjs-es.js for spanish. Then "es" should automatically become a valid value. If you do so, you can always create a Pull-Request with the translation file, so others can use it, too.

The language codes are based on ISO 639-1 as two character language codes.

Back-Page

An elearn.js document supports an additional back-button left of the toggle sections button in the navigation bar. By default this button is disabled.

The button can lead to different pages:

• Types:
  • index: Open a specific section by index within the same document
  • name: Open a specific section by name within the same document
  • link: Open a relative or absolute link. Like https://google.com or ../

Use the following function with one of the explained types to set the back-page target:

eLearnJS.setBackPage(target, type); // type as described above

To select the correct target value, check the following examples:

eLearnJS.setBackPage(1, "index"); // the 2. section, e.g. the section overview
eLearnJS.setBackPage("Overview", "name"); // the section with attribute name="Overview"
eLearnJS.setBackPage("../", "link"); // the parent directory
eLearnJS.setBackPage("https://google.com", "link"); // an external URL

Afterwards you need to set a text displayed next to the button with

eLearnJS.setBackButtonText("MY BUTTON TEXT");

and enable it with

eLearnJS.setBackButtonEnabled(true);

General Settings

There are also a few general settings.

Navigation

If you want to disable the navigation arrows you can use

eLearnJS.generalDirectionButtonsEnabled(false);

This can be useful if you do not want your user to change sections manually. You can use

eLearnJS.showNext();
eLearnJS.showPrev();

to switch between sections using JavaScript. Also you can bind these functions on you custom buttons.

Users can also switch the sections using the arrow keys on their keyboard or using touch. Use the following to disable those methods, too.

eLearnJS.setKeyNavigationEnabled(false); // disable keyboard navigation
eLearnJS.generalSectionSwipeEnabled(false); // disable touch navigation

Block Progress with quiz.js

You can set an option to block the section progress (moving to the next section) whenever there are unanswered quiz.js questions visible. This can be used to create a quiz with progression only after answering a question.

eLearnJS.setBlockProgressIfQuestionsNotAnswered(true);

Progressbar

To disable the progressbar use

eLearnJS.generalProgressbarEnabled(false);