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

Coding in the Classroom

jeg2
June 14, 2017

Coding in the Classroom

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

jeg2

June 14, 2017
Tweet

More Decks by jeg2

Other Decks in Education

Transcript

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

    View Slide

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

    View Slide

  3. Introductions

    View Slide

  4. I'm Going to Ask
    Name
    Role in schools
    Your hopes for this training
    A fun fact about yourself

    View Slide

  5. But I'll go first!

    View Slide

  6. James Edward
    Gray II
    My Name

    View Slide

  7. My Role: Dad
    My daughter goes
    to John Ross
    I've shown the kids
    there tech stuff
    I like supporting
    the schools

    View Slide

  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!

    View Slide

  9. I Love Games
    My Fun Fact

    View Slide

  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

    View Slide

  11. Your Turn
    Name
    Role in schools
    Your hopes for this training
    A fun fact about yourself

    View Slide

  12. Thank You!

    View Slide

  13. Our Plan

    View Slide

  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

    View Slide

  15. Please Stop Me
    With Questions!

    View Slide

  16. What is
    Programming?

    View Slide

  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/

    View Slide

  18. I download things for
    my mother-in-law's iPad.
    All Programmer's Do

    View Slide

  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

    View Slide

  20. Computers Are
    Very Dumb
    But wicked fast!

    View Slide

  21. The PB&J
    Challenge

    View Slide

  22. Kid's Task
    Write out or dictate live instructions
    Explain how to make a peanut butter
    & jelly sandwich

    View Slide

  23. Follow Their Instructions
    Extremely Literally
    Photo from https:/
    /www.youtube.com/watch?v=cDA3_5982h8

    View Slide

  24. This is my job!

    View Slide

  25. Why Program?

    View Slide

  26. Turn ALL YOUR KIDS
    into Programmers!!!

    View Slide

  27. Turn ALL YOUR KIDS
    into Programmers!!!

    View Slide

  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

    View Slide

  29. Jobs
    We currently graduate around a
    third of the tech industry's demand
    These are good jobs
    High pay
    Strong benefits

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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"

    View Slide

  39. Learning to
    Program

    View Slide

  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

    View Slide

  41. I "Know" Around 15
    "Programming Languages"
    It depends on how you define
    these terms.

    View Slide

  42. Programming Languages
    are Small
    0
    450
    900
    1350
    1800
    Ruby
    Japanese
    (Kanji only)

    View Slide

  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

    View Slide

  44. Codebreaking
    What Programmers Do

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  48. It wasn't quite
    powerful enough!
    Photo from https:/
    /en.wikipedia.org/wiki/Cryptanalysis_of_the_Enigma

    View Slide

  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!

    View Slide

  50. Linguistic Analysis
    to the Rescue!
    We were able to guess some words
    "nothing to report"
    "Heil Hitler"
    Turing's machine did the rest

    View Slide

  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/

    View Slide

  52. Temperature
    Monitoring
    What Programmers Do

    View Slide

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

    View Slide

  54. The Problem
    Server rooms need to stay cool
    Old buildings can have faulty
    generators
    Humans need to track temperature
    changes

    View Slide

  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

    View Slide

  56. Managing
    an Outage
    What Programmers Do

    View Slide

  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

    View Slide

  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

    View Slide

  59. A Fix is Uncovered
    Our programmers found the issue
    and the obvious fix
    It would take over 30 hours
    We had about 12

    View Slide

  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

    View Slide

  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

    View Slide

  62. Skills Used
    Analysis, investigation,
    communication, math, estimation,
    problem solving, and planning
    Actual programming:
    Given to a junior
    Or not rushed

    View Slide

  63. A Lot (Maybe Most) of
    "Programming" Happens
    Outside Computers!

    View Slide

  64. Making Mazes
    Look Ma, no computers!

    View Slide

  65. View Slide

  66. "Draw a
    4 x 4 Grid."
    I should have tried
    this first!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. Notes
    It took around 10 minutes
    She wanted to solve it immediately

    View Slide

  75. Take Ten
    Break Time

    View Slide

  76. Programming
    Mazes

    View Slide

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

    View Slide

  78. View Slide

  79. Click "Create"

    View Slide

  80. View Slide

  81. View Slide

  82. Right-click
    the cat
    Click "delete"

    View Slide

  83. Click to add
    a new sprite

    View Slide

  84. Double-click the "Ball"

    View Slide

  85. View Slide

  86. View Slide

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

    View Slide

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

    View Slide

  89. A 10 X 10 Grid
    (X: -150, Y: 150)
    (X: 150, Y: -150)
    (X: 150, Y: 150)
    (X: -150, Y: -150)
    300
    300

    View Slide

  90. View Slide

  91. Click "Pen"

    View Slide

  92. Click
    "Control"

    View Slide

  93. View Slide

  94. My Plan

    View Slide

  95. My Plan

    View Slide

  96. My Plan

    View Slide

  97. My Plan
    Draw the border

    View Slide

  98. My Plan
    Draw the border
    Draw the maze

    View Slide

  99. Drag a "go to"
    block into your
    program
    Click "Motion"
    Type -150 into "x"
    and 150 into "y"

    View Slide

  100. Click "Events"
    Snap "when [flag] clicked"
    above the "go to" block

    View Slide

  101. Click the flag
    to run your
    program

    View Slide

  102. Snap "change x by"
    below "go to"
    Type 300 into
    the field
    Click "Motion"

    View Slide

  103. Click to run

    View Slide

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

    View Slide

  105. Click to run

    View Slide

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

    View Slide

  107. View Slide

  108. Click to run

    View Slide

  109. Run it again

    View Slide

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

    View Slide

  111. View Slide

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

    View Slide

  113. Click to run

    View Slide

  114. Add "pen up"

    View Slide

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

    View Slide

  116. Click to run

    View Slide

  117. The Hero's Journey

    View Slide

  118. Draw the
    bottom edge

    View Slide

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

    x move

    View Slide

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

    x move

    View Slide

  121. Draw the
    left edge

    View Slide

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

    View Slide

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

    View Slide

  124. Raise the pen
    and move right

    View Slide

  125. My Plan
    Draw the border
    Draw the maze

    View Slide

  126. My Plan
    Draw the border
    Draw the maze

    View Slide

  127. My Plan
    Draw the border
    Draw the maze

    View Slide

  128. My Plan
    Draw the border
    Draw the maze

    View Slide

  129. My Plan
    Draw the border
    Draw the maze

    View Slide

  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

    View Slide

  131. Drawing Steps

    View Slide

  132. Drawing Steps

    View Slide

  133. Drawing Steps

    View Slide

  134. Drawing Steps

    View Slide

  135. Drawing Steps

    View Slide

  136. Drawing Steps

    View Slide

  137. Draw top edge
    and return to
    the corner

    View Slide

  138. Draw left edge
    and return to
    the corner

    View Slide

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

    View Slide

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

    View Slide

  141. Move to the
    next square

    View Slide

  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…"

    View Slide

  143. Drag the last
    nine blocks aside

    View Slide

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

    View Slide

  145. Drag the drawing blocks back

    View Slide

  146. Click to run

    View Slide

  147. Move to the start
    of the next row

    View Slide

  148. Click to run

    View Slide

  149. Drag the row
    drawing code
    aside

    View Slide

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

    View Slide

  151. Drag the drawing blocks back

    View Slide

  152. Click to run

    View Slide

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

    View Slide

  154. Our Decision
    If the coin flip is heads then
    Draw the left edge
    Else
    Draw the top edge

    View Slide

  155. Drag the edge
    drawing code
    aside

    View Slide

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

    View Slide

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

    View Slide

  158. Drag the top edge code under "if"

    View Slide

  159. Drag the left edge code under "else"

    View Slide

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

    View Slide

  161. Computers Can't
    Flip Coins!
    They can generate a random number
    between 1 and 2
    Call 1 heads
    Call 2 tails

    View Slide

  162. Click "Operators"
    Add an "=" test

    View Slide

  163. Add "pick random"

    View Slide

  164. Type 2 into these fields

    View Slide

  165. Click to run

    View Slide

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

    View Slide

  167. Add a "show"
    at the top

    View Slide

  168. Click to run

    View Slide

  169. Make Mazes!
    Keep clicking run!!!

    View Slide

  170. Take Ten
    Break Time

    View Slide

  171. Scratch Exercise
    Refinements

    View Slide

  172. You Know Your Kids
    Better Than I Do!

    View Slide

  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

    View Slide

  174. Or Let the Kids
    Free Draw
    After a Quick Primer

    View Slide

  175. You Can Learn From
    Scratch Projects!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  181. Try Other
    Computer Exercises

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  185. Other Coding
    Content

    View Slide

  186. Sneak in Bits
    of Our History

    View Slide

  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)

    View Slide

  188. View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  193. Use Non-Computer
    Material

    View Slide

  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

    View Slide

  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

    View Slide

  196. Binary Arithmetic
    http:/
    /www.garlikov.com/Soc_Meth.html

    View Slide

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

    View Slide

  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

    View Slide

  199. And Now a Word
    From Our Sponsor
    Use Your PTO

    View Slide

  200. Wrapping Up

    View Slide

  201. [email protected]
    I'll help if I can!

    View Slide

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

    View Slide

  203. Ask Me Anything!

    View Slide