Sections
An elearn.js document is based on sections. There should be no content outside
of sections, as this might lead to unwanted behavior.
When using atom-elearnjs or vsc-elearnjs, sections are automatically created
based on your settings.
Otherwise you have to check on the correct use of sections.
If you do not use elearn.js plugins stated above and create your document
manually, you need to check your sections.
An example layout would be
<div class="page">
<section name="Startpage">
<h2>My Startpage</h2>
</section>
<section name="Other page">
<h2>My Other Page</h2>
</section>
</div>If you do use a plugin stated above, please check the corresponding Wiki
on how to set names and descriptions of sections. This will most likely be found
under Syntax Extensions.
Sections in the Html need to have a name. The name will be shown in overviews, like the navigation bar. You can insert only basic text here.
<section name="YOUR UNIQUE SECTION NAME HERE">A section name should be unique inside the document.
The sections description will be used in a specific content overview and
currently only there. Please check the kachel version of the content overview
described below. The descriptions can include some Html elements like
<b>, <em>, <br/>. Other elements my lead to problems.
The description will be set as attribute desc:
<section name="NAME" desc="A <em>basic</em> description of this section.">There are three levels of sections supported. Every normal section without a
class attribute is in the highest level. Additionally there are subsections
(sub) and subsubsections (subsub).
These levels can be used for hierarchical structuring.
<section name="Startpage">
<h2>My Startpage</h2>
</section>
<section class="sub" name="A Subsection">
<h2>A Subsection</h2>
</section>
<section class="subsub" name="A Subsubsection">
<h2>A Subsubsection</h2>
</section>
<section name="Another normal Section">
<h2>Another normal Section</h2>
</section>These levels will be indented in the navigation overview and in the generated content overview.
An example of a navigation overview:
You can automatically generate a content overview inside your document. Simply add the following code, where you want the overview to be.
<div id="content-overview"></div>By default this will be a bulleted list.
You can select a block-theme by
adding class="kachel"
<div id="content-overview" class="kachel"></div>The kachel theme will display the section descriptions.
