Teach Kids Coding – Turtle, Python, IDLE

Advantage – Immediate Feedback

As the student repeatedly presses the Debug Control’s “Over” button, she will be able to see the Turtle execute the commands she has given it.

Content

  • Summary
  • Video Link
  • Technique Steps
  • Code

Summary

This post will demonstrate a technique for teaching kids (or anyone) coding, using Turtle Graphics, Python, Python IDLE, Python IDLE’s Debug Control and Statement Execution Stepping.

This technique should work for Windows, Mac, and Linux (e.g. Raspberry Pi).

Video Link

Here is a link to a YouTube Video for this post.

Technique Steps

  1. Open your File Manager
    • “File Explorer” in Windows
    • “Finder” in Mac
    • “File Manager” in Raspberry Pi
  2. Navigate to the folder [CodeFolderPath] in which you have your code to be used. Most File Managers let you copy the path to a command line.
  3. Open a Command Line Window
    • “Command Prompt” in Windows
    • “Terminal” in Mac and Raspberry Pi
  4. At the Command Line, change directory to [CodeFolderPath], whatever that is.
    • example:
    • $ cd ~/pythonPjs/MasonPjs
  5. At the Command Line, run IDLE.
    • $ idle
    • This will bring up the IDLE Shell Window.
  6. In the IDLE Shell Window’s menu bar, click File Open and open the appropriate code file.
    • This will bring up the IDLE Code Window.
  7. In the IDLE Shell Window’s menu bar, click Debug/Debugger.
    • This will bring up the IDLE Debug Control Window.
  8. In the Debug Control Window:
    • UnTick the Stack Checkbox.
    • Tick the Source Checkbox.
  9. Minimize the IDLE Shell, File Manager and Command Line Windows. We want the student to focus on the important windows.
    • IDLE Debug Control
    • IDLE Code
    • Turtle Graphics
  10. Position the Debug Control & IDLE Code windows so you’ll be able to see them AND the Turtle Graphics Window SIMULTANEOUSLY. I plan on Turtle Graphics Window to be on the RIGHT of the screen. So I put:
    • Debug Contol – Top Left of the screen.
    • IDLE Code – Bottom Left of the screen. I make it about the same WIDTH as the Debug Control Window.
  11. In the IDLE Code window click on File/Run/Run Module
    • RESIZE it to be above the IDLE Code Window.
    • ALSO Minimize the IDLE Shell Window that (annoyingly 🙂 ) popped up again.
  12. Click on Debug Control Window’s “Over” button until the Turtle Graphics window appears. NOTICE with each click of “Over”.
    • NOTICE with each click, A NEW LINE in the Code Window is highlighted.
    • NOTICE when forward() or left() commands are executed, the Turtle Graphics Window responds with the appropriate action.
    • NOTICE after the line A1pos = pos(); A2abs_pos = abs(pos()) has been executed, the Debug Control Window contains 2 lines under the “Locals”
    • A1pos – (200.00,0.00) or something like this value
    • A2abs_pos – 200.00 or something like this value
      • Keeping track of the current values of these items.
    • NOTICE that after we execute the if abs(pos()) < 1: statement, we loop back to just under the while True: statement.
  13. Click on "Over" for about 30 more times. NOTICE the Turtle Graphics window cooking along, OBEYING the commands in the Code Window. 🙂
  14. Right Click on the break Line & select "Set Breakpoint".
    • NOTICE the yellow background.
  15. In the Debug Control Window Click on the "Go" button. This will run until just before we execute the breakpoint line.
    • WATCH the Trutle Graphics window do its thing.
  16. Click "Over".
    • NOTICE we exit the while True: loop.
  17. Click "Over".
    • NOTICE the end_fill() statement colors the star yellow.
  18. Click "Over" one last time.
    • NOTICE we are DONE. 🙂

Code

Here is the code we used in the video.

from turtle import *
setup (width=500, height=500, startx=500)
color('red', 'yellow')
begin_fill()
while True:
    forward(200)
    left(170)
    A1pos = pos(); A2abs_pos = abs(pos()) 
    if abs(pos()) < 1:
        break
end_fill()
done()
Advertisements