Courseware.com — the smarter way to learn

More and more people are comfortable with using the Web for entertainment, news and business. The Web provides an excellent vehicle for people to pick up new skills or to hone old skills via Web-based learning materials. Courseware.com is an imaginary company providing a hosting service that allows clients to develop and deliver Web-based learning materials. Students enrol for courses either for free or for a credit card based payment. Courseware.com also licenses its software to companies who wish to run the same service on their intranets for their internal training needs.

Learning materials

Courseware.com supports the following:

• Structured reading materials
• Animation via animated gifs, dynamic html or Java
• Slide shows with accompanying sound track (html + real audio)
• Training videos (real video - bandwidth permitting)
• Printable materials via pdf
• Self assessment via multiple choice questions
• Live chat sessions with course tutors
• Discussion forums for students following the same courses
• Submitting essays to tutors

Developing and Running Courses

Courseware.com makes it easy to develop learning materials using your Web browser without the need for learning how to master complex proprietary authoring packages. You can enter text and images using your Web browser and see how it appears in place. This is supported via a blend of dynamic HTML, Java applets and dynamically generated pages.

The developer environment allows you to outline your course as modules and units, and to manage its development by a distributed team, for instance tracking when a unit is due, who last edited it and when. You will often want to use external specialists to create graphics and audio-visual materials. Courseware.com's developer environment can help you plan and manage the provisioning of such content. We can even put you in touch with audiovisual consultants in your area.

Once your course is open for business, you can track who has registered for the course, and their performance in self assessment tests (subject to privacy concerns). Courses can be offered on an open basis where new students can register at any time. You can also schedule courses to start at a specified date and to run for a specified period. Courseware.com can help you to attract students via our pages of course summaries.

Developer Environment

The following screen shot gives you a rough impression of what the Courseware.com developer environment would look like. This is of course just a screen shot of Internet EXplorer with the Favorites shown as a tree view in a split screen presentation.

The left window shows a tree view of the way the course is arranged into modules, units and lessons. It looks very similar to the way Windows shows the hierarchy of file directories. You can open and close levels in the hiearchy and inspect their properties in a pop-up dialog. The right window shows the lesson being worked on. Below it, there is an editing toolbar. This is implemented as a set of HTML frames tied together with scripting.

How it works

This section will explain the machinery that Courseware.com needs to implement to support its course development and hosting service.

On the server, Courseware.com operates a database that covers information about course developers, courses and registered students. Server-side programs generate Web pages dynamically from this database. Cookies are used to identify developers and students, allowing the server to customize pages accordingly without the need for logging in at the start of each session.

On the browser, Courseware.com exploits dynamic html to create an attractive and easy to use interface for both developers and students. This allows you to update content and see the results dynamically using a combination of forms and scripting.

Editing slide sets

One example is an editing interface for creating a series of slides. You start off by clicking on the image of the template you wish to use from a catalog of thumbnail images. This sets the background and the colour scheme. You type the title for a new slide into a form field and hit a button. It is then inserted dynamically into the page before the form field. This step is repeated as many times as needed to create a series of bullet points below the title. Other buttons allow you to move between slides, and to insert and delete slides. HTML Frames can be used as appropriate to separate the editing controls from the content.

Editing tables and graphics

Other buttons can be used to invoke wizards for creating tables or graphics. The general principle is to rely on scripting where practical, and otherwise to exploit Java. A table wizard for Internet EXplorer can be built using scripts to intercept mouse clicks and to dynamically build the table in place in the html document being viewed. A simple graphics editor, similar to the one integrated into Microsoft's PowerPoint, can be implemented as a Java applet. The graphic can be converted into a GIF, PNG or JPEG image at the server.

Dynamic notifications of changes

Some changes to the page can be implemented without the need to reload the new version of the page from the server. The server still needs to be informed of the changes, and one way to achieve this is to use a hidden Java applet that holds open a network connection with the server for passing notifications. This can't be done with scripting along, as currently JavaScript and JScript have limited direct support for networking (what about VBScript?).

In a distributed collaborative authoring enviroment, you may be interested in seeing what changes other people are making, as they are making them. The Java applet used to notify changes to the server can, in principle, also listen for updates due to changes made by other authors. If two or more people make clashing changes, the server can detect this and notify them accordingly — a simple strategy is to roll back to the last consistent state.

Working around the limitations of Netscape Navigator

One issue is the limitations of dynamic html support in Netscape Navigator version 4 and earlier. Navigator doesn't support smooth changes to the page, such as adding a new row to table or altering the text in a span element. A work around is to create a new page and load that in place of the current page. This can be done under script control without the need to involve the server.

Navigator 4 also suffers from a weak suport for style sheets. This can be dealt with by careful use of CSS to avoid known problems. If necessary, the server (and/or scripts) can examine the HTTP client request to check for Navigator and to modify the page it generates appropriately.

Some pointers ...

To see some of these techniques in action take a look at:

• www.moszquito.org which compiles an XML based markup language for dynamic forms into JavaScript/JScript that works well both IE and Navigator.

• Experimental smart Web form which uses an object-oriented, model-view-controller paradigm to separate the forms user interface from its underlying data. This shows how to smoothly add rows to tables and how to update the text in span elements. It makes use of a linked script library. Note this only works properly in Internet Explorer.

• HTML tutorial which ends with examples of how to use scripting for roll-overs and banner ads.

• CSS tutorial which covers ways to use CSS that works well on both Navigator and Internet Explorer.

There are many other sites offering advice on scripting which can be tracked down via search engines such as www.google.com.

Dave adds, that he is willing to develop a few examples of the scripting techniques needed for editing courseware, but this would take a long time due to the pressure of other work!

Dave Raggett, 31st March 2000