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

1

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.

2

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

3

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.

4

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

5

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

6

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.’

7

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.

8

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.

9

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.

10

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).

11

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.

12

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).

13

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)

14

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.

15

Figure 4. The implemented system

Pag

e h

ead

er

Co

nta

iner

Pag

e H

eadin

g

Acc

essi

bil

ity

Lo

gin

Bo

x

Pag

e H

ead

er L

ink

s

Pag

e H

ead

er S

earc

h

Mai

n C

on

ten

t

Pag

e F

oo

ter

Lef

t S

ub

Ite

m

Rig

ht

Su

b I

tem

16

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:

17

(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

18

3.3 – Interactivity). The following are screenshots of the three different types of layout that

can be found within the system.

Figure 5. The Content Page Layout with Interactivity links

Pag

e h

ead

er

Conta

iner

Pag

e H

eadin

g

Acc

essi

bil

ity

Pag

e H

ead

er L

ink

s

Mai

n C

on

ten

t

wit

h a

pp

rop

riat

e

imag

e an

d c

urr

ent

loca

tio

n i

nd

icat

or

Pag

e F

oo

ter

Blo

od

Monit

ori

ng

Dem

onst

rati

on

Pag

e H

ead

er S

earc

h

Insu

lin

Inje

ctio

n

Dem

on

stra

tio

n

19

Figure 6. The Categories Page Layout

Conta

iner

Pag

e H

eadin

g

Acc

essi

bil

ity

Pag

e h

ead

er

Pag

e H

ead

er L

ink

s

Pag

e H

ead

er S

earc

h

Pag

e F

oo

ter

Cat

ego

ry L

ink

s

No

te:

The

sub i

tem

and m

ain c

onte

nt

pic

ture

lay

ers

hav

e bee

n o

mit

ted

.

20

Figure 7. The Content Page Layout without Interactivity links C

onta

iner

Pag

e H

eadin

g

Acc

essi

bil

ity

Pag

e h

ead

er

Pag

e H

ead

er L

ink

s

Pag

e H

ead

er S

earc

h

Pag

e F

oo

ter

Mai

n C

on

ten

t

wit

h a

pp

rop

riat

e

pic

ture

an

d c

urr

ent

loca

tio

n i

nd

icat

or

Note

: T

he

sub i

tem

lay

ers

hav

e bee

n o

mit

ted.

21

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.

22

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.

23

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.

24

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.

25

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]

26

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.

27

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.

28

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

29

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,

30

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

31

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; }

32

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.

33

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.

34

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

35

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.

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.

Pen Device

Dial

36

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.

37

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

38

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

39

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

40

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>