boxes
boxes- learning targets
o
I will be able to display buttons (boxes)
o
I will be able to organize boxes
o
I will be able to create an animation theme
boxes– common core state standards
•
Educational Technology
1.2 Collaborate: Use digital media and environments to communicate and work collaboratively to support
individual learning and contribute to the learning of others
1.3 Investigate and Think Critically: Research, manage and evaluate information and solve problems using
digital tools and resources
•
Language
•
Art
•
Science
L.11-12.3. Apply knowledge of language to understand how language functions in different contexts, to make
effective 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 system
needs 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.
•
Math
boxes– entry task
o
turn to the elbow partner on right
o
complete these challenges:
•
Can you write a combination of images and
sounds?
•
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
Objective: Tap the buttons to play sounds!
Demo: http://tdev.ly/vxii/info
1.
2.
3.
Write down the basic programming logic for app
Write line of learning underneath your explanation
Turn and talk with neighbor for pair - share…
Write additional answers to game logic underneath
4.
Classroom share out…
Groups discuss their answers
button design
distribute graph paper
draw their box diagram and identify
possible app design logic.
drawing
1.
2.
3.
4.
Distribute graphing paper
Students spec out their own path game
Identify obstacles, sprites, board, etc.
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
o
Tap the buttons to play sounds!
Demo: http://tdev.ly/vxii/info
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/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
w is width of enclosing
dimensions of box
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
t
t
r
l
l
b
r
box fx (function)
o
o
o
o
o
o
o
Control size, alignment, layout
Stores sound
Project pictures
Displays content
Visit websites
Building websites
Designs layout
demo: create a box
display 
page main ()
initialize
go to ▷main method
go to display section
tap do nothing line in the display section
tap on boxed in the blue TouchDevelop keyboard
do nothing
display
boxed
do nothing
demo: create a box
display 
page main ()
initialize
go to ▷main method
go to display section
tap do nothing line in the display section
tap on boxed in the blue TouchDevelop keyboard
do nothing
display
boxed
do nothing
demo: create a picture
display 
1 go to boxed
2 tap do nothing (under boxed)
page main ()
initialize
do nothing
display
boxed
do nothing
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
demo: create an art resource
display 
1 go to boxed
page main ()
initialize
do nothing
display
2 tap do nothing (under boxed)
boxed
✿ monster_1 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)
demo: display an art resource
display 
page main ()
initialize
1 go to boxed
2 tap do nothing (under boxed)
do nothing
display
boxed
✿ monster_1->post to wall
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!
demo: display an art resource
display 
page main ()
initialize
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
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 
page main ()
initialize
1 go to boxed
2 go to ▷main
3 tap on the line of code
do nothing
display
boxed
✿ monster_1->post to wall
box->set width (11)
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
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 
page main ()
initialize
do nothing
display
Objective: Let's play a sound
when user taps image
boxed
✿ monster_1->post to wall
box->set width (11)
box → on tapped(handler)
where handler() is
do nothing
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)
create – ‘sound’ on tap
display 
page main ()
initialize
do nothing
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.
boxed
✿ monster_1->post to wall
box->set width (11)
box → on tapped(handler)
where handler() is
Learning Objective: Let's play a sound when this happens.
✿ 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
page main ()
initialize
do nothing
display
o
What happens?
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.
t
t
r
l
l
b
r
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.
t
t
r
l
l
b
r
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)
t
t
l
rl
b
r
b
sample
answer
o
What happens?
page main ()
initialize
do nothing
display
boxed
✿ monster_1->post to wall
box->set width (11)
box → set margins(1, 1, 1, 1)
You set the spacing
of boxes (to leave
leave space around
outside of this box)
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
page main ()
initialize
do nothing
display
o
What happens?
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?