The application can be found online at: http ... · Web viewThe user types the romaji they think the kana is and either hits enter or clicks the button. If the user is correct,

University of Sunderland

School of Computing & Technology

CDM303 Advanced Multimedia Authoring: Assignment Two

Student Name: Helen Jappy

Registration Number: 073164908

Programme: BSc Multimedia Computing

Advanced Multimedia Authoring Assignment Two Helen Jappy

ContentsIntroduction...........................................................................................................................................3

Target Audience................................................................................................................................3

Goals..................................................................................................................................................3

Requirements....................................................................................................................................3

Functional Requirements...............................................................................................................3

Non-Functional Requirements.......................................................................................................4

Design....................................................................................................................................................5

Application.........................................................................................................................................5

Selection Screen............................................................................................................................5

Learn Mode...................................................................................................................................7

Character Recognition Game.........................................................................................................9

Tile Matching Game.....................................................................................................................12

Stroke Order Game......................................................................................................................15

Website...........................................................................................................................................18

Navigation.......................................................................................................................................20

Mayer’s Principles...........................................................................................................................21

Development.......................................................................................................................................23

Evaluation............................................................................................................................................35

Conclusion...........................................................................................................................................37

Bibliography.........................................................................................................................................38

Appendix.............................................................................................................................................39

The application can be found online at: http://japaneseapplication.site90.com/JapaneseApplication/index.html

2

http://japaneseapplication.site90.com/JapaneseApplication/index.html


Introduction

Target AudienceThe target audience for the application is quite broad. There is no age range or gender bias; anyone who wants to learn the hiragana and katakana alphabets should be able to use the application. It is aimed more at beginners, as people who are comfortable with the Japanese language and writing systems would not learn anything, although they may use the practice section of the application. The application could be used as a study tool by individuals studying Japanese or by a user who is learning by themselves.

GoalsThe goals of the application are to teach users the hiragana and katakana alphabets used in the Japanese language by use of images, text, sound and video. It will teach the user how to write the different characters, how to pronounce them, and provide different ways that the user can test how much they know.

Regular use of the software will enable the user to recognise each kana character, know how to pronounce each character, and know the correct stroke order to draw each character.

RequirementsThe application must run in an internet browser, which requires the user to be connected to the internet. The user must also have an up to date version of Flash player to enable the Flash content to run. The recommended computer specification to run the application is as follows:

Intel Pentium II 450MHz, Athlon 600MHz or equivalent 128MB of RAM 128MB of graphics memory

Functional RequirementsThere are two main areas of the application, the learn section and the practice section. In the learn area, the user is shown a selection screen where they choose which kana they wish to learn. Once they select a number of kana, they are then shown each kana individually. An image of the kana is displayed in the middle of the screen with the English romaji below it. To the left is an audio feature which allows the user to hear how the kana is pronounced. To the right is a video feature which shows the user how to write the kana using the correct stroke order. Next and previous buttons are also on screen so the user can navigate through all the kana they selected to learn.

To detail more about the selection area, the user is able to select different kana ‘groups’ which contain 1, 2, 3 or 5 kana depending on the group. The user can select hiragana characters, katakana characters, or a mixture of both. The user selects at least one group by ticking the checkbox that matches the group.

3


The practice section is initially similar to the learn section, as the user is presented with a selection screen to choose which kana they want to practice. The user is then presented with 3 different games to choose from.

The first game is a character recognition game. A kana image is shown in the middle of the screen, with an empty text box and a button below it. The user types the romaji they think the kana is and either hits enter or clicks the button. If the user is correct, the text turns green and the kana changes to a new character for the user to try. If the user is incorrect, the text turns red. The user is given 3 chances to correctly guess the romaji. On the third incorrect try, the user is given the next kana to try with. A score is kept for the amount of correct guesses and incorrect guesses. An incorrect point is given when the user has tried 3 times unsuccessfully to guess the kana. Once the user has guessed all of the kana they are then shown this score, with a back button to take them back to the selection screen.

The second game is a tile matching game. The user is shown 8 tiles on the screen that when clicked on reveal either a kana or romaji. The aim of the game is for the user to match up all of the kana tiles with the matching romaji tiles. The user must remember where they saw each tile to successfully complete the game. A timer is shown on screen showing the user how long they have taken so far. Once all tiles have been matched the user is presented with the time taken, and a back button to take them back to the selection screen.

The third game tests the user’s knowledge of the correct stroke order for each selected kana. After the user selects which kana they want to practice, an outline of a kana is shown on the screen. The user must click inside the outline and draw the kana in the correct stroke order. The user has 3 tries to draw the kana correctly. If they draw the kana successfully, the next kana will be displayed for the user to draw. If the user unsuccessfully draws the kana 3 times, they will be played a short animation on the correct stroke order, and the user can progress with the next kana. If there are no more kana to be displayed, a score will be shown to the user on how many kana they drew correctly, and how many were drawn incorrectly. An incorrect point is only given if the user uses all 3 tries to draw the kana, and is unsuccessful on the last attempt.

Non-Functional RequirementsThe application aims to be engaging to the user, so they feel comfortable with using the different sections enough to regularly use the application to improve their knowledge of the different kana characters. The application must be easy to use, and clearly explain what the user has to do in each section to prevent the user from becoming confused. Response time is also a requirement. When the user interacts with the application it must respond quickly, especially in the practice section. If the user is playing the matching tiles game which runs against a timer, the application must respond to the users actions very quickly, else the timer would also be counting how long it takes for the application to complete the users task. The application should look professional, with a clean and tidy layout that doesn’t make the screen looked crowded, and consistency between the different areas.

4


Design

In this section I aim to describe how I went about designing the different assets for the project. I provide sketches, flowcharts and diagrams showing the different stages of my designs.

Once I knew what my application was going to be and had the ideas for the different learn and practice sections I started to design how the application and container website would look.

Application

Selection Screen

This is my initial sketch of how the selection screen would work. I split the hiragana and katakana into two sections, upper and lower. I then put the characters into their groups with a checkbox above each group. This way the user selects as many groups as they want to learn or practice, from either hiragana, katakana, or a mix of both kana sets. I initially designed this to have a scrolling feature so that the users could select additional kana such as kya, kyu, kyo as if everything was displayed at once it would mean that the user would see a very busy screen which they may find confusing.

5


This is my refined design for the selection screen. This design has included instructions, a larger Learn button, and a back button so the user can retrace their steps. The back button will be located on all screens, and always in the bottom left corner for consistency. The checkboxes are quite large as I want the user to be able to easily select them, so having a larger target area means the user has more space to select their chosen kana groups.

I have decided to go with a mainly blue colour scheme with a pale background and large blue buttons. I want to keep the colour scheme simple without too many different colours as not to distract the user from the content. Blue is often associated with calmness in both western and Japanese culture. In Japanese culture blue good luck charms are often given for luck in studying and in work. I aim to use high contrasting colour in this design to make it easier for people who have colour impairments. The W3 state that having high contrasting colours between the background and foreground is important as if they are similar it can be an issue for users with colour impairments.

6


Learn Mode

This is my first sketch for how the learn area would look. The kana is displayed in a box on the right with the romaji underneath. There is also a button called ‘Stroke Order’ which would play a video to inform the user the correct stroke order for drawing the character. The ‘Pronunciation’ button would play a sound clip to allow the user to hear how to pronounce the character. Next and previous buttons allow the user to navigate between the different kana they selected to learn.

7


This is my refined design for the learn mode. The design is similar to the initial design for this area. I have included a back button so the user can retrace their steps. I have also moved the stroke order and pronunciation buttons to the sides. As I want the stroke order button to show a video showing how to draw the kana, I plan to show the video in the same area as the button. My initial design did not leave space for the video to be shown.

I have included video and audio in my application as I feel it adds more to the application. Instead of the audio I could have text explaining how to pronounce each kana, but from my own experience it is easier to listen to how something is pronounced than trying to read it when it has been spelt phonetically.

8


Character Recognition Game

This is the initial sketch for the first game where the user must type in which kana character they see. The kana is displayed in the middle of the screen, with a text box below it for the user to type in their answer. Once they have typed in an answer and hit the ‘Go’ button, it either moves on to the next kana, or informs the user that their guess was incorrect and gives them a total of 3 chances to guess correctly. An indicator of how many the user has gotten right and wrong is displayed at the bottom.

9


This shows the refined design for the character recognition game. I decided not to show the score at the bottom of the screen during game play. The way I want to score the game is that the user gets 3 tries to guess the character. I only want to record a wrong answer if the user uses all of these 3 tries and still guesses incorrectly. If the user types a wrong answer and the score does not change, I feel that this may confuse the user. Having the score displayed at the end removes this area for confusion.

10


This flowchart shows the flow through the character recognition game.

11

Show user the answer

Out of tries?

Remove try

Set tries to 3

Display final score

More to test?

Update Score

Correct?

Select kana

Enter Guess

Kana displayed

Yes

No

Yes

No

No

Yes


Tile Matching Game

This is my first design for the matching tiles game. A number of tiles are displayed on the screen. Once the user clicks a tile it reveals either a kana or romaji text. The user must match each kana to its romaji, remembering where they saw the different images. Instructions are given on screen to inform the user how to play the game. A score counter is displayed on screen. This would count, in seconds, how long the user had been playing for.

12


This is the refined design for the matching tiles game. I have changed the amount of tiles to 8, which means that the user is matching 4 kana to the romaji. I have also removed the instructions at the bottom, as the instructions will now be located on the selection screen. The time counter is displayed on the bottom right, and when all tiles have been matched together a message will be displayed to the user telling them their total time taken. This is to keep it consistent across the practice section, as the type game informs the user of their score at the end of the game.

13


This flowchart shows the flow through the tile matching game.

14

Select second tile

Select first tile

Unselect tiles

Display tiles

Display time taken

Tiles remain?

Remove both tiles

Tiles match?

Select kana

Start timer

Initialise timer

Yes

No

Yes

No


Stroke Order Game

This image shows the stroke order game initial design. The outline of a kana is shown, and the user must click within the shape and draw the kana, using the correct stroke order. The shape would light up as user was drawing the kana. If the user makes a mistake when drawing the kana, they must start drawing it again from the beginning. The user could keep trying to get the order correct; however after 3 tries the user would be able to watch an animation of the correct stroke order.

15


This is the refined design for the stroke order game. I decided to display the romaji for the character next to the outlined kana as this game is not primarily testing the knowledge of what the kana is, but the correct stroke order to draw it. Once all of the kana have been completed a score will be shown informing the user how many they got correct and how many they got wrong.

16


This flowchart shows the flow through the stroke order game.

17

All filled in?

Show user the answer

Out of tries?

Remove try

Set tries to 3

Display final score

More to test?

Update Score

Correct?

Select kana

Draw line

Display outline

No

No No

No

Yes

YesYes

Yes


Website

This is my first sketch of how the website would look. There are four main links:

A home page where the user is introduced to the website and explains the applications purpose and provides links to the learn and practice sections of the application.

A learn page where the user accesses the learn section of the application. A practice page where the user accesses the practice section of the application. A contact page where the user can contact me.

18


This is my refined design for the website. In my initial plan for the website I had the learn and practice modes as two separate links. I was unsure if I was going to make two separate applications for the modes or one combine application. I decided it would be easier to make one application, as numerous sections of the code can be shared between the modes. This refined website idea reflects that change, as there are now only 3 pages instead of 4 as in the original design.

I plan to use a similar blue colour scheme to the application to keep the look of the site consistent. The website will be 800 pixels wide and positioned in the middle of the screen with a plain colour background filling the size of the users screen.

19


Navigation

This is a diagram of how I plan to structure the application. On the top left is the welcome screen that the user will be presented with first. From there they have the option of entering the learn mode or the practice mode. Following the learn mode option, they are presented with a screen to select the different kana to learn. Continuing through with selected kana gives them the learn screen shown on the bottom left. If the user selects the practice mode option from the welcome screen, they are presented with a selection screen to select the different kana to practice. From there they have the option of playing one of 3 different games; the tile matching game, the character recognition (type) game, and the stroke order game. Please note the back button on all of the screens (shown as black boxes in the top left of each screen). Having back buttons allows the user to fully navigate the application. For example, this allows the user to select practice, enter the tile matching game, and navigate back to the welcome screen without having to complete the game. This is a useful feature as the user may select some kana to practice, then part way through a game they can go back to the selection screen to change the kana that they are practicing with.

20


This is a flow chart diagram of the navigation through the application.

21

Stroke Order Game

Match Tiles Game

Character Recognition (Type Game)

Which Game?

Learn Kana

Which Mode?

Practice Selection Screen

Learn Selection Screen

Welcome Screen

Learn Mode Practice Mode

StrokeMatchType


Mayer’s Principles

I have attempted to use some of Richard Mayer’s 12 principles when designing the application.

Mayer’s segmenting principle states that people learn better when a lesson in a multimedia application is given to the user in multiple small segments rather than in one large segment. I have broken down my application into different areas (learn mode, practice mode, and the different games within the practice mode) which allows the user to focus on one area at a time. I believe that letting the user select how many kana they want to learn or practice with allows them to have control over how much they try to learn or practice in one go.

I have tried to follow Mayer’s coherence principle and not have any images, text, audio or video that are unnecessary. In the case of the audio and video elements in the learn mode, these do not auto play. This allows the user to have control over if they want to use the audio and video features or not. I used my own voice to record the audio pronunciation assets, which matches Mayer’s voice principle of users learning better with a human voice as opposed to a computer voice.

In the learn section, I have tried to keep the kana and romaji assets close to each other as Mayer’s spatial contiguity principle states that individuals learn better when related assets are close to each other than if they are spaced far apart. I took care to place the assets close enough to each other without having the screen looking cramped.

In my application I have used different types of media; images, text, audio and video. Mayer’s multimedia principle states that ‘people learn better from words and pictures than from words alone’. Having the different types of media in the application gives the users multiple media types to help them learn.

22


Development

I decided that I would develop the application using the ActionScript3 code rather than use the timeline. I decided to do it this way as a lot of the assets can be reused throughout the application. The selection screen is a good example of this, as it is both in the learn mode and practice mode, with subtle differences depending on if the user is learning or selecting one of three games to play. My code is all done in different classes as I find this the easiest way to program. I decided to work on the code first with very simple dummy assets as this allowed me to create the application code reasonably quickly as I did not have to worry about exact placement of assets. Once my code was mostly complete I started work on developing the assets and changing the relevant areas of my code to use these assets and the designed layout.

Throughout this project I have used the agile methodology, which has meant that I have been working on specific areas of the application at one time. This has allowed me to have sections of the application finished, which I could then later slot together with the other sections to gradually build up the application, giving me many small deliverables on a regular basis throughout the project. It also meant that had I had any changes to make when working on the project, I could do this quite easily. Using the agile methodology has allowed me to make small changes to my designs within minimum time spent changing the application. If I had used a methodology such as the waterfall model, I would have had to of spend more time changing the different areas.

The first area I started to develop was the selection screen. As this was to be used in two areas of the application, I thought it would be a good place to start. I created a number of classes, following the route to get to the selection screen. All these did initially was to trace the name of the class to the console so I could check what the code was outputting. With the selection screen, I created code that placed four checkboxes on the screen that represented the first four kana groups. I then worked on code that when a checkbox was checked or unchecked, it would add or remove the group to an array. This array would later be passed to either the learn or practice area so I would know what the user had selected.

23


24


The second area I developed was the learn area. I passed the array of selected kana groups to the new learn class and created two new classes, a kana class and a kanaset class. The kana class contains variables such as the kana romaji, kana image, if it is hiragana or katakana etc. I created a method in the kanaset class to use the array of selected kana groups to return an array of all the kana in those groups in the form of a kana object. This method uses a lot of switch case statements to return the correct kana objects. At first I was only returning partial kana objects which only had a dummy image, the romaji of the kana and if it was hiragana or katakana. Once the different assets had been created I then changed the dummy image to the correct image, and updated the audio and video variables (described later in the development section).

I made a decision here not to use a database to hold the different kana parameters as I wanted to keep everything inside flash, rather than relying on an external database. Looking back on it now, it would probably have been better to use a database because each kana object has a number of parameters. I am only using 8 kana for the application due to time constraints, and the switch case statement to return the correct kana objects is huge.

25


Once the learn class receives back an array with all the selected kana objects in, it selects the first item in the array and displays the kana image on screen. I added previous and next buttons to allow the user to navigate through all of the selected kana.

The third area I developed was the character recognition game for the practice section. I have called this the typing game in my code. I chose this area next as it is quite similar to the learn mode. Before I could work on this game, I had to go back to the welcome class I created at the beginning. I added two dummy buttons, one button called the selection screen sending a string parameter specifying that the mode chosen was the learn mode. The second button called the selection screen with the string parameter of practice mode. This allowed me to create a new dummy button to call the new class for this typing game. The type class receives the array of selected kana groups and uses the kanaset class to change this into an array of kana objects. I created a new method in the kanaset class that randomises the order of the kana objects in the array to make it more challenging for the user.

26


Once the type class has the randomised array of kana objects it displays the kana image on the screen. A textfield is added on screen for the user to type their guess into, and a button to check the answers is displayed. When the user clicks the button, the code checks to see if the text in the textfield matches the kana objects char field which contains the romaji for the kana.

27


If they match, the text in the textfield changes colour to green and a timer function is called to wait 800 milliseconds before clearing the textfield and displaying the next kana. If the users answer does not match the kana objects char field the font colour changes to red, then the code follows one of two paths. The user has 3 chances for guessing the correct romaji for the kana. When the code selects a kana to display on screen a variable called tries is set to 0. When the user enters an incorrect guess, the code checks to see if the user has used all of their 3 tries or not. If the user has tries remaining, the text stays red and the user must change their answer by deleting the text and entering a new guess. If the user has no tries remaining then a function to wait 800 milliseconds is called before the textfield is cleared and the next kana is displayed. If there is no more kana to display, either after a correct or incorrect guess, the user is presented with the amount of correct and incorrect answers they made. An incorrect answer point is given each time the user uses all of their tries. In this way it is possible to make 2 incorrect guesses for each kana, yet still get a score of all correct.

I next started development on the tile matching game. This follows the same initial setup as the typing game, as it receives the array of kana groups, exchanges it for the kana object array, then randomises it. An array of 8 numbers from 0 – 7 are randomised and the code selects the first four in that list to use for the 8 cards. The kana tiles are placed first, using the randomised number array to refer to the x coordinate array specifying the x coordinate where the cards should be placed. If the randomised number is larger than 4, the y coordinate specified is the lower row, and if the number is less than 4, the y coordinate is in the top row. The matching romaji tiles are placed in the same way. Having the coordinates randomised allows for the kana and romaji tiles to be interspersed; initially I had it programmed that the kana tiles were always in the top row and the romaji in the bottom, but I felt this was not challenging the user as they would always know to click one tile from the top and one from the bottom.

28


Once I had the tiles placing randomly in the correct locations I added dummy cover cards to hide what kana or romaji was behind them. I then worked on writing the code that would check if the two selected cards were a pair or not. I had quite a bit of trouble with this area, as I had placed dummy images just on top of each card, I did not know which card was hidden where. I tried creating a new parameter in the kana object called cardCover, which I then placed on top of the cards. However it would only place each cover card once, so I either had all of the kana tiles covered and the romaji tiles uncovered, or vice versa depending on which way round I put the tile placing code. I solved this by having two cards per kana object, one for the kana and one for the romaji, and

29


I created two new parameters on the kana object to store a cardCover image for the kana and a cardCoverEng image for the romaji cover card.

When I place the kana cards I add the coverCard, and when I place the romaji cards I add the coverCardEng, both of which have an event listener to call the method cardClick. This function first hides the card cover, then checks to see if the card clicked is the first or second card to be clicked. If it is the first, it stores the kana object into a selectedKana variable, and stores if it was the English or Japanese character that was selected. When the user clicks the second card, the stored selectedKana variable is checked against the newly clicked card. If the cards make a pair then after 500 milliseconds the matching cards are removed from the stage. If the cards do not match then after 500 milliseconds both of the card covers reappear. This process is repeated until the user matches all of the cards.

30


When the user first clicks a tile a timer is started which displays on the screen. This updates every second to inform the user how long they are taking to match all of the cards. When there are no more cards to be matched, the user is then informed how long it took them to complete the game.

31


At this point I had not started work on the stroke order game. I felt I was running out of time, as I had not yet created any proper assets, and I was not placing objects onto the stage in the correct places. I went back over some of the code I had so far to check for bugs. Once I was happy with the code I started work on developing the assets.

I created the kana image assets in flash as text items in a movie clip and edited my code to show the correct kana instead of a dummy image. This was simple to do and didn’t take long.

An example of the kana image assets

I then started creating my buttons. I worked out from my designs and code what buttons I needed then created them in Photoshop. The buttons were quite easy to create and were made quickly. I then replaced the dummy buttons in the application code with the correct buttons, and spent a while sorting out the different coordinates for them all.

An example of a button used in the application

I created the background for the application, consisting of a pale blue gradient. It took me a little while to get a gradient I was happy with, as I wanted to make sure that the content was clearly visible and some of the gradients made it slightly harder to read what was on the screen. Once I found a gradient I was happy with I put this into the application.

I created the card covers for the matching game using the same style as the buttons which was easy to do as I copied the button layer style onto the square card covers. I added the card cover images into the application and spent time working out the coordinates for each card, as initially I had just put them on the screen next to each other which looked quite crowded.

I then spent time creating the images for the selection screen. I decided to have all of the kana as an image rather than text, as I thought it would be easier to get everything aligned easier in an image than to type it all and position it in Flash. It took a while for me to get this screen sorted. I had created four checkboxes with labels on initially, just so I could get the code working. My first task here was to edit the checkboxes in Flash to be much larger than the default setting, as these were quite small and I wanted the user to have a larger selection area. Once I knew how big the checkboxes were I started to create the image with all the kana characters on using Photoshop. This took a lot of time to space the characters out enough so it did not look cramped, but close enough that I could fit all of the characters on the screen in the space available. I added the remaining checkboxes to the screen, but I made them unselectable because I am only focusing on creating content for the first 4 hiragana groups due to time constraints. I added faint lines to separate the rows of kana to make it easier for the user to read.

32


I created instructions to go down the side of the selection screen to explain to the user about the different modes and what they had to do. I also created an image of error text when the user tries to move forward through the application without selecting a kana group. I did this because if the is unclear about what to do and tries to progress without selecting anything, unless the application makes it clear what they have to do the user will just get stuck and may stop using the application.

The selection screen showing 4 selectable kana groups and instructions in the Learn mode.

I recorded the different pronunciation of the characters using my desktop microphone. I tried recording a few times, but the sound quality produced is quite poor as there is a lot of white noise in the background. I had to convert the wma files into a format that Flash could read. I used the Adobe Media Encoder software to encode the wma file to a flv file. I edited the code to add the sound in using the FLVPlayback object which I found quite simple to use as I could change add once instance and change the source file depending on which kana was selected at the time.

I added a button on the learn screen of each kana so when the button is pressed the audio is played to the user. Initially I used the same type of buttons as in the rest of the application as shown below. However when I added the button and audio functionality into the code, due to the buttons size it seemed to make the screen appear quite busy. I changed my design for the audio button to a smaller icon button instead, based upon the same style button but considerably smaller.

I spent a while recording the video assets to show the user the correct stroke order of each kana. The quality of the video from the video camera loaned to me by the university is not great as it is shot close-up and is quite blurry. Unfortunately my own camera records in its own proprietary

33


format which I cannot convert to work in the application. I edited the code to add the videos in as external sources, rather than embed them on the timeline this works quite efficiently as the videos are small in dimensions, short in length and thus have a small file size and do not take long to load. I used the same method of adding them as the audio files, the FLVPlayback object.

The videos are used on the learn screen. A button is next to the image of the kana the user is learning about which when pressed loads the video for the user to watch. I placed the original video button I created on the screen, however like the audio button, it made the screen appear quite busy. I changed the design for the video button to use a smaller icon button like the audio button. I feel that having the audio and video buttons as smaller icon buttons makes the screen look less crowded which looks neater.

I decided to include some Japanese music at the start of my application. I searched on the internet for free music I could use in my application. I found a website that had a number of files to choose from that allowed me to include them in the application. After selecting one I converted it into flv format and used the FLVPlayback object to play the sound when the application starts up. I decided that when the user was in the learn section and presses the audio button to listen to a pronunciation of a kana that the music should stop as it might distract the user. I had a bit of trouble with this as I could not get a dispatch event to run properly. I ended up casting the welcome class as a MovieClip so I could access the music and stop it when the audio pronunciation button was pressed.

When navigating backwards in the application, e.g. when the user presses the back button, an event is fired which removes the content from the screen and from memory. For example, when the user is in the learn section learning about different kana and the user presses the back button, an event is fired which calls the resetSectionLearn function in the selection class.

34


This removes the learn object from the stage, then sets it to null to be reinitialised later if needed. This helps to reduce the amount of data that the application needs to store by cleaning up any unnecessary data.

I started work on the stroke order game using two dummy images. The first image had a cut out of the character shi (し) which is drawn in one stroke, top to bottom. The second image had the same character drawn on it with a transparent background. The code places the first image on top of the second, and once the user clicks onto the second image (i.e., within the lines) the code uses the hitTestPoint functionality to test if the mouse collides with the first image (i.e., gone over the line). Unfortunately, this code does not work correctly, as even though if the user stays within the lines and does not touch the first image, the code registers it as a collision. I have been unable to get this code to work successfully and due to running out of time, the stroke order game cannot be accessed by the user. The code for the stroke order game can be found in the appendix on page 71.

35


Evaluation

I asked 3 people to use my application for a short while, as if they were using it to learn and practice the kana. I created a one page questionnaire for them to fill in after using the application. Below is a table of the results I received from the questionnaire.

Participant 1 Participant 2 Participant 3Have you studied Japanese before?

No No No

If Yes, have you studied any of the kana before?

No No No

Did you always understand what to do in the different areas of the application?

Always Always Always

How clear did you find the instructions?

Very clear Very clear Very clear

Do you feel that regular use of the application would help you to learn the different kana?

Definitely Probably Probably

Did you find the application easy to use?

Very easy Very easy Very easy

Did you feel the pronunciation clips were helpful?

Yes Yes Yes

Did you feel the stroke order videos were helpful?

Yes Yes Yes

Please select 5 words you feel accurately describe the general appearance of the application

NeatCleanSleekTidyElegant

NeatPlainConsistentFancyTidy

NeatCleanPlainFancyElegant

All of my users were complete beginners at learning Japanese and the kana. As the main target audience for my application are beginners, I feel this small sample can provide an accurate representation of the user group.

The users of my application understood what the application was for and found the instructions very clear and easy to understand. The users were positive in their responses that regular use could help them to learn the kana. They found the application very easy to use, and found the audio and video assets helpful when learning the kana.

36


The 5 words chosen by the users are all quite similar. All users chose neat, and the majority chose clean, plain, tidy, fancy and elegant. I feel these are all positive verbs towards my design. I wanted the design to look clean and tidy, so I am pleased that the majority of users feel this way.

I feel that my application meets most of the goals set at the start of the project. My application teaches 20 of the hiragana characters to the user by use of images, text, sound and video. The video’s show the user the stroke order to write the characters, and the audio helps the user know how to pronounce the character. With more time, the application could be made to feature all of the hiragana and katakana alphabets.

The learn section is complete, and meets the functional requirements for the area.

The selection screen allows the user to select the first 4 hiragana groups, consisting of a total of 20 characters. With more time I could add the assets for the remaining hiragana and katakana characters, and it would be easy to add them to the code.

The practice section mostly meets the requirements set. Both the character recognition (typing) game and the tile matching game are complete and meet the functional requirements set for them at the beginning of the project.

I ran out of time to complete the stroke order game for the practice section. I made a start using dummy images of one of the simpler to draw characters. Unfortunately I could not get the code to work successfully, and had to prioritise finalising the remaining sections and the application as a whole.

The application responds very quickly to the user which I set as a non-functional requirement at the start of the project. As the data received from the users via the questionnaire results, the application is easy to use, clearly explains what the user has to do in the different sections, and the applications appearance is clean and tidy.

37


Conclusion

I feel I have learnt a lot from this project. I had not done much work in Flash, and the work I had done was a few years ago. I did not know any ActionScript 3 code before starting this project, however I found it quite simple to pick up due to mainly programming in C# for my placement year. I feel that this project has helped my programming skills to develop further in general, and I now know how to program using ActionScript 3.

I am pleased that my application meets the majority of the goals I set at the start of the project. I think if I was doing this project again I would have started working on it earlier. As you can see from the schedule (Appendix item 3, page 76), I planned all of my dates to finish easily before the deadline. Unfortunately I fell behind with the project quite quickly which has led to me missing out the entire stroke order game from the application. The project felt quite rushed towards the end as it felt there was a lot to do and I was running out of time. I would have liked to make the application use all of the kana so that the user could use the application to learn all of the characters. When I started writing the code for the selection screen I only placed 4 checkboxes on the screen, just to get the code working before I worked on the appearance of the application. As I progressed further with the application and started creating assets, I realised I would not have enough time to create all 136 kana and still get the application to a reasonable standard. I think only doing the first 20 characters worked well in this regard, as it allowed me to complete the majority of the application.

If I had more time there are a few areas I would like to improve. There is a small bug in the tile matching game where if the user clicks the cards too fast, the application gets confused and removes the wrong cards, which leads to the game being broken unless the user retraces their steps and restarts the matching game. Ideally I would like to fix this, as although it may not be an issue for complete beginners using the application, once they get more experienced both with the application and the kana, they will instantly know if they have matched the tiles correctly or not. This may lead them to clicking a new tile to turn over before the 2 incorrectly matched tiles have been reset.

I would like to add a feature where the user can customise the colour scheme of the application. Although there is no real problem with having a blue colour scheme, I know from my own experiences that I enjoy using an application more if I can customise it in some way.

I would also like to add a feature that stores the user’s scores for the games on the user’s computer. This way when they are playing a game they have already played before, it could compare their scores. This would allow the user to see how they have improved by using the application.

I am pleased with how the application and website look. I am not particularly confident in designing the appearance of an application, but in this case I feel that both the application and the website look quite good and go well together.

Overall I am happy with what I have produced for this project. It has sometimes been a challenge, getting the code to work and learning how to use Flash’s debugging tools, but I have enjoyed creating the application.

38


39


Bibliography

http://www.ehow.com/about_6658499_meaning-color-japanese-culture_.html : Japanese colour meanings

http://www.japan-101.com/culture/sarubobo.htm : Japanese good luck charm, given in blue for good luck in studying and in work

http://www.buzzle.com/articles/calming-colors.html : Western, blue as a calming colour

http://www.w3.org/WAI/ER/IG/ert/#color : W3 section about colour

http://www.daisyfield.com/music/jpm/about/Takai-Yama.htm : Website with free Japanese music tracks.

http://sixminutes.dlugan.com/multimedia-learning-book-review/ : Information about Richard Mayer’s 12 principles.

40

http://sixminutes.dlugan.com/multimedia-learning-book-review/

http://www.daisyfield.com/music/jpm/about/Takai-Yama.htm

http://www.w3.org/WAI/ER/IG/ert/#color

http://www.buzzle.com/articles/calming-colors.html

http://www.japan-101.com/culture/sarubobo.htm

http://www.ehow.com/about_6658499_meaning-color-japanese-culture_.html


Appendix

Table of Contents

1. Code 40

1.1 JapaneseApplication 40

1.2 Welcome 40

1.3 Selection 42

1.4 Learn 49

1.5 Kana 53

1.6 KanaSet 53

1.7 Type 63

1.8 Match 66

1.9 Stroke 71

2. Questionnaire 72

2.1 Results 73

3. Schedule 76

4. Website Code 77

4.1 Index 77

4.2 Application 78

4.3 Contact 79

41


42


43


44


45


46


47


48


49


50


51


52


53


54


55


56


57


58


59


60


61


62


63


64


65


66


67


68


69


70


71


72


73


74


75


76


77


78


79


80


index.html

81


application.html

82


contact.html

83

Documents

The application can be found online at: http ... · Web viewThe user types the romaji they think the kana is and either hits enter or clicks the button. If the user is correct,