Tutorial: Writing interactive Web pages for online course delivery using the "virtual apparatus" model

 By Albert IP (First draft: 19th August, 1997)

Introduction

 For a discussion of the power and benefit of developing web pages using inter-operable education components according to the "virtual apparatus" model, see "Supporting mainstream adoption of digital technology using "virtual apparatus" model in Courseware Development". This tutorial drills down into the details of developing a web page using Applets implemented according to the "virtual apparatus" specification and discusses some guidelines in making your web page more interactive.

This tutorial will coach you through building a simple web page using the template supplied. We assume that you are already comfortable in HTML. Before we can supply you with a server-side authoring environment, you may have to assemble the "virtual apparatus" by hand which requires you to know a little bit of JavaScript.

Your First Web Page using an "virtual apparatus" Applet

 You should start by downloading the template which includes some codes to enable all the virutal apparatus applets to communicate. Do not modify the codes provided unless you are sure what you are doing or as described below! The finished page is here.

Step 1: Locate a suitable "virtual apparatus"

You locate a "virtual apparatus" that meets you interactivity need first. You may like to start with our repository.

Step 2: Add the applet tag

Add the applet tag to the appropriate position on the html page, usually after the <body> tag. Please note that the applet is made available to your user using the code=xxx.class. You should also give it a name, test1 in this example. You will need to refer to the applet using this name later. Finally, always add the MAYSCRIPT tag.

The applet will be initialized by some parameters. They are set using the <param...> tag.

<applet code=statusbar.class width=305 height=28 name=test1 MAYSCRIPT>
<param name=totalTime value=10>
<param name=remindTime value=2>
</applet>

Step 3: Hook up the applet

Now enable the events of the applet to be passed to the central switch board. (This is necessary only for the current version of implementation. When the interface improves, we may not need this step any more.) Do this by modifying the start() function. Notice that you need to refer to your applets by their names as shown in red below.

function start(){
msg=document.test1.getEvent();
if (msg !=""){
vaMessenger(msg);
}
msg=document.test2.getEvent();
if (msg !=""){
vaMessenger(msg);
}
MyId=setTimeout("start()",100);
}

Finally, routine your messages using the vaMessenger() function.

 

Guidelines

 One of the basic tenets of the "virtual apparatus" model is that the "virtual apparatus" are developed without reference to any other "virtual apparatus" and content. By selecting and mixing different "virtual apparatus" into the content page, you do not have to worrying about mechanics of providing the interactivity. You can now concentrate on creating the most educationally rewarding web page.

This is a two-tier design paradigm. The "virtual apparatus" developers form one tier. You, the content expert, form the other tier. While there may not be a lot of communication between content author and the applet developers, the protocol established in this model should enable creative collaboration and ensure quality. However, it means that you have to understand the applets in order to make full advantages offered by the technology. Please read the information provided by the "virtual apparatus" developer carefully. This scenario may help you to understand the development paradigm we have in mind.

Case Sensitive

Since the Javascript that is included with the template is case sensitive, you should be very careful when referencing your applets and so on. Make sure that the case is correct!

Drive the applet with content

The virtual apparatus applets themselves are not very interesting. It is their ability to accept content specific information and provides interaction that makes them useful. Use the <param> tag as much as possible.

Separation of content from web functionality

Make an effor to separate the content from the web functionality. Each applet provides a specific functionality. Drive it with your content. When a message is passed back to you, use the vaMessenger() routine in your web page to forward the message to another applet which may take action accordingly. Do not link them together without using vaMessenger(). As it is a work in progress, the functionality of vaMessenger() may change. It would be a less painful task to modify only one location to make use of the new functions rather than hunting through different places to make changes.

This also means that when you modify the functionality of your page, you only need to change the name of the applet class to the new applet and the web page should almost work. If you mix content with functionality together, you may find it very difficult to do this later.