Toward A New Educational Environment

Ming-Chih Lai
Bih-Horng Chen
Shyan-Ming Yuan

There are two major problems when we first try to construct a campus wide educational environment on top WWW. First it is basically an one-way interactions between teachers and students. Teachers put materials into the information store and students retrieve them. Secondly students are often lost when navigating in hypermedia documents. In order to improve the interaction between teachers and students, we take use of the existing communication facilities in Internet like electronic mail, text talk and our newly-designed communication facility: Notebook. In order to prevent students lost in hyperspace, we add two new navigation facilities to current WWW system: Overview map and Guider.
Notebook, Overview map, Guider


In our campus, using computer networks has become part of students' life. Students of our school can easily connect to Internet with their personal computers by adding simple network interface card. Everyday students login to obtain new information, to do their homeworks or just to talk with others. With the growth of computer networks in our school, "How to use computer networks to make educational environment more efficient and better" becomes a new challenge we need to conquer. In order to find a new educational environment based on current computer network , we start a new project called Albatross. In this project we want to derive a new educational environment in which

On the way to construct this new educational environment, we find that two primitives are necessary.

  1. A good data model is needed to ease teachers' authoring and students' reading.
  2. Proper communication facilities are needed to improve the interaction between teachers and students.

In our first design, we use WWW as our basic data model. WWW provides us a very good hypermedia data model which can help teachers to organize their teaching materials and students to read through the whole documents. Because of the simplicity of HTML, teachers can edit their teaching materials without any special skill. Rich texts, graphics, movies, and animations can be used. As to communication facilities, we use electronic mail as an asynchronous communication way to connect people who are not on-line and use text-talk and chatroom as a synchronous communication way to connect people who are on-line.

However, there are some problems in our first design. We find that students are often lost in the hyperspace. The only navigation tool provided by WWW is a history-based mechanism. It seems not enough. In addition, many documents are missed by our students, because students don't know their existences. In order to solve these two problems, we design two new navigation tools: Overview map and Guider

The communication facilities we adapt in our fist design are electronic mail and text talk. They are all private and one-to-one. Teachers find that students always have the same problems about the same topic such that they have to answer the same questions frequently. We want our students can share their experiences with others, so a communication facility: Notebook is added.

In order to give students a friendly user interface, we redesign the interface of the original WWW client. Our new interface can reduce the operations that students need to take if they want to use of our new facilities. In the following sections of this paper, we first give a overview of our new environment and a introduction of our new client. Then the three new facilities:Overview Map , Guider, and Notebook are discussed in detail. Some conclusion remarkes are than followed.

Overview Of Our Educational Environment

Our educational environment is shown in figure 1. In this new environment, students can make their own learning schedules. The role of a student changes from a passive listener to an active participant. Any time students want to learn, they can turn on their computer and execute our new-designed client. Through our new client, they can get the learning materials provided by their teachers in the hypermedia form from the network server. Our new client also provides many new services. Overview map provides users a complete view of the whole course. Through the Overview Map, students can know the position of their current-reading document in the whole course. Students can directly access the document they want to read by just double-clicking the topic of the document in the Overview map. Another navigation facility is Guider. The main function of Guider is to help students read through all hypermedia documents smoothly. When students read the wrong documents, the Guider will give student the right documents they should read before this document. The knowledge about which documents should be pre-read is specified by the teachers.

Figure 1 Overview of our new educational environment

In this environment, if students have any question about any topic, they can mail to their teachers or someone who has already read the topic via electronic mail systems. If students want to discuss some topic with some people, they can create a new chat-room or directly talk to someone who is on-line. If they have any conclusion or idea, they can post to our new facility, Notebook. Notebook is like a bulletin board that everyone can post experiences for sharing. Students are encouraged to use Notebook, if they have any questions or ideas.

Guider , Overview Map, and Notebook are all implemented by CGI (Common Gateway Interface). Using CGI , we can easily add our new services. But we don't use the Fill-out Form to access our new services. We design new interface for our new services to save many wasted operations. The interface of our new client can be departed into three main panes : the right pane is WWW pane, the up-left pane is Overview Map pane, and the left-bottom pane is Notebook pane. Students can select any titles in the overview map pane or subjects in Notebook pane and show the data in the WWW pane. The size of this three panes are not fixed. Users can adjust the size of every pane by drag the line-bar between panes. Since the computer monitor is too small to hold all information, the design let users be able to utilize the maximal monitor size to contain the information they are interested in.

Overview Map

The overview map is shown in figure 2. The purpose of Overview map is to give students a complete view of courses and to provides another way for students to access the documents in the site. In order to organize the whole documents of a course into a complete view, we provide another special link that different from the WWW anchor. We call this kind of link an organization link. After connecting all relationship specified by organization links. a tree-link graph will appear. Organization link is like "the trunk of a tree". Teachers can use this link to construct the skeleton of their teaching materials. Because the graphic-architecture is too difficult to show in the current window system, so our overview map is based on tree architecture, instead of graph architecture.

Figure 2 Overview map

The organization link is specified by two new HTML tags. The syntaxes of these two tags are:

  1. <PARENT HREF="URL"> is put in the child document to point out the parent document.
  2. <CHILD HREF="URL"> is put in the parent document to point out the child document.

When teachers edit their teaching materials, they can put these two special tag into the head of the HTML files. The Overview map will generate a tree structure by analyzing all tages of documents. The communication steps of Overview map are

In the step3, we translate the tree architecture into the HTML unordered list to let other WWW browser, like Mosaic and Netscape can use our Overview map service. The Overview Map in Netscape is shown in figure 3. The Overview map by Netscape will disapear when users access other documents because Netscape only have one pane.

Figure 3 Overview map in Netscape.


Guider is another navigation facility for preventing students lost in hyperspace. Unlike other path control mechanism of hypermedia, Guider doesn't directly influence the students' learning paths. It only works when students go to the wrong road. When a student turn on the Guider, the Guider will monitor learning path of the student. When students access the wrong documents, Guider will respond some advises.

Figure 4 shows the basic idea about how guider knows whether a student accesses the wrong documents or not. In the guider, teachers can specify the pre-read documents of each document. If students want to read a particular document, all pre-read documents of the document must be accessed before. Pre-read link is another special link that is different from the original WWW anchor. The diagraph constructed by all pre-read links must be acyclic. It is not natural to have a cyclic pre-read relationship. For example, if node A has a pre-read node B and node B has a pre-read node A, which one should we read first?

Figure 4 Basic idea of Guider

Because different students should have different learning schedules, Guider can let teachers design different learning schedules. For example teachers can design three levels of learning schedules, for instance, novice, intermedia, and expert. The three different levels to different students according to their characteristics. Novices must read document one by one and experts can skip many unnecessary documents.

Similary, we provide another HTML tag for teachers to specify the pre-read relationship. The syntax of this tag is :

<PREREAD HREF="URL of pre-read document" LEVEL="level">.

The HREF field is used to point out the address of pre-read documents. The LEVEL field is used to point out the level of students who should be applied.

Guider is implemented by CGI. The Guider CGI takes two responsibilities. First, the CGI should keep record the documents that the students have read. Second, if any request for a document comes in, the Guider CGI shoud check the pre-read documents of the requested document. If all the pre-read documents that belongs to the level of the student who is requesting the document are read by the student, the Guider CGI returns the requested documents. Otherwise the Guider CGI returns a list of the pre-read documents that are not read by the students. Figure 5 give us a glance of the returned HTML when a student does not have the right to access his requested document.

Figure 5 Advises from the Guider

Another advantage of Guider is that a teacher can design various learning schedules for different students. When designing a good path control mechanism in hypermedia, a designer often finds the conflict between the freedom of hypermedia and the strictness of his control mechanism. The freedom of hypermedia improves the organization ability of the students and also make them lost in the hyperspace. By using the Guider, the freedom of hypermedia can be adjusted, teachers can design a very strictest path to let students read documents one by one or doesn't put any limitation on the hyperspace.


The purpose of Notebook is to let students be able to share their experiences with others. Students can ask for help in the Notebook and their seniors or teachers can answer the question. One or more teachers can answer questions in the Notebook. It is different from the traditional education environment. In traditional educations, it is not easy to see that two teachers teach the same course at the same time in the classroom. In our environment, teachers can share their teaching experiences also. Different answers will give students different views of the same problems. The interface of Notebook is shown in figure 6.

Figure 6 Notebook

The main idea of Notebook is from the Internet service, News. The Notebook is like a bulletin board which every one can record his opinion on. But our Notebook has a little difference. Our Notebook has a new kind of post we called private note. Private notes are like annotations that is used to help students memorize their private ideas or summaries. Private note can not be read by other people.

We take care of all the behaviors of our users by two CGI programs in Notebook. Instead of doing all things in one program, we divided the behaviors of the students into two classes, posting and reading. Each class has his own program to take care of.

When students want to post, they can pop up the post dialog in which they can fill out their name, their password, the subject of their post, the post data and whether this post is private or not. The post dialog is shown in figure 7. Our client will send the data in the post dialog with the filename of currently-reading document to the Notebook CGI program. The Notebook CGI check the identification of the student. If the student is legal, the program will record the post data. Otherwise an error message will return.

Figure 7 Post Dialog of Notebook

In the reading session, users can retrieve a list of subjects of notes according to their requirements. They can request a list of subjects that related to the currently-reading document or a list of subjects of his private note. A get note dialog is shown in figure 8. After getting a list of subjects, students can choose one of the subject they like and show it in the WWW pane.

Figure 8 Get Note Dialog of Notebook

All data saved by Notebook is in HTML format. The subjects of all post notes are stored in an HTML unordered list. Teachers can directly manage the posts of students. If they feel that some posts are useless, they can delete them just like deleting some elements in the HTML file.


In order to integrate our client with some external communication facilities well, we provide another special service for our students. Our client and server will record all the learning history of students. When a student have some problem, they can query " Who has already read this document". A list of names of people who have already read this document with his email address will return. Students can then contact to them according to the email address information. The learning history of students can also be used for studying learning behavior of students.


Currently, we have already setup a fundamental network course for our freshman. The homepage address of his course is [ ]. All our newly-designed facilities have already been applied in this course. An experiment that tries to find the difference between learning with and without our new facilities is on progress.

In this project we want to construct a new educational environment based on current computer technology. We adapt the WWW hypermedia model and many existing communication facilities. Moreover, we design some new facilities to make the process of teaching and learning more efficient and eliminate the uneasiness of teachers and students caused by facing new computer technology. In this new environment, learning and teaching are much different from the traditional face-to-face education environment. Teachers and students does not need to get together at particular time. The role of teachers and students are also changed. Teachers are changed from speakers to assistants. Students are changed from listeners to active participants.

The educational outcome of this new environment seems well. With the advance of the computer technology, everything seems getting better and better. On the way toward a new educational environment, we try our best to find the suitable way of education in current computer-mediated communication environment. With the responses of teachers and students, we can further enhance our environment in the future.


This work is partially supported by the National Science Council of R.O.C., under the contract number : NSC84-2511-S009-004 CL.


1. Eleonora Bilotta, Mariano Fiorito, Dario Iovane, Pietro Pantano, An Educational Environment Using WWW,Third WWW Conference 1995.

2. Sougata Mukherjea, James D. Foley,Visualizing the World-Wide Web with the Navigational View Builder, Third WWW Conference 1995.

3. David Nicol, Calum Smeaton, Alan Falconer Slater, Footsteps: Trail-blazing the Web, Third WWW Conference 1995.

4. Daniel LaLiberte, Alan Braverman,A Protocol for Scalable Group and Public Annotations,Third WWW Conference 1995.

5. Martin Rercheisen, Christian Mogensen, Terry Winograd, Beyond Browsing : Shared Comments, SOAPs, Trails, and On-line Communities, Third WWW Conference 1995.

About the Author(s)

Ming-Chih Lai []
Institute of Computer & Information Science
National Chiao Tung University
Hsinchu, Taiwan, R.O.C. 30050

Bih-Horng Chen []
Institute of Computer & Information Science
National Chiao Tung University
Hsinchu, Taiwan, R.O.C. 30050

Shyan-Ming Yuan []
Institute of Computer & Information Science
National Chiao Tung University
Hsinchu, Taiwan, R.O.C. 30050