1. Teaching Kids Programming with Chromebook Digital Convergence Lab, NIU

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

3. 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

4. Curriculum

5. Tools ★Scratch ★Turtle AcademyTurtle Academy ★PiskelappPiskelapp

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

7. 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 email address ○ This will allow you to save

8. Scratch Interface File menu Stage Sprites palette Blocks palette Cursor tools File name Backdrop Working area

9. 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

10. 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?

11. 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

12. 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

13. 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

14. 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”

15. 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

16. 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?

17. 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?

18. 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?

19. 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?

20. Moving Sprites The stage is 480 x 360 pixels The center of the stage has x-coordinate = 0; y-coordinate = 0

21. 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

22. 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

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

24. 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?

25. 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

26. 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

27. 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

28. 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

29. 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”

30. 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)

31. 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?

32. 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

33. 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

34. Down Arrow Key

36. Turtle Academy 1. Go to turtleacademy.com 2. Select ‘Lessons’ 3. Let’s try the first few lessons

37. 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)

39. Questions? Contact: Mike Taylor, mktaylor@niu.edumktaylor@niu.edu Ros Adulseranee, ros.adul@niu.eduros.adul@niu.edu