Use of Advanced Techniques to Create Interactive, Web-Based Instructional Modules to Support Courses in Biology, Chemistry and Physics

Ruth L. Dusenbery
(In collaboration with Dawn Wisniewski, Media Creator; John Devlin and Bette Kreuz, Content Providers)
Science Learning Center
Department of Natural Sciences
University of Michigan-Dearborn
Dearborn, MI 48128
rdusen@umd.umich.edu
Supported by NSF CCLI DUE #9952827 to P. Zitzewitz and R. Dusenbery

Background Information

The Department of Natural Sciences at the University of Michigan-Dearborn has operated a Science Learning Center (SLC) for students enrolled in a variety of science courses since an NSF grant funded the project in 1979.

The purpose of the SLC is two-fold: 1) the SLC helps to bridge the gaps in educational background among entering students, thus striving to assure that all science students have the same opportunity for success in science courses by emphasizing and teaching the essential matematical, graphing and laboratory skills; and 2) the SLC helps both students and instructors use laboratory time more efficiently by providing self-paced practice with instruments before class in order to conserve laboratory time and protect sensitive and expensive equipment from damage by untrained users.

In 1998, a decision was made to convert existing material to a digital format and develop new, interactive digital material in order to provide students with more convenient access to the material and more engaging learning environments. A pilot grant from NSF to Dr. Paul Zitzewitz (Department Chair) and me in the spring of 2000 (CCLI DUE #9952827) provided funds with which to acquire hardware and software for the project and to hire Student Technology Assistants, Dawn and Donald Wisniewski, to contribute to module production. It also provided funds for summer salary contributions for two faculty members to devote a substantial amount of time to some of the more technically involved new projects.

Digital conversion of 15 remedial mathematics and graphing was undertaken first, with simple HTML conversions from MS Word 97. This was followed by reworking 23 instrument and laboratory procedures in a variety of formats and construction of 8 entirely new modules using MS PowerPoint or Macromedia Flash programs.

Materials Created for the Digital Science Project (1999-2002)


Word documents converted directly to HTML (mostly math modules eg Linear Relations 293KB)
More advanced HTML formats (eg Significant Figures 144KB)
PowerPoint presentations without sound (a few math, eg Calculating with Exponential Numbers 655KB, and a number of laboratory-related modules eg Digital Multimeter 960KB)
Flash support components for some PowerPoint modules (eg Oscilloscope 83KB)
PowerPoint presentations with sound in lab (50MB)/ without sound on Web* (eg Atomic Absorption Spectroscopy 4MB and Impaticized version of AA with sound 901KB using demonstration version of Impatica for PowerPoint)
Interactive Flash modules (Advanced AA 551KB and Digital Multimeter 797KB)
Flash modules with embedded QT movies to replace old videotapes (Distillation 22MB, Recrystallization 20MB) (requires Sorenson Squeeze for Flash to compress movies and Flash MX plugin to play)

* A new program from Impatica ($299) now allows us to convert PPT presentations for web deployment preserving synchronized audio files, slide transitions and builds. It uses a small player that is uploaded in the same folder as the presentation, so that users do not need to get special plugins or players for their browsers. Note that the impatica information is not present on the slides when using the full version of the program).

Most Chemistry modules that have sound (Atomic Absorption, Gas Chromatography, Infrared Spectroscopy, Safety in the General Chemistry and Organic Chemistry Labs and Spectronic 20 Spectrophotometer) will be "Impaticized," as well as the Introduction to the SLC, which is played in the Introductory Chemistry Labs.

New modules requested: Bette Kreuz, Mass Spectrometry.
We will try to do this in PPT format using animation graphics, instead of doing it in Flash, since we now have the Impatica program.

A demonstration of how PowerPoint slide transitions, builds and animations within slides can be maintained can be viewed in the impaticized version of a PowerPoint presentation from a departmental lecture given by Dr. Zitzewitz in Fall, 2002.

The original PowerPoint presentation was constructed with mouse click control for slide changes, except in the slide series 34-54. These features were selected to remain in the impaticized version of the presentation by providing the viewer with navigation controls on the bottom of the slide frame for slides other thatn 34-54, which were allowed to keep the auto advance mode. However, although the original presentation was set to bring in individual slide builds using a mouse click, an option to automate slide builds was selected for the impaticized version for simplicity. Therefore a variety of features can be differentially controlled when converting a PowerPoint presentation to one meant to be viewed online via the Internet.

Evolution of the Process: The Learning Curve for Flash Movies

As we began thinking about elements of the instruction that might benefit from annotated animation sequences, we started small. Dawn Wisniewski, an undergraduate working as a Student Technology Assistant in the SLC for several years, took on the challenge of learning to work with Flash having had no previous experience with vector graphics.

The first animation demonstrates the use of a rubber safety pipet filler using automatic scene changes for the steps in the process. It is used in conjunction with a full length PowerPoint module on the use of pipets. Click on the image to bring up the Flash animation.

Flash pipet filler

Because of the simplicity of the image and the small amount of text, the file size for this Flash movie is 26 KB.
This appears to be a trivial exercise, but it took many hours of "trial and error" to get the top bulb to behave properly and keep the shading used to convey the 3-D effect.
We also had our first encounter with estimating the time that frames containing text should persist for "naive" viewers. This process requires a reasonable amount of "usability testing" by student volunteers. It will become evident in our series of Flash animations that more elaborate user navigation controls are required as the material covered becomes more lengthy and complex.

The second project was created for use with the full length HTML-based module on the theory and practice of pH measurements to depict meter response to high and low concentrations of hydrogen ions in solution. Click on images to bring up the Flash animations.

pH meter high hydrogen ion concentration pH meter with lower concentration of hydrogen ions

Although the graphics were more involved, the limited use of text kept these animations down to 12 KB and 10 KB, respectively.
In these animations the biggest challenge was to set the path for the "signal" to travel from the electrode to the meter along the wire and to make the needle pivot correctly for the resulting meter reading.

The third Flash project created was the "overview" animation series used in conjunction with the PowerPoint module covering the use of the Spectronic 21 spectrophotometer. Click on the left image to bring up the Flash animation.

Flash animation Spectronic 21 Flash Spectronic 21 meter

This animation was created with two layers of control. Each step in the set of instructions is a separate "scene," with a variable number of "frames" with changing text and highlighting arrow pointing for emphasis. The entire presentation can be played in the auto mode, once started from the first frame by pressing the Play button (>). However, since the viewer may want to focus on a single instructional frame for more time than the auto setting the Pause control (ll) was added to stop the automatic advancement. The auto advance mode is reentered by pressing the Play button (>). A previous scene is accessed with the Previous Scene control button (l<) and within a scene the Back a Frame control button (l<), as shown in the closeup of the meter in the right hand panel. These navigation controls allow the viewer some control within the linear progression of the module, but do not allow branching of pathways through the material.
The relatively simple image with substantially more text and control functions increased the size of this file to 83 KB.

The fourth project was very similar and involved construction of Flash "overview" animation tours of the controls of an Oscilloscope and Function Generator to accompany the PowerPoint Oscilloscope module. Click on the left image to bring up the Flash animation of the Oscilloscope tour.

Flash animation of oscilloscope controls Photo of oscilloscope controls

These two Flash animations were created when Dawn was really hitting her stride on producing complex vector graphics! I think that you would agree that this depiction of the oscilloscope controls is truly amazing for an undergraduate untrained in art or graphic design. Dawn would agonize over getting shading just right or making placement of images in the same spot from frame to frame to prevent the image from jumping around through the presentation.

Navigation controls allowed the viewer to move forward, NEXT, or backward, BACK, between the three scenes: CRT screen, Input Channel Selector and Control Panel. Each of these runs in auto play mode, but because of the large amount of text, the timing of frame changes is pretty long for us. Given our experience with the Spectronic 21 presentation, we probably should have included a PAUSE control to stop the sequence, but we didn't.

An most extraordinary feature of raster graphics is the precision of image retention independent of scale. Having worked a great deal with digital photographs in Photoshop, I was blown away on several occasions when I observed Dawn working on the details of a drawing, with a button or control element filling a 17" monitor screen, yet remaining perfectly sharp and clear. The file size for this amount of graphic detail remained relatively small at 83 KB.

The next two projects, Advanced AA (551 KB) and Digital Multimeter (797 KB) represent our efforts to add both non-linear access and interactive responses to Flash-based instructional material.

The Advanced AA module includes some digital photographs of the instrument in operation and interactivity in the form of quiz questions at the end of major sections. Navigation was structured at two levels: Major Section movements were accomplished by the large aqua buttons, MENU, NEXT, REPEAT and DETAILS at the end of each section. Smaller green or red buttons provided navigation within a section, green arrow to advance to the next part of a section, plain green button to make a choice in multiple choice quizzes, and a red button to exit a subsection. The Table of Contents accessed by the MENU command allows for entry to all major sections for non-linear review of the material.

Usability testing with student volunteers helped refine some of the navigation elements and the addition of the red button to jump out of a "details" subsection that is not of interest. As I was testing early versions, I found it very frustrating that when I could not remember whether I had already opted to see a section or details that I had to wait through the whole section when I did realize that I had already been through it before.

The use of digital photographs in addition to vector graphics increased the file size to 551 KB.

The Digital Multimeter retained a purely Flash graphics construction, but introduced substantially more of a requirement for interactivity. The PowerPoint version of the Digital Multimeter that we had originally produced with digital photographs of the instruments and wiring combinations for the measurement of voltage, current and resistance, worked well when students reviewed it in the SLC and had the instruments and the circuit box available to make the connections as directed in the module. However, when students reviewed it online, they could not tell whether they understood the directions because they did not have the actual measurements to confirm the correctness of their actions.

Historically this module has been the most difficult of our instrument modules for students to master. We wanted to keep the convenience of reviewing the material online before coming in to the SLC for the practical post test, yet make the online review a more effective teaching tool.

Navigation issues became complex. An HTML screen was used to set up the choice of types of measurements:


The Introduction section provides information on navigation aids and on how the interactivity is structured in this module.

Directions for interactive steps in making voltage measurements are shown in the sceens below:

As might be anticipated, this format gave us the most usability issues with which to grapple. The way in which a requested action is conducted (click on the location to place a wire) was not readily understood by many of the users in the beginning. When we got to the stage of building circuits, it became apparent that we had too many equivalent ways to acheive the outcome to be able to give the user complete freedom of choice. We therefore had to start restricting the number of accessible pathways that they could take and get positive or negative feedback from the program. Hopefully this does not confuse users about the how things can be done in the real world.

Even though only vector graphics were used, the complexity of the interactive sequences and the need to provide all possible positive and negative feedback screens when interactive choices were required increased the size of the file to 797 KB.

In the summer of 2002, we finally got up the nerve to try our hand at using digital video segments to replace the old VHS videotape productions of the Distillation and Recrystallization modules. We chose to use a Flash shell to maintain the possibility for interactivity and non-linear access, but wanted to use a combination of vector graphics, digital photographs and digital video segments to illustrate the procedures used in the Organic laboratory course. Flash MX provides an option for playing Quicktime video segments within Flash, however it seemed that the interactive features were lost and the Quicktime video segments had to be generated from raw DV segments using another video editing program.

We had Adobe Premiere, Apple Final Cut Pro and Discreet Cleaner 3 that are high end programs for DV editing and contain a version of the Sorenson codec ("A codec is a set of complex algorithms that work in conjunction with a compression application to reduce large video files." Sorenson) for setting variable levels of compression and outputting in a variety of video formats, but this still did not address the problem of interfacing the the Flash and video segments.

I had recently been sent information about two applications from Sorenson that enable compression of Flash (.swf) movies, Sorenson Squeeze 3 for Macromedia Flash MX (acad $49), and Quicktime (.qt) video, Soreneson Squeeze 3 for Quicktime (acad $99), to sizes that are suitable for streaming from internet sites. We purchased these programs (Tony Davidson, MITEC reseller, 222 Wisconsin Ave, Lake Forest, IL 60045; 888-336-4832 x28 for academic pricing--I'm not sure that Sorenson has academic discounts) and used them to make the new Distillation (22MB) and Recrystallization (20MB) modules. The size of these files prohibits access by modem, but fast cable connections or access from UM-D computer labs is reasonable. If students review the material in the SLC lab, we have them already loaded on our computers. We also burned CDs that can be checked out from the SLC for those with slower connections, but no one took up that option during the first semester of use.

 

Each major section, shown in the TOC above, has an opening screen and a series of steps illustrating the procedures with photographs and explanatory text. Questions that test knowledge of material covered in the sections are used throughout the module. Reasons for incorrect answers are given, but the correct answer must be selected to proceed.
At Step 19, the single arrow to the right of the photo indicates that a QT movie sequence is available. The QT movie sequence opens in a new window that has a series of Flash text headers and a set of controls for the movie to the right.
At the end of the two main sections, interactive questions are provided that require identification of errors in the setups via hotspots on the image. The program continues to prompt identification of additional errors until all are found.

A very similar organizational and navigational framework was used for the Recrystallization module.

Despite the fact that the compressed files were in the 20MB range, the QT movies showed pixilation artifacts from the high degree of compression used, as might have been expected. What was unexpected was that some of the still photographs also suffered some distortion after having gone through the Sorenson Squeeze for Flash compression of the .swf file itself. Most noticeable were the edges of glass objects that became very jagged instead of the smooth profile of the original digital photos, as shown in the two examples below. After having worked with so many digital images used in the PowerPoint modules, this was very annoying.

The QT movie of the liquid column rising in the thermometer was the most severely affected element in the module. It looked like a snake undulating rather than a stable glass instrument. I have not discussed these problems with Sorenson folks. There may be a compromise set of parameter settings for size and quality that would give us better quality videos with a modest increase in file size, but I tend to doubt it based on other DV work that we did for other purposes since this module was made.

We are just starting to confront the whole "streaming video" challenge for distance learning on our campus. Our College set up a Mac streaming Quicktime server that is being used as a testbed. The ITS unit for the campus is just upgrading the Real Server that they have to the new, supposedly more versatile, Helix software.

If anyone has words of wisdom on the topic of streaming video, I would be hear about successful solutions.

Based on the journey that we took through Flash-based technology, I would have to say that it is rather unlikely that even "interested" faculty members (as opposed to the "bleeding edge" early technology adopters) are very unlikely to devote the time that it takes to become proficient enough with Flash graphics to produce something like the images that Dawn created for the Oscilloscope and Function Generator overview pieces. However, it probably would be reasonable for an "interested" faculty member to use cruder graphics and more elaborate navigation elements to get an interactive instructional module such as the Flash Digital Multimeter piece.

In the abscence of a skilled technical assistant, I will be trying to involve faculty members more actively in module production using the more familiar PowerPoint program with the animation and sound features to get to a reasonable level of animation and interaction in an instructional module. Bette Kreuz and I will try out this approach in developing a module on Mass Spectrometry in the next few weeks. Hopefully, I can provide a progress report on this work during the discussion phase of this article in late May 2003.