Teaching Kids Programming with Chromebook Digital Convergence Lab, NIU

Who are We? ★Ros Adulseranee ★Mike Taylor ★DCLDCL ★TeamTeam

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 AcademyTurtle Academy ★PiskelappPiskelapp

Scratch Youtube Video: Computer Coding Games for Kids: Introducing to Scratch Computer Coding Games for Kids: Introducing to Scratch

Hands-on ★Go to scratch.mit.eduscratch.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 address ○ This will allow you to save

Scratch Interface File menu Stage Sprites palette Blocks palette Cursor tools File name 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 to the working area, connect it to the first block 6. Save your file and click Green flag in the “Stage” area to run the program 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) d. Take a photo from a camera (web cam) 4. Click “Giga” icon to add new sprites from library

Adding Sprite from Piskelapp 1. Go to piskelapp.compiskelapp.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 to the working area, connect it to the first block

Animation (continued) 7. Select “Looks”, drag and drop to the working area, connect it the first two blocks 7. Click Green flag 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 to the working area, connect it to the first block 4. What does these two blocks tell you?

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 8. Does it work? What other block we can use to switch costume?

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 to the working area 7. Select “Motion”, drag and drop to the working area, connect it to “when the flag is clicked” block

Moving Sprites (continued) 8. Select “Control”, drag and drop to the working area, connect it to “go to x:0 y:0” block

Moving Sprites (continued) 9. Select “Motion”, drag and drop to the working area, connect it inside “Forever” block 10. Save and run the program 11. What is the problem that you notice?

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 working area, connect it to the first block 3. Select “Motion”, drag and drop to the working area, connect it to go to x: # and y: # block 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 to the working area, connect it inside the forever block

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 to the working area, connect it to point in direction block 9. Save and run the program 10. Does it work?

Left Arrow Key (continued) 11. Select “Motion”, drag and drop to the working area, connect it to move 10 steps block 12. Save and run the program

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 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, Ros Adulseranee,