DIGITAL INK AS A COLLABORATIVE LEARNING SUPPORT

Ana Paula Ambrosio, Charles Almeida, Fabio Costa, Halley Gondim

Lucas Provensi and Luciana Oliveira

Instituto de Informática, Universidade Federal de Goiás (UFG) Campus II, Samambaia

Caixa Postal 131, CEP 74001-970 Goiânia, GO, Brasil

Keywords: Collaborative Learning, Digital Ink, Sketches.

Abstract: Collaborative Learning is a technique used in problem or task resolution where learning occurs through the

exchange of knowledge between students, and between students and teachers. In some situations

communication between partners is better undertaken through the use of sketches or diagrams. The

proposed environment introduces several tools into a computer supported learning environment using digital

ink to facilitate expressiveness and creativity.

1 INTRODUCTION

The “Information Era” has brought changes to

society that reflect in the teaching/learning

environment. Institutions now need to be more than

knowledge transmitters, becoming creators of

stimulating environments, which must allow for

partnership, exchange of experience and, above all,

allow the development of critical and reflexive

thinking (Basso 2000).

Furthermore, several researchers defend the use

of technology as a pedagogical resource through the

replacement of traditional expositive classes with

classes offered with an alternative, more attractive,

methodology, using computers, with interaction

through websites, software and pedagogical games

(Almeida 2008, Moran et al. 2004).

In this scenario, Collaborative Learning is a

methodology that has gained importance. It is used

in problem or task resolution where learning occurs

through the exchange of knowledge between

students, and between students and teachers

(Verburgh and Mulder 2002).

Computer Supported Collaborative Learning

offers a “collaborative environment” composed of

several tools structured in the form of a groupware

whose objective is to support communication,

collaboration and coordination in group-based

learning activities (Nitzke et al. 1999).

There are several collaborative content

environments available for use on the Internet.

These include blogs, forums, discussion lists and

wikis. In these systems, users express collaboration

effectively through writing. However, there are

many collaborative activities that are totally

dependent on essentially visual content.

This type of content includes sketches, diagrams

and technical designs, and is not well adapted to

traditional environments, where information is

basically presented in textual form. However,

drawings/sketches can be used in the learning

process to develop the habit of observation, the spirit

of analysis, and the taste for precision. It would also

be through drawings that purity of imagination is

reactivated and the gift of invention enabled (Costa

2005).

The introduction of digital ink in the

environment facilitates this type of activities, giving

users greater freedom of expression, allowing them

to exchange ideas in a more creative and natural

way, enhancing communication, transforming some

collaborative work difficulties in facilities.

Digital ink is a technology that represents

drawings, sketches, and handwriting in its natural

form. The use of digital ink is interesting because it

allows for free expression, preserving the personality

context of the person who writes. There is no

restriction to a predefined structure, not even the

need to write inside lines.

By exploring the digital environment, educators

and students will be able to move on to a new, more

powerful and more efficient paradigm of learning

309

Ambrosio A., Almeida C., Costa F., Gondim H., Provensi L. and Oliveira L. (2009).

DIGITAL INK AS A COLLABORATIVE LEARNING SUPPORT.

In Proceedings of the First International Conference on Computer Supported Education, pages 308-313

DOI: 10.5220/0001981603080313

 SciTePress

(Tapscott 1998), making use of devices with native

resources for digital ink, among them tablet PCs,

smartphones, PDAs and others.

The drawing process associated with digital ink

offers users benefits such as:

 It is fast, adequate to the short memory

capacity.

 It is implicit and does not require sequential

form or any special structure.

 It serves for analysis, verification and

simulation.

 It is inexact and abstract, avoiding the need to

include unnecessary details.

The main objective of this paper is to describe a set

of tools for collaborative learning support that

enhances the environment with digital ink. The tools

present characteristics of interactivity and

expressiveness by allowing the use of notes,

sketches, diagrams and tracing as means for

exchanging ideas, instead of limiting communication

to writing. It extends the benefits of collaborative

group work, giving users the possibility to create,

edit and administrate visual content, in the same

environment used for text.

The remaining of this paper is structured as

follows. Section 2 presents an overview of the

environment that results from the integration of the

above-mentioned tools. Sections 3 to 6 describe each

of these tools in more detail and Section 7 presents

some conclusions from the work.

2 THE ENVIRONMENT

The proposed environment is a collaborative system

whose goal is to provide advanced features to

increase interactivity and expressiveness through the

use of digital ink. As part of this system, a set of

tools have been proposed and implemented:

 A Digital Ink Wiki that presents

characteristics of interactivity and expressiveness

by allowing the use of notes, sketches, diagrams

and tracing as means for exchanging ideas, instead

of limiting communication to text-based writing.

 A Slide Annotator that uses digital ink to

integrate an electronic classroom environment

based on slide presentations with a didactic

knowledge. Through this tool, students have

access to complementary material that will assist

them in understanding and learning the subject

being discussed in the classroom.

 A Flowchart Designer that integrates

computer program flowcharts and digital ink to

help first year students in the design of algorithms.

The use of flowcharts has three main reasons:

flowcharts have a minimal syntax; they are a

universal representation; and they are easier than

code structure for beginning students.

 A Distributed Ink-based Whiteboard that

enables real-time interaction among a group of

users by sharing a common, virtual, writing and

drawing surface, which is presented to each user

on its own device (typically a tablet PC). Users are

allowed to ink on their local instance of the

whiteboard while this ink is transmitted and

rendered on other devices in the group via the

classroom's wireless network.

The proposed environment has been developed

inspired by the first year course on Algorithms and

Computer Programming. This course has always

presented a challenge for Computer Science

Programs, probably because algorithmic reasoning is

typically not part of the background students bring

from high school.

Even though some of the tools have

characteristics specific to this domain, most are

generic and can be used for any domain where

sketches and drawings are relevant.

3 DIGITAL INK WIKI

With the Digital Ink Wiki (DIWiki) (Almeida et al

2008), it is possible to share ideas in a more natural

way, by allowing students to post drawings /

sketches on the Wiki. These sketches can then be

edited by other students using digital ink.

The tool also makes the correction activity easy.

By using digital ink, users (teacher / students) will

be able to use handwriting to annotate on content

posted in the Wiki.

Furthermore, DIWiki (Figure 1) offers basic

annotation features that allow users to mark,

underline, emphasize or circle words in a sentence,

as well as draw or make notations in the edges.

These annotations or comments are reminders that

we add to the documents to signal information or to

highlight items of interest for subsequent reference.

Advanced features include sticky notes. This

functionality offers flexibility in order to include

several types of content in a document, for example,

digital text, handwritten notes, "paint" aspects, or

Web links.

CSEDU 2009 - International Conference on Computer Supported Education

310

The environment has two ink tool bars: Drawing,

which can be used to draw and to write, and Ink

Annotations. Both include a series of ballpoint pens,

felt-tip pens and highlights to personalize the color

and the width of the ink. It is possible to use the

Drawing tool bar to insert diagrams, maps or images

in the document being published.

Figure 1: The DIWiki environment.

Data storage in the tool is done using the Ink

Serialized Format (ISF), a file format specific for ink

serialization that is compact, with high quality

representation. Furthermore, the tool is able to

recognize and export ink objects in different file

formats, such as GIF and bitmap. This extensibility

feature allows ink objects to be accessed through

more than one interface (e.g., in devices with no

native support for ink).

DIWiki offers a favorable environment for the

knowledge construction process among students and

among students and teachers, allowing collaborative

learning through data sharing in several

environments, such as wireless networks and mobile

devices, guaranteeing users real-time access to the

relevant information.

4 FLOWCHART DESIGNER

Sketches are handmade drawings with the goal of

solving or clarifying a given problem or subject. As

in handwriting, each person shows different

characteristics when producing sketches. There are

innumerable forms of drawing an object, and this

can vary from person to person (Figure 2).

Figure 2: Different forms of sketching a rectangle.

To this, we can also add the inability of humans to

draw curves and lines. This makes the recognition of

sketches a difficult task (Davis 2007).

In Flowchart Designer, the process of sketcing is

divided in two modules. First, the student freely

sketches a flowchart with the aid of a digital pen.

Second, the sketch is interpreted and converted into

Java code. In the first module, the student creates the

flowchart, using basic ink drawing functions such as

erase, cut, paste, change color and select area for

interpreting (i.e., execution of specific parts). At the

end, the student selects the RUN button, and the

flowchart is interpreted. If recognition is not

satisfactory, the program offers a list of suggestions

for the part of the sketch that was not recognized and

the student can choose what the sketch really

represents.

To implement the sketch recognition module, we

use the LADDER system (Paulson et al 2007). It is

based on the Natural Interaction system (or Magic

Paper) (Davis 2007), which uses a hand scale that is

in fact a constraint language of forms that describe

the sketch, observing the direction, curvature and

speed of sketching (Figure 3).

The sketch recognition language allows the

description of more complex forms, based on more

primitive ones and associated with a context. For

example, Figure 4a shows the description of an

arrow as the union of three connected lines with

specific sizes (shaft, head 1 and head 2).

Figure 3: Features of a sketch. (a) sketch of a square and

the direction of drawing (b), (c) curvature and (d) speed of

drawing (Davis 2007).

Figure 4: (A) Declaration of the arrow shape in LADDER

(Paulson 2007). (B) Sample flowchart basic shapes.

During interpretation, if there is a syntactic or lexical

error, the user is pointed to the part of the flowchart

where the error occurred. The user can then edit the

sketch to carry out the correction. When the

flowchart is ready, the user can convert it into

programming language code (Figure 5).

DIGITAL INK AS A COLLABORATIVE LEARNING SUPPORT

311

Figure 5: Sample flowchart sketch (A), recognized shapes

(B), and result of conversion into code (C).

The sketch can be published and modified by other

users (students). Modifications can be tested in the

same way as the original sketch. Versions of the

flowchart are kept, representing the modification

sequence.

Figure 6: Shapes recognized by LADDER (A), and the

original sketch without smoothing the lines (B).

5 SLIDE ANNOTATOR

The use of adequate and easily accessible didactic

material (scientific articles, e-books, Web pages,

among others) is essential to establish a permanent

dialogue in a learning environment. For instance,

this is important in order to give advice to students,

to motivate learning and increase knowledge on the

worked subjects, to promote critical understanding

of contents, to instigate the student for research, and

to make possible the supervision and evaluation of

the learning process (Neder 2001).

In this sense, the Internet is ever increasing its

presence in the daily life of students. However, one

of the most important challenges is the retrieval of

relevant documents. Depending on how the query is

made, the selection of relevant material may be very

time consuming.

The identification of relevant information is carried

out by human beings in a natural way by analyzing

the document’s context. The simple reading of a

heading or a summary, for example, can elucidate

the content of the material at hand. When carried out

by an automated system, this task is no longer

trivial.

The Slide Annotator tool allows students to

retrieve relevant didactic material associated to the

subject being presented by the teacher. This can be

done in class, while the teacher is explaining the

subject, or later, when the student is reviewing or

studying the subject.

The electronic classroom environment in

consideration here assumes that lessons are

delivered in synchronous form, with teacher and

students co-located in the same environment at the

same time. The tool was inspired by Classroom

Presenter (CP), a presentation tool developed by the

University of Washington that allows the sharing of

digital ink in slides between teacher and students

(Anderson et al. 2007).

With CP, all students receive, in real-time,

working copies of the teacher’s slides. CP allows

teachers to interact with students through digital ink

annotations on the screen, used to clarify questions

and propose exercises, among others. Students can

also send questions to the teacher and receive

feedback.

Slide Annotator builds upon CP by allowing

students to select words contained in the

presentation and access a set of documents related to

the context being shown in the slide display area.

For example, take the slide presented in Figure

7. If the student marks the word “alphabet”, the tool

analyzes the slide’s context and verifies that the

subject being treated in this lesson is related to “state

diagrams” and selects documents that deal with

alphabets in this specific context and not just any

alphabet. It is worth noting that documents are not

limited to text, but can include drawings,

demonstrations, exercises, simulations etc.

Moreover, when opening a slide using the tool,

information recovery techniques, applied

automatically to the document, identify words

considered relevant in a slide and convert them into

hyperlinks, allowing students prompt access to

complementary didactic material, either previously

selected by the teacher and stored in a repository, or

retrieved from the Internet.

CSEDU 2009 - International Conference on Computer Supported Education

312

Figure 7: Example of interaction between teachers and

students on Classroom Presenter.

Figure 8: Example of recovery of contextualized teaching

material.

The retrieval of relevant material is done using

query expansion to better contextualize the original

user query. The technique consists in the addition of

related terms to those originally defined in the query.

To enable query expansion, an analysis of the

presentation and the slide content is undertaken to

identify related terms, such as synonyms, stemming

variations, or terms that are physically close to the

query terms in the slide.

Figure 9: Example of query expansion.

6 DIGITAL INK WHITEBOARD

It is widely known that the ability to share and

exchange content is vital in the learning process.

This is especially true about content that students

produce during lectures and other classroom

activities as part of the cognitive processes that take

place while learning a new subject. In particular, we

are interested in group-based learning, whereby

students gather around a virtual shared space where

they can express their ideas in a natural way using

digital ink. Drawings, annotations, sketches and

other forms of graphical representation drawn by a

student are immediately transferred and rendered on

the screen of the other students in the group.

Problem-solving activities are a natural fit for this

kind of collaboration tool.

While a number of tools exist that allow this kind

of interaction in the classroom, among them Jarnal

(Levine and Teege, 2008) and Group Scribles

(Roschelle et al. 2007), we observe that they

typically suffer from poor quality of interaction due

to networking problems that are common in a

congested local wireless network such as in a busy

classroom where each student has his own wireless

device. Typical problems include packet loss and

delay, which may cause, respectively, the loss of

vital ink strokes or their late reception by some

users. In most situations, besides being a nuisance to

users (as interaction through digital ink becomes out

of sync with face-to-face interaction), may cause

misunderstandings as, e.g., parts of a sketch or

formula may be missing on some users' screens.

To tackle this problem, we designed and

implemented an adaptive middleware platform that

is able to autonomically reconfigure the underlying

communications mechanisms in order to alleviate or

eliminate packet loss and delay (Provensi et al

2008). Such adaptations are performed on behalf of

users in a transparent way, requiring no user

interaction with the middleware and, in the typical

case, enabling user-to-user interaction to proceed

without any noticeable change. Typical adaptations

include compression and/or reduction of the quality

of ink representation (without noticeably

compromising its rendering), as well as

configuration of network packet sizes.

The ink-based whiteboard was then implemented

on top of this adaptive middleware platform,

resulting in an interaction environment that

guarantees the quality of service that is required for

a meaningful real-time collaborative application. We

plan to implement other collaborative applications

on top of this middleware platform, such as ones

that use rich multimedia content at real-time. We

also plan to experiment with this platform to build

applications aiming at distance-based collaboration.

7 CONCLUSIONS

The goal of this work was to describe a collaborative

learning support environment that integrates digital

Original query: computer programming

Query expansion: computer

programming program

data

language algorithm programmer …

DIGITAL INK AS A COLLABORATIVE LEARNING SUPPORT

313

ink into the learning environment. This allows for

more freedom and creativity in the environment,

adapted to situations that require visual interaction

by means of drawing and sketches.

In this context, the paper presented concepts,

forms of interaction, main features, aim and

functionalities of the proposed tools. These tools

form a rich classroom environment, especially for

teaching and learning activities that involve group-

based problem solving.

We have begun to use these tools in a number of

courses on Introductory Computer Science, both for

major and non-major students. These courses are

offered in a tablet PC laboratory, where students

have access to digital ink technology in a one tablet

per student basis. The PBL methodology (Schmidt

1983) is used to introduce the course syllabus,

complemented with lessons using ink-annotated

lecture notes. Students are encouraged to seek the

solution collaboratively and independently of the

teacher that acts only as a guide. The proposed tools

are used to facilitate communication and enhance

discussions within and between groups.

One of the main outcomes has been a substantial

increase in student engagement, evidenced by higher

class attendance levels and lively discussions among

the students, both during and after class.

As future work, we plan to integrate the four

tools described in this paper, in order to ease the

process of switching from one tool to another and

also to enable the meaningful exchange of ink data

among them.

ACKNOWLEDGEMENTS

This work was supported by the HP Technology for

Teaching Higher Education Grant 2007.

REFERENCES

Almeida, R. G. (2008), A utilização da informática como

recurso pedagógico (In Portuguese). http://www.

vivenciapedagogica.com.br/informaticarecursopedago

gico.

Almeida, C., Ambrosio, A.P. Costa, F. (2008), Digital Ink

WIKI, in Proceedings of I2TS 2008, Foz do Igauçu

Brazil.

Anderson R. et al (2007) Classroom Presenter: Enhancing

Interactive Education with Digital Ink. Pages 56–61.

Computer, 40(9), pp. 56-61.

Basso, C.M. (2000) Algumas reflexões sobre o ensino

mediado por computadores (In Portuguese).

http://www.ufsm.br/lec/02_00/Cintia-L&C4.htm.

Costa, L. (2005) Registro de uma vivência (In

Portuguese). São Paulo: Empresa das Artes, Journal of

Health Geographics, v.22.

Davis, R. (2007) Magic Paper: Sketch-Understanding

Research, Computer, vol. 40, no. 9, pp. 34-41,

September, 2007.

Levine, D.K. and Teege, G. (2008) Jarnal Documentation.

Project website at http://www.dklevine.com/general/

software/tc1000/jarnal.htm

Moran, J. M., Masetto, M. T., and Behrens, M. A. N.

(2004) Novas tecnologias e mediação pedagógic. Ed.

Papirus ISBN 85-308-0594-1 (In Portuguese).

Neder, M. L. C. (2001) Educação e Comunicação em

Educação a Distância. Curitiba: UFPR, 2001. v. 01.

145 p. (In Portuguese)

Nitzke, J.A., Carneiro, M.L.F., Geller, M., Santarosa, L.C.

(1999) Criação de Ambientes de Amprendizagem

Colaborativa (In Portuguese). 10

SBIE, Curitiba-PR.

http://penta.ufrgs.br/pgie/sbie99/acac.html.

Paulson, B. and Hammond, T. (2007) A System for

Recognizing and Beautifying Low-level Sketch Shapes

Using NDDE and DCR. 20th Annual ACM

Symposium on User Interface Software and

Technology Posters, Newport, Rhode Island, October

3-7, 2007

Provensi, L, Costa, F. and Sacramento, V. (2008), Self-

Adaptive Middleware for Digital Ink-Based

Applications, in Proceedings of the 7

International

Workshop on Adaptive and Reflective Middleware,

Leuven-Belgium.

Roschelle, J., Tatar, D., Chaudhury, S.R., Dimitriadis, Y.,

Patton, C. and DiGiano, C. (2007) Ink, improvisation,

and interactive engagement: Learning with tablets,

Computer, 40(9), pp. 42–48.

Schmidt, H., 1983. Problem-based learning: Rational and

description. Medical Education, 17, 11–16.

Tapscott, D. (1998). Growing Up Digital. The Rise of the

Net Generation. New York: McGraw Hill.

Verburgh, A. and Mulder, M. (2002). Aprendizagem

colaborativa assistida por computador: um incentivo

para uma aprendizagem mais profunda (In

Portuguese). Revista Européia, nº 26.

CSEDU 2009 - International Conference on Computer Supported Education

314