Workbook8

Year 8 Computing

student

JustBasic The HelloWorld Program Every programmer starts with the Hello World Program. The purpose of this is to write a program that will display a simple message on the screen.

We will need to use the PRINT Command Command: Usage:

PRINT – Displays a message on the screen PRINT “Your Message”

To write this program, load up JustBASIC and start a new program (File  New) Type this code in: 1 PRINT “Hello World” 2 End To run (or execute) your program, click Run Save your program as HelloWorld Now Try These: 1. Write a program to write your name on the screen Save as MyName Questions: What is the purpose of the PRINT Command?

What is the purpose of the END Command?

The HowOldAreYou Program We can make our programs more useful if we allow people to enter information into them. We can do this by using the INPUT command. This command prompts the user to enter a piece of information, which the program stores inside a variable A variable is like a box that can be used to store a piece of information. We can put different information into the box. We will call our variable age because it will store a person’s age.

We will need to use the INPUT Command Command: INPUT – Prompts the user to enter a piece of information Usage: INPUT “A piece of text to display” ; VariableName OR… INPUT VariableName Start a new program and type in this code: 1 PRINT “Welcome to my program” 2 INPUT “Please enter your age: “ ; Age 3 PRINT Age; “ is a great age to be!”

4 End Save as HowOldAreYou Let’s take a closer look at this program: Line 1 is another simple use of the PRINT command Line 2 is our new INPUT command – it is made of two parts, one part places writing on the screen, and the other tells us that whatever number the user enters should be stored in a box (variable) called Age Line 3 is a new way of using the PRINT command. We are using it to put two things on the screen, the contents of the age variable and some more writing. These two items are separated by a semi colon.

Notice how the variable does not need any quotation marks, but the writing does?

Line 4 is another example of the End command – it tells the computer there are no more lines to run Now Try These: 1 2

Write a program that asks for your favourite number, and then replies that it is its favourite number too Save as faveNum Write a program that asks for 2 numbers and then says that the second number is its preferred number

Project 3 – Calculations The VAT Calculator Program In this project you will create a program to calculate the amount of VAT on a price. We will assume the VAT rate is 20%.  The program will need to ask for the price to be entered  It must then work out 20% of the number that has been entered  It should then write the answer on the screen.

Start a new program and type this in: 1 PRINT “Welcome to the VAT Calculator Program” 2 INPUT “Type in the Price: “ ; Price 3 PRINT “The VAT on £”; Price ; “ is £” ; Price * 0.2 4 END Save as VATCalculator Let’s take a closer look at the new ideas used in this program: Line 3 now combines 4 pieces of writing. It consists of a piece of text, and then the variable, another piece of text, and then a calculation (the variable multiplied by 0.2) Notice that we used the asterisk symbol (*) to multiply the price by the VAT We can also use these mathematical symbols: + Add Multiply / Divide Now Try These: 1 2

Adjust your VATCalculator Program to also display the total amount including the VAT Save as VATCalculator2 Create a program to work out the area of a room. It should ask for the length, then the width, and then multiply them together to get the area Save as RoomArea

3

4

Create a program to calculate the length of fencing required for a sheep pen. It should ask how wide and long the pen is to be, and then calculate the total length of fencing needed Save as SheepPen Write a program to calculate the amount of turf (grass) needed for a garden if a 1m border is left all the way around. It will need to ask for the length and width of the garden Save as TurfCalculator

Project 4 – Working with Strings The HelloYou Program In this program we will extend our earlier HelloWorld program to make it more personal. We will do this by prompting the user to enter their name.

To do this, we need to understand data types.

So far, we have created variables that contain numeric data (numbers) such as an age, or amount of money.

We can also use a data type known as string to store text information.

Strings are nothing new. In the previous program, we have used string values every time we wanted to write text. We indicate to the computer that it is a string by enclosing it in quotation marks.

To create a string variable, we must add a dollar sign ($) to the variable name. When we create a variable to contain a string, we do not need to use quotation marks whenever we want to print that variable.

Start a new program and type in this code: 1 INPUT “What is your name? “ ; name$ 2 PRINT “Hello “; name$; “. I am very pleased to meet you.”

3 END Save as HelloYou Notice that this time we were able to enter text instead of a number when the input command was used. The text we entered was then displayed on screen with the word Hello to make our program much more personal.

Now Try these: 1 Write a program that you can have a simple conversation with. It should ask various questions and have an appropriate response ready for when an answer is given Save as Conversation1 2 Write a program that asks for the name of someone whose birthday is today, and then prints the lyrics to “Happy Birthday to You” with the person’s name entered in the appropriate place on line 3.

Save as Birthday 3 Write a program that asks for your name, and then your age. It should reply by saying “Hello <whatever the name is>, I remember being <whatever the age is>. It was a great year!”

Project 5 – Selection 1 (IF…THEN…ELSE…Statements) The Maths Quiz Program We can make our program react differently depending on what has been entered by the user. We will do this by comparing what the user has entered with what we are expecting. If they match, we can do something, otherwise we can make it do something different.

Start a new program and type in this code: 1 INPUT “What is 5 + 5 “ ; answer 2 IF answer=10 then PRINT “That is Correct” else PRINT “That is not correct” 3 END Save as MathsQuiz Notice that our IF Statement has 3 parts: IF <check the answer> THEN <do this if the answer is correct> ELSE <do this if the answer is wrong> Now Try these: 1 Extend the program to ask 10 questions instead of 1 2

Save as MathsQuiz2 Extend your program so that instead of telling you whenever you get the answer right, it adds one to your score.

At the end of the quiz it should tell you how many you got right. You will need to introduce a new variable called score for this (At the start of the program, you can use the line score = 1) Save as MathsQuiz3

Extension: You can do more than one thing with an IF statement. E.g.

IF answer = correct THEN Do this And this ELSE Do this

And this And this END IF <Now carry on with the rest of the programâ&#x20AC;Ś.> Extend MathsQuiz3 so that after each question, it adds 1 to your score AND tells you whether you got the answer right or wrong Save as MathsQuiz4

Project 6 â&#x20AC;&#x201C; Repetition 1 (DOâ&#x20AC;Ś.LOOP) The guess the number program So far, we have made programs that run once, and then end. We can make our program continue to run indefinitely until we tell it to stop. We will use a DO LOOP to do this. The DO LOOP lets us do something until we want it to stop. We will use this to create a number guessing game.

Start a new program and type in this code: 1 2 3 4 5 6 7 8 9 10

number=37 PRINT "In this program you will have to guess the number I am thinking of" PRINT "It is a number between 1 and 100" DO UNTIL guess=number INPUT "Guess the number: "; guess IF guess >number then print "That is too high" IF guess < number then print "That is too low" IF guess=number then print "That is correct" LOOP PRINT "You finished the game" Save as GuessingGame

In this example, line 4 is the start of the loop. It tells the computer to keep repeating everything between line 4 and line 9 (the LOOP command) until guess=number (the guess is correct)

Now Try these: 1 Extend this program so that if keeps track of how many guesses you have made, and then tells you at the end of the game Save as GuessingGame2 2 Extend MathsQuiz3 (or 4 if you managed to do it) so that it will ask you if you want another go when you have finished. You could make it so that you enter 1 to play again, or 2 to finish

Save as MathsQuiz5 Extension: You can create a random number between 1 and 100 by using the INT and RND Functions: INT(RND(1)*100) Use this to improve GuessingGame2 so that you can keep playing and there is a different, random number to guess each time. Save as GuessingGame3

Learning objective: Write a program to create a menu system simulating a calculator´s functions. The program will have a main menu subroutine and call other subroutines to add, subtract, multiply and divide or exit the program Extra: Add further functionality to display the square of a number. print "welcome to the calculator" goto [Menu] [Menu] print "1 add" print "2 subtract" print "3 multiply" print "4 divide" print "5 exit" input "please choose 1 to 5" ;menuanswer if menuanswer=1 goto [add] if menuanswer=2 goto [subtract] if menuanswer=3 goto [multiply] if menuanswer=4 goto [divide] if menuanswer=5 goto [end] goto[end] [add] input "enter number 1 "; number1 input "enter number 2 "; number2 print "the addition of "; number1; "plus"; number2; " is " ; number1+number2 input "what to do? 1 menu or 2 exit";answer if answer = 1 goto [Menu] else [end] [subtract] input "enter number 1"; number1 input "enter number 2"; number2 print "the subtraction of "; number1; "minus"; number2; " is " ;number1-number2 input "what to do? 1 menu or 2 exit";answer if answer = 1 goto [Menu] else [end] [multiply] input "enter number 1"; number1 input "enter number 2"; number2 print "the multiplication of "; number1; "times"; number2; " is " ;number1*number2 input "what to do? 1 menu or 2 exit";answer if answer = 1 goto [Menu] else [end] [divide] input "enter number 1"; number1 input "enter number 2"; number2 print "the division of "; number1; "divided by "; number2; " is " ;number1/number2 input "what to do? 1 menu or 2 exit...";answer if answer = 1 goto [Menu] else [end] [end] print "goodbye" end

AS

Business

Studies

â&#x20AC;&#x201C;

Finance

(BS2)

12 | M i c h e l l e

Ryan

AS

Business

Studies

â&#x20AC;&#x201C;

Finance

(BS2)

13 | M i c h e l l e

Ryan

app inventor AppCreator Need: app installer, google account, http://beta.appinventor.mit.edu/ Click on learn

New project â&#x20AC;&#x201C; give it a name

15

16

17

18

19

20

21

22

Hello Purr To build HelloPurr, you'll need a image file of a cat and an audio file with a 'meow' sound.

Download these files to your computer by clicking the following links.

Select components to design your app

The App Inventor Components are located on the left hand side under the title Palette.

Components are the basic elements you use to make apps on the Android phone. They're like the ingredients in a recipe. Some components are very simple, like a Label component, which just shows text on the screen, or a Button component (#1 left) that you tap to initiate an action.

Other components are more elaborate: a drawing Canvas (#2 left) that can hold still images or animations, an Accelerometer (motion) sensor that works like a Wii controller and detects when you move or shake the phone, components that make or send text messages, components that play music and video, components that get information from Web sites, and so on.

To use a component in your app, you need to click and drag it onto the viewer in the middle of the Designer. When you add a component to theViewer (#1 below), it will also appear in the components list on the right hand side of the Viewer.

23

Components (#2 below) have properties that can be adjusted to change the way the component appears within the app. To view and change the properties of a component (#3 below), you must first select the desired component in your list of components.

Steps for selecting components and setting properties We want HelloPurr to have a Button component that has the image of the kitty you downloaded earlier. To set this: Step 1. From the Basic palette, drag and drop the Button component to Screen1 (#1). In the Properties pane, under Image, click on the text "none..." and click "Addâ&#x20AC;Ś" (#2). Select the the kitty.png file you downloaded earlier (#3).

24

Step 2. Delete "Text for Button1" listed under the Text property using the Backspace key. Your Designer should look like this:

25

Step 3. From the Basic palette, drag and drop the Label component to the Viewer (#1), placing it below the picture of the kitty. It will appear under your list of components as Label1.

Under the Properties pane, change the Text property of Label1 to read "Pet the Kitty" (#2). You'll see the text change in the Designer and on your device. Change the FontSize of Label1 to 30 (#3). Change the BackgroundColor of Label1 by clicking on the box (#4): you can change it to any color you like. Change the TextColor of Label1 (#5) to any color you like. Here, the background color is set to blue and the text color is set yellow.

26

Step 4. Under Palette, click on the Media drawer and drag out a Sound component and place it in the Viewer (#1). Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. Under the Media pane, Click Add... (#2) Upload the meow.mp3 file to this project (#3). Under the Properties pane, click None... to change the Sound1 component's Source to meow.mp3 (#4).

27

Programming with the Blocks Editor Before continuing to build the app, you'll need to connect to your device (a phone or tablet) or to the on-screen Android phone emulator. Make sure you've already got a working connection to a device or emulator before proceeding.

Now click the Connect to device... button at the top of the Blocks Editor window. You'll see a dropdown list with your phone/tablet or emulator listed, identified by its model type (e.g., HT94LLZ00001 or emulator-5553). Click on that. You'll see a yellow animated arrow move back and forth, showing that App Inventor is connecting to the device.

1. Click the text "Connect to Device...."

2. Select the device's model number (emulators show up with a number and the word "emulator") 3. You will see a yellow animated arrow Creating this connection can take a minute or two to complete. When done, the arrow will stop moving and turn green, and if you look at the phone screen, you'll see the image of the cat there â&#x20AC;&#x201D; this is the beginning of your app!

Making the sound play Step 1. Under the My Blocks palette, click the Button1 drawer and drag and drop the Button1.Click block in the open/work area.

28

Those green blocks are called event handler blocks. The event handler blocks specifiy how the phone should respond to certain events: a button has been pressed, the phone is being shaked, the user is dragging her finger over a canvas, etc. The event handler blocks are in green color and use the word when. E.g., when Button1.Click in the blocks.

Step 2. Next, click the Sound1 drawer and drag the Sound1.Play block into the "do" section of the when Button1.Click block. The blocks connect together like puzzle pieces and you can hear the clicking sound.

The purple and blue blocks are called command blocks, which are placed in the body of event handlers. When an event handler is executed, it also executes a sequence of commands in its body. A command is a block that specifies an action to be performed on the phone (e.g., playing sound) when the event (e.g., pressing Button1) is executed.

Your blocks should look like this at this point:

29

Now you can see that the command block is in the event handler. This set of blocks means; "when Button1 is clicked, the following command will be executed (which is playing the sound)."

The event handler is like a category of action (e.g., a button is being clicked), and the command specifies the type/details of the action (e.g., playing sounds).

Congratulations, your first app is running! When you click the button you should hear the kitty meow.

Note: there is a known issue with the Sound component on some devices. If you see an "OS Error" and the sound does not play - or is very delayed in playing, go back into the Designer and try using a Player component (found under Media) instead of the Sound component.

Packaging your app If you're using a phone, then the app is running on the phone, but it runs only while the phone is connected to App Inventor. If you unplug the USB cord, the app will vanish. You can always have it return by reconnecting the phone. To have an app running without being connected to App Inventor, you must "package" the app to produce an application package (apk file).

To "package" the app to your phone, connect your phone to the computer and make sure that the phone icon's color is green.

Then go back to the Designer and press "Package for Phone" at the upper right of the designer page. App Inventor will present three options for packaging:

30

You can download the app to your computer as an apk file, which you can distribute and share as you like, and manually install on phones using the Android ADB program.

You can generate a Barcode (a QR Code), which you can use to install the app on your phone with the aid of a barcode scanner, like the ZXing barcode scanner (freely available in Google Play).

Note: this barcode works only for your own phone. If you want to share your app with others, you'll need to download the .apk file to your computer and use a third-party software to convert the file into a barcode. More information can be found here.

Challenge! Make the cat purr The challenge is to have the cat purr when the phone is shaken. Go to the Blocks Editor and open the Sound1drawer and drag the Sound1.Vibrate block and place it under the Sound1.Play block. You will see a yellow warning icon at the left corner of the block, which means the block has a missing component.

31

The Sound1.Vibrate block has an open slot, which means you need to plug something into it to specify more about how the behavior should work. Here, we want to specify the length of the vibration. Numbers are calculated in thousandths of a second (milliseconds): to make the phone vibrate for half a second, we need to plug in a value of 500 milliseconds.

Go to the Built-In palette, go to the Math drawer, drag the number block and place it at the socket of the Sound1.Vibrate .

After you place the number block, click the number "123". It highlights the number in black: type "500" with your keyboard.

Done! Notice the yellow warning icon is gone: the block has no longer missing component.

32

Now connect your phone and tap the image of the cat on the phone. The phone should vibrate and meow at the same time.

Review Here are the key ideas covered so far: 

You build apps by selecting components (ingredients) and then telling them what to do and when to do it.



You use the Designer to select components. Some components are visible and some aren't.



You can add media (sounds and images) to apps by uploading them from your computer.



You use the Blocks Editor to assemble blocks that define the components' behavior



when ... do ... blocks define event handlers, that tell components what to do when something happens.



call ... blocks tell components to do things.

33

Magic 8-ball Lesson One: Magic 8-Ball Predicts the Future

This introductory module will guide you through building a “Magic 8-Ball” app with App Inventor. When activated, your 8-ball will deliver one of its classic predictions, such as “It is decidedly so” or “Reply hazy, try again.”

Learning Goals After completing this app, you will have good understanding of the following: 

App Inventor environment: designer, blocks editor, emulator and/or physical phone



App Inventor components: accelerometer sensor, image, list-picker

Materials 

A selection of images and sounds are available at the App Inventor Media Library.



Optional supporting hard copy materials such as the App Inventor Overview Handouts, and the PDF versionof this lesson.



Basic App Inventor tutorial - getting around [video]

Outline 1. Set up computers and phones or emulators. (We suggest doing this ahead of time.)

2. Part One: Click a Button, Hear a Sound 3. Part Two: Click the Button, Get a Prediction + Hear a Sound 4. Part Three: Shake the Phone, Get a Prediction + Hear a Sound 5. Suggestions for further exploration: Text-to-Speech, Rotating image, Custom prediction lists

34

Part One: Click a Button, Hear a Sound The final Magic 8-Ball App will deliver a prediction from a list that you have designed. To get started, first we'll make a button with a picture on it, and program it to play a sound when the button is clicked.

DESIGN: App Inventor Designer 1. To open the App Inventor Designer window, go to http://appinventor.mit.edu and sign in.

See setup instructions above if you are not sure how to sign in.

2. If you have already made an app (such as Hello Purr), you will automatically be directed to the Designer with the last project you worked on showing. Click "My Projects" in the upper left corner of the screen, which will take you to your list of projects. Click "New" and name your project something like "Magic8Ball"(note: spaces are not allowed).

3. Download one image and one sound file to be used in your app from the Media Library. Right click (control-click) on the link of the image or sound, then choose "Download" or "Save As".

Save the media files to a convenient location that you will remember.

4. On the left column of the Designer, open the Basic palette, and drag a Button component over to the Viewer(#1).

5. Set the button image to an 8-Ball image: Click on your newly added button to see its properties in the Properties pane on the right.

Under "Image" click on the word "None..." and a small selection window will pop up (#2).

Click the "Add" button and browse to where you saved the 8-Ball image. Select the file, then click “OK” to close the selection window. Click “OK” again on the properties pane to close the small popup window (#3).

6. Go to the text field in the Properties pane and delete the display text of your button component (#4).

35

7. From the Media palette, drag over a Sound component onto the Viewer pane (#1). Notice that since the sound will not be a visible part of the app, it appears at the bottom of the Viewer pane, as a â&#x20AC;&#x153;Non-visible componentâ&#x20AC;?.

8. Set the sound component's source file: Click on your newly added sound component to see its properties in the Properties pane on the right. Under "Source" click in the small box on the word "None..." and a small selection

36

window will pop up (#2). Click the "Add" button and browse to where you saved the sound file. Select the sound file, then click “OK” to close the selection window. Click “OK” again on the properties pane to close the small popup window (#3).

9. You have now completed the work in the Designer for Part One of this app. It's time now to go over to the Blocks Editor to program the behavior of these components.

BUILD: Blocks Editor In the upper right corner of the Designer, click on the Blocks Editor button. Wait for a few moments while the blocks editor loads. This takes some time, and often requires you to click “accept”, “ok”, or “keep” as the java program downloads to your computer. (Be sure to look at the very top or very bottom of your browser to see if it is prompting you to accept.) If you are having trouble loading the Blocks Editor, go back to the Setup Instructionsfor help.

Now you are going to tell your app how to behave when the button is clicked. This is actually very simple in App Inventor, because the "code" for the program only consists of two blocks!

Once the Blocks Editor is open, there are several options running along the left side of the screen. We refer to these as "Palettes" with “Drawers.”

From the My Blocks palette, click on the Button1 drawer. Drag the when Button1.Click block into the work area (#1). From the My Blocks palette, click on the Sound1 drawer, drag

37

the Sound1.Play block into the work area and insert it into the when Button1.Cllick block (#2).

They will click together like magnetic puzzle pieces.

Your blocks should now look like this:

That's it! You've written the program for Part One of Magic 8-Ball. Now it's time to test that it's working right.

TEST: Phone/Emulator You have now built an app! To test that it works, you either have to launch an emulator, or connect to a phone. Go back to the Setup Instructions if you do not have a phone or an emulator running.

Emulator: click on the picture, you will hear the sound play.

Phone: tap the picture, you will hear the sound play.

Note: If you don't hear the sound, first be sure you have the volume turned up on your device (or computer if using emulator). Also, make sure your device has an SD card. App Inventor stores media files to the SD card. In some devices, the Play component does not work correctly. You will need to use the Player component instead of the Sound component.

38

Part Two: Output a Prediction Now that we've gotten the button to perform an action (play a sound), we want to extend that action to include giving the user a prediction. First we'll need two labels: Label1 will display the instructions, and Label2 will display the chosen prediction. We'll use blocks to program a "list picker" to choose from a list of predictions. Each time the button is clicked, the app will change the text of Label2 to display the chosen prediction.

DESIGN: App Inventor Go back to the Designer window in your browser and add some new things to your app.

1. From the Screen Arrangement palette, drag over the Vertical Arrangement component (#1).

At first it will just look like an empty box, but when you put things in it, App Inventor will know that you want to line them up vertically (one on top of the other).

2. From the Basic palette, drag over a Label component (#2) and drop it inside of the vertical arrangement component. In the Properties pane, change the "Text" property of Label1 to â&#x20AC;&#x153;Ask the Magic 8-Ball a questionâ&#x20AC;?.(#3)

39

3. From the Basic palette, drag over another Label component (Label2) into the Vertical Arrangement box so that it sits right below Label1. Change the "Text" property of the Label2 to “Touch the Magic 8-Ball to receive your answer.” Now drag the 8-Ball image so that it is also inside the Vertical Arrangement component on top of the two labels. This will cause them to line up with each other in a vertical line. (Note: this can be tricky mouse work, but get them in there just right and the vertical arrangement will resize itself to fit everything.)

Now it’s time to go back into the Blocks Editor to program the components you just added to your project. (Remember, the Blocks Editor is running in a window outside of your web browser, signified by the java icon that looks like a coffee cup.)

BUILD: Blocks Editor Now for the fun part! You're going to make a list of predictions and program the button to pick one item from the list and display it inside Label2. The button will also still play the sound that you programmed in Part One. Here's how to do it...

1. From the My Blocks palette, click on Label2 drawer to see all of its associated blocks. Drag over the blue set Label2.Text and insert it just above the Sound1.Play block. Notice that

40

the when Button1.Click block automatically gets bigger to accomodate the new block.

2. From the Built-In palette, click on the Lists drawer. Drag over the pick random item block and connect it underneath the set Label2.Text block (and above the Sound1.Play block).

3. From the Built-In palette, click on Lists again, then drag out the make a list block and plug it into the "list" socket on the right side of the pick random item block.

4. From the Built-In palette, click on the Text drawer, drag out a text block and connect it to the item socket of the make a list block. Click directly on the word â&#x20AC;&#x153;textâ&#x20AC;? so that it gets highlighted. You can then type in new text there. Think about the sayings you want in your list of predictions for the Magic 8-Ball. Type the first prediction into this new text block.

5. Notice that when you plug in a new text block, the make a list block automatically creates a new socket. Repeat the previous step for each of the prediction choices you want programmed into your 8-Ball App. Plug each text block into the pick random item block.

(Ideas for answers: http://en.wikipedia.org/wiki/Magic_8-Ball)

41

Blocks should look something like this:

(Note: it is normal for there to be a blank "item" space at the end of the make list block.)

You've got a Magic 8-Ball App! Now your app is fully functional and will predict the future with absolute certainty. Test out that this works, and then come back for some challenge tasks to make the app even more fun.

TEST: Emulator or Phone Emulator: Click on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.text field, followed by the sound.

Phone: Tap on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.text field, followed by the sound.

Part Three: Shake the Phone, Get a Prediction Even though you have a working Magic 8-Ball app, there is a way to make it even more fun. You can use the accelerometer component to make the phone respond to shaking instead of responding to a button click. This will make the app much more like a real Magic 8-Ball toy. Note: This part can only be done with an actual phone or tablet equipped with an

accelerometer. If you are using an emulator, skip this part and go to Challenge 1 instead.

DESIGN: App Inventor

42

From the Sensors palette, drag over an AccelerometerSensor sensor component. Notice that it automatically drops down to the â&#x20AC;&#x153;Non-visible componentsâ&#x20AC;? area of the Viewer window. This is the only new component you need, so go on over to the Blocks Editor to change your program.

BUILD: Blocks Editor 1. From the My Blocks drawer, click on AccelerometerSensor, then drag out the block for when AccelerometerSensor.Shaking .

2. Disconnect all of the blocks from inside the Button1.Click block and move them inside the AccelerometerSensor.Shaking block. NOTE: you can move whole sections of connected blocks by clicking on the uppermost or leftmost block and dragging it. The connected blocks will come with it.

3. Delete the Button1.Click block to keep your work area tidy.

The blocks should look something like this:

TEST: Phone/Emulator Phone: When you shake the phone it should show an answer and play a sound.

Emulator: unfortunately, you can not simulate shaking the phone when using the emulator.

43

Package the App to Your Phone!

Your app would disappear if you were to disconnect your phone from the Blocks Editor. This is because the app is still stored on the App Inventor server and not on your phone. Follow these instructions to package your app to your phone or to make an ".apk" file that can be installed on any android phone. Or, if you want to make your app even cooler, try the challenges below.

Challenge 1: Make the Magic 8-Ball Speak Instead of (or in addition to) making the prediction appear as text, can you make the 8-Ball speak it aloud? Hint: the text-to-speech component is under the Other Stuff palette in the Designer. Note: Most Android devices have the text-to-speech (TTS) capability, but if you have

trouble getting the TTS component in App Inventor to work, you may need to find out how to install TTS and/or enable TTS on your device.

Suggestions for Further Exploration 

Make the image rotate when the phone is shaken or have several images that the app rotates through while the phone is shaken. You could use this technique to make it look like the triangle piece inside the 8-ball window is surfacing. You could also make different images for different predictions and display the correct image for each prediction.



Make a similar app but for a different purpose. The phone could be used in place of dice or yahtzee letters. It could simulate a coin toss or a random number or color generator for investigating probability.



Ask end users to add choices to the list of predictions (See Make Quiz tutorial).



"Crowd source" for prediction choices: allow people to send text messages and have the app add them to the list.



Complete change the list to humorous choices (e.g. an app for teacher to use when a student has an excuse for not doing homework), or for useful purposes like randomly selecting a name from amongst people in the class.

44

1. Choose Import Video from the File menu or from the Task Pane.

Movie Maker How to Import Video

2. Browse to the Video Clip and click Import From the task pane on the left under number 1 choose import video.

Begin by opening Movie Maker from the Start Menu.

Now save the project with sensible name in the How to Add Clips to the Timeline/Storyboard Choose the storyboard view from the View Menu or from the bottom of the window.

Drag the clips from the window to the larger slots on the storyboard at the bottom.

You may want to leave some clips out if they are too long or pointless.

How to Split a Clip Once all of the clips you want to use are on the timeline you will need to split some clips in order to delete some of the clip that may be too long or may jump from one scene to another. To split a clip change to Timeline View and place the play head at the point you want to split the clip.

45

Move the play head to the point you want to split it then split.

How to Trim a Clip To make a clip shorter move the mouse pointer over the end of the clip until it turns into a red arrow and drag. Let go once the clip is shortened to where you want it. Use the zoom if it helps.

How to Add Transitions Transitions allow a change from one scene to the next without a jump. It gives a smooth change from one thing to the next.

Choose Transitions from the Task Pane under 2 on the left. In Storyboard mode drag a transition from the collection onto the smaller boxes on the bottom between the clips. Donâ&#x20AC;&#x2122;t go mad and choose sensible transitions only where they are needed i.e. where there is a scene change.

How to Add Video Effects Video Effects allow you to slow down, brighten or add a special effect onto a clip. Not all effects 46

are useful or appropriate but at least one must be applied to one clip.

Choose Effects from the Task Pane on the left and drag an effect onto a clip.

How to Import a Soundtrack, Add a Soundtrack, Fade out a Soundtrack Adding a soundtrack enhances the video and makes for a better atmosphere for your viewers. To import an mp3, wav or wma file choose Import Audio from the task pane on the left and browse for the file to use.

Change to the Timeline View and drag the audio file to the Audio section of the timeline.

Trimming and splitting is the same as with a Video Clip. If the music is not long enough add another file and trim it to fit the length of the clip.

Fade out the music at the end.

Select the Audio then choose Clip from the menu and Fade Out. Alternatively right click on the Audio clip and choose Fade Out. How to Add Titles and Credits No film is complete without a title and the credits that run at the end. Choose Titles and Credits from the Task Pane on the left.

47

Choose Title at the beginning. Give your clip a title and choose an animation and font, etc. from the links.

Repeat the process to add Credits at the end. Name yourself as producer, director, writer, etc.

How to Export the Project Once the project is complete and contains all of the elements required it needs saving as a movie. Make sure you save the project one more time before exporting.

From the File Menu choose Make Movie. From the options choose to save a file for playback on the computer. On the next screen make no changes and wait until the video is complete. Finally you will get the option to watch the video in Windows Media Player.

48

MS Publisher Exercises Exercise 1: Take That Design Checker - Publisher Printing 1)

Download the files needed to start this exercise: TakeThat.pub and save it in your own area.

2)

Open the file TakeThat file .

3)

Start the Design Checker (available in Tools) and identify any problems with the publication.

There should be quite a long list of problems.

4) Fix all the problems by whichever method you think best.

5) Save the file with the name TT Fixed and close it down.

49

Exercise 1b: Villa Design Checker - Publisher Printing

1)

Download the files needed to start this exercise: VillaToRent and save it in your own area.

2)

Open the file VillaToRent.

3)

Start the Design Checker (available in Tools) and identify any problems with the publication.

You should see a selection of different problems.

4) Solve the problems with the publication as you see fit.

5) Save the file with the name Villa Fixed and close it down.

Exercise 1c Sailing Design Checker - Publisher Printing 1)

Download the files needed to start this exercise: Sailing and save it in your own area.

2)

Open the file Sailing - design checker.

3)

Start the Design Checker (available in Tools) and identify any problems with the publication.

50

You should find at least 3 problems.

4)

Resolve the issues as you see fit. Notice how the design checker updates as you make changes to the publication.

5) Save the file with the name Sailing Fixed.

51

Exercise: Contestants Wanted - Formatting Publications

1) Open the file BBWanted.

2) Apply formatting changes to the publication. Things you could try include: 3) The page should look completely different to the original publication.

Your example doesn't need to look this garish!

4) Now create a WEB PAGE of this and view it in your web browser

52

Creating a flyer exercise This exercise will help you learn: In this chapter you will learn about the following topics: Creating the Title Adding the WordArt Adding the Small Text Boxes Using the Design Gallery Using the Calendar Designs Task Pane Adding the Third Text Box Creating the Table Adding the Picture Finishing Off Project - Creating a Flyer

You should complete the exercises in order.

Use the File | Save command to save this publication. Call it My Flyer and make sure you save it in your Course work folder.

Take a few moments to read the following important points: 1.

2.

3.

4.

5.

6.

7.

8.

In this practice chapter you will bring together the skills you have learned so far to produce a flyer or sales leaflet.

Although you could use a Publisher design to help you build your flyer or sales leaflet, you will not be doing this here. Instead, you will be starting with a blank page and then, using the skills you have learned so far, you will build a flyer from scratch. A copy of what you are trying to create is shown on the next page.

There are several steps involved with creating this flyer. First, you will use the wavy AutoShape to create the background for the title, then fill this with a gradient colour.

You will use WordArt to create the main title in the Wave 1 effect, with fill colour, border and shadow.

You will add two text boxes — one to hold the words THIS MONTH ONLY!, the other to hold the words SOME PRICE EXAMPLES. You’ll add a hairline border to these boxes.

You will use the Design Gallery to create the box with the calendar, then add a third text box with a small flower border and type the welcome message.

Finally, you will create a table and enter the pricing information, then insert a picture.

Please note that you will probably need to zoom in and out on the publication at different points during this practice exercise. There are no instructions telling you to do this — just change the view when you need to.

53

54

Creating the Title The first step in this flyer is to create the title. First you have to add and shade the wavy banner shape; you can then use WordArt to create the title. Click the AutoShapes button, point to Stars and Banners, then click the Wave button.

You can now fill the shape with a gradient colour. Make sure the shape is still selected.

Click the down arrow next to the Fill Color button and choose Fill Effects.

Notice the Fill Effects dialog box is displayed.

In the Colors options, click the Two colors option.

Open the Color 1 list box and choose a bright yellow colour â&#x20AC;&#x201D; if necessary, click More Colors, choose a yellow colour and click OK. Open the Color 2 list box and choose white.

In the Shading styles options, choose Diagonal down.

Choose the first variant effect and click OK. Notice your shape is updated with the colour and shading.

Adding the WordArt You can now add the title using WordArt. Click the Insert WordArt button to display the WordArt Gallery.

Click the first WordArt style.

Notice the Enter WordArt Text dialog box is displayed. In the Enter WordArt Text dialog box, type: 55

Garden Clearance Sale Click OK. Notice the WordArt is inserted in the publication and the WordArt toolbar is displayed.

Click the WordArt Shape button and choose the Wave 1 style. Your WordArt should resemble the following picture.

Using the adjustment handles, sizing handles and the rotate handle, make the text shape fit the AutoShape.

You can now add colour, a border and a shadow to the WordArt text. Make sure that your WordArt text is still selected.

In the WordArt toolbar, click the Format WordArt button.

Notice the Format WordArt dialog box is displayed.

If necessary, click the Colors and Lines tab.

56

In the Fill group of options, open the Color list box and choose a dark green colour — if necessary, click More Colors, choose a green colour then click OK. In the Line group of options, open the Color list box and choose white.

Change the entry in the Weight box to 1.5 pt.

Click OK. Finish off by adding the shadow. In the Formatting toolbar, click the Shadow Style button and choose the Shadow Style 13. Your WordArt is now complete.

Click anywhere outside the WordArt object, or press [Esc], to return to the publication.

Adding the Small Text Boxes You can now add the two small text boxes on the left of the publication. Click the Text Box button and drag out a small text box on the left-hand side of the publication — just below the title.

Type: THIS MONTH ONLY! Select the text you have just typed, and then apply the following formats: Alignment Centre Font size 16 pts Style Bold Click anywhere in the text box to remove the selection highlight. Your publication should resemble the following picture.

57

You will now add a gradient shade and a border to this text box. Click the down arrow next to the Fill Color button and choose Fill Effects.

When the Fill Effects dialog box is displayed, apply a gradient effect using yellow and white.

When you are ready, click OK. You now have to add a border to the text box. With the text box still selected, click the Line/Border Style button in the Formatting toolbar and choose the first line style.

Click anywhere on the publication page to remove the frame handles from the text box.

You are now ready to add your second text box. Use the Text Box button to create a second text box approximately the same size as the first. Position this frame about twothirds down the length of the page â&#x20AC;&#x201D; use the picture at the start of this chapter for guidance.

Type: SOME PRICE EXAMPLES Select the text you have just typed, and then apply the following formats: Alignment Centre Font size 14 pts Style Bold Click the down arrow next to the Fill Color button and choose Fill Effects. The Fill Effects dialog box is displayed.

58

On your own, apply a gradient effect using yellow and white.

When you are ready, click OK. You can now add a border to the text box. With the text box still selected, click the Line/Border Style button in the Formatting toolbar and choose the first line style.

Click anywhere on the publication page to remove the frame handles from the text box.

Your text box should resemble the following picture.

Using the Design Gallery The next step is to use the Design Gallery to place the current monthâ&#x20AC;&#x2122;s calendar on the publication. In the tools to the left of your workspace, click the Design Gallery Object button.

Notice the Design Gallery is displayed.

In the Categories list, click Calendars.

Notice the display is updated to show various calendar designs.

59

Choose the Blends Calendar.

Click Insert Object.

Notice the calendar is inserted into your publication.

Using the frame handles, resize the calendar so that it fits between the two new text boxes â&#x20AC;&#x201D; see the next picture for guidance.

(Your

calendar will show the current month and year.)

Using the Calendar Designs Task Pane The next step is to change the calendar date to next month. You do this using the Calendar Designs task pane. Choose the Format | Wizard For This Object command, or click theClick to edit options for this Calendar button beside the calendar.

60

Notice the Calendar Designs task pane is displayed.

Using this task pane, you can change the design or dates of your calendar.

Letâ&#x20AC;&#x2122;s change the dates. In the Calendar Designs task pane, click Change date range.

Notice the Change Calendar Dates dialog box is displayed.

Open the Start date list box and choose next monthâ&#x20AC;&#x2122;s date.

If necessary, change the adjacent year box to match the appropriate year.

Click OK. Close the task pane.

61

Click anywhere on the publication page to remove the frame handles from the calendar.

Adding the Third Text Box You are now ready to add the third text box. Click the Text Box button and drag out a text box to the right of the two existing text boxes and the calendar.

Type: Garden Plus Garden Centre would like to welcome you to their clearance sale.

Press [Enter] twice.

Type: All stock must be sold in preparation for the full refurbishment of the centre.

Select the text you have just typed and format it as follows: Font size 18 pts Style Bold Select the words Garden Plus Garden Centre and click the Italic button.

You can now add a border to this text box. Make sure the text box is still selected.

Click the Line/Border Style button and choose More Lines to display the Format Text Box dialog box.

Click the BorderArt button.

Notice the BorderArt dialog box is displayed.

62

Scroll down through the Available Borders list and locate and choose the border called Flowersâ&#x20AC;Ś Tiny â&#x20AC;&#x201D; if you cannot find this border choose any available border for now.

Click OK. Click OK to close the Format Text Box dialog box.

Notice the text box is updated.

Click anywhere on the publication page to deselect the text box.

63

Creating the Table You are now ready to create the table. It needs to be 3 columns wide and 10 rows long.

Click the Insert Table button and drag out a frame below the SOME PRICE EXAMPLES text box to the bottom of the publication page.

Notice that as soon as you release the mouse button, the Create Table dialog box is displayed.

64

Change the current entry in the Number of rows box to 10.

Change the current entry in the Number of columns box to 3.

Scroll down the Table format list and choose Numbers 6.

Click OK. The table is created.

Type the details as shown in the following picture.

65

Now you just need to change the column widths — you will make the first column slightly wider and the other two columns slightly narrower. Point to the right-hand edge of the first column and drag it to the right slightly — the words Hardwood Furniture should appear on one line.

Adjust the other two columns so that they are lightly narrower.

Adding the Picture You are now ready for the last step — adding the picture. Click the Picture Frame button followed by the Picture from File option from the popup menu and drag out a frame in the empty space to the right of the table. The Insert Picture dialog box is displayed.

Insert the picture Flowers from your Course work folder.

When you are ready, click OK. On your own you can now tidy up the publication page. If necessary, move and resize any frames to make your publication resemble that shown in the picture at the start of this chapter.

When you are ready, save your work. Choose the File | Save command, or click the Save button in the Standard toolbar, or just press [Ctrl]+S.

Finishing Off Use the File | Close command to close all open publications — if asked, choose No to avoid saving any changes.

66

Project — Creating a Flyer Start a new blank publication — click the New button.

Use the File | Save command to save this publication. Call it My Flyer Project and make sure you save it in your Course work folder.

Using the skills you have learned to create the publication shown on the next page.

Before you begin, take a few moments to read the following important points: Add the main title using WordArt. Choose the Inflate Top WordArt shape and add a shadow style.

Create a text box for the date of the event and surround it with some BorderArt click the Line/Border Style button and choose More Lines.

Create a text box for the welcome message.

Add two pictures from the ClipArt Gallery. Try searching for clips related to soccer.

Alternatively, there are two picture files provided in your Course work folder — Football and SportsDay. When you are ready, use the File | Save command to save your work in your own area.

Remember, it is always a good idea to back p any work you have done.

67

68

Project:

69

70

71

72

73

74