Table of Contents



Study Guide Design

Study Guide Features

Student Response


Future Work



Download Paper
(Words 6 document;
2.9 MB)


Interactive Content Pages

The Home Page

The CHEM 0010 "home" page is the point of entry into the Web pages of the study guide. It clearly states the purpose for creating the CHEM 0010 Web-based Study Guide. Students and visitors to the site are greeted with a short welcome message, some navigational tips, and a brief acknowledgement of the people who assisted in putting together the Web site.

To the students, the home page is where they can locate course information:

  • the course outline,
  • the adopted textbook,
  • the course evaluation scheme,
To all who visit the Web site, they are given an opportunity to:

The Home Page hyperlinks to the pages of the CHEM 0010 Web-based study guide.


Course Content/Glossary

The content of CHEM 0010 is organized into modular units of information. Each content page clearly states the topics that students should learn, followed by related information about the topics. Keywords in the content pages are linked to the glossary pages by hypertexts and HTML (HyperText Markup Language) frames [3]. HTML frames effectively refresh only a portion of the screen. This enables the reader to "pop over" to the glossary page without leaving the current content page. Readers appreciate this functionality as it makes navigation within the site more predictable.

Using hypertext as the method of presentation, the reader can deviate from the sequential organization of the page to pursue a thread of the content on his or her own. This makes hypertext a powerful tool for learning. It opens up an active exploration environment for the reader such that information retrieval is user initiated. The reader builds on his or her knowledge of the topic and has the resources, guidance and assistance to learn.


Problem Session

The practice problems in the study guide are designed as a self-assessment tool for the students. It is organized into the same modular units as the course content pages such that students can quickly identify the topics that present difficulties. With the use of Client-side JavaScript, answers submitted from multiple-choice and fill-in-the-blank type questions activate a dialogue window for evaluation. All other questions in the study guide have accompanying interactive buttons to access hints and answers. Some questions are written using the JavaScript random number generator.

Client-side JavaScript is an effective and elegant method for adding an interactive problem component in a Web site for the purpose of drill and practice. However, some limitations are inherent with Client-side JavaScript.


Tool Bar

A systematic approach to page design simplifies navigation in the study guide. A navigational button bar, which appears at the bottom of the browser screen, provides a consistent user interface. The labels on the buttons are the visual cues for the users to click and explore the areas of interest.

The Periodic Table in the tool bar is a client-side image map. Each element on the Periodic Table is a "live" link to provide students handy information about the element. This feature is visually appealing as well as effective.


Author: Rosamaria Fong
British Columbia Institute of Technology
Chemistry Department
Burnaby, BC V5G 3H2