HCI-ET: Sozopol '97, Hypermedia Courseware


On the Development of the hypermedia courseware on the Web

Pasi Häkkinen, Kari Suomela
Tampere University of Technology
Department of Mathematics, Hypermedialaboratory
PO Box 692
FIN-33101 Tampere, Finland
e-mail:{pasi.hakkinen, kari.suomela}@cc.tut.fi

Abstract

This paper presents some technical issues concerning production of WWW courseware. In particular, conversion of existing material in Microsoft Word and LaTeX formats into HTML will be discussed. Some ideas for automatic linking and interactive exercises as well as experiences in converting QuickTime animations into stream-based format will be presented. The paper is based on the experience that the authors have gained during the construction of three existing WWW-based courses: Matrix Algebra, Introduction to University Mathematics, and Basics of Hypermedia.

Background

The Web offers platform independence and easy distribution over a wide geographic area. Tampere University of Technology (TUT) offers quite extensive computer and network facilities for our students and staff. Therefore, network bandwidth capacity does not form a bottleneck in distributing Web-based course material. The first Web course was produced in mid-nineties in our Hypermedia Laboratory. Some of the tools we use are shareware or public domain, while others have been written by us to meet our specific needs.

The source material should be properly structured, e.g., in Word format the styles should be used consistently and comprehensively. Source material that is written carelessly or only layout in mind decreases the conversion quality. This is often the case with text that is originally intended for paper publication [1].

Assuming the source material is well-structured, our conversion process consists of four steps:

1. Use latex2html or rtf2html converter

2. Edit index file

3. Generate links

4. Make files available in the Web

Our work is supported by Academy of Finland, Finnish Ministry of Education and Tampere University of Technology.

Courses

So far Hypermedia Laboratory has produced three Web courses: Introduction to University Level Mathematics (IULM), Matrix Algebra (MA), and Basics of Hypermedia (BH). We chose these courses because we knew the subject matter and the course material was written by us, thus removing any copyright problems.

The conversion process described works also in other domains.

IULM is the most popular of our Web courses. It is intended for students entering the university that do not have sufficient skills in mathematics. After taking the course, a student's mathematical knowledge should be at high school senior class level. The course has also been tested in one of the high schools in Tampere area.

The Matrix Algebra course teaches the basics of linear algebra. MA was our first trial in transforming material from paper format into Web.

BH was lectured for the first time during autumn 1996. We had no existing material, so everything was created from scratch. One of the three authors used LaTeX, another used Word and the third chose to write HTML directly. The course material was built for Web and is available only in that format - quite natural for a Hypermedia course.

All three courses have a selection of problems from previous examinations for practicing. For the same purpose, IULM also contains problems from high school final examinations and university entrance examinations from previous years.

Conversion

Microsoft Word files

Rich Text Format (RTF) [2] was developed by Microsoft as an open format for exchanging documents between Microsoft Word an other word processors. We use the RTFtoHTML package [3] when converting Microsoft Word files to HTML files. Although there is software for converting native Word files directly into HTML format, we decided to use RTFtoHTML because the program is easily modifiable to meet our special needs.

IULM and MA were written with Microsoft Word. Details of the conversion process are described in [4]. A recently added feature of RTFtoHTML not described in that article is the automatic conversion of Word indexes. Using Word commands, the author marks definitions and other words in text that he wants to have in the index. The converter creates a separate file from the Word index that can then be used in the linking process.

Proper use of styles in Word documents is essential for a successful conversion process. Headers, body text, URLs and other logical entities should be marked using appropriate styles. A selection of such styles is collected in a Word template file that is used by the authors and maintainers of the courses.

LaTeX files

We use latex2html [5] for converting LaTeX files into HTML format. LaTeX is the archetypal publishing tool for mathematical texts, and the converter has support for equations. Equations are output as either GIF images or HTML 3.0; at the moment the only browser that supports HTML 3.0 mathematical extensions is Arena [6].

As mentioned earlier, BH is written with three different tools. The HTML layout looks slightly different depending on the source format, which, of course, does disturb the reader to some extent.

Automatic linking

In the MA course, the targets of the automatically generated links are concept definitions. They are stored in separate definition files, one concept per file. In the IULM course, the targets are also concept definitions. They are, however, contained within the same HTML file as the references itself. The author marks the concepts as Word index entries. The automatic linking tool looks for occurrences of such words in the HTML file and cross-links them to the locations where they appear as index entries. The latter alternative is easier to implement, but it also requires that the author has marked the concepts properly.

The index files produced by the RTFtoHTML converter are processed by a filter that removes all non-essential information and leaves only the actual hot word and the link target. The resulting file, called the link file, consists of lines in the following format:

matrix -> http://machine.org/ma/defination/matrix.html

vector -> http://machine.org/chapter1/section2.html#vector

The leftmost column lists the hot words, the arrow is merely a visual aid for the human reader, and the rightmost column lists the corresponding link targets.

Finnish is an inflected language, for example, nouns have 16 cases. An additional complication is the changing of word stems. See, for example tapa, "manner", vs.

tavoissaan, "in their manners". This is a major problem for the automatic linker.

There are two basic solutions. First, we can list the hot words in every inflected form in the link file as a regular expressions. We have written a program called Linktool that searches the HTML text for occurrences of these word forms and links them to their targets.

A better solution is based on a program created by a Finnish company specializing in commercial language software. The program is called Morfo [7], and it is able to break down even the toughest Finnish words into their basic morphological components. This also gets around the problem of comparing word forms that look very similar or exactly the same, but nevertheless originate from totally different base words. Furthermore, Morfo can also analyze complete sentences grammatically, which further improves the quality of automatic linking.

Other material

The dynamic and interactive properties of Web pages offer a range of possibilities that are beyond the capabilities of paper textbooks. For example, the student can test his understanding of the subject matter using interactive exercises or watch animated illustrations of problem solving techniques.

Interactive exercises

Both IULM and MA courses have some interactive exercises built on Mathematica [8], a software package for symbolic mathematics. The Web page front-end sends the expression to evaluate via a CGI script to the Web server, where it is forwarded to the Mathematica engine [9].

Matlab [10] is a package for numerical calculations, especially for linear algebra. We have experimented with Matlab in the Matrix Algebra course using it the same way as Mathematica.

Java [11] is ubiquitous. The MA course contains an experimental Java applet that displays a matrix that the student is then requested to classify as singular, diagonal, symmetric etc. Java offers endless possibilities for simulations and animations. Java is run locally, which decreases the bandwidth requirements. Java is also platform-independent, which is a major asset in a heterogeneous environment like ours.

SSI Support

Many Web servers (e.g., NCSA [12] and Apache [13]) can be configured to support Server Side Includes (SSI). SSI offers a kind of macro capability that makes certain

tasks a lot easier. A HTML page using SSI contains special commands disguised as comments. The server replaces the commands either with their output or with the contents of a file. The example below displays the current time, the contents of the file text.html and finally the last modification time stamp for the HTML file.

<html>

<title>SSI Example</title>

<body>

<!--#exec cmd="time" -->

<!--#include file="text.html" -->

<!--#flastmod -->

</body>

</html>

SSI increases server load, so it should be used with caution.

We have used SSI in building exercises. The exercises are modular: they contain the actual problem, links to prerequisite concepts, some hints and finally the solution. Different parts are visible according to the student's choice.

Figure 1. An exercise made with SSI.

The communication buttons are included in using SSI - this makes creating communication bars with uniform looks easy.

Communication

The communication methods in our Web courses are e-mail between the teacher and students, a bulletin board (BB) that is open to students participating the course, and a real-time chat channel intended for class room environment. At the end of each HTML page there is a communication button bar from which these functions are accessible.

Video and Audio

In our Web courses, animations are presently used for illustrating solutions to problems, very much like a teacher would do using blackboard and chalk. The student sees an animation with a paper-and-pencil solution with a white background, pencil and a hand. A narrative audio track explains the solution as the pencil works through the problem. Regular video effects, e.g., different cuts, are used to enhance the presentation.

Images containing sharp contrasts, for example, black text on white background, are not very well suited for video compression.

Quicktime animations

Animations are created with Macintosh using Adobe Premier in Apple's Quicktime format [14]. The duration of the animations varies from 1 minute to 3 minutes and the size ranges from a couple of megabytes to 40 megabytes. With modem speeds (typically 28 kbit/s) it takes several minutes to load an average animation file and the largest ones take hours. Earlier, this caused problems as older Quicktime versions required the entire animation be loaded before it could be displayed. Animations are played using a browser plug-in embedded in a HTML page or a separate helper application in a pop-up window.

Some browser plug-ins support pseudo-streams. This means that browser can start playing a Quicktime animation before it is completely loaded. Regular Quicktime movies must be processed by a special filter program to enable this support. A public domain program for such processing is, e.g., Internet Movie Tool program [15].

The quality of Quicktime animations is usually good, but this is in exchange for rather large video files. Quality reduction decreases file size, but reasonable space savings would make the animations useless. This is due to the low rates of Quicktime compression algorithms: they are inteded for use in Local Area Network (LAN) or faster environmants. To serve ISDN and modem users (28 kbit/s or more) we must find other methods for animation distribution.

Another way to distribute hypermedia courses is CD-ROM. Even large animations load fairly fast from a CD-ROM. We have produced a CD-ROM for IULM and MA. Connection to Web server is needed only for interactive exercises.

Stream-based animations

Figure 2. RealVideo animation embedded in an HTML page.

Stream-based animations offer a good solution for low-bandwidth connections. Such an animation is displayed at constant frame rate as it is downloaded. The animations are created by converting a AVI file into a stream format. This means that our Quicktime animations had to be converted into AVI using Adobe Premier. The resulting files are stored on a video server and sent over network from there.

At the moment there are products that are able to transmit real-time video over modem-speed connections. The quality of picture depends on the compression rate used. Using the best compression algorithms, the quality is sufficient for the animations we currently use in our Web courses.

We have tested the following packages: RealVideo [16], VivoActive [17], StreamWorks [18], VDOLive [19] and Vosaic [20]. They all use Video for Windows (AVI) as source format for compression; StreamWorks accepts only M-JPEG AVI files.

After testing we chose RealVideo and VivoActive. The decisive criterion was the compression method: both packages are capable of handling black text on white background with sufficient sharpness. Our animations contain a lot of such material, and this material is a major source of problems for most conversion algorithms. Using modem speeds, the image quality is reasonable but the frame rate is low (1 fps).

References

1. Roy Rada, Converting a Textbook to Hypertext, ACM Transactions of Information Systems, 10(3), pages 294-315 July 1992

2. Microsoft Corp, RTF, ftp://ftp.primate.wisc.edu/pub/RTF

3. Chris Hector, RTFtoHTML converter, available at http://www.sunpack.com/RTF/

4. Eero Pantzar, Seppo Pohjolainen, Heli Ruokamo-Saari, Jarmo Viteli (eds.),Theoretical Foundations Applications Modern Learning Environments, Tampereen yliopisto, J[Sinvcircumflex]ljennepalvelu , Tampereen yliopiston tietokonekeskuksen julkaisuja n:o 2, 1996

5. Nikos Drakos, From Text to Hypertext: A Post-Hoc Rationalisation of LaTeX2HTML, First International Conference of the World-Wide-Web,Cern at 1994. Available at http://cbl.leeds.ac.uk/nikos/ tex2html/doc/latex2html/latex2html.html

6. W3C World Wide Web consortium , The Arena Web Browser, Available at http://www.w3.org/pub/WWW/Arena/beta-3

7. Kielikone, Morfo, http://www.kielikone.fi

8. Wolfram Research, Mathematica, http://www.wolfram.com

9. Kostadin Antchev, Markku Luhtalahti, Jari Multisilta, Seppo Pohjolainen, and Kari Suomela, A WWW Learning Environment for Mathematics, Fourth International World Wide Web Conference Proceedings, December 11-14, Boston, pages 251-258, 1995

10. MathWorks, Matlab, http://www.mathworks.com

11. Sun Microsystems, Java, http://www.sun.com/java

12. NCSA HTTPd Development Team, http://hoohoo.ncsa.uiuc.edu/

13. Apache HTTP Server Project, http://www.apache.org

14. Apple Computer, Quicktime, http://quicktime.apple.com/

15. Apple Computer, Quicktime Internet Movie Tool, http://quicktime.apple.com/dev/devweb.html

16. Progressive Networks, RealVideo , http://www.real.com

17. Vivo Software, VivoActive , http://www.vivo.com

18. Xingtech Technology, StreamWorks, http://www.xingtech.com

19 VDOnet, VDOlive , http://www.vdolive.com

20. Vosaic, Vosaic , http://www.vosaic.com