Web-Based Annotation Learning System: Construction and Application

Nowadays many web-based learning materials are presented by hypertext, and the effect of on-line reading has been playing a chief role to the learning outcomes. However, with the information and networking technology changing, reading habits are much more different than before, and hypertext reading has some problems that impede reading efficiency. The research is based on the ground to develop a web-based “annotation learning system”. By using this web-based learning system as a strategy, learner can interact with learning materials and instructors, also make learner to actively explore contents. The result shows that students have high propensity to the system, and most of them feel the system is easy to use. Also, they have positive response that the system can facilitate reading on the hypertext.


Introduction
Over the past decade, rapid advancement in information and networking technology applications has led to many challenges in almost every field globally, especially in education.Internet collects distributed knowledge and personal experience, and user can obtain a large number and diversity of sources immediately.By this changing, Internet resources have become a main way to collect, organize, and produce instruction and learning material.Accordingly, how to utilize Internet resources effectively grow to be an important topic that we should notice, no matter in on-line reading, learning, or organizing information (Yueh & Hsu, 2008).
On-line reading as the fundamental activity of web-based learning (Liu, 2005;Waycott & Kukulska-Hulme, 2003) plays an important role to influence learning outcome.Because of lack of experience and familiarity, readers have to spend more time in reading online material, and they usually prefer skimming or browsing than studying (Morris, Brush, & Meyers, 2007;Wiley & Schooler, 2001).Given a choice, most people will print out an electronic document in order to read effectively and conveniently.Online reading leads people to following a nonlinear reading process as well as thinking way, and this is much more different than usual linear way (O'Hara & Sellen, 1997;Mcknight, Dillon, & Richardson, 1991).So that readers need to pay more attention to organize the information (Chang, Tseng, Yueh, & Lin, 2011); then they can finally get the point, and further reach the higher cognitive level.Also with the variation, reading habits are also changed (Wiley & Schooler, 2001).While scrolling web pages and moving the mouse suggest mostly one-way communication as students receive the presented information only, they have difficulty ac-tively annotating like reading on print books by using familiar mechanisms such as bookmarking, underlining, highlighting main ideas and folding book pages.These reasons make online reading difficult than print-book reading, and seriously affect the performance in web-based learning as well.
For solving above problems of online reading and improving the performance, we intend creating a web-based annotation system that simulate the authentic reading behavior and habits.Annotating is not just a concentration technique to summarize the text (Nist & Hogrebe, 1987), but it involves more cognitive processes, which isolates and marks key concepts at the time of the initial reading for student readers to study later.Moreover, by this way, students actively engage in the reading process, interact with the text, and encode the knowledge at the same time.We expect to make the web-based material to be read easily and enhance the value by the system.

Design Concept
The system simulates the real world reading habits and behavior in its design, with following user-friendly principles both in the interface and in the annotating process to minimize the learning time and errors of system.The purpose of this system is to enhance the effect of online reading, by using the web-based learning system as a strategy, also learner can interact with learning materials, instructors, and other learners, and make them to explore actively.There are three particular merits in our system.
While some existing systems have been developed to annotate the electronic documents, namely Adobe Acrobat ® and Zinio ® , the format of the documents are usually restricted to be read in single application.Users do not directly and freely an-notate the web-based materials unless the correct application is installed in advance.Our system tackles the issue of common accessibility by adopting html documents in the beginning.All web pages in html format can be annotated on our system directly.Instructors and learners can therefore utilize thousands of hypertexts as their learning materials.Besides, all the lines or notes can easily drag to anywhere in the hypertext, in this way, we can even annotate a graph both in underlining or giving notes.Moreover, users don't need to download any software and application, they can use their own browser to get in the system even on different OS.
Second merit, we use color as a coding technique, and system provides users to give definition for every color.Many systems allow users change all kinds of color, but this kind of design can not show the power of color.Based on information processing theory, we combine the advantages of colors and giving definition, and intend to assist learner encoding and recalling the content.Every color in this system is meaningful.Users can easily refer the definition of colors and give annotations.
Third, we combine the instruction and learning functions in the system, especially focus on constructing an environment that supports all kinds of interaction.In every learning material, learners can not only annotate but write down their ideas about the content.In order to facilitate the interaction between learner and instructor, instructors can use annotation system to assess learners' performance and give some advises.According the assessment and advises, learners can revise their annotations and reports.For the interaction between learner and learner, everyone can decide if they want to share their annotation and reading reports or not.They can also read others reports that shared and discussed on the forum.

Function
The main tools of the annotation learning system include saving annotation, deleting annotation, giving note, and underlining the text (Figure 1).The system allows users to underline the reading text by their own color tags and marks.The users define the color for a specific type of mark as shown in Figure 2, and they can also choose different weight and color of the underline to encode the important concepts in the hypertext they are reading.The system also enables users to add a post-it note to the reading context (see Figure 3).The users can select the color and size of words, decide the color of the post-it note, and define the presentation style of the post-it note in the reading text to be icon-with-note, text-only or icon-only.
According to these development of functions, in instructional applications, teachers can provide learning materials to learners, underline, mark, and give notes on them, also evaluate the learners' annotating and their reports from the materials; in learning applications, learners can read the materials by the system, underline, mark, and give notes on them, also write the reading reflections (Figure 4) and submit to the teachers.
In addition, we create "learning diary" to collect learners' reports of the articles, and learners can manage their reports by friendly interface (Figure 5).In learning diary, learners can classify their reports by different contents, choose if they want to share reports or not, and delete reports.They also can view how many people saw the report, and if instructors have assessed reports.

System Architecture
In order to present dynamically in the hypertext, we use DHTML (Dynamic HTML, Javascript & HTML) to label the annotation.We apply absolute position technique to locate annotation which is different from the extensive utilizing Xpoint technique.These two different location techniques have their own advantages, but absolute position technique is much alike real life locating way.Besides, for multiple users to annotate the same document, each annotation needs to define its owner in header.Therefore, each annotation is defined by its owner, color, position, and annotating time (Figure 6).

Methodology
The system was applied in the educational psychology class for the freshman students.There were totally fifty-two articles   in the whole semester, and the main points of these articles specified how to apply psychological theories in our daily life to.Students can read these articles after class, and they were required to write at least eight reading reports in a semester.After a semester application, researchers continued evaluating the user interface usability of the system and learning attitude as well.

Results
There were 36 students recruited to participate in using the annotation learning system during 18 weeks, and providing their opinions and assessments toward the functionality and interface of the system.Most students agreed the functions provided by the system were appropriate and useful.All functions were rated higher than 4-point in the overall scale of 6 (see Table 1).And in the three important functions, writing reports was the highest one (Mean = 4.92, SD = .906);underlying article was the second one; making notes was the third one.Moreover, the results for the item 4 "Above all, Reading online with annotating functions is better than reading on pa-pers" and item 5 "Reading online with annotating functions can fit my learning needs" were also high (item 4 Mean = 4.81, SD = 1.369; item 5 Mean = 4.61, SD = 1.178).According to this statistics, this survey found students generally agreed the annotation learning system really could help them learning, and they liked to read online with underlying, making notes, and writing reports.Furthermore, the results in Table 2 showed that students also liked posting their reports online, and using systems to facilitate managing their reports.
The second part questionnaire asked students their opinion of this system's interface (Table 3).The result could split into two parts, one were the items got above 5 points, included item 6, item 7, item 4, and item1 (in order of high to low).The other were the items got above 4 to 5 points, included item 2, item 9, item 5, item 3, and item 8 (in order of high to low).Students considered writing reports, save annotation, underlying, and arrangement of the system layout is most easily to use.General speaking, students were satisfied with the system, and most students could use and understand it without any problem.
Speaking to learning diary interface, the result points were high as 5.08.Because it was designed as discussion board, students were all familiar with the interface.They could easily use it.
The third part of the questionnaire asked students to evaluate the system's function and interface totally.With the 10-point scale, the result scores were a little in the positive side, ranging form 5.44 to 6.33.Students perceived the system as easy to use (6.33) and integrative (6.25).Generally they were satisfied (6.00) and found the system as nice (5.75) and attracting to them (5.69).
In order to test if the final examination grades impacted the students' opinion of the system, we ran the T-test.As shown in Table 4, it is found that students who got higher grades liked reading online with the annotation function than students who got lower grades (t = -2.421,p < .5).It indicated higher grades students liked to use this system reading than tradition reading.

Conclusion
From the attitude survey, we can see that students showed high propensity to the system.Most students felt the system was easy to use, the interface was integral, and they are satisfied with the system.They could also use the functions of underlying, making notes, and writing reports conveniently.Students considered that they had curiosity about reading online, this tendency made them have high motivations connecting to Internet doing their reading assignments.In addition, comparing to traditional papers, these assignments won't disappear easily like paper works, and they can be modified and organized easily.Automatic collecting assignments and reports could truly facilitate learning more efficient.Moreover, to improve the system's function and interface, students gave some useful suggestions that we can utilize in the future.They suggested that system could provide the function of giving hyperlinks in articles, especially some key concepts that they should understand.Students also hoped the system could save automatically and increase the eraser function as well.
In the future development, we plan to strengthen the assessment function that will make the process of assessment more efficient and convenient, and enhance instructors' inclination to use the system.Furthermore, we will integrate the web-based annotation learning system with different learning strategies to expand its application.By the integration, the annotation system will help learners to learn much more and better.

Figure 1 .
Figure 1.Outlook of the annotating learning system.

Figure 2 .
Figure 2. The function of color tagging and underlining.

Figure 3 .
Figure 3.The function of post-it note.

Figure 4 .
Figure 4. Reading reflections of the article.

Table 1 .
Evaluation of reading functions.

Table 2 .
Evaluation of learning diary functions.

Table 3 .
Evalution of reading interface.