Development and Delivery of Chemical-Education Hypermedia Using the World-Wide Web

Section 1: Introduction

This paper describes some ways to use the World-Wide Web (WWW or Web [1]) in chemical education. This paper does not discuss the educational advantages of visualization techniques, which are described in Paper 06;[2, 3] or use of the Web as a research tool, which is described in paper 09.[4] The main focus is on developing effective educational material that can be delivered given the bandwidth limitations of the internet. More sophisticated material can be delivered over a local-area network as described in paper 07.[5] I will not attempt to validate the use of information technology,[6] only discuss how it can be used as a delivery tool with an emphasis on applying an appropriate medium to meet the intended educational goal.[7, 8, 9] This introductory section discusses some general uses of the Web, and Section 2 describes hypermedia and different hypermedia designs that can be applied to different types of educational materials. Section 3 illustrates one use of Web-based hypermedia with a detailed description of interactive prelab exercises in an instrumental analysis course.

In general, use of the Web for education can be divided into several categories: communication, research, delivery of educational material, and delivery of real-time interactive programs. While most of these functions were available previously on the internet,[10, 11] WWW browsers provide an integrated and easy-to-use tool to access them.[12, 13]

Many examples of web pages used in chemistry and other courses can be found at the World Lecture Hall. A typical example is my Instrumental Analysis home page (http://www.chem.vt.edu/chem-ed/4114/Fall1995.html). This class home page contained an on-line syllabus, a page of announcements and textbook assignments, a question-and-answer page, downloadable exam solutions, instructions for two computer dry labs, and links to the interactive prelab assignments that are described in detail in Section 3 of this paper. For most of the material listed, the home page functions as a class bulletin board that is available from any networked computer on or off campus.

The 28 students in the Instrumental Analysis class did not actively use the question-and-answer page.[14] Network-based asynchronous communication provides a medium for collaborative learning.[15] The sparse student use of the question-and-answer page in this class shows that it might not be an effective mediium for a small upper-level course, that includes a laboratory in which students have many opportunities to interact with other students, the instructor, and teaching assistants.

An example of using the WWW to deliver data and instructions is illustrated by a statistics dry lab: http://www.chem.vt.edu/chem-ed/4114/prelabs/stat/4114-stat-prelab.html. Fig. 1 shows a screen capture of the Web page and a spreadsheet program. The browser and spreadsheet programs are running in separate windows that were adjusted so both were visible simultaneously.

Fig. 1. Data Delivery Using the WWW

The right part of the figure shows the dry lab page in the browser window, which contained instructions, data, and hyperlinks to hints. Data was cut out of the browser window and pasted directly into the spreadsheet. The instructions told the students to write formulas and plot the data and then to tape printouts of their work into their lab notebooks to be graded. The main purpose of this lab was to bring all students up to speed on using Web browser and spreadsheet programs. It also gave them a set of formulas that they could use for data analysis in their later lab write-ups.

The disadvantage of internet delivery, compared to distributing printed instructions, is that students who want to do the assignment from a computer that does not have network access must first print the instructions and data from a networked computer. The advantage is that extensive remedial material, including graphics, can be provided in-context for students needing extra help.

Section 2: Hypermedia Design

The HTML (hypertext markup language) format of Web documents provides an easy-to-use authoring language to create hypermedia material. Using hypermedia effectively requires some thought to its characteristics to properly match the hypermedia to the intended goal. For example, a course web page is a convenient means to deliver copies of lecture notes to students for their use during class. However, the outline nature of lecture notes provides little value to someone trying to learn about a given topic from scratch. Likewise, fancy graphics are not necessary to deliver textual information such as homework due dates, and only slows down the transfer of information.

A hypertext application is a collection of documents (computer files) that contains highlighted words or phrases called anchors. These anchors define hyperlinks that lead to other documents or other sections of the same document.[16, 17] Hypermedia is a superset of hypertext that includes other media forms such as graphics, audio, and video.[18] The links in hypermedia allow random access to information, and using a hypermedia application is usually referred to as navigating or browsing.[19] A hypermedia user can click on a link and go to a new document, browse it, and return to the original document. Alternately a user can click on another link and proceed along a different path to more information. It is the reader who actively decides on the path to take through the information and how in-depth to read each document. This random access and user control is a major distinction between hypermedia applications and conventional textbooks, which are usually designed to be read sequentially, i.e., from start to finish. In print a reader can assume that the text will progress from simpler to more difficult or complex. The random access capabilities of hypermedia the disadvantage of lacking structure, as shown in Fig. 2, and can juxtapose documents of very different levels of conceptual difficulty.

Fig. 2. Unstructured Application Design

An unstructured document layout presents some interesting possibilities for experimental fiction, but would leave science students wondering if they had found everything they needed to learn. An alternative is to design an application with linear or indexed layouts, as shown in Figs. 3 and 4, respectively.

Fig. 4. Indexed Application Design

The triangles at the bottom of the pages in Figs. 3 and 4 represent navigation aids that link to other documents. When used properly, they can help users retain a sense of direction as they work through a series of documents. Common navigation aids are text anchors that link to the "previous" or the "next" document in a linear series of pages, or to an index or home page. Since users might stumble into the middle of a series of documents from anywhere, it's best to avoid phrases like "go back" or "return" in these navigation links. For an application containing a fairly small number of web pages, a complete map can be provided. The tables at the top and bottom of each page of this on-line paper indicate the current section the user is reading, and provides links to the other sections and the index. Icons of left, right, or upward pointing arrows are commonly used as navigation aids to indicate a direction or home page. Non-intuitive icons that link to a home or index page should be avoided because they assume the user has started from a beginning page and read instructions on the meaning of the special icon.

The two designs shown in Figs. 3 and 4 provide a structure for educational documents, but lose the in-context access to related material that hyperlinks provide. A compromise is to use a hybrid design with a top-level linear or indexed structure, and include hyperlinks in the text of the documents where appropriate. This conference paper is an example of a hybrid design with an indexed top-level structure. The text of the documents contains hyperlinks, such as the examples of the course home page and the computer dry lab in Section 1. If you went very deep into the examples you probably needed to hit the back arrow several times to return to this paper, and might have felt rather lost. To help users from getting lost, written or classroom instructions can be provided, such as suggestions that they use the browser's back arrow to return from linked material, or that they bookmark the index page.

The take-home message from the above discussion is to select a design that matches the content and goals of your material, and provides as much structure as possible. For delivery of class notes or lab instructions, a simple linear or indexed design might be most appropriate. Tutorials on difficult concepts might require extensive links to remedial documents or multimedia material. In general the simplest design that does the job will be the most effective.

Section 3: Instrumental Analysis Prelabs

Description of the Prelabs

This section describes the use of hypermedia prelab exercises in a senior-level Instrumental Analysis course during Fall 1995. The course had an enrollment of 28 students and consisted of three hours of lecture and a three-hour laboratory (there were three lab sections with a maximum of 12 students per section). The students worked in groups of 2 or 3 and the groups cycled through four different lab experiments over a four week period. The rationale for implementing computer-based prelabs is to replace prelab lectures that must be repeated for each group at the beginning of every laboratory period. To ensure sufficient access to the internet, three client computers (33-MHz 486 computers with ethernet cards and WWW-browser software) were reserved for the Instrumental Analysis students from 8am to 5pm Monday through Friday in an anteroom to the laboratory. The prelab assignments were worth 10% of the final grade and were graded only on completion and not on the answers. The students were instructed to do the prelab assignments before they came to lab, although no penalty was given for doing the prelabs late. On-line testing has the same intrinsic inability to proctor as a take-home exam or homework.

A prelab assignment consisted of a web page that contained a link to a descriptive tutorial about the experiment or instrumentation and links to interactive exercises. Examples of the prelabs can be viewed at http://www.chem.vt.edu/chem-ed/4114/4114-prelabs.html. Each prelab instructed the student to read the experimental handout before doing the prelab. A printed experimental handout is still necessary as a reference for the students to use when they are actually in the lab. The interactive exercises for most of the prelabs consisted of three multiple-choice questions. The electrochemistry prelabs included one graphics-based exercise with two multiple-choice questions. The graphics-based question consisted of a clickable-map image of the overall experimental set-up. After reading the text description, students were instructed to identify the different instrument components by clicking on them in the graphics image. Clicking on the requested component brought up an enlarged view of that component and the students proceeded on to the next instrument component. An incorrect selection brought up a message to try again and the students could proceed through the exercise only after clicking on the correct component.

Figures 5 and 6 show screen captures of a multiple-choice question and the corresponding response page, respectively. The same response page was returned to the student for either a correct or incorrect answer and included a short explanation of the correct answer.

Fig. 5. Screen Capture of a Multiple-Choice Question Page

Each question consisted of a question.html file with the multiple-choice question, as shown in Fig. 5, and a question.cgi file.[20] Thequestion.cgi file contained a Perl script that evaluated the answer selected by the student, returned a response page, as shown in Fig. 6, and logged the date, time, and answer in a student file on the server. When grading only on completion, it was easy to count the number of student files in each prelab directory and determine who had not done the assignment. Manually grading large classes or basing the grade on the student answers or on the date and time becomes prohibitively time-consuming. Interpreted languages such as Perl are used in *.cgi files because it is easy to pass input and output between the http server and the script. However, one of the limitations of Perl is that it supports at most two-dimensional arrays (actually one-dimensional arrays of fields).[21, 22, 23] The options are to use more sophisticated programming languages to read and write from databases, or to develop programs or filters to condense, organize, or evaluate the results in the student file(s). We are developing a second generation of Perl scripts that consists of only one script that generates question and answer pages from data files. The current scripts are available at: http://www.chem.vt.edu/chem-ed/CHP/scripts/index.html

Prelab Evaluation

The usage and efficacy of the hypermedia prelabs were assessed from the number and patterns of accesses by users, and from student evaluations. The prelab exercises independently log student answers to student files and were a reliable record of student usage. 21 students completed all 10 prelabs, 5 students completed 8 or 9 prelabs, and 2 students completed less than 5 prelabs, for a 92.5% completion rate. Of the completed prelab assignments, 37% were completed before the day of the lab (includes midnight to 8 am of a student's lab day), 44% were completed on the day of the lab (between 8 am and the beginning of a student's lab period at 2 pm), and 19% of the prelabs were completed late (after the start of a student's lab period at 2 pm). Overall, 75% of the students completed the prelab assignments before the beginning of their lab session.

Student responses to a teacher-designed feedback form were collected twice during the semester.[24] The first mid-semester survey was given after completion of a series of spectroscopy lab experiments and the second survey was given near the end of the semester after completion of a series of electrochemistry experiments. The students had sufficient access to the internet,[25] and greater than 85% of all student usage from the lab computers occurred between 11am and 4pm. Peak usage rather than average usage determines the network and computer capacity needed for unrestricted access to a server. Half of the prelabs were done from the lab computers and half were done from elsewhere: university library, workplace, or home.

The mid-semester assessment of the spectroscopy prelabs suggested that the multiple-choice-question prelab exercises helped the students to understand underlying concepts, but were not as helpful in preparing them to perform the laboratory experiments. The numbers of students who answered "agree" or "strongly agree" was 8 out of 24 for Statement 1: "Doing the prelab exercises helped prepare me for the upcoming laboratory work," and 17 out of 24 for statement 2: "Doing the prelab exercises helped me to understand the underlying concepts," (see Figure 7). In response to these results, we developed a graphics-based exercise for each of the electrochemistry prelabs. The responses to the same statements for the electrochemistry prelabs are shown in Figure 8. There is a small increase in the number of responses indicating that the prelabs helped the students to do the actual lab work. However the differences in the laboratory experiments make it impossible to attribute the higher response to the clickable-map images alone.

Fig. 7. Spectroscopy Prelabs Survey Results

Section 4: Summary

The students actively used the interactive hypermedia prelab exercises, suggesting that the WWW will be a viable means of delivering educational material. The small class size and lack of a control prevents drawing any conclusions on the effectiveness of the hypermedia. The survey results and student comments suggest that the content of the material is the important factor as to how well the material meets its goals, in this case, to prepare students for their laboratory work. Future prelabs will consist of one graphics-intensive exercise using either clickable maps or simulations of the experimental set-ups, and three multiple-choice questions of which at least one will directly test the reading and understanding of the lab handout.

Acknowledgments

I would like to thank the other contributors to this work, especially Ching-Wan Yip and Ron Earp who did the programming, and Professors Mark Anderson and Gary Long for their assistance with the Instrumental Analysis course. I also gratefully acknowledge the National Science Foundation for financial support through the Division of Undergraduate Education (DUE-9455382) and a Division of Chemistry CAREER award (CHE-9502460).

A Few Discussion Questions

Is the WWW necessary for education?

Who pays for these educational resources, including the total cost of hardware, support, and faculty time?

What is the reward or penalty for faculty to take the extra time needed to use or develop on-line teaching material?

Section 5: References

Note: All WWW links were verified May 29, 1996.

1. Introduction

1. For more information about the Web, see the "The World Wide Web Consortium" home page: http://www.w3.org/, or the "World Wide Web FAQ": http://www.boutell.com/faq/.
2. Rzepa, H. Recent Applications of Hyperactive Chemistry and the World Wide Web; ChemConf '96: New Initiatives in Chemical Education, On-Line Symposium, June 3 to July 19, 1996.
3. Casher, O.; Chandramohan, G. K.; Hargreaves, M. J.; Leach, C.; Murray-Rust, P.; Rzepa, H. S.; Sayle, R.; Whitaker, B. J. J. Chem. Soc. Perkin Trans. II 1995, 7.
4. Wiggins, G. Use of the Internet in Teaching Chemical Information Sources; ChemConf '96: New Initiatives in Chemical Education, On-Line Symposium, June 3 to July 19, 1996.
5. Smith, S.; Stovall, I. Networked Instructional Chemistry; ChemConf '96: New Initiatives in Chemical Education, On-Line Symposium, June 3 to July 19, 1996.
6. Some publications that discuss the use of information technology in education are:
   1. Change magazine; American Association for Higher Education: Washington, DC. Avail. URL:http://www2.ido.gmu.edu/AAHE/Change.html.
   2. CAUSE/EFFECT magazine; CAUSE: Boulder, CO. Avail. URL: http://cause-www.colorado.edu/cause-effect/cause-effect.html.
   3. Syllabus magazine; Syllabus Press: Sunnyvale, CA. Avail. URL: http://www.syllabus.com/.
7. Tissue, B. M. Trends Anal. Chem. 1995, 14, 426. Avail. URL: http://www.elsevier.nl:80/freeinfo/trac/tissue.htm.
8. Tissue, B. M. J. Chem. Ed. 1996, 73, 65.
9. Laurillard, D. Rethinking University Teaching, a Framework for the Effective Use of Educational Technology; Routledge: London, 1993.
10. Varveri, F. S. J. Chem. Ed. 1993, 70, 204.
11. Varveri, F. S. J. Chem. Ed. 1994, 71, 872.
12. Schatz, B. R.; Hardin, J. B. Science 1994, 265, 895.
13. Tissue, B. M.; Yip, C. W.; Wong, Y. L. J. Chem. Ed. 1995, 72, A116.
14. Tissue, B. M.; Earp, R. L.; Yip, C. W.; Chem. Educator 1996, 1(1):S 1430-4171(96)01010-2. Avail. URL: http://journals.springer-ny.com/chedr.
15. See for example: Burks Oakley II, Sloan Center for Asynchronous Learning Environments, http://w3.scale.uiuc.edu/scale/.

2. Hypermedia Design

16. Nielson, J. Hypertext and Hypermedia; Academic: Boston, 1990.
17. Hodges, M. E.; Sasnett, R. M. (Editors) Multimedia Computing: Case Studies from MIT Project Athena; Addison-Wesley, Reading, MA, 1993.
18. Cotton, Bob; Oliver, R. Understanding Hypermedia: From Multimedia to Virtual Reality; Phaidon: London, 1993.
19. Woodhead, N. Hypertext and Hypermedia, Theory and Applications; Sigma: Wilmslow, England, 1991.

3. Hypermedia Prelabs

20. Stein, L. D. How to Set Up and Maintain a World Wide Web Site: The Guide for Information Providers; Addison-Wesley: Reading, MA, 1995. Avail. URL: http://www-genome.wi.mit.edu/WWW/index.html.
21. Till, D. Teach Yourself Perl in 21 Days; Sams Publishing: Indianapolis, IN, 1995.
22. Schwartz, R. L.; Wall, L. Learning Perl; O'Reilly & Associates: Sebastopol, CA, 1993.
23. Schwartz, R. L.; Wall, L. Programming Perl; O'Reilly & Associates: Sebastopol, CA, 1991.
24. Angelo, T. A.; Cross, K. P. Classroom Assessment Techniques: A Handbook for College Teachers, 2nd. ed.; Jossey-Bass: San Francisco, 1993, p. 330.
25. Four of 24 students responded disagree or strongly disagree to the statement I had sufficient access to the internet, on the midsemester survey.
26. Four of 23 students answered agree or strongly agree for the statement I would prefer to have the computer exercises delivered by CD-ROM rather than over the internet, on the end-of-semester survey.
27.