In eLML we used to have "TestLesson" that shows all the different elements and their representation in XHTML. Now we integrated these examples into the manual. Please note that we do not provide examples for structural elements (unit, learningObject, summary, selfAssessment, glossary, bibliography, clarify, look, act etc.) but only for content elements! Read the concept and structure page in the "about" chapter to understand the eLML structure and the pedagogical concept behind this structure. Please also read the eLML CSS manual because most of both the structural and content elements can be adapted using CSS.

The available eLML content elements

The 'box' element (paragraph only)

Of course you don't need to use all this fancy stuff (note the XML representation below):

<box>This is a simple box.</box>

The 'citation' element (paragraph and inline)

This part describes the different uses of the element <citation>. Please note that this element is one of the eLML elements than can be used as either a paragraph or inline, if used nested within another content element!

1.) It might be used to paraphrase a work and reference the literary source.
… often it is written that XML would be easy to learn (Fisler et al. 2006). Therefore, ...

2.) It can be used to include and reference a direct quote. In this case the page number where the quote appears is needed.
... it is stated that "XML is easy to learn" (Fisler et al. 2006, p. 15). This means that ...

3.) If a quote is longer than a couple of words, we may wish to display it as separate paragraph.
... it is stated that

<citation bibIDRef="webist2006" pageNr="15">XML is easy to learn.</citation>

Sometimes you may want to state the name of the author in the text leading to the citation. In that case the citation reference should be the year of publication only. For example, Bleisch Fisler et al. (2006) state that XML would be easy to learn.

If you would like to use the same citation using a direct quote, you need a trick (use the element <formatted>) to make it display as expected. The example: Bleisch et al. (2005, p. 15) states that ";XML is easy to learn".

If using the citation element as a paragraph then it can contain the attribute icon set to remark, question or important. If the representation attribute is set to inline then the icon attribute is ignored. Like almost all elements, <citation> can contain the attribute "label" which allows to label it and to link to it from any place within the lesson.

The 'column' element (paragraph only)

The <column> element can only be used on the "top" level of the content elements (right after a structural element like "clarify", "entry" etc.). You have the possibility to use a two- or three-column layout to better display your content. Within a column you can use all of the content elements with the exception of the column element itself. You also have the possibility to horizontally and vertically align the content of your columns. You can see an example of a column below (where the "list" element is presented) or on the elml.ch entry page: The news flashes are in one column, the boxes on the right are in a second column. For examples of the align/valign attributes scroll to the end of this page.

The 'formatted', the 'indexItem' and the 'newLine' element (inline only)

The <formatted>, <indexItem> and the <newLine> elements can only be used "inline". That means, they can only be used within paragraphs, boxes etc. The element has only two attributes, one is the "cssClass" attribute to apply unique CSS classes and the other one is the "style" attribute, whose values are listed in the table below:

The 'link' element (paragraph and inline)

Another special type of element is the <link> element. It can also be used inline (nested) or as a paragraph. Please note that a "download link table" will be created if you have more than one link used as a paragraph right next to each other. Using it and its attributes appropriately gives several possibilities to link within the lesson or to external resources.

1.) A simple link to another website (presented inline): Visit the eLML website.

2.) A simple link to another website (presented as paragraph) with an icon:

Visit the eLML website!

3.) A link to another lesson is possible by using the "targetLesson" attribute

4.) A link to a part within this lesson (presented as paragraph, inline would also be possible):

Link to the CSS chapter

5.) A link for downloading material (inline): Download this nice paper [5.5 MB - might take a while to download this - Filetype: PDF] and as paragraph:

Download this nice paper. [5.5 MB - might take a while to download this - Filetype: PDF]

6.) If a link is presented as paragraph then the attribute icon can be used to set one of the icons (important, remark or question).

7.) If you add more then one link one after another, a table with link/download material is created:

The 'list' element (paragraph only)

Below a two-column layout using the <column> element and in each column there is an example of the <list> element. The "listStyle" attribute is used to define if you want an ordered or unordered list:

Two examples of a list with a title. The first list has nested another list in it, the second example uses the icon attribute and a bibliographical reference:

The 'multimedia' element (paragraph and inline)

The <multimedia> element is used for everything that is not text. The <multimedia> element can be used inline (e.g. within a paragraph) or as a paragraph (e.g. next to a list, table or paragraph element). It is important to understand the difference: If an image is used inline and aligned left (default) or right, then the text is floating around the image. If an image is used as paragraph item, then the space left and/or right of the image is left empty. See the examples below and the extensive examples at the end of this page for more information about alignment. The second important thing to know is that these definitions are set within the CSS file. If you don't add the definition for the ".multimedia_*" classes in your elml.css file, there is no floating at all (see the CSS chapter). On the other hand: If you don't use a customized layout but work with the plain layout of the elml.xsl file, then the most basic CSS class definitions are added automatically.
Here is an overview of the items a multimedia element can contain:

• Picture (GIF, JPG, PNG)
• Flash
• Quicktime Video
• MPEG Audio/MP3
• RealOne (Audio/Video)
• SVG
• Java Applet
• VRML
• X3D
• MathML
• HTML or PHP
• etc.

This list will grow as needs grow. Here are some examples of multimedia elements and their XML representation:

Test-Image (Bleisch et al. 2005)

<multimedia src="../image/test.jpg" type="jpeg" align="right" width="200" units="pixels" legend="Test-Image" bibIDRef="delfi2005">

The element multimedia also allows to set the attribute icon or to have thumbnails. In this case a small image (url defined in the attribute thumbnail) is shown in the lesson and the original image opens in a new window when clicking on the small image. This is especially useful for bigger flash animations. Look at the following example.

That's an Animation

<multimedia src="../multimedia/testAnimation.swf" type="flash" align="center" width="200" units="pixels" thumbnail="../multimedia/testAnimation.gif" legend="That's an Animation">

An interaction included in the lesson (without thumbnail) could look like this.

<multimedia src="../multimedia/testInteraction.swf" type="flash" align="left" bibIDRef="webist2006" height="200" width="300" units="pixels" legend="That's an Interaction">

The 'paragraph' element (paragraph only)

The <paragraph> element is used to write normal paragraphs. It does offer a lot of attributes to e.g. make it visible to tutors only, to be used only in the print (PDF) or online (HTML) version, to define a cssClass, a title or an icon.

A title of a paragraph

This paragraph uses both the "title" and the "icon" attribute. You can enter text in a paragraph but you can also enter the following elements: citation, formatted, indexItem, link, multimedia, newLine or term.

The 'popup' element (paragraph only)

A <popup> element allows an author to write a question and to hide the answer. The student then has to click on the question to see the answer. The answer can include multimedia elements, tables etc.

How long would it take to hike to Ulan Baator? (Click here for more information)

The 'selfCheck' element (paragraph only)

The <selfCheck> element gives authors the possibility to add selfCheck questions (control questions) along with their content. This enables eLML authors to quickly add questions to their content without prior knowledge of Flash or JavaScript. eLML selfCheck questions don't support any LMS functionality and therefore can't save the test results of students.

The following three types of questions are supported by eLML:

• single-choice (one correct answer)
• multiple-choice (more than one correct answer)
• fill-in-the-blanks (text with missing words that have to be completed)

The selfCheck element gives you some additional features:

• shuffle: single-choice and multiple-choice questions support the shuffle attribute which shuffles the answers on page reload.
• feedback: single-choice and multiple-choice questions support the feedback attribute which can be added to every answer. The feedback will be shown as a tooltip on the right hand side of the answer after the user tried to answer the question.
• solution: all question types support the solution element, which can be used to give solution tips or sample solutions. The solution will be shown if the user gives the correct answer or clicks the "Solution" button.
• synonyms: the fill-in-the-blanks question type supports adding of synonyms for any specific gap to extend the possible correct answers.
• images: all question types support the use of the <multimedia> element to include images and other multimedia content in your questions and answers.
• custom css: all question types can be customized with css.

The 'table' element (paragraph only)

You can see an example of a <table> element above where the "formatted" and other inline elements are presented. The table below presents the possible attributes of the "table" element:

A title for a 100% width table

Each table contains "tablerow" elements which themselves contain "tableheading" and "tabledata" element for each table cell (the former is used for the heading of a table and is displayed in bold). Each tableheading and tabledata element also offer most of the above elements plus the "rowspan" and "colspan" attributes for spanning over rows and columns.

The 'term' element (paragraph and inline)

The <term> element is used to reference glossary terms. If you want to talk about Cascading Style Sheets or about XSLT and you entered the definition of this term in the <glossary> element/part of the lesson, you can reference it within a text. The definition of the term is then displayed as a mouseover element (whose display again is defined in the elml.css file).

Sometimes we might want to have a glossary <term> included in a lesson not only as a reference to the glossary but as paragraph in itself. In this case we can use the element <term> and set the attribute 'representation' to 'paragraph'. Then the term and its definition is directly included within the lesson. That m look like this:

ECLASS:

ECLASS is based on Steven Gersons Guide to develop online courses. It is an abbreviation for the terms E = Entry; C = Clarify; L = Look; A = Act; S = Self-Assessment; S = Summary. Described in detail in the concept chapter. (Gerson 2000)

or another example without an icon:

eLML:

eLML, the eLesson Markup Language, is an XML framework developed by the GITTA project. The Swiss e-Learning project GITTA started working with XML in 2001 but it was only after the official ending of the project in 2004 that its XML structure was released as an open source project under the name of eLML. For more information read the implementation chapter or visit www.eLML.ch. (Fisler et al. 2005)