ype 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
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).
The system was applied in the educational psychology class
for the freshman students. There were totally fifty-two articles
Copyright © 2012 SciRe s .
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
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.
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
Copyright © 2012 SciRe s .
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
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.
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.
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.
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-
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,
Stone, N., & Miller, K. (1991). Developmental college reading: Secrets
of our success. Research & Teaching in Developmental Education, 7,
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.