which the student manipulates objectson the computer screen using the key-board or mouse and then sees those ac-tions’ outcome.1 We at WhistleSofthave built, using Macromedia’s Author-ware, numerous such laboratories foruse in the Accelerators and Beams seriesof computer-based tutorials. (The “Use-ful URLs” sidebar lists the AuthorwareWeb site and other pertinent URLs; the“Accelerators and Beams” sidebar de-scribes our tutorial series.)

However, Authorware has two bigdisadvantages. First, it’s expensive; theretail price for Authorware 6.0 isUS$2,699. Second, if you try accessinga Web page that contains an Author-ware application, you will probably dis-cover that, to view it, you need to down-load a rather large, multimegabyteplug-in. Moreover, the AuthorwareWeb player is available only for Inter-net Explorer and Netscape on Win-dows and Macintosh computers; Unixand Linux folks are out of luck. Unlessyou are exceptionally motivated (orsome systems administrator has alreadydone this work), you probably won’tbother with these annoyances and willinstead move on to something else.

One way to create interactive labo-ratories viewable with Web browsershaving Java 1.1 and JavaScript capabil-

ity is to make them as Java applets. Forexample, Wolfgang Christian and hisstudents at Davidson College havebeen doing just this.2 However, to pro-gram in Java involves a considerableinvestment in learning, and it might beeasier for those who don’t alreadyknow that language to consider otherways to put interactivity on the Web.

For example, almost every modernWeb browser already comes with aplug-in for playing files in Macrome-dia’s Flash Shockwave format. (Ac-cording to Macromedia, the Flashplayer penetration was 97.4 percent asof September 2001. A Flash playereven exists for Unix and Linux com-puters.) And almost 70 percent ofbrowsers have the Shockwave plug-infor playing shocked Director files.Even if these plug-ins are not alreadyinstalled, they are still smaller than theAuthorware player. So, either Flash orDirector might be a better tool if youwant to deliver training modules onthe Web, especially for a heteroge-neous audience. In addition, Directoris less than half as expensive as Author-ware (Director 8.5 costs US$1,199),and Flash is considerably cheaper(Flash 5 retails for US$399).

Therefore, as an experiment, I de-cided to see how easy it would be to

clone our Vector Addition Laboratory(from our Vectors tutorial), using Di-rector or Flash. Another factor in thisdecision was that I already had these au-thoring tools on hand and had experi-ence using them.3 (To see a Directorpiece, “A Rolling Stone Gathers No

74 1521-9615/02/$17.00 © 2002 IEEE COMPUTING IN SCIENCE & ENGINEERING

WEB DELIVERY OFINTERACTIVE LABORATORIES: COMPARING THREE AUTHORING TOOLSBy Richard R. Silbar

AS EDUCATORS KNOW, THE MORE A STUDENT INTERACTS

WITH A SUBJECT, THE BETTER HE OR SHE WILL LEARN IT.

THIS IS PARTICULARLY TRUE IN TECHNICAL SUBJECTS. ONE WAY

TO PROMOTE INTERACTION IS TO HAVE “LABORATORIES” IN

Editor: Denis Donnelly, donnelly@siena.edu

EDUCATIONE D U C A T I O N

Useful URLs

Davidson College Java applets:http://webphysics.davidson.edu/applets/applets.htmlMacromedia Authorware:www.macromedia.com/software/authorwareMacromedia Director:www.macromedia.com/software/directorMacromedia Flash:www.macromedia.com/software/flashPhysics Academic Software:www.aip.org/pasRichard R. Silbar’s Web site:www.whistlesoft.com/~silbarVector Addition Laboratory• Authorware version:

www.whistlesoft.com/~silbar/demo/vecadd/index.shtml

• Director version:www.whistlesoft.com/~silbar/demo/director/dirvecs.shtml

• Flash version:www.whistlesoft.com/~silbar/demo/flash/AddVecs.shtml

WhistleSoft tutorials:www.webassign.net/pasnew/whistlesoft.html

SEPTEMBER/OCTOBER 2002 75

Mass,” and a Flash animation of F = ma,visit the Demo section of my Web site,listed in the sidebar.) Because Author-ware uses an iconic flow-line approachwhile Director and Flash use a stage-and-timeline approach, it is not clearoffhand that a close clone is possible. Asyou’ll see, the Director and Flash ver-sions are similar to, but definitely notthe same as, the Authorware version.

The Authorware versionThe original Vector Addition Labo-

ratory deals with adding two vectors inthe geometric picture. Before enteringthe laboratory, the student sees theContent page (see Figure 1a), which ex-plains the process. Clicking the Anima-tion button starts an animation with thevectors A and B separated, then movesthem together, tail-to-head, and finallydraws the vector sum, C. As this hap-pens, the software highlights the rele-vant text in the paragraph to the right.

The button with the question markleads to a set of self-test questions. Moreinteresting is the Laboratory button(showing the letter L and an Ehrlen-

meyer flask). Clicking that, the studentcomes to the Laboratory page itself (seeFigure 1b), which shows three randomlyplaced vector-arrows. Sooner or later,the student will grab the blue triangle onB with the mouse and drag it so that itstail falls on A’s head. Then, he or she willdrag C’s blue circles to their appropriateplaces. Clicking on “Click here whendone” provides a numerical score (from0 to 100) of how well the student placedC. If the student placed C incorrectly,the laboratory draws a corrected C (inpurple, leaving the student’s black ver-sion). It then offers the student thechance to try another case. Students canrepeat the exercise as many times asneeded at their own pace until they arecomfortable with the concept.

Once we learned how to place thedraggable handles on the arrows (Ithank Harlow Pinson for a useful sug-gestion in this regard), creating thislaboratory was relatively easy. Author-ware comes with a rich scripting lan-guage (which is stored in software ob-jects called calc icons). This language letsyou straightforwardly place, erase, and

redraw lines with arrowheads. Here’show the laboratory uses this language:

1. The Random number generatorcreates starting points and end-points for A, B, and C, taking care(iteratively) that they lie appropri-ately on the screen. The softwarecalculates the correct answer forthe sum A + B and stores it as ahidden vector D, which it will useto check the student’s answer.

Accelerators and Beams

This tutorial series comprises fivemodules: Vectors, Forces, Motion in Electromagnetic Fields, DipoleMagnets, and Quadrupole Mag-nets. Our publisher, Physics Acade-mic Software, released our firstmodule, Vectors, in late 1997. Thelatest, Quadrupole Magnets, be-came available in June 2001. Themodules are available on CD-ROMor floppy disks. We originally de-signed them as stand-alone exe-cutable programs for students touse singly or in teams, either in oroutside a formal classroom environ-ment. When we started developingthem, Web delivery of our trainingmaterials had not yet occurred to us.

Figure 1. The Authorware version of the Vector Addition Laboratory: (a) the Content page; (b) the Laboratory page.

(a) (b)

76 COMPUTING IN SCIENCE & ENGINEERING

2. The software draws A, B, and Con the screen, using the functionsSetLine(2) (so that they have ar-rowheads), SetFrame (to set acolor), and Line(pensize,x1,y1,x2,y2).

3. The software places the blue tri-angular handle at B’s midpointand the blue circular handles atC’s starting point and endpoint. Italso places labels near each vec-tor’s midpoint. The handles areseparate display icons and are ac-tive “hot spots” that respond tomouse clicks and drags.

4. When the student drags a handle,the EraseIcon function removesthe previous incarnation of that

vector (the calc icon that drew it).It then redraws the vector accord-ing to the position of the built-incursorX and cursorY variablesgiving the mouse’s position.

5. When the user clicks on “Click herewhen done,” the program flow ex-its the interaction icon and enters amap icon that animates the correctanswer for C and calculates the stu-dent’s score based on the distancebetween the heads of the student’sB vector and the correct C vector.

Once we built the Authorware appli-cation, we compiled it into an exe-cutable file (without runtime). We thenprepared it for Web delivery using the

Web Packager, a separate piece of soft-ware. This involved creating an aamfile, which tells the Web player whatfiles to download from the server, anda series of aas files (segmenting the executable for streaming it to thebrowser). The total download for theAuthorware Web player is 305 Kbytes,but not all of it must be present for theapplication to begin playing.

The Director versionI decided to make the Director clone

first because Director comes with Lingo,an extensive scripting language that Ithought might facilitate building user in-teractions. As I rapidly learned, however,Authorware’s scripting language and

E D U C A T I O N

Figure 2. The Director version of the Vector Addition Laboratory: (a) the Content page; (b) the first frame; (c) the second frame;(d) the last frame.

(a) (b)

(c) (d)

SEPTEMBER/OCTOBER 2002 77

Lingo have very different capabilities.This led to a decidedly different lookand feel, even though the Director ver-sion’s content turned out to be almostthe same as the Authorware version. Ibuilt this version using Director 6.0.The Shockwave file is 47 Kbytes, quite abit smaller than the Authorware down-load. In the spirit of a scientific experi-ment, I did not try to make the graphicsfor this version pretty.

This version starts with a frame (seeFigure 2a) that is roughly equivalent tothe Authorware Content page. Thispage opens with an animation in whichB, the brown vector, moves into posi-tion from the left. Then the applicationdraws a gray arrow representing thevector sum C from the tail of A (pur-ple) to the head of B. Users can repeatthe animation as often as desired, com-paring the motions with the instruc-tional text below.

When the student is ready, he or sheclicks the Continue button and pro-ceeds to the next page, which is the lab-oratory itself. It unfolds in a successionof frames; Figure 2b shows the first.The screen snapshot shows the studentabout to drag the brown vector into po-sition, with its head at the purple one’stail. When the student has positionedthe vector, clicking on the Continuebutton brings up the next instruction(see Figure 2c). Here the student isabout to click where he or she wants thesum vector to begin. When this hap-pens, a gray dot appears at that point,and the next frame, for setting the sumvector’s endpoint, appears. Figure 2dshows what the screen looks like just af-ter the student has clicked at the desiredend location and the software hasdrawn the resulting gray arrow.

From here the student can check theanswer or try a different random case.Unlike the Authorware version, thisversion does not give a numerical grade.

Lingo’s limitations necessitate a differ-ent evaluation of the goodness of fit. Anexample of a grade is a text responsesuch as “Good!” or “Perhaps in thewrong direction? Try again.”

How did I program the Directorversion? Drawing a line is difficult us-ing Lingo, which does not have built-in functions like Authorware’sLine(...) and SetLine(...). So, Iplaced the initial vectors on the stageby choosing randomly from 80 differ-ent arrows (four sizes, each in 20 dif-ferent orientations) in the Cast (a li-brary of displayed objects, scripts, andso on). Using the built-in AutoDistorttool, I generated the different orienta-tions for each size from an initial hori-zontal vector.

Dragging the individual vectors wasrelatively easy because of Lingo’smouseDown property. Each of the 80vectors in the cast has the scriptshown in Figure 3. The variables vec-torsMoveable and whichVec areglobal because they are useful in otherscripts for this application.

A big difference between the Au-thorware and Director versions is inhow they draw the sum vector C. TheDirector version places a series of graydots at calculated steps between thestarting point and endpoint the studentspecifies. To draw the arrowhead, theapplication places dots, using trigono-metric calculations to find their loca-tions so that the arrowhead points in

the right direction. Frankly, the grayarrow for C is a bit sloppy, and it wasawkward to program.

Finally, the Check Answer buttonhas a lengthy script attached that cal-culates a figure of merit based on thedifferences between the magnitude andangle of C given by the student andthose determined from the initiallychosen vectors A and B. This also in-volves numerous (awkward) Lingolines such as

set locVecX =

the locH of

sprite whichVec

where locVecX is a local variable andlocH is a Lingo property.

I’ve investigated reauthoring the lab-oratory in Director 8.5, and I do notbelieve that this would improve its in-teractivity much. The Lingo enhance-ments since Director 6.0 are concernedmostly with other features and capabil-ities than the ones needed here.

On to FlashThe Flash version also begins with an

animation (Content page) showing thestudent how to add two vectors. Thiswas easy to do using symbols for thethree vectors and using motion tweens,one of Flash’s strengths. (Tweening, aconcept perhaps invented by Disney,involves creating cel frames that inter-polate between two key frames, which

Figure 3. Director Lingo scripts for the mouse actions that enable the dragging ofeach vector object in the cast.

global vectorsMoveable, whichVec

on mouseDown

set whichVec = the clickOn

if vectorsMoveable = FALSE then pass

moveVector whichVec

end

on mouseUp

set the moveableSprite of sprite whichVec = FALSE

updateStage

pass

end mouseUp

78 COMPUTING IN SCIENCE & ENGINEERING

here give the starting and final positionsof the object that moves.) Because thisContent page is not much differentfrom the Authorware and DirectorContent pages, it is not displayed here.

After entering the Lab, the studentsees three randomly placed vectors, A(red), B (blue), and C (black) (see Fig-ure 4). Clicking on the blue “Manipu-late” link brings up a yellow pop-upwindow (shown on the right) explain-ing how to manipulate these vectors.As in the Director version, students canuse the mouse to drag the arrowsaround the stage. In addition, studentscan use the arrow buttons on the key-board to resize and rotate C.

When the student is satisfied withC’s position, pressing the space barleads to a new frame that lets the stu-dent check his or her answer or try an-other case. Pressing the Check Answerbutton gives an evaluation of “Good!”or “You can do better. Please try again.”

My first attempt to build this labora-tory used Flash 4, which has a muchless rich scripting language than Flash5. As a result, that version had a klunkyuser interface with a bunch of buttonsfor incrementing positions, angles, andsizes. The simplifications in the Flash5 version, shown in Figure 4, are due toenhancements of the action scripting,which now looks much like JavaScript.In particular, adding the onClipEventaction allowed a continuous flow of ro-tations and rescalings for C. Also, I im-

plemented the dragging of the separatevectors by incorporating a buttonin the movie clip for each vector. Thislets the movie clip accommodate anon(mouseEvent) to set the separatestartDrag and stopDrag condi-tions—for example,

on (press)

{startDrag(“/vectorB”, true,

100, 75, 450, 325);}

on (release)

{stopDrag();}

(The arguments in the startDragfunction confine the dragging to a re-stricted region of the screen.) Before Ilearned to incorporate the button inthe movie clips, students had to holddown the “a,” “b,” or “c” keys to dis-tinguish which vector was draggable—also an awkward maneuver.

Checking the student’s answer for Cagain involves a script with muchtrigonometry, such as

C_x = Cmag*Math.cos(Crot*

Math.PI/180.),

where Cmag and Crot are variables cal-culated earlier in the script. One pecu-liarity of Flash’s geometrical conventionsis that positive angles (in radians) areclockwise rather than counterclockwise.

The Flash 5 version involves a 14-Kbyte download, much smaller than ei-ther the Director or Authorware version.

S electing an authoring tool comesdown to a matter of taste, cost,

and how hard you want to work. It waseasiest to create the Vector AdditionLaboratory (and others like it) withAuthorware, whose scripting function-ality provides much flexibility. Direc-tor and Flash are almost as capable forcreating this kind of interactive labo-ratory, but the user interfaces are notas intuitive or clean. However, bearingin mind Authorware’s plug-in problemfor Web delivery, you might choose toaccept the compromises and use Di-rector or Flash.

AcknowledgmentsJ. Patrick McGee, Robert A. Williams,and William C. Mead collaboratedwith me to build the original VectorAddition Laboratory. The encourage-ment to make Director and Flashclones came from Dixon Wolf, whoalso made several valuable suggestionsabout how to proceed.

References1. E.F. Redish, J.M. Saul, and R.N. Steinberg,

“On the Effectiveness of Active-EngagementMicrocomputer-Based Laboratories,” Am. J.Physics, vol. 65, no. 1, 1997, pp. 45–54.

2. W. Christian and A. Titus, “Developing Web-Based Curricula Using Java Physlets,” Com-puters in Physics, vol. 12, no. 3, July/Aug.1998, pp. 227–232.

3. R.R. Silbar, “Animating Equations on theWeb,” Computing in Science & Eng., vol. 2,no. 4, July/Aug. 2000, pp. 91–95.

Richard R. Silbar worked as a theoretical nu-

clear physicist at the Los Alamos National Lab-

oratory before forming WhistleSoft, a software

development company specializing in multi-

media products for science and engineering.

He earned his BS, MS, and PhD in physics from

the University of Michigan. Contact him at

WhistleSoft, 168 Dos Brazos, Los Alamos, NM

87544; silbar@whistlesoft.com.

E D U C A T I O N

Figure 4. The Flash version of the Vector Addition Laboratory. The yellow text boxon the right pops up when the student clicks on the blue, underlined “Manipulate.”