Creative Education
2012. Vol.3, No.8, 1297-1300
Published Online December 2012 in SciRes (http://www.SciRP.org/journal/ce) http://dx.doi.org/10.4236/ce.2012.38189
Copyright © 2012 SciRe s . 1297
Web-Based Annotation Learning System: Construction and
Application
Hsiu-Ping Yueh1, Ya-Ting Teng2, Weijane Lin3*, Yu-Ching Wang1, Chiu-Fan Hu4
1Department of Bio -Industry Communication and Development, National Taiwan University, Taipei, Taiwan
2Adobe Systems Incorporated, Washington DC, USA
3Department of Library and Information Sc ie n ce , National Taiwan University, Taipei, Taiwan
4Graduate Institute of Inf ormation and Computer Education, National Taiwan Normal University,
Taipei, Taiwan
Received August 31st, 2012; r evised September 30th, 2012; accepted October 15th, 2012
Nowadays many web-based learning materials are presented by hypertext, and the effect of on-line read-
ing 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.
Keywords: Annotation System; Web-Based Learning; Online Reading; Reading Strategy
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 imme-
diately. 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 informa-
tion (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 skim-
ming 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 effec-
tively and conveniently. Online reading leads people to follow-
ing 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 re-
ceive 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, in-
teract with the text, and e n c o de 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.
Web-Based Annotation Learning System
Design Concept
The system simulates the real world reading habits and be-
havior 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 sys-
tem is to enhance the effect of online reading, by using the
web-based learning system as a strategy, also learner can inter-
act 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 anno-
tate 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-
*Corresponding autho r.

H.-P. YUEH ET AL.
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 di-
rectly. 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 sys-
tem provides users to give definition for every color. Many sys-
tems allow users change all kinds of color, but this kind of de-
sign 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 re-
calling the content. Every color in this system is meaningful.
Users can easily refer the definition of colors and give annota-
tions.
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 under-
lining 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 read-
ing 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 lear-
ners’ annotating and their reports from the materials; in learn-
ing 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 as-
sessed reports.
Figure 1.
Outlook of the annotating l earning system.
Figure 2.
The function of color tagging and
underlining.
Figure 3.
The function of post-it note.
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 an-
notation 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
Copyright © 2012 SciRe s .
1298

H.-P. YUEH ET AL.
Figure 4.
Reading reflections of the article.
Figure 5.
Learning diary.
Figure 6.
Annotation header.
in the whole semester, and the main points of these articles spe-
cified how to apply psychological theories in our daily life to.
Students can read these articles after class, and they were re-
quired 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 func-
tions 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); under-
lying 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 anno-
tation 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 stu-
dents 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 easi ly to use. Genera l
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, stu-
dents 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
Table 1.
Evaluation of reading fun ct io n s.
Reading Mean Std. Min Max
1.Underlyin g f unction could help lea rn ing 4.75 1.0793 6
2.Making notes function could help le arning 4.28 .9472 6
3.Writing reports function could help learning 4.92 .9063 6
4.Above all, Reading online with annotation
functions is better than reading on papers 4.81 1.3691 6
5.Above all, Reading online with annotation
functions can fit my learning ne eds 4.61 1.1782 6
Table 2.
Evaluation of learning dia ry functions.
Learning diary Mean Std. Min Max
Learning diar y could help me arrange learning
conveniently 4.53 1.0003 6
Copyright © 2012 SciRe s . 1299

H.-P. YUEH ET AL.
Copyright © 2012 SciRe s .
1300
Table 3.
Evalution of reading interface.
Reading Mean Std. Min Max
1 The layout arrangement of annotating
learning system is designed c l early 5.03 .845 4 6
2 I understand the functions of annotating
learning system quickly 4.94 1.241 1 6
3 I have no problem using the annotating
learning system 4.86 1.268 1 6
4 Easy to use Underlying function 5.06 1.013 3 6
5 Easy to use Making notes function 4.92 .967 3 6
6 Easy to use Wr it ing reports fun ction 5.19 .920 3 6
7 Easy to use S ave function 5.11 1.141 1 6
8 Easy to use Delete function 4.67 1.195 1 6
9 Easy to use Visible/Hide annotati on 4.94 1.145 1 6
Table 4.
T-test of student performance on their preferences.
t df Sig
Mean differen ce
Preferred online reading with WBLA
Final examination grades –2.421* 34 .021 –1.04
Note: *p < .05.
high propensity to the system. Most students felt the system
was easy to use, the interface was integral, and they are satis-
fied with the system. They could also use the functions of un-
derlying, making notes, and writing reports conveniently. Stu-
dents considered that they had curiosity about reading online,
this tendency made them have high motivations connecting to
Internet doing their reading assignments. In addition, compar-
ing to traditional papers, these assignments won’t disappear ea-
sily 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 assess-
ment 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 sys-
tem will help learners to learn much more and better.
Acknowledgements
The authors thank Taiwan National Science Council (NSC94-
2520-S-002-001; NSC95-2520-S-002-001) for their grants to
partially support this study.
REFERENCES
Chang, C.-C., Tseng, K.-H., Yueh, H.-P., & Lin, W.-C. (2011). Con-
sideration factors and adoption of type, tabulation and framework for
creating e-port folios. Computers & Education, 56, 452-465.
doi:10.1016/j.compedu.2010.09.006
Liu, Z. (2005). Reading behavior in the di gital environment: Changes in
reading behavior over the past ten years. Journal of Documentation,
61, 700-712. doi:10.1108/00220410510632040
Mcknight, C., Dillon, A., & Richardson, J. (1991). Hypertext in context.
Cambridge, U K: Cambridge University.
Morris, M. R., Brush, A. J. B., & Meyers, B. R. (2007). Reading revis-
ited: Evaluating the usability of digital display surfaces for active
reading tasks. Proceedings of the Second Annual IEEE International
Workshop on Horizontal I nter a ctive Human-Computer System, 1, 79-
86.
Nist, S. L., & Hogrebe, M. C. (1987). The role of underlining and anno-
tating in remembering textual information. Reading Research and
Instruction, 27, 12-25. doi:10.1080/19388078709557922
Nist, S. L. (1987). Teaching students to annotate and underline text
effectively—Guidelines and procedures. College Reading and Learn-
ing Assistance Technical Report No. 87-02, Eric Document Repro-
duction Services No. ED281155.
O’Hara, K. & Sellen, A. (1997). A comparison of reading paper and
on-line documents. Proceedings of CHI 1997, Atlanta, 22-27 March
1997, 335-342.
Shneiderman, B. (1998). Designing the user interface: Strategies for
effective human (3rd ed.). Boston, MA: Addison Wesley Longman,
Inc.
Stone, N., & Miller, K. (1991). Developmental college reading: Secrets
of our success. Research & Teaching in Developmental Education, 7,
27-42.
Walz, J. (2001). Reading hypertext: Lower-level processes. Canadian
Modern Language Review, 57, 475-494. doi:10.3138/cmlr.57.3.475
Waycott, J., & Kukulska-Hulme, A. (2003). Students’ experiences with
PDAs for reading course materials. Personal and Ubiquitous Com-
puting, 7, 30-43. doi:10.1007/s00779-002-0211-x
Wiley, J., & Schooler, J.W. (2001). The mental web: Pedagogical and
cognitive implications of the net. In C. R. Wolfe, (Ed.), Learning and
teaching on the world wide web (pp. 243-257). San Diego, CA: Aca-
demic Press. doi:10.1016/B978-012761891-3/50015-1
Yueh, H.-P., & Hsu, S. (2008). Designing a learning management sys-
tem to support instruction. Communications of the ACM, 51, 59-63.
doi:10.1145/1330311.1330324