btecitresources.files.wordpress.com · web view2018. 3. 14. · this code takes the x/y axis of...

Richard Collins Unit 8 - Application Development Task 3

BTEC Information and Creative TechnologyLevel 2

Unit 8Task 3 Document

(P4, P5, P6, M3, M4, M5, D3)

Richard Collins164166


P4- Table of Predefined code (snippets) and the assets for the Application. Demonstrate Awareness of Purpose and list the sources of the assets

Screen Name/Shots Code Snippets Explain Screen1 This is the main screen of my application. This screen is the first

screen the user sees when he/she loads up the application. This screen uses 2 pre-defined code pieces.

The first piece of pre-defined code is a Click action, which is associated with all of the buttons A-H and Login Screen. When each of the buttons A-H are pushed, the TextToSpeech speaks a message relevant to the letter, such as “A for Apple” when Button A (BtnA) is pushed. The same code is used for the Login Screen button, except there is no TextToSpeech associated with that button, so therefor it just loads up the “Login Screen” without any sounds being played.

The second piece of pre-defined code is a “Long-Click” also known as holding the button down. This code is designed to load up the relevant screen to the button which is “LongClicked” such as “A” opens the “Apple Screen”

Richard Collins Unit 8 - Application Development Task 3Apple This is the apple game screen of my application. This game is

linked to the “A” button on the main screen(Screen1). All of the screens have a back button at the top, which enables the user to return to the Main screen.

The MoveApple2 code is a procedure which enables the apple to move around the screen on a randomised fraction basis. The code works by Apple X = Random Fraction * (Canvas Width – Apple Width)Apple Y = Random Fraction * (Canvas Height – Apple Height)This code takes the X/Y Axis of the apple and times it by the Canvas Width/Height minus the Apple Width/Height.

The next piece of code, sets the initial load up score to 0, so that the user can track his/her score by touching the apple and adding +1 each time to the score.

Next piece of code states, when the Apple is touched the score goes up +1 each time, generates a TextToSpeech message of “A for Apple” and calls 4 procedures; MoveApple2, UpdateScore, MakeAppleSmall, Sound1.

The next piece of code is a procedure linked to the score label, which is activated when the user touches the apple. This code displays the user generated score.

Next piece is the Reset button which enables the user to reset the entire game, to revert it back to the beginning. This calls the score to be reset to 0 and calls the UpdateScore procedure.

The next code; This code makes the Apple resize to different sizes every time the user interacts with the Apple by touching it. This uses a random fraction and does the same as the Moving apple, except instead of the X/Y basis, it uses Height/Width.

The Final code: this is the mole timer which calls the MoveApple procedure to move the apple after a certain

Richard Collins Unit 8 - Application Development Task 3amount of time has elapsed.

Banana This is the banana game screen of my application. This game is linked to the “B” button on the main screen(Screen1). All of the screens have a back button at the top, which enables the user to return to the Main screen.

The MoveBanana2 code is a procedure which enables the apple to move around the screen on a randomised fraction basis. The code works by Banana X = Random Fraction * (Canvas Width – Banana Width)Banana Y = Random Fraction * (Canvas Height – Banana Height)This code takes the X/Y Axis of the banana and times it by the Canvas Width/Height minus the Banana Width/Height.

The next piece of code, sets the initial load up score to 0, so that the user can track his/her score by touching the banana and adding +1 each time to the score.

Next piece of code states, when the Banana is interacted with the score goes up +1 each time and a procedure linked to the score label, which is activated when the user touches the apple. This code displays the user generated score. This also calls the MoveBanana procedure.

The next piece of code states; When the banana is flung, the code receives and accepts the user inputted direction of which to fling the banana and gets the speed of the fling too. This then adds +1 to the score and calls 4 procedures MoveBanana2, UpdateScore, MakeBananaSmall, Sound1

The next piece of code states that when the Banana1 image reaches the edge of the canvas, it calls the Banana1 image to bounce off of the edges, which is received from the “get edge” code.

Next piece is the Reset button which enables the user to reset the entire game, to revert it back to the beginning. This calls the score to be reset to 0 and calls the UpdateScore procedure

Richard Collins Unit 8 - Application Development Task 3as well as the MoveBanana procedure. All of the screens have a back button at the top, which enables the user to return to the Main screen.

The next code; This code makes the Banana resize to different sizes every time the user interacts with the Banana by touching it. This uses a random fraction and does the same as the Moving Banana, except instead of the X/Y basis, it uses Height/Width.

The Final code: this is the mole timer which calls the MoveApple procedure to move the apple after a certain amount of time has elapsed.


CatThis is the cat game screen of my application. This game is linked to the “C” button on the main screen(Screen1). All of the screens have a back button at the top, which enables the user to return to the Main screen.

The next piece of code, sets the initial load up score to 0, so that the user can track his/her score by touching the Cat and adding +1 each time to the score.

Next piece of code states, when the Cat is touched the score goes up +1 each time. Sound1 is played, MoveApple2 and Update Score procedures are called. This code also sets Label1 to pick a random String text from the list of provided answers and generate it onto the user’s screen, each time the Cat is touched. The score is then added +1 point for each time the cat is touched.

Next piece of code states, when the Banana is interacted with the score goes up +1 each time and is generated onto the user’s screen next to the text “Score:” then calls the MoveCat2 procedure.


The Final code: The MoveApple2 code (This is assigned to the Cat on this screen but shares the same procedure name for clarity and understanding purposes) is a procedure which enables the apple to move around the screen on a randomised fraction basis. The code works by Cat X = Random Fraction * (Canvas Width – Cat Width)Cat Y = Random Fraction * (Canvas Height – Cat Height)This code takes the X/Y Axis of the Cat and times it by the Canvas Width/Height minus the Cat Width/Height.

Richard Collins Unit 8 - Application Development Task 3Dog The first piece of coding enables the Dog image to collide with

any of the other 4 images, which are Dog bowls in this screen. This coding states that when the dog image collides with 1 of the 4 images, the image which it has collided with will disappear and also the Sound3, which is the Dog eating sound will play. All of the screens have a back button at the top, which enables the user to return to the Main screen.

The next piece of coding enables the Dog image to be flung. The code states for it to get the heading of the dog in which the user has flung it and to play the Sound1 file, which is the dog panting noises.

The next piece of coding enables the Dog image to bounce when it reaches the edge of the canvas. The code states that when the Dog Image reaches the edge of the canvas, which it gets via the “get edge”, it is to bounce is a different direction and play the Sound2, which is a bonk type noise.

The next piece of code states that on a timer basis, the 4 dog images move at random intervals, starting at 0 to different canvas locations. These keep the food bowls moving at random to keep the game at a good difficulty level.

Richard Collins Unit 8 - Application Development Task 3Egg This is the egg game screen of my application. This game is

linked to the “E” button on the main screen(Screen1). All of the screens have a back button at the top, which enables the user to return to the Main screen.

The next piece of code, sets the initial load up score to 0, so that the user can track his/her score by touching the egg and adding +1 each time to the score.

Next piece of code is The Update Score procedure. The score is then added +1 point for each time the egg is touched. When the egg is interacted with the score goes up +1 each time and is generated onto the user’s screen next to the text “Score:” then calls the MakeSmall, MoveEgg2 and Update Score procedure.

The MoveEgg2 code is a procedure which enables the egg to move around the screen on a randomised fraction basis. The code works by Egg X = Random Fraction * (Canvas Width – Egg Width)Egg Y = Random Fraction * (Canvas Height – Egg Height)This code takes the X/Y Axis of the Egg and times it by the Canvas Width/Height minus the Egg Width/Height.

Next piece of code states, when the Egg is touched the score goes up +1 each time. MoveEgg2 and Update Score procedures are called. This code also sets Label1 to pick a random String text from the list of provided answers and generate it onto the user’s screen, each time the Egg is touched. The score is then added +1 point for each time the egg is touched.

The next piece of code states; When the egg is flung, the code receives and accepts the user inputted direction of which to fling the egg and gets the speed of the fling too. This then adds +1 to the score and calls 4 procedures TextToSpeech to states “E for Egg”, calls MoveEgg2 and Update Score.

Next piece is the Reset button which enables the user to reset the entire game, to revert it back to the beginning. This calls

Richard Collins Unit 8 - Application Development Task 3the score to be reset to 0 and calls the UpdateScore procedure.

The next piece of code states that when the Egg image reaches the edge of the canvas, it calls the Egg image to bounce off of the edges, which is received from the “get edge” code.

The Final code: This code makes the Egg resize to different sizes every time the user interacts with the Egg by touching it. This uses a random fraction and does the same as the Moving apple, except instead of the X/Y basis, it uses Height/Width.

Fun This is the Fun game screen of my application. This game is linked to the “F” button on the main screen(Screen1). All of the screens have a back button at the top, which enables the user to return to the Main screen.


The final piece code states that when a person drags their finger around anywhere on Canvas1, the code picks up this input and follows where the user draws on the canvas

Richard Collins Unit 8 - Application Development Task 3Goat The first piece of code makes the Goat image be flung in the

direction that the user flings it in. The code is designed to pick up the Heading of the goat and the speed. The code will then play the Sound1.

The next piece of code states that when the Goat image reaches the edge of the canvas, the goat will bounce off of the edge by getting the edges of the canvas and plays the Sound2 file.

The next piece of code states that when the Goat image collides with any of the other 4 images, which are 4 of the same image of grass used 4 different times. When the Goat image collides with one of the 4 grass images, the grass image will become invisible.

The next piece of code states that when the Reset button is pressed, the 4 image sprites are going to be set as Visible if they have become invisible during the game. It sets the goat image on the X, Y and Z axis to position 0.

The final code states that when MoleTimer gets to a certain interval, the Imagesprites are called to move on a random integer from 0 to a random location.

Richard Collins Unit 8 - Application Development Task 3Holiday The first code states when back button is clicked it takes the

user to return to the Main screen.

The next piece of code states when the Sun image reaches the edge of the other imagesprites, the sun bounces off in a different direction. Sound2 then plays.

The next piece of code states that when the Sun collides with either of the other imagesprites, it bounces off in a different direction and plays Sound1.

The next 2 pieces of code are Procedures which state when the edge of two different imagesprites are reached by the Sun image, the sun bounces off in a random direction. Sound1 is played.

The next piece of code states when the Sun image is flung, then the Sun speed and heading is inputted by the user when the user flings his/her finger across the screen from the point of the image. The TextToSpeech1 starts and states “H for Holiday”

The next piece of code is the MakeSmall procedure. Uses a random fraction to set the Sun Width and Height. It gets random and times it by the Canvas/Sun Width/Height.

The final piece of code states that when the Reset button is clicked, the Sun is reset on the X and Y Axis.

Login Screen This is the only piece of code for this screen. When the go button is clicked then the information entered into the Username and Password box need to meet the criteria, there is a Label1 which generates the word “Valid” and then the user is taken to the main Alphabet screen with the TextToSpeech stating “Welcome”.

The criteria are Username = escPassword = college


If 1 or more of these criteria are not met, the Label1 generates an Invalid wording and then plays an alarm sound.

For asset table, please consult Task 2


P5 – Edit code and use assets to develop an application:

● One or more screens (SP)

See My Application

http://appinventor.mit.edu/explore/

Email: [email protected]: eastsurreycollege

● Constructs (Code showing Variable-Orange, Assign-Apple X/Y, Inputs-Clicking/Flinging and Outputs-If/Then, Selection-Choice, Iteration-Looping)

● Commentary throughout the code. (Comments)

In Table above with P4.

Input

Assignment

Variable

Procedure

Selection

Iteration

Output

mailto:[email protected]

http://appinventor.mit.edu/explore/


P6 - Test the application, ensuring functionality and purpose is met. Repair any faults and document any changes.

No. Test Description No. Input Expected Output Actual Output Notes1 Input Testing 1 Normal

UN – RichardPW - ESC

Load up and reach the Alphabet main screen

Screen Logins and takes the user to the Alphabet screen. Application plays a “Welcome” sound and generates wording “valid”

2 ErroneousUN – RihardPW - ECC

Error Message regarding login.

Screen does not change, generates “invalid” wording on screen and plays an alarm sound

3 ExtremeUN – AuE334532PW – T43219v)(

Error Message Regarding Login

Screen does not change, generates “invalid” wording on screen and plays an alarm sound

No difference from Erroneous

2 Tap Button Tests 1 NormalTap Button

Load up page connected to button

Pages load as normal dependant on letters.

2 ErroneousLong Hold Button

Page does not load up Page does not load, the button presses down and shows it has been touched, but nothing happens after.

3 ExtremeFling Button

No response from button No response at all from the button

3 Sound Testing 1 NormalPerform Action related to sound

Sound plays as action is performed

Asset is flung/tapped and sound plays corresponding with the correct asset-sound

2 ErroneousTap screen instead of asset

No sound played No sound is played.

3 ExtremeLongclick asset

No sound played No sound is played No difference from Erroneous

4 Game 1 Test – Flinging the Banana

1 NormalFling banana in any direction

Banana moves across screen in direction of it being flung

Banana is flung in any direction. The banana moves in that direction as inputted.

2 ErroneousTap banana instead of fling

No movement from banana asset

Banana slightly moves

3 ExtremeFling background instead of banana

No movement from banana asset

No movement from the banana

5 Game 2 Test – Drawing 1 Normal Lines follow finger and Image is drawn as the user has inputted via

Richard Collins Unit 8 - Application Development Task 3“Fun” Draw random image with

fingerdraw what the user has drawn

finger

2 ErroneousToo light of touch

Depending on screen, lines should show and disappear making a “dotted” type line

Some lines show up and some don’t. more pressure is required to enable a steady line, continuous with the finger movement.

3 ExtremeMove finger hovering over screen with no contact

No lines or input appearing at all.

Nothing appears on the screen at all.

6 Asset Bouncing Test 1 NormalFling asset

Asset bounces on edges or other asset and moves in alternate direction

Asset reaches edge and bounces as normal and coded too do.

2 ErroneousTap asset as bounces

Asset bounces again on edge before having time to respond

Asset continues to bounce without issues.

3 ExtremeFling asset too many times

Asset fails to reach edges due to over flinging

Asset glitches before it reaches the edge and does not get to bounce.


M3 – Refine Assets for the Application. Demonstrate awareness of the requirements set by the user. All sources of the assets need to be referenced in

full.

Original Merit Refinements CommentsIn this refinement, I revamped the entire screen.Firstly, I re-arranged the buttons into a more ordered and close together format, to be more clean and neat for when the user is using the application.

Secondly I changed the colouring of the letters, to enable them to stand out better and draw the attention of the user.

Finally, I added a Canvas to the screen to put all the letters into. This keeps them together and keeps the screen neat and tidy

In this refinement I decided to almost re-do the entire screen.

Firstly, I added a canvas, as the banana was not bouncing fully off of the edges of the screen. By adding a canvas, I changed the background colour to white and the canvas fill to yellow. This is to make a clear distinction between the canvas and background. This is to enable the banana to be able to be flung in any direction on the canvas, with it bouncing on the edges of the canvas when reached.

Finally, I added a back button as needed for the screen to return to the main alphabet screen. This enables the user to quickly return after he/she has finished the game.In this refinement, I only made a few changes as I was overall happy with the designs.

At first I thought to have a colourful background but as I progressed in developing this game, I found the background to be a distraction and made for difficulty in seeing the assets used in full detail. I decided to change the background to just a simple white to enable the user to see fully the assets used and to enjoy their movement better than before.

Finally, I added a back button as needed for the screen to return to the main alphabet screen. This enables the user to quickly return after he/she has finished the game.

Richard Collins Unit 8 - Application Development Task 3At first in this screen, I was happy with the very large drawing canvas but I found it gave the user very little else to do.

I decided to re-work the label at the top to be more bright and colourful, to appeal to the user audience. By using a black background and red text, the text becomes easier to read and stands out more, just like in the first screen.

Secondly, I decided to change the canvas, to give borders in which the person can draw. I believe this gave a “limit” as if it were a piece of paper for the user to draw in.

I did not do much in refining this screen, as I felt it was a very good start for a login screen.

The only change I added for this refinement, was to shrink the “Username” and “Password” boxes and move them in closer together, to give them a neater and clean look. In moving these 2 boxes closer, I decided to move the button closer to them as well. This gave a much more controlled look to the overall screen.

In this refinement I decided to make a few changes.

Firstly, I got rid of the red background entirely, as I did before with the Banana screen and Dog screen. At first I thought the colour would have been beneficial to attracting the attention of the audience, but in practice I found the colour to be distracting and off putting.

Secondly, I added in a canvas in which the sun can move about in, this makes it more controlled in the area in which the user will interact with.

Finally, I added a back button as needed for the screen to return to the main alphabet screen. This enables the user to quickly return after he/she has finished the game.


M4 - Develop a working application with multiple screens, using original and pre-made code that meets the purpose and requirements set by the user.

See My Application

Email: [email protected]: eastsurreycollege

M5 – Gather and Receive feedback from 3 individuals regarding the usability of the application. Use this feedback to improve the Application, demonstrating

awareness of audience and purpose.

Name: Chantele Clements Date: 19/05/16Questions Feedback (Please Highlight)

Does the Application work when you use it? Yes NoDo you believe the App to meet the user requirements? Yes NoDo you believe the App is suitable for the intended audience? Yes NoDoes the App interest you/keep your interest? Yes NoWould you recommend the App to others? Yes NoWhat changes would you make to the application?I would make 3 changes to the app, 3 screens I feel which need improving. Firstly, I think the main screen needs to have the colour scheme re-worked. The black and red is off putting and I feel it would turn people away from going further into the app, as this is the primary screen. I think some information about the screen, telling the user what to do would also be needed, as there is nothing to inform the user on how to use the App.

Secondly, I would change the banana screen. Removing the yellow background on the canvas would be best. The yellow distracts me from when I am playing the game using the Banana, because they’re both the same colour, with only a black line to differentiate between the banana and canvas colour. I believe this could lead to problems with people looking at the screen and their eyes.

Finally, I would make 1 small change to the Dog screen. I would add a score label to allow for the user to keep track of how many bowls of food the dog has caught. I believe that a score label should be added to both games, the Banana screen and Dog screen. A Reset button may be needed as well, to enable the user to reset the game they’re playing.How do you feel about the assets used in the Application? (E.g. the Cartoon images, The text font/colours)I feel the assets used are appropriate for the intended audience and add to the overall quality of the application. Since this application is designed for children whom are young, I believe the assets chosen to be used in this application will be met well by them and provide quality hours of fun for the user.

mailto:[email protected]


Name: Leah Hill Date:Questions Feedback (Please Highlight)

Does the Application work when you use it? Yes NoDo you believe the App to meet the user requirements? Yes NoDo you believe the App is suitable for the intended audience? Yes NoDoes the App interest you/keep your interest? Yes NoWould you recommend the App to others? Yes NoWhat changes would you make to the application?The only change I can think of is to the Fun screen. I think the canvas given is out of proportion in size as it fills the entire screen. I think it needs to be smaller so that it makes it a bit difficult for the user, which is the challenge of the game, to draw something that is “fun” for them.

I also believe that a back button is needed to enable me to return to the previous screen, so that I can play the other games within the application.

A reset button would also be helpful as then I could erase my drawing if I made a mistake or if I want to start over or to attempt again.

How do you feel about the assets used in the Application? (E.g. the Cartoon images, The text font/colours)I love the assets used in this application. I think they’re all so awesome and have wonderfully bright colours which will be amazing for the audience of young people. Each of the assets goes so well with the games they’re used in, it matches what the item could possibly do in real life, such as throwing a banana or a dog going to get food.

Name: Josh Ponsford Date:Questions Feedback (Please Highlight)

Does the Application work when you use it? Yes NoDo you believe the App to meet the user requirements? Yes NoDo you believe the App is suitable for the intended audience? Yes NoDoes the App interest you/keep your interest? Yes NoWould you recommend the App to others? Yes NoWhat changes would you make to the application?I only see 2 screens which I feel I could give feedback on to recommend improvements.

Firstly, the Login screen. I like how simplistic it is but I feel that a simple banner stating that it is the login screen, would make this a lot better. The banner does not have to be specific or fancy, but something simple that would match the overall design of the screen.

Secondly, I would simply add a score label and a reset button to the Holiday screen. This would enable the user to track his/her score and enable them to reset the game once they’re finished or believe they can do better. This would enable them to set personal targets for themselves and to have a longer time of fun with this game.

How do you feel about the assets used in the Application? (E.g. the Cartoon images, The text font/colours)Personally I am not such a fan of the cartoon style of the Application, but since it is for such young audiences, I believe it will meet with them very well. If this were for adults, I don’t believe I would ever use it myself, but if this were available when I was a child, I may have played it then.


D3 - Refine the Application. Account for the quality of the predefined and user created code and the individual user feedback.

Merit Refinements Distinction Refinements CommentsAs received in my feedback, I changed my screen colour scheme. I got rid of the black and changed the colouring of the blocks to teal. This made the Red writing stand out much better from the background and made it more fun for the eyes for the user.

I also added writing telling the user about the App (title) and instructions on how to use the buttons below. This was best as this is my primary screen.

I also added a button to enable the user to Login using the given password and username.

I have made changes to this screen following feedback. In the feedback it is advised I remove the yellow background colour from the background of the canvas, to enable the user to see more clearly the banana asset and to play the game more clearly. I changed the background to a simple white to match the rest of the screen.

I also added a score label and reset button as it was recommended in my feedback from users. This enables the user to track his/her score and reset the game when they feel they need too.

As per feedback, I was advised to make a simple and small change to this screen.In the feedback it stated to add a score label and reset button, just like the other screens.

I have now added a reset button and score label into this screen as the same as the banana screen. This enables the user to track his/her score and reset the game when they feel they need too.

Richard Collins Unit 8 - Application Development Task 3In feedback from 1 user, it was recommended that I make the canvas smaller of this drawing canvas to enable a slightly more difficulty in drawing an object that is seen as “fun” by the user.

It was also recommended to have a back button for this screen, as like the others, to enable the user to return to the main screen at any time.

A reset button was recommended to enable the user to clear the canvas to reset the game back to the beginning if they feel the need too or if they wish to start again on this game.

In feedback received, I was advised to only make a small change to this screen.The user advised adding an image/banner to inform the user where they were and to inform them what the screen does.

I have added a simplistic banner to co-ordinate with the rest of the screen, keeping everything very simple, not to overload the user.

A user advised simply adding a Score label and Reset button to this screen. They felt it would be beneficial just like the other screens as this is a game that would be based on gaining a score.

I have now added a score label and a reset button to enable the user to track his/her score and a reset button to enable the user to clear that score and reset the screen to starting position.

btecitresources.files.wordpress.com · web view2018. 3. 14. · this code takes the x/y axis of...

Documents