boxes
boxes- learning targets
oI will be able to display buttons (boxes)
oI will be able to organize boxes
oI will be able to create an animation theme
boxes– common core state standards
1.2 Collaborate: Use digital media and environments to communicate and work collaboratively to supportindividual learning and contribute to the learning of others
1.3 Investigate and Think Critically: Research, manage and evaluate information and solve problems usingdigital tools and resources
L.11-12.3. Apply knowledge of language to understand how language functions in different contexts, to makeeffective choices for meaning or style, and to comprehend more fully when reading or listening.
SL.11-12.5. Make strategic use of digital media (e.g., textual, graphical, audio, visual, and interactive elements)in presentations to enhance understanding of findings, reasoning, and evidence and to add interest.
9-12 SYSB Systems thinking can be especially useful in analyzing complex situations. To be useful, a systemneeds to be specified as clearly as possible.
9-12 SYSD Systems can be changing or in equilibrium.
N-Q.2. Define appropriate quantities for the purpose of descriptive modeling
N-Q.3. Choose a level of accuracy appropriate to limitations on measurement when reporting quantities.
•Educational Technology
•Language
•Art
•Science
•Math
boxes– entry task
oturn to the elbow partner on right
ocomplete these challenges:
•Can you write a combination of images andsounds?
•Draw a grid on your paper, 4 columns x 2 rows.
•Write these images and sounds into grid
SOUNDBOARD
Objective: Tap the buttons to play sounds!
Demo: http://tdev.ly/vxii/info
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: http://tdev.ly/vxii/info
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
opage main()
oinitialize:
odisplay:
obox:
•Boxed:
onest boxes:
otap event
•where handler():
opost to wall:
oset width:
oset margins:
![C:\Users\nikolait\AppData\Local\Microsoft\Windows\Temporary Internet Files\Content.IE5\U8QL588R\MP910220994[1].jpg](data/images/img2.jpg)
project of the week:soundboard
obuttons appear organized
obuttons are evenly spaced across screen
obuttons have at least two columns
obuttons have matching sizes
obuttons have corresponding sounds
distribute handout:soundboard
oobjectives featured on project spec sheet
word wall
opage main()
oinitialize:
odisplay:
obox:
•Boxed:
onest boxes:
otap event
•where handler():
opost to wall:
oset width:
oset margins:
word wall
opage main() naming page as main
oinitialize: introduces order
odisplay: displays the boxes
obox: provides a frame for initial box
•boxed: defines the object
onest boxes: put boxes inside boxes
otap event
•where handler(): executes action
opost to wall: displays data
oset width: selects dimensions of box
oset margins: determines space outside the box
button design
students find soundboard template
Script ID: touchdevelop.com/qsaib
TEMPLATE
1.Tap on hub!
2.Tap on tutorials
3.Select SoundBoard
4.Name SoundBoard
5.Close Tutorial (select ‘x’)
boxdesign
organizing content
order of boxes
oOrganizes content
•Next to …another box
•Underneath …another box
•Away from…another box
orientation of boxes
opositions, quantity, and data arebased on preference
create box dimensions
set box width
w is width of enclosingdimensions of box
w
w
challenge for boxes
Refactor the code
Set the width and margins into a separate actionUse actions in each box
create margins
set box margins
separate boxes
r
t
b
l
r
t
l
b
box fx (function)
oControl size, alignment, layout
oStores sound
oProject pictures
oDisplays content
oVisit websites
oBuilding websites
oDesigns layout
![C:\Users\nikolait\AppData\Local\Microsoft\Windows\Temporary Internet Files\Content.IE5\U8QL588R\MP910220994[1].jpg](data/images/img17.jpg)
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 thepicture 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
oset standard box width
ow is width of enclosingdimensions of picture
ofix the box width to 11 sothat it looks consistent
oheight re-sized(automatically matchespicture ratio)
w
w
demo: resize art resource
display
1 go to boxed
2 go to ▷main3 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 tohave an app that with aninteractive 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 touse logic, duplicate picture,sound on tap
demo: multiple images, sounds
Exercise: Apply logic tocreate another box, image,and sound
Checkpoint 1
o3 points – You create multiple images.(Checkpoint 1)
o6 points – You create multiple correspondingsounds to images (Checkpoint 1)
o6 points – Your sounds are triggered on tap(Checkpoint 1)
o4 points – Your images are evenly sized(Checkpoint 1)
sample answer
oWhat 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 oneanother.
r
t
b
l
r
t
l
b
create margins
Issue: The boxes are currently touching each other sowe want to make sure there is some extra spaceoutside 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
sampleanswer
oWhat 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 logicto create horizontal layout
demo: horizontal layout
Now that we have an outerbox containing the twopictures, we can change thelayout so that they are placedhorizontally.
demo: multiple images, sounds
Exercise: Apply logic tocreate horizontal layout
sample answer
oWhat 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: Applynested for loop logic fornested boxes
demo: two rows
Now that we have an outerbox containing the twopictures, we can change thelayout so that they are placedhorizontally.
sample answer
oWhat 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
oWhat 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 tocreate two horizontal rows
sampleanswer
oWhat 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
sampleanswer
oWhat 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
ois it possible to create even object spacing?
ois it possible to create 4 same size images?
ois it possible to create a next bottom?
ois it possible to create a third row?
ois it possible to create a fourth row?
ois it possible to create points on tap?
ois it possible to create a countdown timer?