• The 'annotation' element (special - default=block)
• The 'box' element (block only)
• The 'citation' element (block and inline)
• The 'column' element (block only)
• The 'formatted', the 'indexItem' and the 'newLine' element (inline only)
• The 'link' element (block and inline)
• The 'list' element (block only)
• The 'multimedia' element (block and inline)
• The 'paragraph' element (block only)
• The 'popup' element (block only)
• The 'selfCheck' element (block only)
• The 'table' element (block only)
• The 'term' element (block and inline)
• The table of content 'toc' element (block only)
• All about alignment

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 listed according to their display possibilities

The 'annotation' element (special - default=block)

The "annotation" element is meant for containing additional information like links, images, more text etc. about a certain topic. It is a special element because its representation has to be defined by a project or else you won't see any difference to a normal paragraph. This means, by default, the content of an annotation element will be displayed as a normal paragraph as you can see below. You have to create a special (e.g. two column) layout and define that one column contains the content and the second column contains all the annotations to really be able to use the potential of this element. As you can see in the following example, the annotation element is transformed as an DIV tag in HTML with the CSS class called "annotation". Check out the source view of the following paragraph:

To see one implementation of the annoation element just hoover over the above button and you should see the annotation in a seperate floating window on your left (check out the UZH layout version to see this effect in another layout). A second possibility especially when using YAML would be to include the annotation content within a separate third column.

You can include any content you like into the annotation: text, tables, lists, images, movies etc.

The 'box' element (block only)

This box-title is always within the box

The <box>. element is presented using a DIV tag. The exact layout is defined in the CSS file. Please note that boxes can have titles and icons (like the remark icon used in this example). A box can contain nearly all content elements, with the exception of the "column" element that can only be used on the "top" level of the content elements (right after a structural element like "clarify", "entry" etc.).

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 (block 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 block or inline representation, 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 block it can contain the attribute icon set to remark, question or important. If the representation attribute is set to inline 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 (block 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 www.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 (block 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 block element right next to each other (siblings). 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 block the attribute icon can be used to set one of the icons (important, remark or question).

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

The 'list' element (block 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 (block 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 block (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, the text is floating around the image. If an image is used as block element, 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, 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 with legend and bib-ref (Bleisch et al. 2005)

<multimedia src="../image/test.jpg" type="jpeg" align="right" width="200" units="pixels" legend="Test image with legend and bib-ref" 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.

Test animation with legend and thumbnail

<multimedia src="../multimedia/testAnimation.swf" type="flash" align="center" width="200" units="pixels" thumbnail="../multimedia/testAnimation.gif" legend="Test animation with legend and thumbnail">

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="Test animation with legend and bibliography reference">

The 'paragraph' element (block only)

The <paragraph> element is used to write normal paragraphs. It offers 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 (block 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 (block 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 (block 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:

Example of 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 (block 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. The script eLML uses for this effect is Walter Zorns Tooltip JavaScript. This script is highly customizable (color, font, size, behaviour etc.). Read the detailed instructions for more information.

If you want to have a glossary <term> included in a lesson not only as a reference to the glossary but as paragraph in itself you can use the element <term> as a block element and the term and its definition is directly included within the lesson. An example:

eLML:

eLML, the eLesson Markup Language, is an XML framework developed by the GITTA project. The Swiss eLearning 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)

The table of content 'toc' element (block only)

The <toc> element is used on every page of this documentation at the beginning to show a table of contents of the actual page. The <toc> elements offers two attributes:

1. scope: Defines the scope of the inserted table of content. Can either be "lessons" (only if a course with multiple lessons is transformed), "lesson", "unit" or "learningObject". In the latter case the titles of each clarify, look or act element within the actual learningObject are shown, a level of depth that the normal eLML navigation does not offer! This option was used within this documentation.
2. recurse: If set to "yes", the table of content will be shown with two levels of depth (e.g. lessons and units or units and learningObjects etc.). Default is "no" meaning that only the actual scope selected is shown.