Kjell Type CAI Tutorial

Bradley Kjell's "home brew" tools for making a programmed learning HTML Tutorial may be downloaded from Kjell's web site. The following description is lifted directly from his "readme.htm" file.

What is CSSMaker?

CSSMaker creates a linked sequence of Web pages that together form one chapter of a Web-based instructional sequence. The input for CSSMaker is a text file (called a source file) that may be created with any text editor. The source file contains ordinary HTML markup tags and other tags that are specific to CSSMaker. These specific tags demarcate sections of the source that are to form separate Web pages and sections within each Web page.

The source file follows a loose XML grammar. But since an XML parser is not used, you can be sloppy with the grammar. However the idea similar to a modern XML-based application: the data consists of XML tags and content, the program parses the data and extracts the data, then the program creates its output. The output for this program is a sequence of HTML files.

The advantage of this program is that you can create and edit the source file, an ordinary text file that contains all of your content. This program then breaks it up into the Web pages the user will see. The boilerplate HTML is added to these pages and they are linked together automatically. Rearranging the material, changing the HTML, and other tasks is easily done with the source file. A new set of pages is easily generated after each change.

What is New in this Version?

This (January 2003) version of CSSMaker has improved file navigation over the previous version. Basically, the previous version was a quick hack done so the Web pages used Cascading Style Sheets. This version is almost classroom quality (but still far from industrial quality).

What is in this zip Archive?

This archive consists of the files:

1. readme.html --- this file
2. contents.gif --- an icon useful for Web pages
3. Chapter.java --- part of the source code
4. CSSMaker.java --- part of the source code
5. Lesson.java --- part of the source code
6. mystyle.css --- example style sheet
7. sampleSource.xml --- sample input data

How is the program run?

The sample input data is for chapter one of the on-line Java tutorial at http://chortle.ccsu.edu . Compile the Java source code, then run the program by typing java CSSMaker at a DOS prompt. Enter sampleSource.xml in the text field for source. Enter something like page_1.html in the window for example output file name. The program will change your example name to page_ and then, when you click the Make Pages button will create page_1, page_2, page_3 and so on.

The Confirm Files button merely writes the names of the input file and the output file(s). It is useful to click it to check what you are about to do, but this is not required.

What is the grammar of the Source File?

The best way to see how source files look like is to look at sampleSource.xml and the pages it creates. The unfamiliar tags are the ones specific for CSSMaker. All application tags must be in capitals. Most application tags must start in column one of the source file.

<CHAPTER>

This tag starts the entire chapter. It should be by itself at the start of one line.

<COPYRIGHTDATE>2002</COPYRIGHTDATE>

These tags should occur at the start of the chapter. They must be on only one line. They contain the copyright date that will be put in each Web page.(optional)

<COPYRIGHTHOLDER>Your Name</COPYRIGHTHOLDER>

These tags hold the name of the copyright holder (probably you), which will also be placed in each Web page. They must be on only one line. (optional)

<AUTHORNAME>Your Name</AUTHORNAME>

These tags hold your name and e-mail address. They must be on only one line. (optional)

<STYLESHEET>mystyle.css</STYLESHEET>

These tags hold your the name of the style sheet. They must be on only one line. (optional) A default will be supplied if you don't list one. Make sure that the directory that holds the pages has a copy of the default style sheet.

<NEXTICON>nextButton.gif</NEXTICON>

These tags hold the name of the image file that is used for the "next" button.

<CAI>Title

This tag marks the beginning of one Web page. It should be at the start of one line. The "Title" is everything until the end of line. It becomes the title and heading of the Web page.

<ANSWER>

This starts the material that becomes the answer section of the Web page. This tag should be by itself at the start of a line.

</ANSWER>

This starts the material that becomes the answer section of the Web page. This tag should be by itself at the start of a line.

<LESSON>

This starts the material that becomes the lesson section of the Web page. This tag should be by itself at the start of a line. The lesson section can contain any amount and any kind of HTML markup.

</LESSON>

This end the material of the lesson.

<QUESTION>

This starts the question section. This tag should be by itself at the start of a line.

</QUESTION>

This end the question section. This tag should be by itself at the start of a line.

</CAI>

This marks the end of one Web page. This tag should be by itself at the start of a line.

</CHAPTER>

This marks the end of one chapter and the end of the input file.

There may be many Web pages. There may be many sections marked by <CAI> to </CAI>. But each section may have only one answer, one lesson, and one question, in that order.

In addition to ordinary text content and HTML markup, the lesson section can contain the tag

<INDEX>index term</INDEX>

This enters the "index term" and the current Web page into a table. Later on, the "index term" may be used to link to the Web page it was defined on:

<GOTO>index term</GOTO>

csgate@donaldson.org ICQ# 62833374