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 full-size slide

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

    View full-size slide

  3. Introductions

    View full-size slide

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

    View full-size slide

  5. But I'll go first!

    View full-size slide

  6. James Edward
    Gray II
    My Name

    View full-size 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 full-size 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 full-size slide

  9. I Love Games
    My Fun Fact

    View full-size 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 full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. Please Stop Me
    With Questions!

    View full-size slide

  14. What is
    Programming?

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. Computers Are
    Very Dumb
    But wicked fast!

    View full-size slide

  19. The PB&J
    Challenge

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. This is my job!

    View full-size slide

  23. Why Program?

    View full-size slide

  24. Turn ALL YOUR KIDS
    into Programmers!!!

    View full-size slide

  25. Turn ALL YOUR KIDS
    into Programmers!!!

    View full-size slide

  26. 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 full-size slide

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

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. Learning to
    Program

    View full-size slide

  38. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  41. 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 full-size slide

  42. Codebreaking
    What Programmers Do

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. Temperature
    Monitoring
    What Programmers Do

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 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 full-size slide

  54. Managing
    an Outage
    What Programmers Do

    View full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

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

    View full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  62. Making Mazes
    Look Ma, no computers!

    View full-size slide

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

    View full-size slide

  64. 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 full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. Take Ten
    Break Time

    View full-size slide

  73. Programming
    Mazes

    View full-size slide

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

    View full-size slide

  75. Click "Create"

    View full-size slide

  76. Right-click
    the cat
    Click "delete"

    View full-size slide

  77. Click to add
    a new sprite

    View full-size slide

  78. Double-click the "Ball"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. Click
    "Control"

    View full-size slide

  83. My Plan
    Draw the border

    View full-size slide

  84. My Plan
    Draw the border
    Draw the maze

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. Click the flag
    to run your
    program

    View full-size slide

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

    View full-size slide

  89. Click to run

    View full-size slide

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

    View full-size slide

  91. Click to run

    View full-size slide

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

    View full-size slide

  93. Click to run

    View full-size slide

  94. Run it again

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  97. Click to run

    View full-size slide

  98. Add "pen up"

    View full-size slide

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

    View full-size slide

  100. Click to run

    View full-size slide

  101. The Hero's Journey

    View full-size slide

  102. Draw the
    bottom edge

    View full-size slide

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

    x move

    View full-size slide

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

    x move

    View full-size slide

  105. Draw the
    left edge

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  108. Raise the pen
    and move right

    View full-size slide

  109. My Plan
    Draw the border
    Draw the maze

    View full-size slide

  110. My Plan
    Draw the border
    Draw the maze

    View full-size slide

  111. My Plan
    Draw the border
    Draw the maze

    View full-size slide

  112. My Plan
    Draw the border
    Draw the maze

    View full-size slide

  113. My Plan
    Draw the border
    Draw the maze

    View full-size slide

  114. 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 full-size slide

  115. Drawing Steps

    View full-size slide

  116. Drawing Steps

    View full-size slide

  117. Drawing Steps

    View full-size slide

  118. Drawing Steps

    View full-size slide

  119. Drawing Steps

    View full-size slide

  120. Drawing Steps

    View full-size slide

  121. Draw top edge
    and return to
    the corner

    View full-size slide

  122. Draw left edge
    and return to
    the corner

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  125. Move to the
    next square

    View full-size slide

  126. 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 full-size slide

  127. Drag the last
    nine blocks aside

    View full-size slide

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

    View full-size slide

  129. Drag the drawing blocks back

    View full-size slide

  130. Click to run

    View full-size slide

  131. Move to the start
    of the next row

    View full-size slide

  132. Click to run

    View full-size slide

  133. Drag the row
    drawing code
    aside

    View full-size slide

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

    View full-size slide

  135. Drag the drawing blocks back

    View full-size slide

  136. Click to run

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  139. Drag the edge
    drawing code
    aside

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  142. Drag the top edge code under "if"

    View full-size slide

  143. Drag the left edge code under "else"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  147. Add "pick random"

    View full-size slide

  148. Type 2 into these fields

    View full-size slide

  149. Click to run

    View full-size slide

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

    View full-size slide

  151. Add a "show"
    at the top

    View full-size slide

  152. Click to run

    View full-size slide

  153. Make Mazes!
    Keep clicking run!!!

    View full-size slide

  154. Take Ten
    Break Time

    View full-size slide

  155. Scratch Exercise
    Refinements

    View full-size slide

  156. You Know Your Kids
    Better Than I Do!

    View full-size slide

  157. 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 full-size slide

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

    View full-size slide

  159. You Can Learn From
    Scratch Projects!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  165. Try Other
    Computer Exercises

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  168. 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 full-size slide

  169. Other Coding
    Content

    View full-size slide

  170. Sneak in Bits
    of Our History

    View full-size slide

  171. 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 full-size slide

  172. 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 full-size slide

  173. 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 full-size slide

  174. 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 full-size slide

  175. 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 full-size slide

  176. Use Non-Computer
    Material

    View full-size slide

  177. 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 full-size slide

  178. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  181. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  184. Ask Me Anything!

    View full-size slide