Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Coding in the Classroom

259f23c3b129f07b0c496b9f0495f07e?s=47 jeg2
June 14, 2017

Coding in the Classroom

Professional Development for elementary teachers in Edmond Public Schools in June of 2017.



June 14, 2017

More Decks by jeg2

Other Decks in Education


  1. Coding in the Classroom Photo from http:/ /urthmama.com/easy-computer-programming-for-kids/

  2. speakerdeck.com/jeg2/ coding-in-the-classroom The only thing you need to write down!

  3. Introductions

  4. I'm Going to Ask Name Role in schools Your hopes

    for this training A fun fact about yourself
  5. But I'll go first!

  6. James Edward Gray II My Name

  7. My Role: Dad My daughter goes to John Ross I've

    shown the kids there tech stuff I like supporting the schools
  8. My Hopes for Today I hope to expand your view

    of programming and programmers I want to show you something fun and useful for the kids My fear: teaching the teachers!
  9. I Love Games My Fun Fact

  10. Dana Gray John Ross PTO President Elect I hope to

    help you find some handy new teaching tools Finds cats even in Japan! Photo from https:/ /www.dreamstime.com/editorial-stock-photo-beckoning-cat-sculpture-view-large-gateway-ekamai- shopping-mall-january-bangkok-thailand-japanese-themed-image48939578
  11. Your Turn Name Role in schools Your hopes for this

    training A fun fact about yourself
  12. Thank You!

  13. Our Plan

  14. The Schedule 8:30-9:20: chat about programming & generate mazes 9:20-9:30:

    break 9:30-10:30: programming mazes 10:30-10:40: break 10:40-11:30: chat about other ideas & AMA
  15. Please Stop Me With Questions!

  16. What is Programming?

  17. I Am a Programmer Or Developer, or coder I write

    code, mostly to built Web applications Photo from https:/ /comicvine.gamespot.com/forums/battles-7/albert-wesker-re-vs-neo-matrix-1607450/
  18. I download things for my mother-in-law's iPad. All Programmer's Do

  19. A Translator for Machines We want machines to do a

    lot of work for us It's my job to tell them how I translate work instructions into computer languages
  20. Computers Are Very Dumb But wicked fast!

  21. The PB&J Challenge

  22. Kid's Task Write out or dictate live instructions Explain how

    to make a peanut butter & jelly sandwich
  23. Follow Their Instructions Extremely Literally Photo from https:/ /www.youtube.com/watch?v=cDA3_5982h8

  24. This is my job!

  25. Why Program?

  26. Turn ALL YOUR KIDS into Programmers!!!

  27. Turn ALL YOUR KIDS into Programmers!!!

  28. Exposure Show kids another option they have Just like we

    do for writing, art, sports, and more It affects their lives a lot We program spreadsheets, robots, cars, movies, clothes, and so much more
  29. Jobs We currently graduate around a third of the tech

    industry's demand These are good jobs High pay Strong benefits
  30. Curriculum: Kindergarten K.N.1 Understand the relationship between quantities and whole

    numbers. K.A.1 Duplicate patterns in a variety of contexts. K.A.1.2 Recognize, duplicate, complete, and extend repeating, shrinking and growing patterns involving shape, color, size, objects, sounds, movement, and other contexts.
  31. Curriculum: 1st 1.N.1 Count, compare, and represent whole numbers up

    to 100, with an emphasis on groups of tens and ones. 1.A.1 Identify patterns found in real-world and mathematical situations. 1.A.1.1 Identify, create, complete, and extend repeating, growing, and shrinking patterns with quantity, numbers, or shapes in a variety of real-world and mathematical contexts.
  32. Curriculum: 2nd 2.A.1 Describe the relationship found in patterns to

    solve real-world and mathematical problems. 2.A.1.1 Represent, create, describe, complete, and extend growing and shrinking patterns with quantity and numbers in a variety of real-world and mathematical contexts. 2.A.1.2 Represent and describe repeating patterns involving shapes in a variety of contexts.
  33. Curriculum: 3rd 3.A.1 Describe and create representations of numerical and

    geometric patterns. 3.A.1.3 Explore and develop visual representations of growing geometric patterns and construct the next steps. 3.GM.1 Use geometric attributes to describe and create shapes in various contexts.
  34. Curriculum: 4th 4.A.1 Use multiple representations of patterns to solve

    real-world and mathematical problems. 4.A.1.3 Create growth patterns involving geometric shapes and define the single operation rule of the pattern.
  35. Curriculum: 5th 5.A.1 Describe and graph patterns of change created

    through numerical patterns. 5.A.1.1 Use tables and rules of up to two operations to describe patterns of change and make predictions and generalizations about real-world and mathematical problems.
  36. ISTE Technology Standards 1. Creativity and Innovation a. apply existing

    knowledge to generate new ideas, products, or processes. 3. Critical Thinking, Problem Solving, and Decision Making plan and manage activities to develop a solution or complete a project.
  37. Continued: ISTE Technology Standards 5. Digital Citizenship b. exhibit a

    positive attitude toward using technology that supports collaboration, learning, and productivity. 6. Technology Operations and Concepts a. understand and use technology systems. c. troubleshoot systems and applications.
  38. Imagine If I Tried A science standard "predict motion of

    the Earth's movement" A technology standard "use models and simulations to explore complex systems and issues"
  39. Learning to Program

  40. Arcane Languages?! class Tweet def self.recent tweets = TWITTER_CLIENT.user_timeline( "JEG2",

    exclude_replies: true, include_rts: false ) Array(tweets).map { |tweet| new( id: tweet.id, url: tweet.url.to_s, body: tweet.text, created_at: tweet.created_at, user_name: tweet.user.screen_name, avatar_url: tweet.user.profile_image_url ) } end include Twitter::Autolink def initialize(id: , url: , body: , created_at: , user_name: , avatar_url: ) @id = id @url = url @body = body @created_at = created_at @user_name = user_name @avatar_url = avatar_url end attr_reader :id, :url, :body, :created_at, :user_name, :avatar_url def linked_body auto_link( body, link_attribute_block: ->(_, link_attributes) { link_attributes.merge!(target: "_blank") } ) end end
  41. I "Know" Around 15 "Programming Languages" It depends on how

    you define these terms.
  42. Programming Languages are Small 0 450 900 1350 1800 Ruby

    Japanese (Kanji only)
  43. Most Important Programming Skills 1. Human Communication 2. Problem Solving

    3. Think Like a Computer 
 (Think Algorithmically) 4. Good at Learning New Things 5. Programming Languages
  44. Codebreaking What Programmers Do

  45. Do you know who this is? Photo from http:/ /www.gizmodo.co.uk/tag/alan-turing/

  46. Do you know what this is? Photo from http:/ /www.hoylen.com/photos/2009-west/06-computer-history/pic8.html

  47. The Story Nazi Germany encoded World War II messages using

    the Engima Alan Turing built a machine (with a lot of help) to decode the Enigma's messages
  48. It wasn't quite powerful enough! Photo from https:/ /en.wikipedia.org/wiki/Cryptanalysis_of_the_Enigma

  49. Too Many Combinations A typical message: WEUBYYNULLSEQSNULLNULL Nine letters: 26

    * 25 * 24 * 23 * 22 * 21 * 20 * 19 * 18 1,133,836,704,000 combinations!
  50. Linguistic Analysis to the Rescue! We were able to guess

    some words "nothing to report" "Heil Hitler" Turing's machine did the rest
  51. The Imitation Game A good (if sad) movie Covers this

    story better Has other great Turing tidbits Photo from https:/ /www.rottentomatoes.com/m/the_imitation_game/
  52. Temperature Monitoring What Programmers Do

  53. A Friend of Mine Photo from https:/ /comicvine.gamespot.com/forums/battles-7/albert-wesker-re-vs-neo-matrix-1607450/

  54. The Problem Server rooms need to stay cool Old buildings

    can have faulty generators Humans need to track temperature changes
  55. Photo from https:/ /www.acurite.com/8-5-thermometer-with-hygrometer-00339.html Photo from https:/ /www.visiononline.org/blog-article.cfm/The-Cameras-in-Your-Computer/11

  56. Managing an Outage What Programmers Do

  57. The Errors Start I was "on call" for an application

    Our monitoring system started reporting A LOT of errors I checked to see if the application could still function
  58. A Plug is Pulled I solicited a second opinion I

    took the application offline We started an investigation of what went wrong I made a report to my superiors
  59. A Fix is Uncovered Our programmers found the issue and

    the obvious fix It would take over 30 hours We had about 12
  60. We Get Creative The programmers came up with a partial

    fix that only needed a few hours We could finish repairs over three weeks
  61. Divide and Conquer One team went to work on the

    quick fix (no programming required) A junior team added a notice for our users Another team started on the longer repairs
  62. Skills Used Analysis, investigation, communication, math, estimation, problem solving, and

    planning Actual programming: Given to a junior Or not rushed
  63. A Lot (Maybe Most) of "Programming" Happens Outside Computers!

  64. Making Mazes Look Ma, no computers!

  65. None
  66. "Draw a 4 x 4 Grid." I should have tried

    this first!
  67. I Bet You are Better at This! I tried several

    ways to get her to draw a grid When I finally said "grid" "Daddy, I know what a grid is."
  68. The Main Instructions "Point to a square." "Let's do the

    bottom right one." "Flip a coin." "Heads. Erase the top wall." "Tails. Erase the left wall."
  69. The Special Rule I left her continue doing squares until

    she reached the edge. "Here's a new rule: don't erase outside walls."
  70. Finishing Touches "Erase the top left wall for a start."

    "Erase the bottom right wall for an exit."
  71. Finishing Touches "Erase the top left wall for a start."

    "Erase the bottom right wall for an exit."
  72. Finishing Touches "Erase the top left wall for a start."

    "Erase the bottom right wall for an exit."
  73. Finishing Touches "Erase the top left wall for a start."

    "Erase the bottom right wall for an exit."
  74. Notes It took around 10 minutes She wanted to solve

    it immediately
  75. Take Ten Break Time

  76. Programming Mazes

  77. https:/ /scratch.mit.edu/ Visit Scratch

  78. None
  79. Click "Create"

  80. None
  81. None
  82. Right-click the cat Click "delete"

  83. Click to add a new sprite

  84. Double-click the "Ball"

  85. None
  86. None
  87. Move your mouse in here Watch this X and Y

  88. Coordinates (X: -240, Y: 180) (X: 240, Y: -180) (X:

    0, Y: 0) (X: 240, Y: 180) (X: -240, Y: -180)
  89. A 10 X 10 Grid (X: -150, Y: 150) (X:

    150, Y: -150) (X: 150, Y: 150) (X: -150, Y: -150) 300 300
  90. None
  91. Click "Pen"

  92. Click "Control"

  93. None
  94. My Plan

  95. My Plan

  96. My Plan

  97. My Plan Draw the border

  98. My Plan Draw the border Draw the maze

  99. Drag a "go to" block into your program Click "Motion"

    Type -150 into "x" and 150 into "y"
  100. Click "Events" Snap "when [flag] clicked" above the "go to"

  101. Click the flag to run your program

  102. Snap "change x by" below "go to" Type 300 into

    the field Click "Motion"
  103. Click to run

  104. Click "Pen" Insert "pen down" between the motion blocks

  105. Click to run

  106. Click "Motion" Add "change y by" Type -270 into the

  107. None
  108. Click to run

  109. Run it again

  110. That's a "Bug!" Don't panic, investigate…

  111. None
  112. Click "Pen" Insert "clear" under "go to"

  113. Click to run

  114. Add "pen up"

  115. Click "Motion" Add "change y by" Type -30 into the

  116. Click to run

  117. The Hero's Journey

  118. Draw the bottom edge

  119. Draw the bottom edge Hints: • Put the pen down

    • Make a negative 
 x move
  120. Draw the bottom edge Hints: • Put the pen down

    • Make a negative 
 x move
  121. Draw the left edge

  122. Draw the left edge Hints: • Make a y move

    • Leave a gap
  123. Draw the left edge Hints: • Make a y move

    • Leave a gap
  124. Raise the pen and move right

  125. My Plan Draw the border Draw the maze

  126. My Plan Draw the border Draw the maze

  127. My Plan Draw the border Draw the maze

  128. My Plan Draw the border Draw the maze

  129. My Plan Draw the border Draw the maze

  130. Revised Plan Draw the maze Draw the top edge Draw

    the left edge Repeat both to make a grid Switch to drawing the top OR the left
  131. Drawing Steps

  132. Drawing Steps

  133. Drawing Steps

  134. Drawing Steps

  135. Drawing Steps

  136. Drawing Steps

  137. Draw top edge and return to the corner

  138. Draw left edge and return to the corner

  139. Draw left edge and return to the corner Hints: •

    Start drawing • Move down • Stop drawing • Move back
  140. Draw left edge and return to the corner Hints: •

    Start drawing • Move down • Stop drawing • Move back
  141. Move to the next square

  142. Loops: Do It Again and Again "This is the song

    that doesn't end Yes, it goes on and on my friend Some people started singing it not knowing what it was And they'll continue singing it forever just because…"
  143. Drag the last nine blocks aside

  144. Click "Control" Add a "repeat" block Type 9 into the

  145. Drag the drawing blocks back

  146. Click to run

  147. Move to the start of the next row

  148. Click to run

  149. Drag the row drawing code aside

  150. Click "Control" Add a "repeat" block Type 9 into the

  151. Drag the drawing blocks back

  152. Click to run

  153. Conditional Logic If the merry-go-round is full then Play on

    the monkey bars Else Play on the merry-go-round
  154. Our Decision If the coin flip is heads then Draw

    the left edge Else Draw the top edge
  155. Drag the edge drawing code aside

  156. Separate: • The top edge • The left edge •

    The move
  157. Add an "if… then… else…" block

  158. Drag the top edge code under "if"

  159. Drag the left edge code under "else"

  160. Drag the move code after the "if" block

  161. Computers Can't Flip Coins! They can generate a random number

    between 1 and 2 Call 1 heads Call 2 tails
  162. Click "Operators" Add an "=" test

  163. Add "pick random"

  164. Type 2 into these fields

  165. Click to run

  166. Click "looks" Add a "hide" at the bottom

  167. Add a "show" at the top

  168. Click to run

  169. Make Mazes! Keep clicking run!!!

  170. Take Ten Break Time

  171. Scratch Exercise Refinements

  172. You Know Your Kids Better Than I Do!

  173. Draw Something Else Using just "Motion" and "Pen" blocks is

    the simplest option Add loops ("repeat") for a step up Add conditional logic ("if") for another step up
  174. Or Let the Kids Free Draw After a Quick Primer

  175. You Can Learn From Scratch Projects!

  176. Peek Inside an Animation https:/ /scratch.mit.edu/projects/164565708/

  177. Peek Inside an Animation https:/ /scratch.mit.edu/projects/164565708/

  178. Peek Inside an Animation https:/ /scratch.mit.edu/projects/164565708/

  179. Choose Your Own Adventure https:/ /scratch.mit.edu/projects/87677805/

  180. Play Games https:/ /scratch.mit.edu/projects/16215228/

  181. Try Other Computer Exercises

  182. http:/ /www.calormen.com/jslogo/ More Drawing But With Language

  183. education.minecraft.net A game of building and programming!

  184. code.org Fun games for kids Material for all ages On

    and off the computer Great teacher support Free workshops Prepared curriculum (with standards)
  185. Other Coding Content

  186. Sneak in Bits of Our History

  187. Social Studies Curriculum First Grade: Content Standard 2: The student

    will describe the characteristics of the American economic system 3. Summarize how historic inventors and entrepreneurs contributed to the prosperity of the nation including Samuel F. B. Morse, John Deere, Alexander Graham Bell, Orville and Wilbur Wright, and Thomas Edison. (CCRIT 2)
  188. None
  189. Rear Admiral Grace Hopper She invented the first "compiler" She

    taught the first modern programmers Congress promoted her in H.J.Res. 341 And SO much more! Photo from https:/ /en.wikipedia.org/wiki/Grace_Hopper
  190. Dorothy Vaughan What did early "computers" look like? She went

    from computer to manager to expert FORTRAN programmer Photo from https:/ /www.nasa.gov/content/dorothy-vaughan-biography
  191. Hidden Figures Another great movie It covers the transition from

    humans to machines And a lot more! Photo from http:/ /www.imdb.com/title/tt4846340/
  192. Ada Lovelace The first programmer Invented the computer program in

    the 1840's Didn't have a computer! Photo from https:/ /en.wikipedia.org/wiki/Ada_Lovelace
  193. Use Non-Computer Material

  194. Robot Turtles Great for any age Scales up with age

    Designed by a programmer for teaching kids programming concepts Photo from https:/ /www.thegrommet.com/robot-turtles-programming-board-game
  195. Bee-Bot www.bee-bot.us Program moves Then run it Good for early

    ages Education support Photo from http:/ /intermit.co.uk/index.php?route=product/product&product_id=285
  196. Binary Arithmetic http:/ /www.garlikov.com/Soc_Meth.html

  197. education.lego.com Mindstorms are well known There's more! WeDo for $175

    includes curriculum
  198. Junior Botball Challenge juniorbotballchallenge. org Build and program robots Has

    curriculum and workshops $500 for kit + $75 yearly registration Photo from https:/ /wn.com/broken_arrow_public_schools_junior_botball_challenge_feb_2015
  199. And Now a Word From Our Sponsor Use Your PTO

  200. Wrapping Up

  201. james@graysoftinc.com I'll help if I can!

  202. Thank You! You are my heroes. My daughter's too.

  203. Ask Me Anything!