Teaching Kids Programming with Chromebook
Digital Convergence Lab, NIU
Who are We?
★ Ros Adulseranee
★ Mike Taylor
★ DCL
★ Team
Coding Club
★ Contacted from one of the middle schools’ teacher
★ A need to create a coding club for sixth grade students
★ Each kid has a one-to-on Chromebook
★ Created a curriculum based on Science and Engineering Standards
Practices
Curriculum
Tools
★ Scratch
★ Turtle Academy
★ Piskelapp
Scratch
Youtube Video: Computer Coding Games for Kids: Introducing to Scratch
Hands-on
★ Go to scratch.mit.edu
★ Select a game to play
★ Click “Join Scratch” to create an account on the system
○ Select the Username and password
○ Enter your birth month and year, and gender
○ Enter the email address
○ This will allow you to save
Scratch Interface
Cursor tools
File menu
File name
Stage
Blocks palette
Sprites palette
Backdrop
Working
area
First Hello
1. Rename “Untitled” to “First Hello” or to any name you prefer
2. Click “Sprite1” in “Sprite Palette”
3. In the “Blocks Palette”, click “Scripts” tab, then, select “Events”
4. Drag and drop
to the working area
First Hello (continued)
5. Select “Looks”, drag and drop
the first block
6. Save your file and click Green flag
program
to the working area, connect it to
in the “Stage” area to run the
7. Can you think of the way to modify the word “Hello” to something else? Or
perhaps add a sound?
Removing/Adding Sprites
1. File >> New and rename “Untitled-2” to the file name you prefer
2. To remove the “Cat” sprite, we can
a. Select the “Scissor” icon and place it over to the “Cat” on the stage or on the “Sprites
Palette”. Or
b. Right click the “Cat” sprite in the “Sprites Palette” and choose “delete”
3. To add new sprite, we can
a. Choose sprite from library (Giga icon)
b. Paint new sprite (create our own sprite in Scratch)
c. Upload sprite from file (from your machine)
Adding Sprite from Piskelapp
1. Go to piskelapp.com
2. Login using your gmail account or click Create a Sprite button
3. Let’s create a simple sprite
4. When finished, select Export as Zip
5. Extract zip file, and import to Scratch
Adding Background
1. To add new background (backdrop), we can
a. Choose from library
b. Paint a new one
c. Upload from a file
d. Take photos from a camera (web cam)
2. Click “Choose new backdrop from library” to add a new background
3. Save your file
Animation
Using the same file that you added sprites and a new background, let’s do a
simple animation -- changing costumes
1. Select a sprite (click sprite in the sprites palette) that you want to create
animation
2. Click “Costumes” tab to check if the selected sprite has more than one
costumes
3. If yes, go to next step; else, create one
4. Click “Scripts” tab in the “Blocks Palette”
Animation (continued)
5. Select “Events”, drag and drop
to the working area
6. Select “Control”, drag and drop
connect it to the first block
to the working area,
Animation (continued)
7. Select “Looks”, drag and drop
connect it the first two blocks
7. Click Green flag
to the working area,
to test your program
8. Save your file
9. What to do if you want to switch back to the previous costume?
10.Is there a way to improve your animation?
Animation using Forever
1. Using File >> >Save as a copy to save your previous animation file
2. Remove all the blocks except
3. Select “Control”, drag and drop
the first block
4. What does these two blocks tell you?
to the working area, connect it to
Animation using Forever (continued)
5. Find
block, drag and drop it to the working area,
connect it inside “Forever” block
6. Find
block, drag and drop it to the working area,
connect it inside “Forever” block and after “Wait”
7. Save your file and run the program to test your blocks
Animation using Forever (continued)
1. Remove
from “Forever” block
2. Select “Looks”, drag and drop
to the working area,
connect it inside “Forever” block after “Wait”
3. Save your file and run the program
4. Do you see the difference?
Moving Sprites
The stage is 480 x 360 pixels
The center of the stage has
x-coordinate = 0; y-coordinate = 0
Moving Sprites (continued)
1. Create a new file, name it “Moving Monkey”
2. Delete the cat
3. Upload new sprite from library
4. Add new background
5. Add animation to change sprite costumes
Moving Sprites (continued)
6. Select “Events”, drag and drop
7. Select “Motion”, drag and drop
to “when the flag is clicked” block
to the working area
to the working area, connect it
Moving Sprites (continued)
8. Select “Control”, drag and drop
“go to x:0 y:0” block
to the working area, connect it to
Moving Sprites (continued)
9. Select “Motion”, drag and drop
inside “Forever” block
10.Save and run the program
11.What is the problem that you notice?
to the working area, connect it
Moving Sprites (continued)
12.Select “Motion”, drag and drop
to the working area, connect it
inside “Forever” block and after “move 10 steps” block
13.Save and run the program again
Moving Sprite with Arrow Keys
1. File >> New
2. Name your file “Moving Sprite using Left and Right Arrow Keys”
3. Delete the cat and import a new sprite
4. Move your sprite to the position where you want to start when first
running the program
Initial Setup
1. Select “Events”, drag and drop
to the working area
2. Select “Motion”, drag and drop
to the first block
to the working area, connect it
3. Select “Motion”, drag and drop
connect it to go to x: # and y: # block
to the working area,
4. If your sprite has more than one costumes,
select “Looks”, drag and drop
to the working area,
connect it to set size block, and change to the costume that facing right
Left Arrow Key
1. Select “Events”, drag and drop
to the working area
2. Select “Control”, drag and drop
to the working area, connect it to
the first block
3. Select “Control”, drag and drop
inside the forever block
to the working area, connect it
Left Arrow Key (continued)
4. Select “Sensing”, drag and drop
to the working area, connect
it inside the if-then block
5. Click dropdown menu to change from “key space” to “key left arrow”
Left Arrow Key (continued)
6. Select “Motion”, drag and drop
to the working area, connect
it inside if-then block
7. Click dropdown menu to change point in direction 90 (right) to -90 (left)
Left Arrow Key (continued)
8. Select “Motion”, drag and drop
point in direction block
9. Save and run the program
10.Does it work?
to the working area, connect it to
Left Arrow Key (continued)
11.Select “Motion”, drag and drop
to move 10 steps block
12.Save and run the program
to the working area, connect it
Right Arrow Key
1. Let’s repeat the same steps that we used to create Left Arrow Key to
create Right Arrow Key
2. Save and run your program
3. Create the blocks for Down Arrow Key
Down Arrow Key
Turtle Academy
1. Go to turtleacademy.com
2. Select ‘Lessons’
3. Let’s try the first few lessons
Resources
http://wiki.scratch.mit.edu/wiki/Scratch_Wiki_Home
http://wiki.scratch.mit.edu/wiki/Scratch_Wiki:Table_of_Contents/Blocks
Raspberry Pi + Scratch + GPIO
Raspberry Pi + Scratch + Makey Makey
Adventures in Raspberry Pi, Carrie Anne Philbin
Piskelapp (piskelapp.com)
Turtle Academy (turtleacademy.com)
Questions?
Contact:
Mike Taylor, [email protected]
Ros Adulseranee, [email protected]