WebSteer: An Open Framework for Interactive Documentation and Training over the Web

Jorge H. C. Fernandes <jhcf@di.ufpe.br>
Silvio Lemos Meira <srlm@di.ufpe.br>
Universidade Federal de Pernambuco


This paper presents WebSteer: a framework for construction and delivery of interactive documentation, training, and education material over the Web. WebSteer extends the current technology of Java applets and HTML browsing by creating a highly interactive instructional setting. WebSteer is based on the laboratory metaphor in which students follow instructional modules (courseware) by interacting with informative texts and reactive instruments in a scripted environment. WebSteer allows the user to select and follow any courseware made available by providers. Courseware is composed of a (possibly open) set of HTML pages, a set of scripts, and a set of applets (instruments). The HTML pages are rendered by a special-purpose HTML browser: the Slide Projector. The instruments (applets) are laid over the Workbench and cater to the multimedia user interface. They generally simulate the workings of laboratory instruments that are manipulated by the user. The scripts are hosted in the HTML pages and written in a purpose-designed language called JetScript. This script describes how to map events that are raised by the instruments and by the Slide Projector into messages that are sent to the other instruments and to the Slide Projector.

The main differences between the WebSteer model and the Java applet model created by Sun Microsystems and supported by popular HTML browsers like Netscape Navigator and Microsoft Internet Explorer are the promotion of applets to the status of first-class Web components; and the provision of a simple, detached, and high-level event-handling mechanism between applets and HTML pages.


1 Introduction

The intense use of the Internet and of the Web for the construction and deployment of advanced, open, and long-distance instruction tools is eagerly anticipated, and is the goal of intense research [1, 2]. While many sophisticated instruction tools available today are closed systems, sharing neither content material nor interface elements with other environments [3], the Web made available a huge and shared information base that may be successfully used for construction of open education and training tools.

Although the conventional teacher-directed instruction mode relies on this figure as the didactic knowledge dispenser, the use of networking technologies for long-distance instruction cannot rely on the teacher as sole controller of the subject matter. Long-distance instruction needs independent and highly interactive construction blocks that are directly manipulated by the student but that are also controlled to some degree by teachers and course facilitators.

The recent introduction of the Java [4] programming language and of HTML browsers that support the execution of Java applets, like Netscape Navigator, provided an innovative way to deliver dynamic information over the Web. Applets are programs written in Java that can be downloaded automatically from Web servers and executed inside browsers at the user's end. The applet code is highly portable among different computational platforms and have multimedia capability, being able to manipulate images, sound, and text. An applet is hosted inside a specific HTML page, and its graphical interface is presented in a predefined area within this HTML page's display space. The ubiquitous applet technology has already produced a foundation for the construction of interactive content that is being used for education and training purposes. For example, the Gamelan directory of educational applets [5] already had approximately five hundred entries in January 1997.

Unfortunately, the standard applet technology is prevented from providing a satisfactory level of integration with HTML by the following limitations:

  1. An applet loaded in a browser is highly dependent on the specific HTML page that hosts it, the applet becoming a mere transitory process that pursues interaction with the user while it is being shown in a specific area of the HTML page that hosts it;
  2. An applet loaded in a given HTML page cannot easily communicate with applets loaded in other pages;
  3. User interactions over an HTML page cannot easily be forwarded to an already loaded applet.

The last two limitations can be partially overcome by the additional use of other browser, Web, and networking technologies like JavaScript, CGI, and interprocess communications. However, in our opinion they introduce one more element of complexity for the builder of educational content.

WebSteer solves these three problems by detaching the applet from HTML pages, and by allowing the interoperation between an arbitrary assembly of applets and the HTML.

2 The WebSteer approach

The WebSteer approach is based on the following points:

Applets as providers of multimedia interactive content

Although there are some successful examples of their use in educational contexts [6], sophisticated component software models like OpenDoc and CORBA [7] are not well suited for the construction of education and training software by teachers and students. They are aimed at the construction of high-performance packed software, but lack simplicity and lightness. The most successful approach to the delivery of software over the Web is the applet technology, the ubiquitous mobile code approach developed by Sun Microsystems (JavaSoft [8]).

Reuse of and compatibility with preexisting HTML pages and applets

We must make extensive reuse of preexisting resources in the construction of courseware, mainly HTML and applets. When reusing or adapting these resources, we should keep them compatible with the original model.

Loose control of HTML browsing and applet interaction

Navigation with conventional HTML browsers is ever more flexible, and thus is not suited to controlled educational contexts. Furthermore, it is not easy to guide the interaction of students with conventional applets. WebSteer creates a loosely controlled environment for HTML browsing and applet execution that watches the interaction of the user with these elements. By using a detached script (see JetScript below), it produces guided control over the browser and the applets.

Usage traceability and reconfigurability

As pointed out by Riesbeck [3], the next generation of educational tools should ease the monitoring and reconfiguring of the student's activity environment. We believe that the collection of usage profiles generated by WebSteer at runtime can be a valuable source for monitoring student activity. Reconfiguration of the courseware may be easily made by altering the script (see JetScript below).

Simple declarative scripting languages

Powerful scripting languages like JavaScript and VBScript pose one more threat to the builder of educational software if they are overly complex and aimed at a more sophisticated software developer population. Minimalist but not simplistic scripting languages like JetScript, which we developed specifically for use in WebSteer, provide enough power to be used as a glue in the construction of courseware.

3 Architectural elements of WebSteer

The elements in the architecture of WebSteer are the Slide Projector, the Workbench and the Event Handling System, all under the supervision of the Core Controller.

The core controller

In its external appearance (Figure 1), the Core Controller shows the list of available courseware and two buttons. It is, in fact, a Java applet, that handles events and controls how the whole system works. To experiment with WebSteer you need only access the home page[9] using some Java-enabled browser, select a courseware, and press the Load Courseware button. In Section 4 we give some information about the our available courseware.

Figure 1 - Interface of WebSteer's Core Controller

The slide projector

The Slide Projector (Figure 2) is a simple HTML browser that renders normal HTML text, signaling to the Core Controller when the user follows any HTML reference. In addition to rendering HTML pages, the Slide Projector allows you to step back or forward in the browsing. As the user cannot freely choose an URL to be loaded, the browsing scope is limited to a predefined set. Under the control of the Core Controller, the Slide Projector may also load any HTML page given by the courseware.

Figure 2 - Slide Projector showing an excerpt from the courseware Learning Real Numbers

The workbench

The Workbench supports the loading and execution of an arbitrary set of applets. It detaches the applets from an HTML page and aggregates them over a common interface area. By using the techniques described in Section 4, you may easily adapt any applet to raise events and receive messages, so that it may work cooperatively with the other applets. Figure 3 shows the Workbench loaded with the Segment Calculator, an instrument used in the courseware Learning Real Numbers. While the user can interact directly with the instrument's graphical user interface (GUI), some of its functions are triggered by the interaction of the user with the Slide Projector. For instance, the link Example: Formula for the Distance (underlined in the Figure 2) enables an specific mode of operation (calculating the distance between two points) of the instrument.

Figure 3 - Workbench loaded with the Segment Calculator

The event handling system

The invisible element that supports the architecture of WebSteer is a simple yet powerful event-handling system programmed in JetScript. Below, we explain the concepts of events, messages, and JetScript.


There are two types of events in WebSteer: slide and instrument. A slide event is raised by the Slide Projector when the user selects an HTML reference inside the document its is browsing. An instrument event is generated by instruments that are loaded on the Workbench. The WebSteer programming framework supports the easy transformation of ordinary applets into WebSteer's instruments. In the current version of the WebSteer's event system, the information contained in an event are the type of event raised (slide or instrument) and the name of the event. Some example events are:

The user selected the HTML reference "http://www.di.ufpe.br/~java/websteer"
The user selected the internal HTML reference "#Architecture"
The instrument WebSteerInWebSteer raised the event "Back"
The instrument VisibleComputer raised the event "Start/Reset"


Messages are requests for computation sent from the Core Controller to the Slide Projector and to the instruments. There are two types of programmable messages in WebSteer: slide and instrument. Slide messages are received by the Slide Projector and carry as an argument the URL of a new document that should be retrieved by the Slide Projector. Instrument messages are received by an instrument and carry a name and a possibly null arguments list. The instrument handles the messages through its handleMessage() method. Some example messages are:

Requests that the Slide Projector retrieve the resource whose URL is "http://www.di.ufpe.br/~java/websteer/"
Requests that the instrument WebSteerInWebSteer handle the message named "Back" with the argument "2"
Requests that the instrument VisibleComputer handle the message "reset" with no arguments.

JetScript and event-message mappings

Mapping between events and actions is at the heart of the control in WebSteer and is defined using the JetScript language. JetScript presents the simple declarative syntax shown below. The full syntax is described in the WebSteer Tutorial courseware.

<jetscript> ::= <jetscript <preamble><mappings> jetscript><preamble> ::= name= <script-name>;	

       instruments= <instrument-list>;<mappings> ::= <mapping>;<mappings>

<mapping> ::= <event> =) <message>

<event> ::= onSlideEvent(<event-name>) |	

onInstrumentEvent(<instrument-name>#<event-name>)<message> ::= <slide-message> | <instrument-message>

<slide-message> ::= <url>

<instrument-message> ::= <instrument-name>#<message-name>(<args>))

The syntax above is meant only to give a general idea of JetScript. For the sake of clarity we allow a more relaxed syntax for scripts, as in the example below:


 name = WebSteerInWebSteer;

 instruments = WebSteerInWebSteer, SlideSelector;

 onSlideEvent(#showWorkbench) =)


 onInstrumentEvent(WebSteerInWebSteer#Back) =)


 Forward =)


 #showComponents =)

        showSlideProj(), showWorkbench(), showCoreControl();


When the script above is inside an HTML page loaded by the Slide Projector, the instruments WebSteerInWebSteer and SlideSelector are loaded and laid out on the Workbench. The Controller then watches the occurrence of any of the four events defined in the script and sends the corresponding message to the instruments. The first two mappings use an explicit and longer format, and the last two are abbreviations meant to simplify the writing of scripts. The semantics of each definition is as follows:

 onSlideEvent(#showWorkbench) =)


When the internal HTML reference #showWorkbench is raised by the slide projector, the message showWorkbench() is sent to the instrument WebSteerInWebSteer

 onInstrumentEvent(WebSteerInWebSteer#Back) =)


When the event Back is raised by the instrument WebSteerInWebSteer, the HTML page whose (relative) URL is scripts/webSteerInWebSteer/BackButton.html should be rendered by the Slide Projector;

 Forward =)


When an event Forward is raised by any instrument or by the Slide Projector, the page whose URL is scripts/webSteerInWebSteer/ForwardButton.html should be rendered by the Slide Projector;

 #showComponents =)

        showSlideProj(), showWorkbench(), showCoreControl();

When any event whose name is #showComponents is raised by any instrument or by the Slide Projector, the messages showSlideProj(), showWorkbench() and showCoreControl() should be sent to all the instruments loaded on the Workbench: WebSteerInWebSteer and SlideSelector.

4 Creating courseware for WebSteer

In this section, we give Clock Lecture as an example of courseware being developed in WebSteer. This required the creation of a Java class, ClockInstrument, that defines a WebSteer instrument, and of two HTML pages, one of these hosting a script written in JetScript. This example shows how we can reuse the fully compiled code of any existing applet, such as the Clock2 applet that is in the demo directory of the distribution of the Java Development Kit 1.0.2 from JavaSoft [8]. This clock will be adapted to work as a WebSteer instrument. This is only an introduction to the language we are proposing, and knowledge of Java is not required to understand our approach [4].

public class ClockInstrument

extends Clock2

implements websteer.InstrumentInterface {

public void raise(String s) {	

java.awt.Container parent = getParent();	

if (parent instanceof websteer.Workbench) {	


        .raise((this.getClass()).getName(), s);	



public boolean action(java.awt.Event awtEvent, Object arg) {


return super.action(awtEvent, arg);


public boolean handleMessage(websteer.Message message) {	

if (message.kind().equals("show")) {	


    return true;	

} else if (message.kind().equals("hide")) {	


    return true;	

} else if (message.kind().equals("stop")) {	


    return true;	

} else if (message.kind().equals("start")) {	


    return true;


        return false;


public java.awt.Dimension preferredSize() {	

return new java.awt.Dimension(200, 150);



Basically, a preexisting applet of any size can be adapted by creating a Java class that inherits from the original applet, implements the InstrumentInterface from WebSteer, and declares that at least these four methods: raise(), action(), handleMessage() and preferredSize(). raise() and action() are standard and should not be modified. raise() allows events to be signaled by the instrument. action() relies on raise() to signal that some user interface action was done by the user. The name of the target in the GUI action (arg.toString()) is sent as an event. handleMessage() defines how the instrument copes with the messages it receives. In this case, any ClockInstrument handles only the messages start(), stop(), hide() and show(). The method preferredSize() just returns the expected size that the instrument's GUI occupies over the Workbench.

To allow more interactivity in the courseware, we will insert an extra code that allows the instrument to raise an event named "newMinute" as each minute passes on the clock. This method relies on the updating of the GUI of Java, which automatically calls the method paint(Graphics). The code, as shown below, should be inserted in the ClockInstrument definition above in order to raise this event.

    int oldMinute = new java.util.Date().getMinutes();

    public void paint(java.awt.Graphics g) {	

int newMinute = new java.util.Date().getMinutes();	

if (newMinute != oldMinute) {	


    oldMinute = newMinute;	




Creating HTML and JetScript

Below, we show the source of the HTML page that raises the slide events (#stop, #start, #hide and #show). This is made by placing HREFs in the HTML code (<A HREF="#stop">, etc.). The same page contains the script that controls the interaction between the Slide Projector and the ClockInstrument.



<TITLE>Controlling a Clock Using WebSteer>



If you <A HREF="#stop">click here<A> the Clock stops.

To get it going again, you <A HREF="#start">click here<A>.

If you don't want to see it anymore,

just <A HREF="#hide">hide it<A>.

To see it again, all you gotta do is to

<A HREF="#show">click here<A>.



    name = ClockLecture;

    instruments = ClockInstrument;

    #stop =) stop();

    #start =) start();

    #hide =) hide();

    #show =) show();

    newMinute =) scripts/ClockLecture/NewMinute.html;



Although the example provided may seem unnecessarily complex to produce such a result, we have learned that the consistent application of these simple techniques produces useful results. For instance, after the possible incremental definition of instruments' events and messages, it becomes very easy to alter the general behavior of the courseware. Using WebSteer and applets, we have developed courseware, interesting experiments, and useful instruments that show strong possibilities for its use in educational and training settings. As of February, 3, 1997, the current version of WebSteer is itself an applet (and a WebSteer's Instrument), and it presents the following courseware:

Inet'97 paper
An adaptation of this paper that employs two instruments: an instrument graphically simulating how the event system of WebSteer works, and another copy of the WebSteer environment itself inside it. This courseware is a good example of the high interactivity achieved with the use of WebSteer.
WebSteer Tutorial
This is an extended version of the courseware Inet'97 paper, which guides you through the use of the framework.
Learning Real Numbers
Real courseware that is being used to teach precalculus at UFPE.
Digital Watch
A short lecture about the use of a simple digital watch.
Clock Lecture
The sample courseware as is shown in this section.
Tiny Example
A short explanation of how instruments can control HTML browsing and vice versa.
The Visible Computer
An experiment at an early stage that employs an instrument simulating the internal workings of a small computer. It is meant to be used to teach computer architecture concepts (the HTML pages are in Portuguese).

5 Conclusions and future work

WebSteer was developed entirely in Java (10 Kilo Lines Of Code-KLOC), by the Recife Java team, consisting of students, teachers, and researchers from the department of information science at UFPE. We have been simplifying and experimenting with WebSteer since its creation nearly a year ago, and we are developing other applets. Some instruments employed in WebSteer are as big as the environment itself: SegmentCalulator (used in courseware Learning Real Numbers) has 6.5 KLOC and VisibleComputer has 8 KLOC. These applets were developed using the Java Development Kit v. 1.0.2. WebSteer has satisfactory performance in SparcStations, and Intel 486 (16 MB or more) machines in Windows 95, using either applet viewer or Netscape Navigator 2.02 or 3.0. When accessing WebSteer, it is very likely that you may experience some delay while the code is being downloaded over the Internet.

We are actively enhancing WebSteer, and several issues we will be tackling in the near future are:

Our findings about the WebSteer project are as follows:


We wish to express our thanks to the Recife Java team for their hard work in constructing the prototype of WebSteer and courseware; to Sun Microsystems, for providing the source code of the alpha version of the HTML browser HotJava, used as baseline for construction of the Slide Projector; and to Pedro Falcão Goncalves, for his comments and suggestions.


  1. National Science Foundation, (1995), NSF Educational Technology Workshop (Setting a Research Agenda for Computer Science in Educational Technology), http://www.cc.gatech.edu/gvu/edtech/nsfws/.
  2. U.S. Department of Education, (1995), The Future of Networking Technologies for Learning, U.S. Department of Education - Office of Educational Technology, http://www.ed.gov/Technology/Futures/.
  3. Riesbeck, Chris, et al., (1995), Tools for Authoring Educational Technology, in NSF Educational Technology Workshop, http://www.cc.gatech.edu/gvu/edtech/nsfws/tools.html.
  4. Gosling, James and McGilton, Henry, (1996), The Java Language Environment: A White Paper, JavaSsoft, http://www.javasoft.com/doc/language_environment/.
  5. Gamelan, Educational Applets Directory, http://www-a.gamelan.com/pages/Gamelan.educational.html.
  6. Roschelle, Jeremy and Kaput, James, (1996), OpenDoc and Open Scripting Architectures for Educational Components, ITS'96 Workshop on Architectures and Methods for Designing Cost-Effective and Reusable ITSs, http://advlearn.lrdc.pitt.edu/its-arch/papers/roschelle.html.
  7. Orfali, R., Harkey, D., and Edwards, J., (1995), The Essential Distributed Objects Survival Guide, New York: Wiley.
  8. JavaSoft, JavaSoft home-page, http://www.javasoft.com/.
  9. Fernandes, Jorge and Meira, Silvio, The WebSteer Project home-page, http://www.di.ufpe.br/~java/websteer/.