Unit 8 - Task 2 - Mobile Apps

2017

1598232228

GUI Design 1

The purpose of this app is to educate children on how to learn the alphabet. The game will be made in visual studio using the C# program language. The Platform will be for Windows only as it will be easier to make. It will have 3 pages- Home, Games and Help page. However the game will be very easy to navigate as it barely has any to keep it easy for children to use, especially for children with learning disabilities. The target audience for this app is for children who want to learn the alphabet. It will have the accessibility with simple text and text to speech and finally the game will have 3 full functional levels

Home page

HELP

PLAY

GUESS THE ALPHABET

Title

Images

Buttons to click to a new page

Main Page

D E FA B C

SCORE

CLICK ON THE LETTER

GUESS THE ALPHABET

Title

Images/ button to click

Label to tell you what to do

Label showing the score

Help Page

Click on the play button to startThe audio will say the letter to click Click the letter that you think it isIf you get it right you go up to 10 if it is wrong you go down by 10

Help GUESS THE ALPHABET

Title

Text to tell you how the game works

GUI Design 2

Home page 2

The purpose of this app is to educate children on how to learn the alphabet and it will interest them with the animals theme. The game will be made in visual studio using the C# program language. However the Platform will be for Windows only as it will be easier to make. It will have 3 pages- Home, Games and Help page. On the other hand the game will be very easy to navigate as it barely has any to keep it easy for children to use, especially for children with learning disabilities. The target audience for this app is for children who want to learn the alphabet. It will have the accessibility with simple text and text to speech and finally the game will have 3 full functional levels

THE ALPHABET

Start

Help

Title

Images

Buttons

Red

Main page 2

THE ALPHABET

Score

Title

Letters to click

Label to show the score

Help Page 2

Help

Click on the play button to startThe audio will say the letter to click Click the letter that you think it isIf you get it right you go up to 10 if it is wrong you go down by 10

Help Title

Text to show instructions

List of assetsFile name Description Source A.png The letters A to be shown on

the game page Developed by Adobe Fireworks

A.mp3 Audio file for the letter A etc. to be played on all 3 of the pages

Supplied by Tutor

B.png The letters B to be shown on the game page

Developed by Adobe Fireworks

B.mp3 Audio file for the letter A etc. to be played on all 3 of the pages

Supplied by Tutor

C.png The letters C to be shown on the game page

Developed by Adobe Fireworks

C.mp3 Audio file for the letter C etc. to be played on all 3 of the pages

Supplied by Tutor

D.png The letters D to be shown on the game page

Developed by Adobe Fireworks

D.mp3 Audio file for the letter D etc. to be played on all 3 of the pages

Supplied by Tutor

E.png The letters E to be shown on the game page

Developed by Adobe Fireworks

E.mp3 Audio file for the letter E etc. to be played on all 3 of the pages

Supplied by Tutor

F.png The letters F to be shown on the game page

Developed by Adobe Fireworks

F.mp3 Audio file for the letter F etc. to be played on all 3 of the pages

Supplied by Tutor

Z.png The letters Z to be shown on the game page

Developed by Adobe Fireworks

Z.mp3 Audio file for the letter Z etc. to be played on all 3 of the pages

Supplied by Tutor

Y.png The letters Y to be shown on the game page

Developed by Adobe Fireworks

Y.mp3 Audio file for the letter Y etc. to be played on all 3 of the pages

Supplied by Tutor

We chose .png is a transparent small file size that is compressed to make it more useful for mobile apps and with it being transparent we can layer them on top of other images.

Hierarchy chart

Design constraints Skills We have limited skills in programming so this will be a constraint when programming.

Time We have until the end of the semester to finish the product so that will limit what we can do whilst making the game so it will be a short skill.

Language/platform We will use the C# language that will be created only for the Windows platform app this will be a constraint as people barley own any Windows phones compared to android and IOS.

Copyright laws We will have copyright laws constrained because of the images from Google and because of the music that is used

Guess The Alphabet

Game page Help page Home page

Level 1 Level 2

Test plan Test No Description Action expected result Actual result 1 Test play button Click play button Game page loads The button

worked 2 Test letters Click on the letter The letter gets

pressed and the score will go up or down

The score went up/down when I clicked the letter

3 Sound test Game starts, the letter should play out

A person should speak out the letter to click

The sound played

4 Test help button Click help button Help page loads The help button worked

5 Letters displayed properly

The letter should show up

Letters showed up The letters displayed

6 The score increases

When you get answer right score goes up

The score goes up The score goes up

7 You should get a message when you beat a level

Message box Message box shows up saying “well done!”

The message box appears up

8 Test score decreases

Decrease the score

The score decreases

The score decreases

9 Test home page displays

Click on app Home pages loads The home page displayed

10 Test help page Help page loads The text loads on the page

The help page works

11 Level 2 should appear after level 1

Level 2 loads Level 2 loaded Level 2 appeared

12 Title displays Title The title displayed The title display

Process Load the game up

If help button is pressed the help page will load End if

If home button is pushed Game loadsEnd if

If play button is pressed Game starts with audio file of letterEND if

If correct letter pressed The score should increase by 1

Message box saying “well done” If incorrect decrease the score by -1 End if

If score is incorrect The score will decrease by -1 Display message saying “Sorry try again!” End if

If you fail 3 times The game will restart Message “Game over”End if

End game when levels are completed Have message saying “congratulations for beating the game” Flowchart

Sample code

private void img4_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) { if(soundFile == listColoursL1[3]) { txtMessage.Text ="You have selected " + listColoursL1[3]; btnPlay.IsEnabled = true; score = score + 1; } else { txtMessage.Text ="Sorry, You have selected the wrong colour"; txtCheckCount.Text = check.ToString() + " attempt taken."; } }

private void Play_Click(object sender, RoutedEventArgs e) { //call the method to load the colours when the play button is pressed loadImages();

//select a random number between 0 and 4 number = randomIndex.Next(0, 4);

//select a random number between 0 and 4 soundFile = listColoursL1[number]; //set the source code for the sound SoundClip.Source = new Uri("/Assets/" + soundFile + ".mp3", UriKind.Relative); //set to play SoundClip.AutoPlay = true; SoundClip.Play();

}

//method loads list with file names for letter images and sounds

public void loadImagesSounds() { listColoursL1.Add("orange"); listColoursL1.Add("blue"); listColoursL1.Add("red");

listColoursL1.Add("yellow"); }

Review

Screenshots of the app Review This is the home page of my website. On the Home page is features three image of the letters that are in the game, it also has two buttons which consist of “Game” and “help”. The game button takes you to the actual game and the help button takes you to the help page where players can read the rules of the game.

This is the help page. The help page was made to make it a lot easier for players you understand how to play the game. It also allows children with learning difficulties understand as we made sure that the text is simple to read.

This is the Game page. On the game page there will be a voice speaking out a letter, the player then has to click the letter that they think it is. If the player gets it right the score will go up by 1 if it’s wrong it goes down -1. Anytime the player clicks on the letter a message box appears with either saying “well done” or “better look next time”

This is a representation of the game being played. Here you can see how the game works when a player answers a question. In this case the player got the answer wrong so the message box appeared.

The purpose of this app was educate children on how to learn the alphabet. We completed this by creating using visual studio using the C# program language. The Platform is only on Windows like the client required as it will be easier to make. It has 3 pages which include Home, Games and Help page. However we made sure that the game will be very easy to navigate as we wanted to make sure that the game easy for children to use, especially for children with learning disabilities. The target audience for our app is for children who want to learn the alphabet, we feel that we have fulfilled the client’s requirements by making sure that the game is as good as you can make it with a short amount of time. It will have the accessibility with simple text and text to speech and finally the game will have 3 full functional levels.

The main constraint of the game was the time as we only had 4 months to design and create the game so it was a drawback to our company as we couldn’t spend more time making the game look amazing. Another drawback was using c#, using c# affected us to make the game just on Windows. This was because of the time to make the game.

Justification

The reason why I chose bright colours is to draw children into the game a lot more. I also made sure the colours will be fine with learning disabilities

I also made sure that the text is big enough to see so children don’t struggle to read.

However I made sure that the audio is clear so that children understand what letter has been said this way children don’t have to struggle to listen.

The reason why I added a help button is to help children understand how to play the game and this way it can help children with learning disabilities.

The reason why I made the text white is to make it stand out more than black because sometime it doesn’t appeal to the eye as well as it can.

On the other hand the reason why I added a score is to help children to see how well they are doing and it will help them to keep track so that they can try and beat their scores

The design of the app changed when it came to creating it because we ran out of time trying to make it look good so we had to rush the design of the game if we wanted to complete it. So we made sure that the game looked simple so that children can find it a lot easier to see and so that they can play the game without any problem occurring.