A Mobile Web Game Approach for Improving Dysgraphia
Daniela Giordano and Francesco Maiorana
Department of Electrical, Electronic and Computer Engineering, University of Catania, Viale A. Doria, 6, Catania, Italy
Keywords: Dysgraphia, Serious Game, Web Development, Mobile Game.
Abstract: Dysgraphia is a learning disability that affects the performance of children's handwriting, which can
seriously impact their school performance and their willingness to write their thoughts, and can also
adversely affect their social life and can lead to low self-esteem. In this work a mobile web-based serious
game for improving children's handwriting is presented. The design principles of the game are presented as
well as the software tools and frameworks used for its implementation, including the results of an initial
informal testing with children which are presented and discussed.
1 INTRODUCTION
According to the National Center for Learning
Disabilities (National Center for Learning
Disabilities) dysgraphia is “a learning disability that
affects writing, which requires a complex set of
motor and information processing skills. Dysgraphia
makes the act of writing difficult. It can lead to
problems with spelling, poor handwriting and
putting thoughts on paper.” For example,
professional teachers, trained and with an extensive
experience teaching how to write and in reading
children writing, call the parents of a disgraphic
student to say, “I am sorry but I really cannot read
your child's handwriting any longer”. For students
with dysgraphia, writing can be a difficult and slow
process. Being pressured to write may add to their
anxiety. Nevertheless these children deserve special
attention in order to fulfill their potential.
It is estimated (Rosenblum, 2003) that nearly
one-third of students fail to acquire efficient
handwriting skills. The effects of poor handwriting
easily go beyond the handwriting process and may
impact the social aspect of life. According to the
National Center for Learning Disabilities (National
Center for Learning Disabilities) the most common
social challenges that may be faced by dysgraphic
people are:
1) The child is easily frustrated by writing
assignments—to the point of temper
tantrums.
2) Children with dysgraphia may have language
processing issues which can make it difficult
to express ideas and speak about specific
topics. Language processing difficulties can
make it difficult for children to understand
humor or language nuances such as sarcasm.
3) The child lacks confidence and frequently
says, “I’m not good at school”. Children with
dysgraphia may sense they’re different from
other kids and worry they’re not smart. That
can lead to low self-esteem.
4) Having social issues on top of writing
challenges can take a toll on the child.
Research suggests that 75% of children with a
learning disability have other social skill problems
(Kavale, 1995). A high risk of dropping out of
school in students with a learning disability has also
been demonstrated (Reschly, 2006). The difficulties
can involve other areas and can be used to detect
early symptoms. Among these we recall the
following areas: visual-spatial, fine motor, language
processing, spelling/handwriting, grammar and
organization of language.
It is well recognized that students should not lose
their handwriting abilities and handwriting should
not be replaced by an extensive use of the keyboard.
Free hand handwriting, as reported in (James, 2012),
activates the left fusiform gyrus, the inferior frontal
gyrus and the posterior parietal cortex since children
have to plan and execute the action. Practicing
handwriting may facilitate reading acquisition in
young children, have a beneficial effect on children
with dyslexia and is also useful in training fine
motor skills. According to the British Dyslexia
Association, the most widely recommended
handwriting style is called continuous cursive,
especially for dyslexic children. “Its most important
328
Giordano D. and Maiorana F..
A Mobile Web Game Approach for Improving Dysgraphia.
DOI: 10.5220/0005449103280333
In Proceedings of the 7th International Conference on Computer Supported Education (CSEDU-2015), pages 328-333
ISBN: 978-989-758-107-6
Copyright
c
2015 SCITEPRESS (Science and Technology Publications, Lda.)
feature is that each letter is formed without taking
the pencil off the paper – and consequently, each
word is formed in one, flowing movement”
(http://www.bdadyslexia.org.uk/parent/help-with-
handwriting).
To improve handwriting, extensive practice is
necessary. However, dysgraphic children may not be
keen to face an activity that is difficult, unrewarding
and seemingly boring. Technological tools such as
word processing, word cueing, word prediction and
speech recognition do not replace the necessity of
teaching and improving students' abilities in the
handwriting process. In literature there are many
examples of very good programs that guide children
in a series of exercises to improve their handwriting.
Among these we recall: Write-on handwriting (Ford-
Hebert, 2004) which is based on the assumption that
handwriting must be taught at the automatic
kinesthetic level using implicit memory and
allowing working memory to focus on the thought to
be expressed or on the word to be spelled;
Handwriting Without Tears (Olsen, 2001), whose
beneficial effects have been evaluated in many
researches such as (Hape, 2014), Callirobics (Laufer,
1990) which uses music to relax the participant and
adds rhythm to the writing pattern exercise. These
types of resources can be framed among curriculum
resources since they provide complete curricula
suitable for different age ranges and levels.
Many software tools such as ComPET
(Rosenblum, 2006), Ductus (Guinet, 2010),
HandSpy (Monteiro, 2012), Eye and Pen
(Alamargot, 2006), Telemaque (Hennion. 2005), and
the recently developed mobile web platform
(Giordano, 2014) have been used to study writing
graphism and in assisting the specialist with an early
diagnosis.
The use of a game-based approach has not been
explored much. Attempts have been made for a
game-based rehabilitation approach such as (Curtis,
2009) where the authors present four platform-
independent games with adjustable levels of
difficulty to assist patients in their rehabilitation of
handwriting skills after a stroke. In (Tan, 2013) the
authors present a prototype of a tablet-based game
for handwriting practice and its initial evaluation by
adults (mean age 24 years) in a pilot study reporting
a perception of usefulness and an appreciation of the
gameplay, except for the flow. In (Maxim, 2008) the
authors present an immersive gaming environment
for improving children's handwriting using a tablet
PC. Among other games it is possible to recall the
work of other researchers, such as (He, 2012) aiming
at increasing motivation and engagement.
This paper presents a mobile web-based serious
game for teaching handwriting to children from 4
years old, hence without reading abilities, to 12
years old. The software user interface is presented in
section 2, design principles of the game are
presented in section 3, the software architecture as
well as the tools and frameworks used for its
implementation are presented in section 4, the
results of an initial informal testing with children are
presented and discussed in section 5 and finally,
section 6 draws conclusions and highlights future
work.
2 SOFTWARE USER INTERFACE
The game was implemented as a client – server web-
based game. The game is a “runner” game where the
player has to collect various types of fruit with
different points associated with each fruit. The
scenery of the game is shown in Figure 1. Along the
way, obstacles appear that have to be avoided by the
player by drawing simple shapes like lines or circles,
which allows the player to train in drawing pre-
graphism. An interactive introductory animation
guide shows the player the different types of
gestures that have to be performed in order to avoid
the different obstacles.
Figure 1: Scenery of the game.
The objects are generated at run time in a
pseudorandom location inside the canvas where the
game takes place; the objects are removed when
they are no longer visible. During play several letters
or words fall down simultaneously and must be
caught by the player. The letters have to be rewritten
in order to form a word that is shown at the top of
the screen. A cloud appears containing the reference
lines where the user has to trace the letter or the
word, as shown in Figure 2. This type of interface
was designed according to the user security design
principles.
When the player writes the letter or the word, the
pixel coordinates of all the points drawn by the user
with the associated time are sent to the server.
The children playing the game can use either
AMobileWebGameApproachforImprovingDysgraphia
329
their finger, according to the Montessori methods
(Montessori, 1914), or a digital pen such as the Jot
Pro by Adonit (http://www.adonit.net/jot/pro/).
Moreover, both the $1 and $n shape recognizer
algorithms are performed and the percentage of
matching with the reference trace is computed. The
best grade of matching is given as feedback to the
user along with the percentage of pixels above and
below the reference line. Figure 3 shows an
example of textual feedback that can be shown if
required by the user.
Figure 2: The word tracing interface.
Figure 3: An example of textual feedback.
The reference trace can also be shown if required
by the user in the initial game settings. The children
playing the game can use either their finger,
according to the Montessori methods (Montessori,
1914), or a digital pen such as the Jot Pro by Adonit
(http://www.adonit.net/jot/pro/).
3 GAME DESIGN PRINCIPLES
The user interface should be designed in such a way
as to facilitate its use by a non-reading child and
should be engaging. The design principles followed,
also in accordance with game design guidelines such
as (Moreno-Ger, 2008), are:
1) provide immediate and informative feedback.
The feedback should be visual via a
comparison with a reference trace and by
means of objective parameters related to the
quality of written text.
2) reduce the short memory load. This is
obtained, for example, by clearly visible
score and record. The presence of the record
is an incentive for playing the game.
3) offer a feedforward mechanism to improve
user security. As an example, we used bright
colors for positive objects, such as the fruit to
collect, and the dark colours for obstacles,
such as the moon with the presence of spines.
User security is also enforced during the
writing process. The presence of a cloud,
which is typical in comics where the words
are written, is an indication for the user to
trace the letter.
4) the game should be accessible from a browser
and available anytime, anywhere from any
type of device.
5) The game should allow for the tracking of
student performance by storing the entire set
of pixels drawn during the writing process.
Along the way, obstacles appear that have to be
avoided by the player by drawing simple shapes like
lines or circles, which allows the player to train in
drawing pre-graphism. The type of fruit could also
be associated with a different shape to draw: e.g. an
apple indicates horizontal lines, a banana indicates
vertical lines and a cherry indicates circles.
Hidden within the dynamics of the game should
be a set of writing exercises which are presented to
the young player in such a way as to avoid boredom.
Instead, it promotes a good writing process by
offering a reward which is necessary in order to
proceed in the game. The game should propose the
retracing of letters, words and symbols both in print
and cursive. All the data collected during the writing
process should be securely saved on a server for
further processing and analysis, and an immediate
encouraging feedback about the writing performance
should be given to the players. The feedback is
related to several items: the quality of the writing in
comparison with a reference trace done by a
proficient writer, the percentage of pixels above and
below the reference line, and the time required for
the trace. The game should be web-based and run on
different mobile platforms and an initial set of
strategies for a responsive design should be
implemented.
4 SOFTWARE ARCHITECTURE
A web service provides the client with the set of
exercises, in a JSON format, which is proposed
throughout the game. The client side of the game
was entirely developed in HTML5 and Javascript
with a set of frameworks. In particular, the following
libraries and frameworks were used:
CSEDU2015-7thInternationalConferenceonComputerSupportedEducation
330
1) Phaser (http://phaser.io/), a graphics engine
with physics systems that allow for an easy
handling of collisions, to provide objects with
mass and other physical properties for more
realistic simulation.
2) $1, a 2D gesture recognizer
(http://depts.washington.edu/aimgroup/proj/d
ollar/).
3) $n, a multistroke recognizer
(http://depts.washington.edu/aimgroup/proj/d
ollar/ndollar.html).
4) Hammer (http://hammerjs.github.io/), an
open-source library that can recognize
gestures made by touch, mouse and pointer
events.
The sequence of points drawn by the user with
the associated time are sent to the server in the
JavaScript Object Notation (JSON) (Crockford,
2013), a lightweight data-interchange format used to
facilitate the exchange of structured data between
client and server. On the server side, the MySQL
(http://www.mysql.com/) database was chosen as the
relational Database Management System and the
PHP (http://php.net/) scripting language was used to
develop the application. The XAMP
(http://www.apachefriends.org/en/xampp.html) suite
was used.
The architectural diagram is shown in figure 4.
The game was implemented as a finite state
machine as shown in Figure 5. The initial state is the
“Boot” state. In this state the JSON file containing
the set of exercises is requested to the server by
means of a XMLHttpRequest and loaded in the
game and the size of the assets of the game is
adapted in a responsive manner to the device where
it is running.
Once these operations are completed, the game
moves to the “Start Menù” state where the game
waits for a user command: the player can choose the
play button to start the game or the help button to
start the interactive tutorial which explains the
different tracing mechanisms as well as the rules of
the game. If the user chooses the help button, the
game moves to the “Lesson” state where the
interactive tutorial is presented to the player. At the
end of the tutorial the game returns to the “Start
Menu” state. If the user chooses the play button, the
game moves to the “Lesson” state if it is the first
time that the game is started, otherwise the game
moves to the “Game” state.
In the “Game” state, the player has the option to
play a session game, to pause it or to stop it in order
to return to the “Start Menu” state. This is the central
part of the game where all its dynamics are
implemented: the random generation of the game
Figure 4: Architectural diagram.
Figure 5: The game finite state machine.
settings, the management of the writing exercise
visualization, the game interaction and so on. If the
player losses all his/her lives, the game moves to the
“Game over state” where the scores are presented. If
the user chooses to replay the game, the “Menu”
state is reached once again.
Each state, according to the Phaser program
structure, is divided into three phases: a pre-loading
phase where all the assets are loaded; a create phase
executed only once where all the initial objects are
created; and an upload phase, repeated at regular
intervals, where the game state is updated.
5 PRELIMINARY TESTING
The game was tested informally by three children
supervised by the developer who gave a test run and
suggestions on the gameplay. The objectives of the
case study were to understand the children's
motivation in playing the game and if the writing
exercises were sufficiently hidden in the game and
not seem as an exercise. Their feedback was
positive, reporting a good and fun gameplay and
were not bothered by the writing exercises which,
instead of being considered a hindrance, were seen
as an opportunity to advance in the game. The
evaluation of the game session suggested the
following improvements:
1) increase the velocity of the game both at the
beginning and as an increasing factor based
on the level of the game.
2) the initial position of the player should be
adjusted with the user's age: a central position
AMobileWebGameApproachforImprovingDysgraphia
331
for the older players and a more distant one
for the younger users, thus allowing more
time to decide on the move and to interact
with the game.
3) the interaction during the writing process was
intuitive for all the users but some of them
required an explicit message assuring them of
the success of the writing process.
An extensive field study will provide more
indications and improvements.
6 CONCLUSIONS
In this work the design of a mobile web-based
serious game for addressing dysgraphia was
discussed. The game allows the user to practice in
pre-graphism delete simple forms such as straight
lines and circles, which are used to move the player,
and in writing letters or words in order to obtain a
better score, more lives and other rewards to
advance in the game. The game provides immediate
feedback both visually and by means of objective
parameters such as the percentage of matching
against a reference trace and the percentage of pixels
above and below the reference line. All the data
during the writing process, such as all the pixel
coordinates and the time of tracing, are permanently
stored on a server.
As a further work we plan to design other games
aimed at facilitating writing training by young
players and to correlate different types of games
with different learning styles in accordance with the
Visual, Aural, Read/write, Kinesthetic (VARK)
theory. We will also perform a field study aimed at
collecting writing data and assessing players'
improvements in the writing process. In particular
by collecting and analyzing the data while the
children play the game it will be possible to study
the progress on the learner.
We also plan to see how a group training version
of the game would impact on writing and how the
children influence each other while playing the
game.
REFERENCES
www.ncld.org/types-learning-disabilities/dysgraphia/what-
is-dysgraphia retrieved January 2014.
Alamargot, D., Chesnet, D., Dansac, C., Ros, C., 2006.
Eye and pen: A new device for studying reading
during writing. Behavior Research Methods, vol. 38,
no. 2, pp. 287-299.
Crockford, D. The application/json media type for
javascript object notation (json). Retrieved on January
2013 from http://www.rfc-editor.org/info/rfc7159.
Curtis, J., Ruijs, L., de Vries, M., Winters, R., Martens, J.
B., 2009. Rehabilitation of handwriting skills in stroke
patients using interactive games: a pilot study. In
CHI'09 Extended Abstracts on Human Factors in
Computing Systems (pp. 3931-3936). ACM.
Ford-Hebert, A., 2004. Write-On HandWriting™.
Educators Publishing Services.
Giordano, D., Maiorana, F., 2014. Addressing dysgraphia
with a mobile, web-based software with interactive
feedback. In Biomedical and Health Informatics
(BHI), 2014 IEEE-EMBS International Conference on
(pp. 264-268). IEEE.
Guinet, E., Kandel, S., 2010. Ductus: A software package
for the study of handwriting production. Behavior
research methods, vol. 42, no. 1, pp. 326-332.
Hape, K., Flood, N., McArthur, K., Sidara, C., Stephens,
C., Welsh, K., 2014. A Pilot Study of the
Effectiveness of the Handwriting Without Tears®
Curriculum in First Grade. Journal of Occupational
Therapy, Schools, & Early Intervention, 7(3-4), 284-
293.
He, G. F., Park, J. W., Kang, S. K., Jung, S. T., 2012.
Development of gesture recognition-based serious
games. In Biomedical and Health Informatics (BHI),
2012 IEEE-EMBS International Conference on, pp.
922-925, IEEE.
Hennion, B., Gentaz, E. , Gouagout, P. , Bara, F., 2005.
Telemaque, a new visuo-haptic interface for
remediation of dysgraphic children. In Eurohaptics
Conference, 2005 and Symposium on Haptic
Interfaces for Virtual Environment and Teleoperator
Systems, 2005. World Haptics 2005. First Joint, pp.
410-419, IEEE.
James, K. H., Engelhardt, L., 2012. The effects of
handwriting experience on functional brain
development in pre-literate children. Trends in
neuroscience and education, 1(1), 32-42.
Kavale, K.A., Forness, S.R., 1995. The nature of learning
disabilities: Critical elements of diagnosis and
classification. Mahweh, NJ: Erlbaum.
Laufer, L., Schleifer, B., 1990. Callirobics: Handwriting
exercises to music. Callirobics.
Maxim, B. R. Martineau, N. D., 2008. Running head-
Learning via Gaming- An Immersive Environment for
Teaching Handwriting. Meaningful Play, pp. 1–12.
Monteiro, C., Leal, J. P., 2012. HandSpy a system to
manage experiments on cognitive processes in writing,
In Symposium on language, Applications and
Technologies, SLATE, pp. 123-132.
Montessori, M., 1914. U.S. Patent No. 1,103,369.
Washington, DC: U.S. Patent and Trademark Office.
Moreno-Ger, P., Burgos, D., Martínez-Ortiz, I., Sierra, J.
L., Fernández-Manjón, B., 2008. Educational game
design for online education. Computers in Human
Behavior, 24(6), 2530-2540.
Olsen, J. Z., Fink, C., Marxer, M., 2001. Handwriting
without tears. Handwriting Without Tears.
CSEDU2015-7thInternationalConferenceonComputerSupportedEducation
332
Reschly, A. L., Christenson, S. L., 2006. Prediction of
Dropout Among Students With Mild Disabilities A
Case for the Inclusion of Student Engagement
Variables. Remedial and Special Education, 27(5),
276-292.
Rosenblum, S., Weiss, P. L., Parush, S., 2003. Product and
process evaluation of handwriting difficulties.
Educational Psychology Review, vol. 15, no. 1, pp. 41-
81.
Rosenblum, S., Dvorkin, A. Y., Weiss, P. L., 2006.
Automatic segmentation as a tool for examining the
handwriting process of children with dysgraphic and
proficient handwriting. Human movement science, vol.
25, no. 4, pp. 608-621.
Tan, C. T., Huang, J., Pisan, Y., 2013. Initial Perceptions
of a Touch-Based Tablet Handwriting Serious Game.
In Entertainment Computing–ICEC 2013 (pp. 172-
175). Springer Berlin Heidelberg.
AMobileWebGameApproachforImprovingDysgraphia
333
