Basics

This section looks at the basics of working with courseGenie.

Pages

You mark the start of a new HTML page by applying the cgPageTitle style to some heading text. This also sets the title of the HTML page.

For example, if you apply the cgPageTitle style to four headings in your document, courseGenie will generate four HTML pages with navigation controls on each page, and an index page linking to the four pages.

Word page breaks have no effect on the generated output, but you can use them to make the source document more readable.

Sections

If you have a large Word source document that will translate into many pages of HTML, you may want to divide it into Sections. In the generated HTML pages, the Index page and the Navigation bar will display a two-level menu with Page titles indented from Section titles.

The best way to think of a section is as a level 1 page, with normal pages as level 2 pages:

Section Ao Page 1o Page 2o Page 3

Section Bo Page 1o Page 2o Page 3

Section Co Page 1o Page 2

You mark a section in a similar way to marking a page, by applying the cgSectionTitle style. You can put content in a section - for example some introductory text for that section.

You can control the way Sections and Pages are displayed using the Settings dialog box. For example if you have a great many pages you may want to only display the Section headings in the Navigation bar.

Headings

You format headings, captions and body text by applying the cgHeading, cgSubheading, cgCaption and cgBodyText styles.

The way the headings appear in the generated HTML pages is determined by a CSS stylesheet which is located in the Config directory.

This is a Heading

This is a subheading

This is a caption

Special Characters

Special Characters

All these special characters are converted automatically:

« » € & $ ¡ £ © ® ° ± ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß

à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

Angle Brackets

The angled bracket characters (usually used as less than and greater than signs) have a special meaning when the document is exported to XML.

If you want to use them in your document you have to prefix them with a tilde sign ( ~ ) to show that they are meant literally.

For example to say ‘If x is greater than y‘ you would use:

If x ~> y

To say ‘income is less than expenditure’ you use:

income ~< expenditure.

Word Formatting

Much (but not all) Word formatting is automatically converted:

Formatting Whether convertedBold, italic and underline yesSubscripts and superscripts yesEmbedded images yesDrawn objects noParagraphs yesLine breaks yesTabs and indents noBulleted lists yesNumbered lists yesTables yesHyperlinks and bookmarks yes

Tabs and indents are supported only within text formatted as cgLiteral.

Nested tables are supported, but not merged cells. Cell alignment, and whether the table has visible or invisible borders, will be picked up.

Images

Many, but not all, types of images and clipart will be automatically converted by courseGenie.

Word distinguishes between different kinds of images, and you need to be aware of these in order to make effective use of them with courseGenie:

Images may be Embedded or Linked.

Images can be Inline or Floating.

Images can be Painted images or Drawn images.

Embedded and Linked Images

When you add an image to a Word document, it can be either embedded or linked.

CourseGenie converts embedded images but not linked images.

Embedded imageAn image that is stored inside the document with no reference to any external file.

Linked imageAn image that remains outside the document, with a pointer in the document linked to the external image file.

If you insert an image into a document in the normal way using Insert/Picture/From File.. , the result will be an embedded image unless you specifically set it to be linked.

If you copy and paste an image into a document, the result will be an embedded image.

All the images in this document are embedded.

Inline and Floating Images

Images in Word can be either Inline or Floating. CourseGenie will convert both types, but Inline images are much easier to deal with.

Inline imageAn image that is embedded at a fixed point in the text. This kind of image behaves as though it is a very large text character.

Floating imageAn image that can be dragged around the page at will, with text flowing round it. Although it can be moved around, a floating image has an anchor point in relation to which its position is measured.

You can tell whether an image is Inline or Floating by selecting it. Inline images have solid selection handles, while Floating images have hollow selection handles.

An inline image

Above is an inline image. This is the easiest type of image to use.

A floating image

On the left is a floating image. The main reason for using floating images is to get images and text side by side like this.

However, you need to be very careful when using floating images. They will be positioned at the anchor point of the image, and it is not easy in Word to know where that is.

See the Reference document for more details.

Painted Images and Drawn Images

CourseGenie automatically converts Painted images, but not Drawn images.

Painted imageA Painted image is made up of a series of small dots like a mosaic. This type of image is used for photographs and scanned graphics. They are often saved with a .bmp, .jpg or .gif extension.

Drawn imageA Drawn image is constructed from a collection of lines, curves, rectangles and other shapes. The shapes that make up the image can be grouped and ungrouped. Autoshapes and images that you make from lines and boxes in Word are drawn images.

If you have a Drawn image in your document, you must convert it to a Painted image in order for courseGenie to recognise it.

A simple way to do this is to: select the Drawn image (making sure you select all the component

shapes if they are not grouped) from the Edit menu choose Cut from the Edit menu choose Paste Special... choose Picture (GIF) then press OK

Clipart

Most word clipart consists of scanned graphics which are Painted images and will be recognised by courseGenie.

You may come across some clipart that consists of Drawn images and needs converting as shown on the previous page.

You can tell which type you have by looking at the selection handles after you have inserted the clipart into Word. If they are solid, you have a Painted image, while if they are hollow, you have a Drawn image.

Example of scanned graphics clipart

Images and Accessibility

Setting alt textYou should always enter alt text for images as this is a simple and effective way of improving the accessibility of your content.

To set the alt text for an image: select the image from the Word menu choose Format Picture in the dialog box select the Web tab enter the alt text and click OK

Adding alt text to an image

Adding a long descriptionFor a complex image the alt text may not be enough to convey the meaning to someone who can't see the image. A standard solution to this problem is to add a "D-Link" - a hyperlinked letter D leading to a page containing an extended description of the image.

CourseGenie will create the D-Link automatically for you if you enter more than one paragraph into the alt-text dialog box. The first paragraph will become the alt text, and all succeeding paragraphs will become the long description. CourseGenie will automatically create an HTML page containing the long description and will insert immediately after the image a D-Link leading to the description page.

Adding a long description to an image

More about Images

You can resize images in Word and they will be generated at the new size.

You can make images into hyperlinks. See the Hyperlinks section for more details.

Presenting Information

This section looks at a range of styles that you can use to present information in different ways.

Display Formats

This is a standard paragraph

The climatic maps of your area should be used as rough guides only. They provide averages over many years rather than telling you the extremes of weather conditions which you are likely to enjoy during a particular year. In addition, the general climate of your region will be much modified by the factors around your garden.

CourseGenie display formatsYou can use the next three display formats to separate or emphasise text:

This is BoxText

The climatic maps of your area should be used as rough guides only. They provide averages over many years rather than telling you the extremes of weather conditions which you are likely to enjoy during a particular year. In addition, the general climate of your region will be much modified by the factors around your garden.

This is PanelText

The climatic maps of your area should be used as rough guides only. They provide averages over many years rather than telling you the extremes of weather conditions which you are likely to enjoy during a particular year. In addition, the general climate of your region will be much modified by the factors around your garden.

This is QuoteText

The climatic maps of your area should be used as rough guides only. They provide averages over many years rather than telling you the extremes of weather conditions which you are likely to enjoy during a particular year. In addition, the general climate of your region will be much modified by the factors around your garden.

You implement these by applying the cgBodyText, cgBoxText, cgPanelText and cgQuoteText styles.

The way these styles appear in the generated HTML pages is determined by a CSS stylesheet which is located in the Config directory. You can edit this stylesheet to change the way these styles are presented.

Definitions

This is a definition

WeatherWeather is the combination of rainfall, temperature, wind, sunshine and air humidity which affects your garden at a particular point in time.

To mark up a definition: type the term to be defined by itself on the first line type any number of paragraphs for the definition text apply the cgDefinition style to the whole definition

You can also use definitions to export a WebCT Glossary batch file. See the Glossary page.

Comments

Below is a comment. While this appears in the Word source document, you will not see it in the generated HTML page. You can use comments to annotate the source document.

This is a comment which is not shown in the generated course.

Literals

Literals are useful when you want to quote text including tags and indentations, for example in a computer course.

Some literal code:

<question mch1>

<text>What is the square root of 81 ?</text>

<answer>27</answer><answer>It hasn’t got one</answer><answer correct>9</answer><answer>-3</answer>

<feedback correct>That’s right.</feedback><feedback>No - try again.</feedback>

</question>

Normally this would generate a selftest question, but because it is formatted as cgLiteral the code is displayed instead.

To implement literal text apply the cgLiteral style.

The angled bracket characters (usually used as less than and greater than signs) have a special meaning when the document is exported to XML. Normally you have to prefix them with a tilde sign ( ~ ) but this is not necessary inside Literal formatting.

Hyperlinks and Popups

Hyperlinks In this section we look at some of the different ways in which you can use hyperlinks.

Hyperlinks

You implement hyperlinks using Word hyperlinks and bookmarks.

This is a hyperlink to a page on the web

See this well-known search engine

To make a hyperlink to a page on the web: select the text to be hyperlinked from the Word menu choose Insert/Hyperlink in the dialog choose Existing File or Web Page type in the URL to which you want to link

This is a hyperlink to a place in this document

See Question 3 in the selftest

To make a hyperlink to a place in the document: insert a bookmark at the place you want to link to

o type the name of the bookmark into the texto select ito from the Word menu choose Insert/Bookmarko type the bookmark name againo click Addo the text appears in square brackets

hyperlink the text to the bookmarko select the text to be hyperlinkedo from the Word menu choose Insert/Hyperlinko in the dialog choose Place in This Documento choose the bookmark you have just created and click OK

This is a hyperlinked image

You can create hyperlinked images in exactly the same way. Instead of selecting text, just select the image to be hyperlinked.

Popups

This is a hyperlink to a popup window

The climatic maps of your area should be used as rough guides only.

…and this is the popup window:

ClimaticMaps

They provide averages over many years rather than telling you the extremes of weather conditions which you are likely to enjoy during a particular year. In addition, the general climate of your region will be much modified by the factors around your garden.

To make a hyperlinked popup:

insert a bookmark (type the name of the bookmark into the text, select it, then Insert Bookmark - the text appears in square brackets)

press Enter then type the text to go in the popup select the the bookmark and the popup text and apply the cgPopup

style to them

To create a hyperlink that will activate the popup:

select the text or image to be hyperlinked from the Word menu choose Insert / Hyperlink in the dialog choose Place in This Document choose the bookmark you have just created and click OK

This is a popup showing an image

Show the image popup.

ImagePopup

<caption>The shed</caption>

<size>medium</size>

You can put an image in a hyperlinked popup. Just apply the cgPopup formatting as in the normal popup, but this time include an image.

Note that you can add a caption to an image in a popup, but it’s not possible to use the cgCaption style as Word doesn’t allow you to have one style within another. Instead type the caption, select it, then apply caption tags by choosing Format/Caption from the Tag Palette.

You can control the size of the popup window by creating a new blank line within the cgPopup formatting, then choosing Size/Small, Size/Medium, Size/Large or Size/Scrolling from the Tag Palette.

This is a popup containing formatting

Show the popup containing formatting.

If you want a popup containing formatting such as bullets or tables, it’s not possible to use the cgPopup style as the formatting prevents the Word style from being applied properly.

Instead type the content of the popup, select it, then apply popup tags by choosing Content/Popup from the Tag Palette.

<popup><size>medium</size>

ComplexPopup

Bold, italic and underline Subscripts and superscripts Paragraphs Line breaks Bulleted lists Numbered lists Tables Hyperlinks and bookmarks

</popup>

This popup has been set to size medium by choosing Size/Medium from the Tag Palette.

Includes

You can use an include to embed content from another web page into your course page:

A well-known search engine

To implement an include: type a short description of the content (which won’t be displayed) hyperlink it to the appropriate url apply the cgInclude style to it

If you already have web content this can be a quick way of including it in your course.

Questions and Exports

This section looks at selftest questions and at ways of exporting WebCT Quiz and Glossary batch files.

Selftest Questions

There are 15 different types of selftest question. These questions can be embedded in content, and give immediate feedback to the student.

You can build a question using the Question Palette. Place the insertion point where you want the question to go, choose a question type, then fill in the data in the question dialog that opens.

You can edit the question by placing the cursor anywhere inside the grey question block and choosing Edit from the Question menu.

Selftest questions are not scored or tracked. They are part of the learning process rather than formal assessment tools. If you want to assess and record you will need to make use of assessment tools that are part of a learning management system such as WebCT.

You can use courseGenie to generate WebCT Quiz import batch files, which will provide scored and tracked assessment. See the Quiz page.

QUESTION MultiChoice1: Effect of height on climate

QUESTION MultiResponse3: Hardy annuals

Question3

QUESTION TextEntry3: Rhodedendron soil preference

QUESTION Matching2: Effects of climate factors

QUESTION GapFill4: Climate as rough guide

WebCT Quiz

Quiz

If you generate a course in WebCT mode, courseGenie will automatically export a quiz to a WebCT Quiz batch file called [pageroot]_webctquiz.txt.

For example, if you enter in the Settings dialog a pageroot name of ‘demo’, your generated HTML pages will be called demo_1.htm, demo_2.htm, demo_3.htm etc, and your WebCT quiz batch file will be called demo_webctquiz.txt.

To implement a WebCT quiz, build the questions as normal, then select all the questions and apply the quiz tags by choosing Exports/Quiz from the Tag Palette.

To import the quiz into WebCT you need to create a Question Category called courseGenie, then import the batch file from within WebCT.

Note that in WebCT quizzes you can only use the following question types, as these are the only ones that have corresponding WebCT question types: TrueFalse1, MultiChoice1, MultiResponse3, TextEntry3, Matching2.

<quiz>

QUESTION MultiChoice1: Effect of height on climate

QUESTION MultiChoice1: Plants that prefer acid soil

</quiz>

WebCT Glossary

Glossary

If you generate a course in WebCT mode, courseGenie will automatically export a WebCT Glossary batch file called [pageroot]_webctgloss.txt.

For example, if you enter in the Settings dialog a pageroot name of ‘demo’, your generated HTML pages will be called demo_01.htm, demo_02.htm, demo_03.htm etc, and your WebCT quiz batch file will be called demo_webctgloss.txt.

To implement a WebCT Glossary, first apply the cgDefinition style to each definition in the normal way. Make sure the style is applied to each definition separately. Then select all the definitions and apply the glossary tags by choosing Exports/Glossary from the Tag Palette.

<glossary>

ClimateClimate is the summary of the weather which is likely to affect your garden throughout the year.

Weather Weather is the combination of rainfall, temperature, wind, sunshine and air humidity which affects your garden at a particular point in time.

WindWind is a movement of air due to pressure changes.

Air humidityAir humidity is the amount of water in the air.

Sunshine Sunshine is solar radiation.

</glossary>

Media

In this section we see how easy courseGenie makes it to include Flash movies, audio and video.

Flash

A Flash Movie

MEDIA: flash

To implement Flash movies: place the insertion point at the place where the flash movie is to be

inserted choose Media from the courseGenie menu choose Flash for the media type click the Browse button and find the Flash file make sure the Autostart checkbox is checked if you want the flash

movie to start playing as soon as the HTML page opens click OK

In the courseGenie Settings dialog there is an option to automatically copy media files to the output directory. To make this happen:

choose Settings from the courseGenie menu go to the Contents tab make sure the ‘Copy media files…’ checkbox is checked

You can edit media data by placing the cursor anywhere inside a media block, then opening the Media dialog from the courseGenie Menu.

Streaming Audio

A RealAudio clip

MEDIA: realaudio

To implement RealAudio: place the insertion point at the place where the audio is to be inserted choose Media from the courseGenie menu choose RealAudio for the media type click the Browse button and find the RealAudio file make sure the Autostart checkbox is checked if you want the audio to

start playing as soon as the HTML page opens click OK

In the courseGenie Settings dialog there is an option to automatically copy media files to the output directory. To make this happen:

choose Settings from the courseGenie menu go to the Contents tab make sure the ‘Copy media files…’ checkbox is checked

You can edit media data by placing the cursor anywhere inside a media block, then opening the Media dialog from the courseGenie Menu.

The media formats supported are RealMedia, Quicktime and Windows Media.

Streaming Video

A Windows Media video clip

MEDIA: winmedia

To implement RealVideo: place the insertion point at the place where the video is to be inserted choose Media from the courseGenie menu choose RealVideo for the media type click the Browse button and find the RealVideo file make sure the Autostart checkbox is checked if you want the video to

start playing as soon as the HTML page opens click OK

In the courseGenie Settings dialog there is an option to automatically copy media files to the output directory. To make this happen:

choose Settings from the courseGenie menu go to the Contents tab make sure the ‘Copy media files…’ checkbox is checked

You can edit media data by placing the cursor anywhere inside a media block, then opening the Media dialog from the courseGenie Menu.

The media formats supported are RealMedia, Quicktime and Windows Media.

Output

In this section we look at ways in which you can control the output of courseGenie.

Metadata and Settings

Metadata

You can enter metadata for the course by choosing Metadata from the courseGenie menu.

You should make sure you enter a Title, as this is used as the course title at the top of each generated HTML page.

Settings

The course settings can be accessed by choosing Settings from the courseGenie menu.

Here you can set the root name for the generated HTML pages. For example, if you enter a pageroot name of ‘demo’, your generated HTML pages will be called demo_01.htm, demo_02.htm, demo_03.htm etc.

You can also control whether or not navigation buttons and a leftbar menu should be shown on every page, and specify a footer that will be displayed on every page.

Export Modes

In the Settings dialog you can set the export format to one of these five options:

Normal HTML pagesIn normal web page mode, generated web pages are output as plain HTML and Javascript. The resulting zip file will have a suffix of _HTML.

Blackboard packageIn this mode a zip file is generated which can be imported into Blackboard as a Blackboard Unpackage file. The resulting zip file will have a suffix of _BB.

WebCT IMS packageIf you are using WebCT v4.0 or later with the Content Migration Utility v2.0 or later, this mode provides a quick way of importing generated content and automatically creating a Content Module. The resulting zip file will have a suffix of _IMSWCT.

LRN IMS packageThis mode generates pages in Microsoft's Learning Resource Interchange (LRN) Format. Pages are exported as plain HTML and Javascript, along with an IMS manifest file called imsmanifest.xml. Using the freely available Microsoft LRN Toolkit you can open this manifest file and view or edit the course as a collection of learning objects. The resulting zip file will have a suffix of _IMSLRN.

SCORM 1.2 packageIn this mode the set of generated HTML pages is packaged as a single Shareable Content Object (SCO). A SCORM container, cgstage.htm, and an IMS manifest file, imsmanifest.xml, are automatically generated. The resulting zip file will have a suffix of _SCORM.

Customising Course Output

You can customise many aspects of the appearance of a course by editing the CSS and XML stylesheets in the Config directory. The files are:

cg.css - CSS stylesheet styles.xml - XML stylesheet containing some settings

And finally…

While Word can be simple to use, it is a complex editing environment that is inserting hidden codes all the time you are editing a document. Once a document has been edited a number of times, often quite dense (and hidden) patterns of formatting changes can build up.

If you have problems, start by turning on visible formatting marks, then remove formatting such as bold, italic, tables and lists and re-apply it cleanly.

CourseGenie tests for well-formed xml when you generate a course, and if there are problems you will see an error message indicating the source of the problem. The line numbers refer to the exported XML file, not the Word document, and the easiest way to track down the problem is usually to copy the problem text then do a search on it in the Word document.