boxes

SOUNDBOARD Objective: Tap the boxes to play sounds! Demo:

1. Write down the basic programming logic for app 2. Write line of learning underneath your explanation 3. Turn and talk with neighbor for pair - share… Write additional answers to game logic underneath 4. Classroom share out… Groups discuss their answers Objective: Tap the buttons to play sounds! Demo:

button design distribute graph paper draw their box diagram and identify possible app design logic.

drawing 1. Distribute graphing paper 2. Students spec out their own path game 3. Identify obstacles, sprites, board, etc. 4. Best drawings displayed to class

word wall o page main() o initialize: o display: o box: Boxed: o nest boxes: o tap event where handler(): o post to wall: o set width: o set margins:

project of the week: soundboard o buttons appear organized o buttons are evenly spaced across screen o buttons have at least two columns o buttons have matching sizes o buttons have corresponding sounds

distribute handout: soundboard o objectives featured on project spec sheet

soundboard o Tap the buttons to play sounds! o Demo: step 1 step 2

word wall o page main() o initialize: o display: o box: Boxed: o nest boxes: o tap event where handler(): o post to wall: o set width: o set margins:

word wall o page main() naming page as main o initialize: introduces order o display: displays the boxes o box: provides a frame for initial box boxed: defines the object o nest boxes: put boxes inside boxes o tap event where handler(): executes action o post to wall: displays data o set width: selects dimensions of box o set margins: determines space outside the box

button design students find soundboard template Script ID: touchdevelop.com/qsaibtouchdevelop.com/qsaib

TEMPLATE 1. Tap on hub! 2. Tap on tutorials 3. Select SoundBoard 4. Name SoundBoard 5. Close Tutorial (select ‘x’)

box design organizing content

order of boxes o Organizes content Next to …another box Underneath …another box Away from…another box

orientation of boxes o positions, quantity, and data are based on preference

create box dimensions set box width w is width of enclosing dimensions of box w w

challenge for boxes Refactor the code Set the width and margins into a separate action Use actions in each box

create margins set box margins separate boxes r t b l r t l b

box fx (function) o Control size, alignment, layout o Stores sound o Project pictures o Displays content o Visit websites o Building websites o Designs layout

demo: create a box display  go to ▷ main method go to display section tap do nothing line in the display section tap on boxed in the blue TouchDevelop keyboard page main () initialize do nothing display boxed do nothing

demo: create a box display  go to ▷ main method go to display section tap do nothing line in the display section tap on boxed in the blue TouchDevelop keyboard page main () initialize do nothing display boxed do nothing

demo: create a picture display  1 go to boxed 2 tap do nothing (under boxed) 3 tap on the Search APIs 4 textbox on the upper left of the screen 5 type an image name tap on one of the monster pictures; this will add the picture as an art resource in your script page main () initialize do nothing display boxed do nothing

demo: create an art resource display  1 go to boxed 2 tap do nothing (under boxed) 3 tap on the Search APIs 4 textbox on the upper left of the screen 5 type an image name 6. select an image (ie. Monster) (adds picture as an art resource in script) page main () initialize do nothing display boxed ✿ monster_1

demo: display an art resource display  1 go to boxed 2 tap do nothing (under boxed) 3 tap on the Search APIs 4 textbox on the upper left of the screen 5 type an image name 6. select an image (ie. Monster) 7. Tap post to wall Post to wall – Displays the image to the wall (screen) when you ‘run’ app! page main () initialize do nothing display boxed ✿ monster_1->post to wall

demo: display an art resource display  1 go to boxed 2 tap do nothing (under boxed) 3 tap on the Search APIs 4 textbox on the upper left of the screen 5 type an image name 6. select an image (ie. Monster) 7. Tap post to wall page main () initialize do nothing display boxed ✿ monster_1->post to wall

demo: run your script display  1 click on ‘run’ 2 tap on the ▷ button Image of monster

create picture dimensions o set standard box width o w is width of enclosing dimensions of picture o fix the box width to 11 so that it looks consistent o height re-sized (automatically matches picture ratio) w w

demo: resize art resource display  1 go to boxed 2 go to ▷ main 3 tap on the line of code where you post an picture to the wall 4 tap on the + button below the code 5 add a new line tap on the box button 6 if you cannot find it, use the >> button to cycle through page main () initialize do nothing display boxed ✿ monster_1->post to wall box->set width (11)

demo: display a sound resource Learning Target: I will be able to have an app that with an interactive image to a sound

create - tap event 1. go to ▷ main 2. add a new line of code 3. under box->set width (11) 4. tap on the box button 5. tap on the on tapped button page main () initialize do nothing display boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is do nothing

create – ‘where’ clause display  Objective: Let's play a sound when user taps image 1. The code under the where clause will run each time the user taps on the picture. 2. Box -> on tapped (handler: action) –set what happens when box is tapped 3. Action box -> on tapped (handler: action) page main () initialize do nothing display boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is do nothing

create – ‘sound’ on tap display  1. tap on the do nothing line 2. (under the where handler() ) 3. tap ‘Search’ 4. text box 5. type a name of sound (ie. Laser) 6. tap on one of the sound. Learning Objective: Let's play a sound when this happens. page main () initialize do nothing display boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play

demo: multiple images, sounds Learning Target: I will be to use logic, duplicate picture, sound on tap

demo: multiple images, sounds Exercise: Apply logic to create another box, image, and sound

Checkpoint 1 o 3 points – You create multiple images. (Checkpoint 1) o 6 points – You create multiple corresponding sounds to images (Checkpoint 1) o 6 points – Your sounds are triggered on tap (Checkpoint 1) o 4 points – Your images are evenly sized (Checkpoint 1)

sample answer o What happens? page main () initialize do nothing display boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → on tapped(handler2) where handler() is ✿ laser2->play

create margins Learning Target: I can separate images from one another. r t b l r t l b

create margins Issue: The boxes are currently touching each other so we want to make sure there is some extra space outside the box. This extra space is called the margin. r t b l r t l b

create margins set box margins - - separate boxes sample code: box → set margins(1, 1, 1, 1) box-> set margins (top: number, right: number, bottom: number, left: number) r t l r t l b b

sample answer o What happens? You set the spacing of boxes (to leave leave space around outside of this box) page main () initialize do nothing display boxed ✿ monster_1->post to wall box->set width (11) box → set margins(1, 1, 1, 1) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → set margins(1, 1, 1, 1) box → on tapped(handler2) where handler() is ✿ laser2->play

demo: horizontal layout Learning Target: Apply logic to create horizontal layout

demo: horizontal layout Now that we have an outer box containing the two pictures, we can change the layout so that they are placed horizontally.

demo: multiple images, sounds Exercise: Apply logic to create horizontal layout

sample answer o What happens? page main () initialize do nothing display box->use horizontal layout boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → on tapped(handler2) where handler() is ✿ laser2->play

demo: horizontal layout Learning Target: Apply nested for loop logic for nested boxes

demo: two rows Now that we have an outer box containing the two pictures, we can change the layout so that they are placed horizontally.

sample answer o What happens? page main () initialize do nothing display boxed box->use horizontal layout boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → on tapped(handler2) where handler() is ✿ laser2->play

sample answer o What happens? Notice 2 boxed statement nest under another boxed statement. o page main () initialize do nothing display boxed box->use horizontal layout boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → on tapped(handler2) where handler() is ✿ laser2->play

demo: multiple images, sounds Exercise: Apply logic to create two horizontal rows

sample answer o What happens? Notice 2 boxed statement nest under another boxed statement. o page main () initialize do nothing display boxed box->use horizontal layout boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → on tapped(handler2) where handler() is ✿ laser2->play boxed box->use horizontal layout boxed ✿ monster_3->post to wall box->set width (11) box → on tapped(handler3) where handler() is ✿ laser4->play boxed ✿ monster_4->post to wall box->set width (11) box → on tapped(handler4) where handler() is ✿ laser5->play

sample answer o What happens? Notice 2 boxed statement nest under another boxed statement. o page main () initialize do nothing display boxed box->use horizontal layout boxed ✿ monster_1->post to wall box->set width (11) box → on tapped(handler) where handler() is ✿ laser->play boxed ✿ monster_2->post to wall box->set width (11) box → on tapped(handler2) where handler() is ✿ laser2->play boxed box->use horizontal layout boxed ✿ monster_3->post to wall box->set width (11) box → on tapped(handler3) where handler() is ✿ laser4->play boxed ✿ monster_4->post to wall box->set width (11) box → on tapped(handler4) where handler() is ✿ laser5->play

extra-exercises o is it possible to create even object spacing? o is it possible to create 4 same size images? o is it possible to create a next bottom? o is it possible to create a third row? o is it possible to create a fourth row? o is it possible to create points on tap? o is it possible to create a countdown timer?