Diabetes - The Truth: An Interactive Web Tutorial consisting of HTML, CSS, Java and JavaScript.

1. Diabetes: The Truth – An Interactive Web Tutorial
Ross McHardie
April 2008
Dissertation submitted in partial fulfilment for the degree of
Bachelor of Science with Honours in Computing Science
Department of Computing Science and Mathematics
University of Stirling

2. Abstract
Problem
The problem that was set out at the beginning of this project was to find a suitable
way of informing newly diagnosed diabetics in such a way that it was fun and not a lot of
mundane reading that made it feel like homework. The existing resources that I found did
just that, although it was content-rich the information was not really conveyed in the best
possible way in my opinion.
Objectives
The objectives of this system (as described later on in this document) were to provide
an educational resource that was both fun and informative, making use of such technologies
as Java and Adobe Flash.
Methodology
The methodology of the project is quite simple; a design plan was drawn up of
possible page layouts and also possible logos to represent the system where each presented its
own advantages and disadvantages. The design solutions were cut down to three ideas, the
first using tabulated data, the second using a chain-like navigation pane with a content pane
and the third using an external style sheet and multiple layers. The final solution that was
decided upon was option three as it provided the most professional looking layout from all
three.
The next step was to learn how to use Adobe Flash and how to program in
ActionScript to allow interactivity to be implemented into some of the multimedia elements
of the system. This proved to be not as challenging as was first thought, as you will see later
in this document. The Flash elements of the system were intended to demonstrate certain
things to the user in a way that was more entertaining than reading a long passage of text and
also to provide the user with some feeling of control.
The final step was to produce a Java Game Applet for the more juvenile of users to
teach some of the same knowledge that is included in the system. Since Type 1 Diabetes is
more common in younger patients, the game is heavily oriented to that area.
Once all of these elements had been created it was simply a matter of saving them
into their own separate files (to minimise on duplicate code) and link them into the pages
using simple HTML tags.
Achievements
From the technical chapters below it is evident that the objectives set out previously
have been achieved to a full degree. Whether this is the preferable way to teach Diabetes
remains to be seen but it all comes down to people having different learning methods and
whatever works for them they should stick with.
The greatest achievements in this project are the skills that are transferable to later
life. For instance, the new found knowledge of Adobe Flash and ActionScript will help in the
future as this is an area that I am most interested in.
1

3. Attestation
I understand the nature of plagiarism, and am aware of the University’s policy on this. I
certify that this dissertation reports original work by me during my University project except
for the following:
 The colour-blindness images in section 3.2.2 were produced by www.vischeck.com
 My supervisor and myself adapted the accessibility code discussed in section 3.2
pending a meeting and the testing of the code.
Signature Date
2

4. Acknowledgements
I would like to acknowledge the following people without whom this project could not have
reached its fruition:
 Dr Simon Jones – my lecturer who has sat through many meetings and
listened to me complain about the differences between Internet Explorer
and Firefox.
 Craig McKenzie – my trusted friend who helped me with design decisions
and was one of the testers of the final solution.
 Jennifer Shaw – Type 1 diabetic who tested the system and gave her
feedback.
 The various tutorials and websites I consulted while trying to learn Adobe
Flash and how to implement Java applets.
 Any one else who has been there for me during this project, thank you for
your patience, your kindness and most of all your encouragement.
3

5. Table of Contents
Abstract ................................................................................................................................ 1
Attestation ............................................................................................................................ 2
Acknowledgements .............................................................................................................. 3
Table of Contents ................................................................................................................. 4
List of Figures ...................................................................................................................... 5
1 Introduction ................................................................................................................... 6
1.1 Background and Context ....................................................................................... 6
1.2 Scope and Objectives............................................................................................. 7
1.3 Achievements ........................................................................................................ 7
1.4 Overview of Dissertation ....................................................................................... 7
2 State-of-The-Art ............................................................................................................ 9
3 System Overview......................................................................................................... 13
3.1 HTML and Cascading Style Sheets (CSS) .......................................................... 13
3.2 Page Structure ...................................................................................................... 16
3.2.1 Accessibility Issues ..................................................................................... 21
3.2.2 Colour-blindness Issues ............................................................................... 21
3.3 System Interactivity ............................................................................................. 25
3.3.1 JavaScript .................................................................................................... 25
3.3.2 System JavaScript Approach ....................................................................... 26
3.3.3 Java Applets................................................................................................. 30
3.3.4 Adobe Flash ................................................................................................. 32
3.3.5 Blood Monitoring (Drag and Drop)............................................................. 33
3.3.6 Ketone Analysis (The Click ‘n’ See approach) ........................................... 34
3.3.7 ............................................................................................................................ 35
4 Conclusion ................................................................................................................... 37
4.1 Evaluation ............................................................................................................ 37
4.2 Future Work......................................................................................................... 37
References .......................................................................................................................... 39
Appendix A Main Content Source Code ............................................................................ 40
4

6. List of Figures
Figure 1. The possible long-term effects of poorly treated Diabetes .................................... 6
Figure 2. The Diabetes UK’s website ................................................................................. 10
Figure 3. The American Diabetes Association’s website ................................................... 11
Figure 4. The implemented system ..................................................................................... 15
Figure 5. The Content Page Layout with Interactivity links ............................................... 18
Figure 6. The Categories Page Layout ................................................................................ 19
Figure 7. The Content Page Layout without Interactivity links .......................................... 20
Figure 8. The main page with enlarged text........................................................................ 21
Figure 9. The original image of the system that was input to the vischeck engine ............. 22
Figure 10. The system as seen through Deuteranope colour-blindness ............................ 23
Figure 11. The system as seen through Protonope colour-blindness ................................ 24
Figure 12. The system as seen through Tritonope colour-blindness ................................. 25
Figure 13. JavaScript Source Navigation Bar ................................................................... 26
Figure 14. Dynamically created Search Results ............................................................... 28
Figure 15. Image Rollover: Default on the left, Rollover on the right.............................. 29
Figure 16. Example of the popup window JavaScript ...................................................... 30
Figure 17. Java Game Applet............................................................................................ 31
Figure 18. Blood Monitoring (Drag and Drop Flash Demonstration) .............................. 33
Figure 19. Reading produced from blood monitoring test ................................................ 34
Figure 20. End result of the Ketone Analysis demonstration ........................................... 34
5

7. 1 Introduction
1.1 Background and Context
Diabetes is a condition that affects the pancreas and involves not being able to break
down sugar in the blood. A typical human body produces what is known as insulin to help
control this break down and it is this element that is weakly produced in a diabetic’s body,
hence the possible need for insulin injections and each day many people are newly diagnosed
with this condition.
There are three main types of diabetes; Type I (or insulin dependent diabetes), Type
II (or insulin-independent diabetes) and Gestational (only occurring during pregnancy). Type
II diabetes is usually treated with either tablets or diet alone, with no need for injections,
hence the alternative name of insulin-independent diabetes. If diabetes is not treated correctly
and goes untreated for a long period of time it can have serious terminal effects such as
blindness, kidney disease, amputation of limbs and so on.
Figure 1. The possible long-term effects of poorly treated Diabetes
There is research being conducted every day to try and determine exactly what causes this
condition and if a possible cure can be found. This is not in the foreseeable future but we are
a lot closer to it than we were 5-10 years ago. Recently in the Metro newspaper there was an
article that stated scientists have discovered that black tea and frogspawn could be used to
treat Type-II Diabetes instead of the more traditional methods, as described below.
Frog slime and black tea could help treat diabetes – though fortunately you don’t have to
take them together. A secretion from the skin of a South American paradoxical frog can
stimulate the release of insulin – the vital hormone that is deficient in Type II diabetes
sufferers, researchers found. The frogs use the substance – pseudin-2 – to help protect
themselves against infection.
Dr Yasser Abdel-Wahab, from the University of Ulster, said: ‘We have found that pseudin-
2 has the potential for development into a compound for the treatment of Type II diabetes.
Now we need to take this a step further and put our work into practice to try and help
diabetes sufferers.’
6

8. Britain has about 2.3million diagnosed diabetes sufferers. Most have Type II diabetes,
which is strongly associated with obesity. Meanwhile, scientists at the University of Dundee
have discovered the potentially therapeutic properties in black tea. They have found several
black tea constituents, known as theaflavins and thearubigins, mimic insulin action.
However, Dr Graham Rena warned in the journal Aging Cell that tests were in their early
stages and diabetes sufferers should continue to take their prescribed medicine before
‘rushing to drink masses of black tea.’ [1]
The context of this project is to provide an online system to allow newly diagnosed
Diabetics to learn about the condition through easy to use pages and interactive tutorials using
Flash and Java technologies respectively.
1.2 Scope and Objectives
The main objectives of this project are to provide an informative resource and also to
give a greater understanding of what diabetes actually is. This project will also describe the
technologies involved in controlling and monitoring diabetes as well as how they operate.
The target audience of this project is essentially newly diagnosed diabetics; however, this
resource could be of use to anyone, from friends and family of diabetics to medical
enthusiasts. There are many diabetes resources available on and offline, many of which are
readily available through a simple Internet search, using a search engine such as Google,
however, through research of existing materials in the same field, the existing content seemed
rather mundane and text-intensive (see Chapter 2 – State of the Art for more information).
1.3 Achievements
Through the course of this project I have achieved many things, which were not
possible before undertaking this project. Some of these include:
 Gaining a further understanding of HTML, CSS and Java
 Learning what Java Applet are, how they differ from Java applications and how to
implement them into an HTML document.
 Learning how to use the Flash technology and its programming language;
ActionScript.
 How cross-browser compatibility must be handled to make sure everyone gets the
same experience
 How much of an issue accessibility in a web system is and how to address it.
1.4 Overview of Dissertation
The context of the project as stated above is to provide a web-based system to allow
Diabetics, essentially newly diagnosed Diabetics, to learn about the condition, its many
different types and what to do in each case. Flash and Java technologies, respectively, have
been implemented into the system to allow an interactive element to be present within the
system that presents the user with activities that they can perform in relation to certain
diabetic treatments.
However, this system is meant as an information resource and is not meant to be a
replacement for professional medical advice or a consultation from a practising doctor, that
being said, a disclaimer is present on all the pages of the system to make the user aware of
this fact.
The following pages of this dissertation detail exactly what was carried out during the
course of the project. For example, what worked, what did not work, why and more
importantly what was done to rectify the components that did not work.
Firstly, the existing materials in this specific field will be analysed and discussed, such as,
what is wrong with them and why there is need for this system to be implemented.
7

9. In the following technical chapters, each of the technologies used within the system will be
briefly described then a detailed description of how they were applied will be given along
with screenshots to diagrammatically portray certain elements of what has been described.
The basic HTML and Cascading Style Sheet structure of the system will form the basis of the
technical chapters then branching out into the interactive components i.e. how the Flash
animations were designed and implemented and how the applet was incorporated into the
backbone of the system.
The testing and evaluation section gives an insight into users’ reactions to the system, for
instance, what they liked about it, what they did not like about it, what aspects of the system
they would change and so on. The evaluation section will list any improvements or changes
that may be needed to the system (given more time these changes/improvements would be
implemented into the system) as well as future work intended for the system if it was to be
employed.
8

10. 2 State-of-The-Art
The analysis stage of this project involved researching what Diabetes resources
actually already existed and how they differed from the learning resource I had envisioned.
When considering diabetes information and resources there are two main
organisations that are both well-respected and content rich. These are Diabetes UK (formerly
the British Diabetic Association) and the American Diabetes Association. Both have an
extensive resource on what diabetes actually is and how it could be treated. However, since
everyone’s genetic make up is different and different bodies respond to different treatments in
different ways, the information found in these resources should in no way, shape or form be
substituted for real medical advice from a practicing doctor. The following pages describe
both online resources with an accompanying screenshot of each system’s main page.
9

11. Figure 2. The Diabetes UK’s website
The Diabetes UK website offers a wide selection of information from a guide on
diabetes through to current research developments and also offers professional information.
They also offer a useful two-minute test to find out if you are at risk of getting diabetes and
also the latest news concerning diabetes related issues.
Some of the other features of this resource include diabetes specific recipes with low
carbohydrate content; providing the information in other languages; getting involved in
fundraising for diabetes research and the essential information that every diabetic (or people
dealing with diabetics) should know, that is, a sort of what to expect resource and so on.
Along with this extensive website resource Diabetes UK have also released many
informative leaflets, which can be picked up from your local health surgery or local hospital,
that deal with a lot of the information that can be found on their website because although we
are in the age of technology not everyone has access to a computer (or knows how to use
one).
10

12. Figure 3. The American Diabetes Association’s website
The American Diabetes Association has a more comprehensive site in that it has sub links
to different diabetes related areas that branch out into more detail as you hover over the links.
The content in this resource is much the same as in the Diabetes UK resource albeit presented
in a much more elaborate way. The American Diabetes Association also has a section
dedicated to diabetes prevention and not just the “Are you at risk?” two-minute test like its
United Kingdom counterpart. The information on this resource is much more readily
available than on the Diabetes UK website although both resources provide a website search
facility.
To coincide with this online resource, the American Diabetes Association also offers for
purchase specialised diabetes books and gifts; for further reading or such like. The reading
materials available range from cookbooks to books on treatment and care, there are also
books for professionals on offer. Instead of giving an extensive list of the gifts available from
them, there is a link to a “Gift of Hope” catalogue.
11

13. The thought of loads and loads of pages filled with boring, dry information seems like
it will be very mundane and trivial to the reader, especially if this reader is a young child, so
with that in mind, this project implements a resource system that incorporates a little
interactivity into it.
The interactive elements implemented in the system are split into two sections,
interactive flash demonstrations and a Java game applet. The first involves visual
demonstrations of how the insulin injection devices, blood-glucose measuring monitors and
so on operate. The second section, the game applet, is specifically aimed at young children, or
even for people with a low attention span who just want to have a little fun while they learn.
As Type 1 Diabetes is more frequent in young people, the game is more focused to this type
of diabetes than any other, appropriately titled Absorb The Insulin (more can be read about the
Interactive elements of the system in Chapter 3.3).
12

14. 3 System Overview
3.1 HTML and Cascading Style Sheets (CSS)
Hypertext Mark-up Language (HTML) is a set of programming commands that
allows the programmer to create and format web pages for display in a web browser in a
specific way (sort of like a translator for high-level languages). There have been many
different variations of the HTML language since its inception, spawning from an early version
known as SGML to the state that it is now, known as XHTML (this is a combination of XML
and HTML).
The “<head>” section of the page is used to include “meta-tags” in the HTML
document. Meta-tags allow the programmer to describe the current page and add appropriate
keywords that describe the page; these keywords can be used to find a page via a search
engine. An example of a meta-tag is shown below:
<meta name="keywords" content="diabetes, type, one, insulin, injections, syringes, flexpen, syringe,
pen, device">
The above meta-tag is taken from the “Insulin Injections” page included in the system
and as you can see the tag has two attributes; “name” which tells the browser which part of
the meta-tag is being referred to and “content” which tells the browser (or searching script)
specific words to look for within the page.
The code within the “<body>” tag corresponds to what is actually displayed by the
web browser when it is executed. Each tag in the document comes with its own set of
options, known as attributes, which can be used to manipulate the way the tag is “translated”.
For example:
<img src=”images/image_name.gif” width=”250” height=”250” alt=”Image Description”>
The above tag is used to embed an image in the web page and it includes four attributes.
The four attributes relate to how the image is displayed on the web browser. The “src”
attribute relates to where the file is actually stored on the server, the height and width
attributes relate to the actual height and width of the image, it is important to note that these
can be any height and width or if they are omitted then the default height and width of the
image will be used, the “alt” attribute stands for alternative text. The alternative text attribute
is implemented so that if for some reason the image cannot be displayed then a description of
the proposed image will be displayed instead. This attribute is also important when
addressing accessibility issues as it should provide an adequate description of the image for
user’s using a screen reader and so on i.e. for blind people who obviously cannot experience
the same things as everyone else can.
Dynamic HTML is another form of the mark-up language that involves using the
“<div>” tag and layers to layout a page instead of using tables; this adds a more professional
and appealing look to the page instead of an apparent list of tabulated data. The combined use
of cascading style sheets (CSS) and HTML allows for a page layout that not only looks
professional and elegant when displayed in a web browser but also in the source code as well
because less attributes need to be included in the tags. CSS was developed by the same
organisation as the developers behind HTML, the World Wide Web Consortium (W3C).
“The term cascading derives from the fact that multiple style sheets can be applied to the
same Web page.”
Webopedia – What is CSS? (http://www.webopedia.com/TERM/C/CSS.html)
13

15. Using either an external CSS file or the embedded “<style>” tag formatting of pages
can be done once, in the external file or in the head section of the page for each specific tag or
section within the document and every time a particular tag or “id attribute” is used it will
have the attributes that were defined previously, this cuts down on the duplication of code. A
combination of an external CSS file and a JavaScript file were adopted to apply the style to
this system as it makes use of a JavaScript function to detect which browser is being used and
reads in the appropriate style sheet accordingly.
Dynamic HTML has become the standard for web page design as it allows pages to
be displayed using more images and less text instead of text and colours which is easier on the
eyes and less heavily dependent on reading a large excerpt of text, which is always a bonus
for the less literate of users. However, even though this is the preferred method of designing
web pages, it does pose some accessibility issues that may cause some problems. The most
obvious issue is that of blind user’s viewing the system. If the system is heavily image
oriented and the proper accessibility measures are not in place then this will impair the user’s
experience. To ensure user’s running a screen reader or a text only browser experience the
system the way it was intended, the “alt” attribute will be implemented into all images so to
offer alternative text that describes the image to the user, this also helps if the image cannot be
loaded. At this point it is important to mention style sheets and cross-browser compatibility.
With the heavy rise in popularity of the web browser Firefox from Mozilla less people are
using the industry standard of Microsoft’s Internet Explorer and as these two different
browsers were developed by different companies it is understandable that there will be some
compatibility issues that arise.
While it is important to give users of a system the same experience regardless of the
software they are using to view it, it is simply not possible to cater to every user, as every user
will want something slightly different than what has been implemented. A way to combat this
is to provide a few options for users to choose from or even use browser detection to display
one style sheet if the user is using Internet Explorer and another style sheet if they’re using
Firefox or any other browser that isn’t Internet Explorer.
14

16. Page header
Container
Page Header Links
Page Heading
Page Header Search
Accessibility
Main Content
Login Box
15
Left Sub Item
Figure 4. The implemented system
Right Sub Item
Page Footer

17. 3.2 Page Structure
The figure on the previous page is a screenshot of the main page of the implemented
system and the corresponding labels depict all the different sections on the page as they are
implemented in the external style sheet.
The page is made up of four main layers: Container, Page Header, Main Content and Page
Footer.
 The “container” layer is the bottom layer, which all the other layers lie on top
of.
 The “Page Header” layer is on top of that, which displays information generic
to all pages, that is, the system logo, navigation bar and search box.
 The “Main Content” layer is the only layer that is present throughout every
page in the system; it displays all the information and images that correspond
with the current page or section.
 The “Page Footer” layer is another consistent layer, in that, it does not change
from page to page; the page footer displays the disclaimer for the system.
The remaining layers, as illustrated above, all exist within these layers and act as
either part of the consistent system design or as part of the page content. In some cases,
particularly the “Multimedia” pages, the sub sections do not appear, because they are simply
not needed. It is important to note that the login box, which is illustrated above under the
“Accessibility” layer isn’t actually fully implemented (more on that later).
Making good use of the external style sheet element of the system, discarding the generic
navigation elements of the page layout, the pages have either one of three different layouts.
The first of which can be seen on the main page consisting of the main content layer, and the
two sub-item layers which link to their own separate sections.
The main content layer describes what the current page is actually discussing with an
appropriate picture to the right of the passage which illustrates a certain part of the current
topic, for instance on the Type 1 Diabetes page there is an image of an insulin deployment
pen device. Separated by the horizontal rule tag (“<HR>”) the information that follows it is
separated into two sub-items. This is usually information that is related to the main content
but can be split into its own section to allow the reader to distinguish between the two.
As you can see from the screenshot of the system, Figure 3 in this document, four different
areas separate the sub sections. The first area is the main section heading which provides the
name of the page or section that is being discussed. The area immediately under this provides
an alternative name for the section, or a brief tagline so to speak. The third area discussed
here is a brief description of what the section is actually about with a “Read more…” link that
navigates to the page’s own section. The fourth, and final, area mentioned above displays an
appropriate image for that particular section.
The skeletal HTML code for the pages and how it relates to the external style sheet is
illustrated by the following:
16

18. (Note: Only the HTML for the Page Header is present, the source for the main content can
be found in Appendix A.)
<div id="container">
<!-- Start of Page Header -->
<div id="page_header">
<div id="page_heading">
<a href="index2.html" title="Home" onMouseOver="document.rollover.src=logo_over.src"
onMouseOut="document.rollover.src=logo.src">
<img src="images/logo.gif"name="rollover">
</a>
</div>
<div id="page_headerlinks">
<ul>
<li><a href="general_info.html">General Information</a></li>
<li><a href="multimedia.html">Multimedia</a></li>
<li><a href="useful_info.html">Useful Information</a></li>
<li><a href="glossary.html">Glossary</a></li>
<li class="last"><a href="#page_footer">Disclaimer</a></li>
</ul>
</div>
<div id="page_headersearch">
<h3>Search:</h3>
<form name="formSear" action="search.html" method="GET" onSubmit="return qs();">
<div>
<input name="searWords" type="text" />
<input name="Send" type="image" src="images/button_go.gif" class="button" />
<div class="clearthis">&nbsp;</div>
</div>
</form>
</div>
<div class="clearthis">&nbsp;</div>
</div>
<!-- End of Page Header -->
As you can see, as described previously, everything on the page exists within the container
layer and from this layer additional sub layers are introduced, everything to do with the page
header resides within the page_header layer with a suffix to each additional inner layer, apart
from the system logo. The clearthis layer is simply for spacing purposes – to make sure
layers do not overlap.
By manipulating the way the external style sheet was implemented into the HTML
document a new layout could be produced without tampering with the original style sheet in
any way. This was done by only including the id attributes that were actually required for that
particular section for instance, in the Gestational Diabetes section of the system there was no
need to include the sub-items as only the blood monitoring section related to it, so a hyperlink
was placed after the passage instead of using the sub item layers.
The third, and final, manipulation of the external style sheet involves extending the main
content layer to allow a list of all the sections to be included on the one page. These section
index pages where included for the reason mentioned earlier in this document so that every
user that visits the site has the same experience as everyone else. If the user has JavaScript
turned off for some reason then they will not be able to use the implemented search engine
included with this system, or even view the system as it was intended (more on this in chapter
17

19. Container Page header
Page Header Search
Page Header Links
Page Heading
Accessibility Main Content
can be found within the system.
with appropriate
image and current
location indicator
18
Blood
Monitoring
Figure 5. The Content Page Layout with Interactivity links
Demonstration
3.3 – Interactivity). The following are screenshots of the three different types of layout that
Insulin Injection
Page Footer Demonstration

20. Container Page header
Page Header Links
Page Heading
Page Header Search
Accessibility
19
Category Links
Figure 6. The Categories Page Layout
Page Footer
Note: The sub item and main content picture layers have been omitted.

21. Container Page header Page Header Links
Page Heading
Page Header Search
Accessibility
20
Figure 7. The Content Page Layout without Interactivity links
Page Footer Main Content
with appropriate
picture and current
location indicator
Note: The sub item layers have been omitted.

22. 3.2.1 Accessibility Issues
The “Accessibility” layer draws attention back to the earlier reference of catering to a large
selection of viewers, as a large varied audience is required it would be inadequate that users
not browse the system simply because they were unable to read it. With this in mind, the
system is implemented with an increase and decrease text size function to allow its users to
enlarge the text as they see fit (kind of like an electronic magnifying glass). The following
figure shows a screenshot of the system with enlarged text:
Figure 8. The main page with enlarged text
As you can see from the screenshot above, the accessibility options make the text bigger
and much easier to read for people with bad eyesight.
3.2.2 Colour-blindness Issues
Of course, text size is not the only accessibility issue to consider, there are also several
different kinds of colour-blindness that may affect the way the system is viewed by some
users. The most common type of colour-blindness is known as Deuteranope, which is a
red/green deficit. The remaining two types are Protonope, another red/green deficit and
Tritonope; a blue/yellow deficit – however this type is very rare.
The website http://www.vischeck.com allows you to upload an image or submit a URL to
their Colour-Blindness Engine and it will output an image of how the system will look to
people who suffer from different types of colour-blindness.
21

23. Figure 9. The original image of the system that was input to the vischeck engine
The Colour-Blindness Engine takes a while to load depending on the size of the image file
but once the operation is complete the original image is presented adjacent to the condition
image, depending on which type of colour-blindness you selected.
The figures that follow are the results that came from running the Colour-Blindness
Engine on a screenshot from the implemented system.
22

24. Figure 10. The system as seen through Deuteranope colour-blindness
As you can see from the screenshot above, people suffering from Deuteranope colour-
blindness will see the system just the same as any other person without the condition.
23

25. Figure 11. The system as seen through Protonope colour-blindness
As this is another form of red/green colour-blindness the system will be displayed in
exactly the same way as someone with Deuteranope or someone that is not colour-blind at all.
24

26. Figure 12. The system as seen through Tritonope colour-blindness
As Tritonope colour-blindness is a blue/yellow deficit and the page layout is heavily
dependent on the use of blue shaded images it is understandable that the system would be
perceived slightly differently to people suffering from this condition. As you can see from the
screenshot above, the system does not look to far from the original, although, it looks more
like a shade of grey than blue.
3.3 System Interactivity
This section of the dissertation involves discussing all the interactive elements that were
implemented, focusing heavily on the Multimedia section of the system. Interactivity was
necessary in the system as it added certain elements that were missing from existing learning
resources to give the user an interactive experience and also give the feeling that they had
some level of control over their learning instead of passage after passage of mundane
information. There are three different elements of interactivity that will be discussed in this
section; these are JavaScript, Java Applets and Adobe Flash.
However, it is important to note at this point that the JavaScript implemented within the
system as no impact on the user’s learning whatsoever, it is their to aid the inner workings of
the system, that is, loading in the appropriate style sheet, providing the accessibility functions
as well as running the search engine (more on this in Chapter 3.3.1).
3.3.1 JavaScript
A Web scripting language developed by Netscape, JavaScript shares selected attributes
and data structures with the Java programming language; however, it was developed
separately, and it is not Java. JavaScript works within an HTML page, and is supported by
Netscape versions 3.0 and higher. The Microsoft browser, Internet Explorer, supports a
subset of JavaScript, called JScript. [2]
25

27. JavaScript is usually used within an HTML page to do things that raw HTML is incapable
of doing alone such as browser-detection, manipulating the browser, manipulating the page
and so on. As it is derived from Java, as mentioned above, it is also capable of doing
calculations and other functions and displaying the results in a pre-formatted HTML
document. JavaScript is free to interpretation, in that it can be used in whatever way the
programmer sees fit. The website The JavaScript Source [3] provides an extensive archive of
scripts that programmers from around the world have developed and contributed to the
website for learning purposes or for incorporation into websites (as long as the original credit
is maintained).
Figure 13. JavaScript Source Navigation Bar
These scripts are separated into different sections depending on the complexity of the
script and what each script does to the browser or page. Two useful features are also included
here to aid the user, the first of these features is a Script Count, which tells the user visiting
the site how many scripts in total the website offers. The second of these is more useful for a
programmer who is in a hurry for a quick solution, instead of searching through the category
pages they can simply use the Script Search box, which is indexed with every script available
within the site.
3.3.2 System JavaScript Approach
JavaScript can be implemented into an HTML document in two different ways, hard coded
inline with the HTML code or read in from an external file. However, both methods require
the <script></script> tag regardless of the approach you adopt.
The approach adopted by the system is the latter approach. This approach is more efficient
because the JavaScript code implemented throughout all of the pages is consistent so this cuts
down on the duplication of code and makes the HTML code more concise and easier to read.
The JavaScript file is implemented in more or less the same way as the style sheet except that
the src attribute is used instead of href. For example:
<script src="script_file.js"></script>
Coming back to an earlier point made in this document, because of some of the cross-
browser incompatibility issues that were discovered, two different style sheets had to be
produced. To combat this issue of which style sheet to use at what time the following script
was implemented:
if ((navigator.appName).indexOf("Microsoft")!=-1) {
document.write('<link rel="stylesheet" href="style_IE.css" type="text/css">');
}
else {
document.write('<link rel="stylesheet" href="style.css" type="text/css">');
}
The way the script operates is that if the browser is from Microsoft© then a line of code is
dynamically written into the HTML document that tells the browser to read in the style sheet
called “style_IE.css”. However, if the browser used to view the page is not from Microsoft©
then the default style.css is dynamically read into the browser instead.
26

28. The JavaScript function that was the most problematic to implement was providing
the accessibility option to allow increasing and decreasing of text size on all of the pages
within the system.
The reason this function was so problematic was because a limit on both increments
and decrements was implemented to prevent the text size getting too small or too big. This
posed problems because the originally implemented if statement meant that when the text
reached it’s maximum text size the script was rendered useless because it was obviously told
to stop when it reached this size and not do anything else. The only foreseeable way to
combat this was to indicate to the user that once the maximum text size was reached they had
to click on the default text size hyperlink to decrease the text size again; this seemed very
inefficient. The JavaScript function that follows is the an excerpt from the final
implementation of how the solution was found:
if (curSize != maxSize && inc > 0 || curSize != minSize && inc < 0)
{
newSize += inc;
document.getElementById("container").style.fontSize = newSize;
} else{
// Do nothing
}
To increase or decrease the text size the user must click on one of the hyperlinks in the
accessibility table, which hyperlink they click determines how the script executes and the
value of the inc parameter that is read into the script, either “+2” or “-2”.
The if statement above states that if the current text size is not equal to the maximum
allowed text size and the parameter value is positive or if the current text size is not equal to
the minimum allowed text size and the parameter value is negative then continue else do
nothing. If all of these conditions are met the script moves onto the next section of the script
which actually does the increment or decrement. Another variable is used here, newSize,
which symbolizes the text size after the change, added to this variable, is the parameter
variable read in by the user’s hyperlink click.
The final part of the script involves manipulating the style of the document to allow
the text size to change. The script states that all the text within the element container should
have the value newSize. See Figure 8 for a screenshot of the results.
The JavaScript behind the search engine uses the keywords found in the meta tags of
each of the HTML pages to search through an array JavaScript file stored on the website’s file
store. When the user clicks on the Search button the script executes and dynamically creates
the results in the main content section of its own page using the same style as the skeletal
code used in the rest of the system. The HTML that executes the script looks something like
this:
<form name="formSear" action="search.html" method="GET" onSubmit="return qs();">
As you can see the script is executed from the main form tag, when the user submits the data
the browser goes and looks in the external file for a function called “qs()” and passes through
the keywords that were entered. As mentioned previously, the search results page is
dynamically created through the search process, this is done through two files, such as:
<script type="text/javascript" language="JavaScript" src="webdata.js"> </script>
<script type="text/javascript" language="JavaScript" src="searchfunc.js"> </script>
The dynamically created page includes numerical results and highlights where the keywords
appear in the results, as illustrated on the following page.
27

29. Figure 14. Dynamically created Search Results
The next JavaScript function that was implemented within the system was more of a
superficial extra feature than anything else. As you can see from Figure 4 above, the System
Logo is always present within the header of every page and when the user hovers over the
image, the colour of the eagle changes from black to blue and a tool tip appears indicating to
the user that if they click on the logo it will navigate them to the homepage. This is done by
including two extra attributes in the HTML hyperlink tag then cross-referencing them with
the appropriate function in the JavaScript file.
<a href="index2.html" title="Home" onMouseOver="document.rollover.src=logo_over.src"
onMouseOut="document.rollover.src=logo.src">
<img src="images/logo.gif" name="rollover">
</a>
The HTML here is saying that when the user hovers over the hyperlinked picture go and look
up the script function to find logo_over.src and load it in as the source of the image, it knows
where the image is by the name attribute being set to “rollover” and the line
document.rollover.src, the title attribute Home is also displayed as a tool tip when the user
hovers over the image. When the user moves the pointer away from the image i.e. is no
longer hovering, then the image reverts to the default image defined in the <img> tag.
if(document.images){
logo = new Image
logo_over = new Image
logo.src='images/logo.gif'
logo_over.src='images/logo_over.gif'
}
The above is the corresponding JavaScript function for the rollover image feature described
above. The functionality of this script allows for the creation of two Image objects within the
28

30. document and defines the source of them to images stored in a folder called images on the
website’s file store. The last two lines of the JavaScript function relate to the onMouseOver
and onMouseOut attributes mentioned above in the HTML code.
Figure 15. Image Rollover: Default on the left, Rollover on the right
Staying with the topic of images, some of the images used within the system were far
too big to display at their full size (e.g. pen device diagrams) without compromising the
overall design of the system. To combat this a simple popup window script was implemented
that simply loaded the full size image into its own customised browser window. It is
important to note that the same effect can be achieved by using the “target=_blank” attribute
of the HTML hyperlink tag. The JavaScript function that makes this all possible is
implemented as follows:
function popup(url, name, width, height)
{
settings="toolbar=no,location=no,directories=no," +
"status=no,menubar=no,scrollbars=no," +
"resizable=no,width="+width+",height="+height;
MyNewWindow=window.open(url,name,settings);
}
The script is basically telling the browser to launch a browser window with those settings and
the URL specified by the user. The following is an example of how the script can be
executed from within an HTML document:
<a href="#" onClick="popup('images/syringe_demo.jpg', 'Win1', 440, 440); return false">
When the user clicks on the hyperlinked image, the JavaScript function popup is executed
with the following variables; the url (i.e. the full size image) that the browser window is to
navigate to, the name of the window, and the height and width of the window. It is best to
make the window slightly bigger in height and width than the actual image to make sure the
entire image fits into the window correctly. For example,
29

31. Figure 16. Example of the popup window JavaScript
3.3.3 Java Applets
Java is a programming language expressly designed for use in the distributed
environment of the Internet. It was designed to have the "look and feel" of the C++ language,
but it is simpler to use than C++ and enforces an object-oriented programming model. Java
can be used to create complete applications that may run on a single computer or be
distributed among servers and clients in a network. It can also be used to build a small
application module or applet for use as part of a Web page. Applets make it possible for a
Web page user to interact with the page. [4]
As technology has advanced through the years, Java has become more and more popular.
Everywhere you look chances are Java will have had some part to play in what you are
looking at. Java can be found anywhere, from the software on your mobile phone to the
satellite navigation system in your car. It seems that since 1995, Java has become more than
just an island in Indonesia.
It is the latter part of the above definition that will be discussed in this document as a
Game Applet was implemented to try and maintain the attention of a younger audience with
Type 1 diabetes. Java applets are similar to JavaScript in that they can perform simple
calculations and so on, except that applets can use the full power of the Java technology.
However, both technologies interact with the user without having to sending anything back to
the server, making the processing completely client-side and much faster to load.
The general design of the applet involves five images, the player (who bears a striking
resemblance to Pac-Man© but without the jaw movement), “Captain Sugar” the villain in the
game, the injection to lower sugar level, a bullet to destroy the sugar and the grass to provide
the terrain. Instead of having a static background that the player simply moved across, there
is an implementation of what is known as a Tile Map.
Tile Maps were very popular back in the days when two-dimensional gaming was all the
rage, platform games like Super Mario Bros. and Sonic the Hedgehog are examples of these.
The way the tile map is implemented in the applet is the map is first created in ASCII form
using a simple text editor, using ASCII symbols for each different tile within the game, then
reading the text file into a 2-d array and corresponding each character in the array with an
30

32. image stored on the website’s file store. The following is an example of a primitive ASCII
tile map before it has been read into the applet:
33333333
33333s33
333n3333
33333333
As you can see in this primitive form the tile map is not much to look at, it just looks like a
series of letters and numbers. However, the “3” symbol stands for a grass tile, the “s” symbol
stands for the sugar cube tile and the n stands for the injection needle tile.
To actually produce the tile map on the screen, using the already implemented paint
method and a for loop to go through each element in the array, every time the paint method
came across a certain symbol in the array it would “paint” the corresponding image on the
screen. The following is a screenshot of the game applet with the initial painted tile map, the
player is an actual moving image and the sugar cube and injection are tiles within the tile
map.
Figure 17. Java Game Applet
To start the game the user must click inside the applet to allow the focus to be on the
applet window and nothing else. The first thing the user must do is press the space bar to fire
the bullet and destroy the sugar, when this has been achieved a message appears along the
bottom saying “Sugar Destroyed”. The next step is to collect the insulin to lower the blood
sugar; this is done by using the arrow keys. To implement the use of the arrow keys, a
Boolean method was created that took two parameters an event and integer called key. Then a
series of if statements were implemented to test for each key that was pressed, if the key that
was pressed was left then a series of events would happen, the case is the same for the
remaining three arrow keys. To give a greater understanding of this, have a look at the
following source code:
public boolean keyDown (Event e, int key)
{
if (key == Event.LEFT){
x_speed = -1;
y_speed = 0;
leftPressed = true;
attackPressed = false;
}
31

33. When the left arrow key is pressed, the Boolean expressions leftPressed and attackPressed
are set to true and false respectively. The variable x_speed which controls the velocity at
which the player moves horizontally along the screen is set to “-1” i.e. moves to the left of the
screen, or along the –x axis. As we only want to go left, the variable y_speed, which controls
the velocity at which the player moves vertically along the screen is set to 0.
A subsequent Boolean method, keyUp, deals with all the events that happen when a user
removes their finger from an arrow key i.e. the corresponding velocity is set to 0 and the
corresponding Boolean expression is set to false.
Once the user achieves either of these actions, a method was implemented within the
applet to replace that tile with another tile (in this case it was the grass terrain tile). This was
simple to implement, as it was only an array manipulation, such as:
public void setTile(int x, int y, char tile)
{
map[x][y] = tile;
}
(Then within the paint method)
setTile(3, 1, '3');
Invoking the setTile method from within the paint method, tells the applet to replace
whatever tile is four tiles along (note tiles start at 0) and one tile down with the tile that
corresponds with the symbol “3”.
There is not much functionality in the game other than this; it was simply to demonstrate
the idea of how sugar and insulin affect the increase and decrease of sugar in a Type 1
diabetic’s blood.
3.3.4 Adobe Flash
Flash is used to create content for the Adobe Engagement Platform (such as
web applications, games and movies and content for mobile phones and other
embedded devices). The Flash Player, developed and distributed by Adobe systems
(which acquired Macromedia in a merger in late 2005), is a client application
available in most common browsers. It features support for vector and raster
graphics, a scripting language called ActionScript and bi-directional streaming of
audio and video. There are also versions of the Flash Player for mobile phones and
other non-PC devices. [5].
Many people use Flash everyday when working with the Internet, whether they realise it or
not. Take Youtube for example, this is an online video community that has recently become
very popular as a way to express yourself or just to share something with your fellow man.
The technology this website uses is Adobe Flash Player, incorporated into its pages via the
HTML tag <EMBED>. Many band and film websites utilise Flash to add interactivity to
their web pages and to provide more of a multimedia experience than simply an aid to
promote themselves.
As outlined above, although there are many different applications and implementations of
Adobe Flash circulating on and offline the way it has been implemented within the system is
by way of various interactive demonstrations varying in content and complexity. The
applications of Flash within the system range from simple visual “click and see”
demonstrations and more interactive demonstrations such as, click the button a certain amount
of times for different things to happen to a more complex drag and drop demonstration.
32

34. 3.3.5 Blood Monitoring (Drag and Drop)
Instead of having a series of images and text that the user could click through and
click back in a presentation like fashion the system presents the user with a drag and
drop facility so that they physically have to get involved in their own learning if they
want to progress further through the demonstration. This is important as it keeps the user
entertained and maintains their attention, it also does not bore them with mountains of
information.
Figure 18. Blood Monitoring (Drag and Drop Flash Demonstration)
As the screenshot shows, the virtual blood monitor is designed to look superficially like a
modern MP3 player, the reason behind this design is that, a large majority of young people
like (and indeed have) MP3 players, so modelling the blood monitor to look like one may be
visually appealing to young people and encourage them to pay attention or even do more
tests, maybe an MP3 player could be incorporated into it for added encouragement.
To begin the user must enter the test strip into the top of the blood-monitoring device,
dragging and dropping the test strip onto the black area of the monitor achieves this. Only
once this has been done correctly does the Continue button appear. Once this button has been
clicked, another button appears in its place labelled Apply Blood, during an actual blood test
this is usually done with a lancet, or “finger pinger” (a name give because of the sound it
makes when operated). When the Apply Blood button is pressed an animation to simulate a
clock or timer is displayed to indicate that the test is taking place and after a few seconds, a
“reading” appears on the meter screen with an appropriate message according to the reading
(Note: The reading is the same every time but future work could have it look up an array of
readings and messages and randomly display one). The screenshot on the following page
shows the end of the blood monitoring demonstration; complete with blood sugar reading,
appropriate message and Reset button.
33

35. Figure 19. Reading produced from blood monitoring test
3.3.6 Ketone Analysis (The Click ‘n’ See approach)
To carry out a Ketone Analysis test you have to dip a test strip (Note: these are
different test strips to blood monitoring strips) into a urine sample, wait around 30
seconds or so, remove it and check it against the ketone scale on the side of the test strip
vial. Short of having the user virtually remove a test strip from a vial and place it in a
urine sample then remove it again there seemed to be no way for the user to have any
hands-on experience in this demonstration. With that in mind, a click ‘n’ see approach
was adopted for this demonstration which goes through each step of the analysis process
highlighting the current step the user is on and greying out all the previous steps. The
end result of this looks something like this:
Figure 20. End result of the Ketone Analysis demonstration
This demonstration has also been equipped with three navigational buttons for ease of use,
when there are no previous frames the reset and previous buttons are hidden, this is similarly
the case when there are no more frames left in the demonstration. As you can see the user is
clearly able to distinguish between which step(s) they have just seen and which step they are
currently on. To the right of this information is an appropriate image that visually shows the
user what is going on. Future work to this demonstration could be possibly adding a primitive
34

36. search box that allows the user to enter the number of the frame they would like to go to and
navigate to that particular frame.
3.3.7 Insulin Injection (“Dial a Dose”)
To breakdown sugar in the blood, the body needs insulin, but in a diabetic’s body
they have built up a resistance to insulin so no sugar is getting absorbed making more
and more sugar and this sugar starts to feed off other organs (see Figure 1 for more
details), that is why insulin injections are needed. Insulin Injections lower the sugar
level and aid the body in breaking down this sugar. This final Flash demonstration is
about just that – demonstrating the effect of insulin on sugar in the blood.
Pen Device
Dial
Figure 21. Insulin Injection Demonstration (High Sugar Level)
The demonstration starts when the user clicks on the dial as illustrated in the screenshot,
as the user continues to click the dial the dosage counter increments by one each time and
the blood sugar level steadily decreases. This process is repeated until the dosage reaches
about 15 units then the message “This is the perfect blood sugar to insulin ratio” is displayed
– this message continues to display for a further five units.
Figure 22. Insulin Injection Demonstration (Ideal Sugar Level)
As the user continues to click on the dial to increase the insulin dosage, the blood sugar
level starts to decrease to dangerously low levels and a warning message is displayed.
35

37. Figure 23. Insulin Injection Demonstration (Danger Sugar Level)
When the blood sugar level reaches this level then the warning message “Blood Sugar
Level is dangerously low. Please eat something” is displayed. This level of blood sugar is
known as hypoglycemia, or the diabetic might have slipped into a diabetic coma if their
sugar level was not raised in time. Hypoglycemia is a condition that happens to diabetics
when they have low blood sugar, it can have similar symptoms of being in shock. Some of
these symptoms include disorientation, feeling hot, slurring of words, lack of concentration,
shaking and so on. Possible future work for this demonstration could involve including an
“Eat Something” button that raises the sugar level again, also allowing the blood sugar to
drop depending on the dose that is taken by adding an “inject” button.
36

38. 4 Conclusion
4.1 Evaluation
Once the project was completed the testing strategy that was decided upon was to test the
system on non-diabetics as well as diabetics to find out how the feedback differed because
one set of test results would be slightly biased towards their particular type of diabetes and the
other set of results would be a more general overview of the system.
The main problems that were encountered were the incompatibility issues that exist
between browsers as mentioned previously. However, this was easily fixed with a piece of
JavaScript code (see Chapter 3.3.1 for more details).
Through testing the system on end users, the final system meets all the objectives that
were set out at the beginning of this document and had very little complaints. To test the
system, test subjects were given a short questionnaire of four questions to fill out and the
results obtained were better than expected. It was also required that the test subjects use
different browsers so to detect any bugs between the two.
The following are the results of the questionnaire that was given to prospective test
subjects:
(Note: Q = Question, T1 = Non-Diabetic 1, T2 = Diabetic)
Q1. What is your opinion of the overall design and layout of the system?
T1. Overall design was very professional looking and very nicely laid out.
T2. Overall the system is well laid out and is easy to navigate through. The structure of
the system is good and is not repetitive. The fact that you can make the text size on screen
bigger is good too.
Q2. How easy was it to find the information, and was it relative?
T1. Information was easy to find and everything was relevant to the subject.
T2. Information was completely relative and in some cases more helpful than information
from a medical institution. Information was clearly found and not scattered throughout the
system.
Q3. Did you find the multimedia elements easy to use?
T1. Yes they were very well explained and very easy to use.
T2. Yes it was good having a demonstration of how things are ‘supposed’ to run as
opposed to how they actually do. The instructions on how to use them were easily followed
too.
Q4. Is there any improvements you would suggest?
T1. The default text size needs to be bigger; it is a bit of a strain to read.
T2. In the blood monitor box the text at the bottom flashes past rather quick so it’s hard to
read the screen and the information at the bottom.
It seems that diabetics and non-diabetics alike received the system very well and the only
improvements to make were superficial and not actually anything to do with the content or
quality of the information provided.
4.2 Future Work
The system is far from 100% perfect and a lot more could be done to it such as adding
special features and other things. More accessibility features could be implemented
into the system such as providing other languages for foreign visitors and pursuing the
issue of colour-blindness (mentioned in Chapter 3.2.2) by providing the system in
different colour schemes. A most intriguing idea is to implement a member’s only
section that displays personalised information depending on the type of diabetes you
37

39. have. However, this would require a lot of preparation and server-side technology.
Prototype screenshots of the proposed Sign Up and Members Homepage can be found
below.
Figure 24. Proposed Sign-up Page
Figure 25. Proposed Members Homepage
38

40. References
[1] Kirsteen Paterson, Frog slime and black tea to treat diabetes, Metro newspaper, March 3
2008.
[2] Distance Learning Resource Network, Web Definitions, May 1 2008,
https://www.ncsbn.org/836.htm
[3] Internet.com Network, The JavaScript Source, Founded 1996,
http://javascript.internet.com
[4] Whatis.com, What is Java, Founded 2001,
http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci212415,00.html
[5] Wikipedia, Adobe Flash, Founded in 1993, http://en.wikipedia.org/wiki/Adobe_Flash
39

41. Appendix A - Main Content Source Code
<div id="main_content">
<!-- Start of New Item Description -->
<div id="new_item">
<div id="new_item_header">
<h1>What is Diabetes?</h1>
</div>
<div id="new_item_text">
<p>The most common form of Diabetes is Diabetes Mellitus
with such symptoms as an irregular metabolism and abnormally high blood sugar levels
which is usually caused by low insulin production or absorption.</p>
<p>The main symptoms to look out for are excessive urine
production excessive thirst and an increased fluid intake.</p>
<p>There are three main types of Diabetes: Type 1, Type 2
and Gestational.</p>
<p>Use the links and search box above to navigate through
the system or see below for the two most common types of diabetes. </p>
</div>
<div class="clearthis">&nbsp;</div>
</div>
<!-- End of New Item Description -->
<div class="h_divider">&nbsp;</div>
40