Docs:HTMLOutputHandler

Introduction

The HTML Output plugin takes the intermediate data format produced by the input plugins and converts the content into a course, integrating additional data and creating a navigation framework for the themes, modules and steps using an XML metadata file to specify dependancies and interconnections.

Output plugins can always run on the intermediate data, by definition. Hence, if there are multiple output plugins installed, you must specify which one to use, either in the configuration file or on the command line.

File hierarchy layout

The HTML Output plugin is designed to produce courses that conform to a standard structure researched, designed and developed by APEcs over the last 10 years. This structure places a nunber of requirements on your source data, in particular you must ensure that the directory hierarchy conforms to the standard given in the documentation for the input handler(s) your course material will be processed by.

Special tags

The HTML Output plugin provides a number of special markup tags in addition to those provided by your chosen authoring format input plugin. These tags may be used in all input formats. Tag attributes must be given in the form

name="value"

with literal speachmarks surrounding the value (DO NOT use ", any form of single quote, and never attempt to use typographic quotes/smart quotes). If the value needs to have an embedded ", use " in that case. All attribute names must be specified in lower case - uppercase or mixed case attribute names will be ignored.

The [glossary] tag

These are used to allow course author to create links within pages to a glossary entry defining a particular term or acronym. At least one instance of the term must be defined with definition text somewhere in the CBT:

[glossary term="Page Text"]Definition[/glossary]

'Page Text' will appear in your document as a link to the glossary entry with the specified Definition. It may include spaces and non-alphanumerics, however these may be stripped when creating anchors in the output so please ensure that you take steps to prevent clashes between similar terms.

Subsequent terms may be linked to the glossary by simply specifing the term in a closed tag with no definition:

[glossary term="Page Text" /]

Example:

This course is authored in [glossary term="HTML"]Hyper Text Markup Language[/glossary]. 
In computing, [glossary term="HTML" /] is a markup language designed for the creation 
of web pages.

The [target] and [link] tags

These tags allow the cross-linking of pages across the CBT without the need to know in advance what the output filename of the target will be. When creating pages in HTML and the Wiki, users must not rely on the a element to create links as html page names may be altered when passed through the course processor therefore breaking any such links. Users must instead specify CBT-wide unique targets for links using the [target ...] tag, and then create links to that target using the [link ...] tag.

The first step is to specify a target for links to refer to - targets may be linked to by many links, but they must be unique with the CBT. The name used in 'anchorname' must not contain any spaces e.g. replace spaces with '_'

[target name="anchorname"]

Now you can place links to that target throughout your material:

[link to="anchorname"]link text[/link]

The [clear] tag

The clear tag forces content to wrap to a new clear line when it wraps along side other content (such as an image). This allows you to have a block of text beside an image, a clear tag to force content to the next clear line and then more content below the image.

[clear /]

is replaced by the course processor to become <div style="clear: both"> </div> This is primarily intended for use in the Latex input handler, but it may appear in any input.

When developing courses in the wiki, you may just want to use the above div directly.

Deprecated special tags

The [image] tag

Used for specifying placement of images in a step. Authors creating pages in HTML or the Wiki can ignore this tag and use <img> or [[Image:]] elements directly in their content.

[img name="name" width="w" height="h" alt="text" align="text" /]

width, height are optional - if width or height are not specified then the image is included without any size information. align should be one of 'center', 'left' or 'right' and may be ommitted.

The [anim] tag

Used to specify the placement of flash animations in a step. Authors creating pages in HTML may choose to ignore this tag and place animations directly into their HTML pages, although animations (.swf files) must be placed in the correct top-level anims folder. Content authored in the wiki should use the <flash> tag instead

[anim name="name" width="w" height="h" align="text" /]

width and height are required. align should be one of 'center', 'left' or 'right' and is optional, if not specified it defaults to center.

The [local] tag

It is possible to make content appear in a popup that is opened when a user mouses over text in a step.

[local text="link text"]popup text[/local]

The normal format of this tag may be used in any input format, 'link text' appears in the step as the text the user clicks on to open the popup. 'popup text' is the text that will appear in the popup - it may contain any characters you require and any course processor tags except local, target and link.

Example:

Knock, knock.
Who's there?
Dr.
[local text="Answer"]Dr. Who[/local]

Knock, knock.
Who's there?
Dr.
[local text="Answer" src="knockknock_popup.html" /]