Web-Based Annotation Learning System: Construction and Application

doi:10.4236/ce.2012.38189

Paper Menu >>

Journal Menu >>

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

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

Email: *[email protected]

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

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

H.-P. YUEH ET AL.

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