Select Lesson

Turtle graphics in Python

60 mins

Overview

What are turtle graphics and other modules

5 mins

Reference list

5 mins

Sequences

5 mins

Coordinates

5 mins

Drawing graphics back to back activity

20 mins

Loops

5 mins

Lists

5 mins

Intro Turtle Graphics - Lesson 1. Turtle Challenge

15 mins

Lesson 5. Turtle graphics

30 mins

Lesson 6. Turtle drawing basics

15 mins

Moving

5 mins

Turning

5 mins

Drawing/Coloring

5 mins

Circles

5 mins

Movement—absolute and relative (optional)

5 mins

Turtle Graphics

Turtle graphics in Python

60 mins

Overview

What are turtle graphics and other modules

5 mins

Reference list

5 mins

Sequences

5 mins

Coordinates

5 mins

Drawing graphics back to back activity

20 mins

Loops

5 mins

Lists

5 mins

Intro Turtle Graphics - Lesson 1. Turtle Challenge

15 mins

Lesson 5. Turtle graphics

30 mins

Lesson 6. Turtle drawing basics

15 mins

Moving

5 mins

Turning

5 mins

Drawing/Coloring

5 mins

Circles

5 mins

Movement—absolute and relative (optional)

5 mins

60 mins

Turtle graphics in Python

Turtle graphics are a fun intro to Python. We import a robotic turtle and then use commands move the turtle. As the turtle moves, it leaves a trail behind it. We can make some pretty cool shapes using this.

vocab

Guide

Overview

This lesson plan covers all you need to know about drawing with Pythonic Turtles. Firstly, it takes you through concepts and activities then it lists the Turtle lessons found on Code Avengers. There is some more in depth information listed as extension concepts. This is an in-depth break down of the content to enhance learning and help teachers unfamiliar with these concepts to be able to teach them.

Key to lesson icons

There are 3 types of lesson segments

Concepts - are notes to expand on learning in lessons

Activities - are off-line and online games and activities to help your learning.

CA Lessons - are online lessons, projects and quizzes created by Code Avengers.

Extension: - These are additional segments for fast learners (or homework)

Concepts

What are turtle graphics and other modules

5 mins

In the 1960s the code for Turtle graphics was created to help teach sequences and coordinates.
The code was originally in the Logo programming language developed by Wally Feurzig and Seymour Papert in 1966 and is now a common teaching tool in Python.
The turtles module can be easily imported from the Python library. import turtle variable = turtle.Turtle()

How to import the `turtle` module

import turtle  
tia = turtle.Turtle()  

tia.forward(150)  
tia.right(90)

The code above will:

access the turtle module with import,
- create the turtle object and rename it Tia.
  - then draw a line with tia.forward(150),
    - rotate Tia in place 90 degrees clockwise, tia.right(90).

What is a module?

A module is a file containing Python code. Various modules do different things and they can be easily accessed by importing them into your program. Once imported you can call the functions in the modules and run them.
Modules store mini programs and information that you can access and use for your own programming.

Python has a library→ of standard modules.

Some cool beginner ones are:
random, which will generate random numbers
key word, this tests whether a string is a keyword in Python.
math has a lot of mathematical functions you can use (sin() etc.)
datetime will access basic date and time types.

These are some more modules →, for people with a bit more experience in Python.

Concepts

Reference list

5 mins

Here is a quick list of the common turtle functions. You will find more information on each section below.

Move (relatively*)

.backward(pixels) 
.forward(pixels)
.right(angle)
.left (angle)

Move (absolutely*)

.goto(x,y)
.setHeading(angle)
#0 = face right, 90 = face upwards, 180 = face left, 270 = face downwards

Drawing

.penup()
.pendown()
.pensize(pixels)

.pencolor("name") or (rgb(255,255,255) or (#FFFFFF)
.fillcolor("name") or (rgb(255,255,255) or (#FFFFFF)
.color("name") or (rgb(255,255,255) or (#FFFFFF)

.begin_fill()
.end_fill()

Circles

.circle(radius)
.circle(radius, angle)
#Circles always draw to the left of the way the turtle is facing.

Concepts

Sequences

5 mins

A sequence is just a fancy name for a list that must be followed in order.
The computer needs to be told what to do in precise order.
Every step needs to be carefully written and in the proper order.

The most common example of sequence is writing a recipe.
In a recipe you complete each instruction before moving onto the next one and changing the order may change the results.

For example, you will have a very different cake if you added egg to the cake after baking it, instead of before baking it.

We can see the same thing in the code examples below. tia.forward(10) tia.right(90) tia.forward(10) tia.right(90) tia.forward(10) tia.right(90)

The code above will create a square.
The code below will create a long line. tia.forward(10) tia.right(90) tia.right(90) tia.forward(10) tia.forward(10) tia.right(90)

Break down the code

Take this forward function that moves the turtle and draws a line: tia.forward(10) tia.right(90)

We need to say what object we want to perform the action, here it is tia,
What is the object doing (moving forward 1 pixel).
We can repeat the order by adding a number in the brackets (10 pixels).
Because the right() function is written beneath forward() it will happen after the first bit of code has run.
This time the number in the brackets changes the angle of the turtle.

Note that each function() will need different information in the brackets: forward() needs pixels, right() needs an angle and goto() needs coordinates.

Concepts

Coordinates

5 mins

When the code is run it appears in a little drawing box we call a canvas. That canvas is made up of 400 pixels by 400 pixels.
(That is our size of canvas, canvases can be any size you set them)

To place your turtle at a specific place on the screen you simply need to write the coordinates- we have a helpful grid on ours to help with placement.

Coordinates

Coordinates are pairs of numbers, like (3,4). They help you find places on a grid.
The first number tells you the horizontal position of a point, it tells to you go across the x axis until you hit the number 3.
The second number tells you the vertical position of a point, it tells to you go down the y axis until you hit the number 4.

Coordinates are used in both mathematics and computer science, (as well as in geography, archeology, criminology, the army, and many other areas). But they are used in different ways.

Math uses an axis with 0, 0 in the middle, and counts across and up. Up from 0 are positive numbers on the y axis and when you count down from 0 you have negative numbers. The same is true for left and right. Left of 0 are negative numbers and right of 0 are positive numbers. The coordinates (0,0) or (3,4) give the location of a point. (shown in the image as the points where 2 lines cross)

Computer grids model a computer screen, which is made up of thousands of little squares called pixels.
You can't have negative pixels, so 0,0 starts in the top left corner of your screen.
When given computer coordinates you count across the x axis from left to right, just like reading a book and then down the y axis. The coordinates (0,0) or (3,4) point to a specific pixel. (shown in the image above as a square)

Imagine the above example is very [[zoomed in- pixels are tiny]]

The CA course Food Frenzy→ uses a grid to place game objects. You can change the numbers in the coordinates to change the location of the object.

We usually label the horizontal axis x and the vertical axis y but it can really be called anything, those are just the traditional labels

Activity

Drawing graphics back to back activity

20 mins

This is a drawing activity on paper that is done in pairs. Learn about coordinates, grids, and being how those techniques help you to be precise. This activity is suitable for 8 year olds and up.

Objective

This pair-activity helps students to learn to give and follow precise instructions in order to draw simple graphics and demonstrate the precision of coordinates.

Background

All complex computer graphics start with instructing the computer to draw basic shapes at precise locations.

Coordinates

Learners should use coordinates to help them explain how to draw the pictures.
Coordinates are pairs of numbers, like (3,4). They help you find places on a grid.
The first number tells you the horizontal position of a point, it tells to you go across the x axis until you hit the number 3.
The second number tells you the vertical position of a point, it tells to you go down the y axis until you hit the number 4.
Below you can see the position of the coordinates (3,4).

Preparation

Print off enough worksheets for each pair to have a copy.
You can print 2 A4 pages or, to save paper, you can print of 1 A4 page that you will need to cut in half.

image of the worksheet — Drawing Graphics worksheet

Instructions

Intro: Freehand Drawing (optional, extra 5 min)

All learners, either on a blank piece of paper (with no grids) or online on this blank drawing canvas at /javascript/94, will try to draw a simple picture that the instructor will make up and call out.

Example dialog:

In the top left of the page draw a circle,
In the middle of your page draw two squares stacked on top of each other.
Add a bigger triangle on top.
Add a small circle inside the top square, in the top right corner.
Draw a long rectangle inside the bottom square, attached to the bottom.
Add two lines to the bottom of the bottom square, going off the page.

The instructions create a very simple house
Get learners to compare their results- are they identical?
Is everything the same size and in the same place?
If not discuss why not.

Activity:

Players will be in pairs, sitting back to back.
Decide who is Player 1 and who is Player 2.
Explain that the players are drawing images from instructions and these images have to be accurate.

There will be two rounds.

Round 1:
Player 1 will call instructions and Player 2 will draw.

Round 2
Then, Player 2 will call instructions and Player 1 will draw.

Give Player 1 the Player 1 page and Player 2 the Player 2 page. They must not see each others page.
To start, those with "Instruct 1" in the first grid are Player 1 and they will give clear instructions to Player 2 to draw image one.
For example;
- "Player 2, in the DRAW 1 grid, draw shape A in the square (4, 0)."
- "Draw shape F in the bottom right corner of (1, 3)."
Once the pair completes the 1st shape, they can swap roles. (Don't look yet!)
Player 2 describing "Instruct 2" and Player 1 drawing in "Draw 2".
Compare drawings.
Ask questions about what happened and what worked/didn't work.

Was it more accurate than the house drawing in the intro?

Versions:

Easy: Player 1 can tell Player 2 what the picture is of. You could also print a few copies of the bottom row of shapes and students can paste them rather than draw them.
Medium: Students can only give instructions, not say what the image is.
Hard: Cut off the shape directory at the bottom of the page and players must describe the shapes along with their sizes and orientations.

Answers

Find the answers here

Concepts

Loops

5 mins

There are 3 basic ways that computers read code.
The first is in sequence, where the code is read line after line in order (you can read more on that above).
The second is called conditional, where code could be run or ignored depending on true/false statements.
And the third is sometimes called iterative, which is a fancy word for repeating code.

Loop functions fall into the third category. They are really fun because they allow you to draw complicated images with only a few lines of code.
There are two kinds of loops, for loops and while loops.

Turtle graphics can use for loops to make interesting patterns or automatic color changes..

For loops look like this:
for i in range(4): print('Hello')
This loop would repeat 4 times because of the range(4) part.

To use loops with turtle graphics, you have to think carefully about which steps need to be repeated.
These steps go inside the loop where it says print('Hello') and they are indented to show they are inside the loop.

To draw a regular shape, inside the loop you will need the line of code that moves your turtle forward, and the line that turns her the correct angle.

Loops in Python will NOT work if the indenting it incorrect. This is different from most languages, like JavaScript, where indenting is helpful to make everything easy to read but in not needed

Drawing shapes with loops

The big part of drawing shapes with loops is to work work out what is the repeating angle.
To work out angles on regular shape is pretty easy, it only uses a little bit of math.
A whole complete shape has 360 degrees, that means that the angles inside the shape have to equal 360 degrees.

So simply count the corners of your shape and divide 360 by that number:

Shape	Corners (n)	Equation	Degrees (d)	`for i in range(n): tom.forward(100) tom.right(d)`
Triangle	3	360/3 =	120°	`for i in range(3): tom.forward(100) tom.right(120)`
Rectangle	4	360/4 =	90°	`for i in range(4): tom.forward(100) tom.right(90)`
Pentagon	5	360/5 =	72°	`for i in range(5): tom.forward(100) tom.right(72)`
Hexagon	6	360/3 =	60°	`for i in range(6): tom.forward(100) tom.right(60)`
Dodecahedron	12	360/12 =	30°	`for i in range(12): tom.forward(100) tom.right(30)`

You don't have to use i, it is not a keyword. i is usually used to stand for the work integer, which means 'whole number'. It is common because for loops are often used as counters.

for car in range(4): Is an odd but perfectly fine thing to write.

Concepts

Lists

5 mins

We can use a number to run a loop, as we have seen when using for i in range(4):. Another way we can run a for loop is using a list.
A list is a set of values stored together.
The list, square brackets with commas, just replaces the range(). for i in [0, 1, 2, 3]: tia.forward(50) tia.right(90)

Will also run the code 4 times because there are 4 numbers inside the list.
But doing the same thing is not interesting.
What is really cool is that you can put different numbers inside the list and each one will be run once.

Lets make a crazy line by changing the angles of our code each time the loop is run.
We have to simply add the list of angles and put the variable i inside the function where the angles are normally written.

for i in [30, 40, 50, 60]: tia.forward(50) tia.right(i) tia.forward(20) tia.left(90)

Set the list in a variable

Variables are useful to use for lists because they make the code easier to read and it is easier to make changes if you use the list multiple times. lengths = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130] for length in lengths: tia.forward(length) tia.right(90)

In this example we have a list of lengths. To create the loop we write: for length in lengths:

This lets us use each value in the list by typing the word length wherever we want to use it. The loop repeats once for each value making this cool shape:

Spiral shape

Remember: that length could be any word like i, car or tree.

It is better to name things based on what they will do so naming the variable with the list of all the lengths lengths is good practice. And because i can be any word it makes sense to change it to length

Change pensizes

You have to use penup() and pendown() to reset the pensize pensizes = [5, 10, 15, 20, 25, 30, 25, 20, 15, 10, 5] for pen in pensizes: tia.penup() tia.pensize(pen) tia.pendown() tia.forward(30)

Change colors

# Create a list of colors
colors = ["red", "blue", "gold", "green"]

# Use a loop to draw a square with one side each color
for color in colors:
  tia.color(color)
  tia.forward(320)
  tia.right(90)

Combine pensizes and color'

# Create a list of colors
colors = ["red", "blue", "gold", "green"]
pensizes= [5, 10, 15, 10, 5]
# Use a loop to draw a square with one side each color

for i in range(4):
  for pensize in pensizes:
    tia.penup()
    tia.pensize(pensize)
    tia.pendown()
    for color in colors:
      tia.color(color)
      tia.forward(17)
  tia.right(90)

Repeating colors getting bigger and smaller

Python 1 Project

Intro Turtle Graphics - Lesson 1. Turtle Challenge

Start 15 mins

Python is an engaging and simple language to learn. Learn about using modules, functions, loops, and lists, all while creating fun images with the help of your turtle buddies. Geometry has never been so much fun!

Lesson Outline

task 0: Turtle Challenge

task 1: Introduction to Python Turtles

task 2: Changing the style of the lines

task 3: Moving to an exact position

task 4: Filling shapes with colors

task 5: Draw the flag of Mali

task 6: Using loops to repeat code

task 7: Draw a Rubik's cube

task 8: Using a list to run a loop

task 9: Drawing circles

task 10: Drawing semicircles

This is our easy simple beginners project that lets you have fun and get quickly into Pythonic Turtles.

Python Intro Lesson

Lesson 5. Turtle graphics

Start 30 mins

Use a range of Python skills such as input, output, variables, if statements, turtles and loops to build a basic program.

Lesson Outline

task 0: Turtle graphics

task 1: Draw with Tia the Turtle

task 2: Move and turn Tia

task 3: Change the color and size

task 4: Draw some different shapes

task 5: Filling shapes with colors

This is a short intro lesson on Turtles that is part of a wider introduction to Python

Python 1 Lesson

Lesson 6. Turtle drawing basics

Start 15 mins

Start learning to code with Python in this entertaining and informative course. Focus on programming essentials like variables, if statements, Booleans and loops. Create text-based apps and play with turtles to learn how to code graphics!

Lesson Outline

task 1: Meet Tia the Turtle

task 2: Move and turn Tia

task 3: Change the color and size

task 4: Draw some different shapes

task 5: Filling shapes with colors

Our Python one course teachers the important first steps of coding and breaks it up with this enjoyable graphic module.

Extension: Concepts

Moving

5 mins

A turtle drawing a spiral

Moving your turtle is easy. You can either tell your turtle to go forwards or backwards from its current position or tell it to go to a different place on the canvas.

Forward and backwards (relative*)

We can tell the turtle to move forward or backwards one pixel from it's current location with turtle.forward() and turtle.backwards()

Note: it will move forwards in the direction it is facing.
Now one pixel is not a useful distance to travel to draw graphics.
To make our turtle move further add a number into the brackets turtle.forward(100)

Move to a coordinate (absolute*)

The turtle is sitting inside a canvas with a grid. Using that grid we can give coordinates for the turtle to move to.
turtle.goto(100,50) will move the turtle across to column 100 and down to row 50 on the grid. (Where the turtle was before doesn't matter)

Extension: Concepts

Turning

5 mins

Straight lines can only take you so far and turning is just as simple.

Turn to the right or the left (relative*)

you can use turtle.left() and turtle.right() to face your turtle in a new direction.
It uses [[angles]- any number between 0 and 360.
Give the command turtle.left(25), and the turtle rotates in place 25 degrees clockwise. Generally we use 90° to turn.

Face a direction (absolute*)

SET HEADING
turtle.setheading() uses angles to face the turtle to a set direction.
It doesn't matter what direction our turtle is facing to begin with, turtle.setheading(90) will face him up to the top of your screen and turtle.setheading(180) will face your turtle ot the left of the screen.

Why is 0 not up?

If you are used to using a compass you might be confused that 0 is not up, because North is often set as 0 degrees. For setheading we go anticlockwise and use what is called Standard Mode where 0 is the right side of the screen (East) →.

Degrees in a circle

Anticlockwise

0 - Right side of screen →

90 - Top of screen ↑

180 - Left side of screen ←

270 - Bottom of screen ↓

Extension: Concepts

Drawing/Coloring

5 mins

A cartoon turtle selects a colored crayon

Pen

The robotic turtle is dragging a pen that can change color and size.
You can change the width of the pen to any positive number (though 20+ might be getting a bit big to draw with).

The code looks like:
turtle.pensize(5)
turtle.pensize('auto') will set the pensize to 0.

There are times when you you want to move the turtle without leaving a line. We use turtle.penup() to stop drawing so you can move your turtle or change the pensize and turtle.pendown() to start drawing again

Head ups!

If you want a line of different pensizes you have to put in pauses, using penup() and pendown(), to do this.

image of code below, pen size is getting bigger
import turtle tia = turtle.Turtle() tia.penup() tia.goto(100,100) tia.pendown() tia.pensize(5) tia.forward(50) tia.penup() tia.pendown() tia.pensize(10) tia.forward(50) tia.penup() tia.pendown() tia.pensize(15) tia.forward(50) tia.penup() tia.pendown() tia.pensize(20) tia.forward(50)

Stroke and fill

Changing colors can make your images more interesting and complex.

There are two areas in a shape that we can color

fill

'Color in', the color that fills up the inside area of a letter or shape

stroke

The lines that make up the outline of a letter or shape

Turtle with red pen drawing red stroke around a yellow filled square

This square has a red stroke and a yellow fill.

You can set the pen color, the fill color or simply the color, which will set both the stroke and the fill. The fill only works when you tell the code to begin filling and you have a whole shape to color in. (it wont work on a line).

Stroke color —`.pencolor()`

import turtle tia = turtle.Turtle() tia.pencolor('red') tia.fillcolor('yellow') tia.begin_fill() for i in range(4): tia.forward(50) tia.right(90) tia.end_fill()

Fill color —`.fillcolor()`

#fill is set tia.color('blue') for i in range(4): tia.forward(50) tia.right(90) tia.forward(80) #fill starts tia.begin_fill() for i in range(4): tia.forward(50) tia.right(90) tia.end_fill()

Colors

There are a couple of ways you can change the color of your graphic.
You can use 'symbolic names' like 'red', 'chartreuse' 'OrangeRed', or, if you know about RGB or Hex colors, these work too.

turtle.color('steelBlue') Name
turtle.color(rgb (88, 137, 210))) RGB
turtle.color('#5889D2') Hex

Here are some color names:

CSS color names

Extension: Concepts

Circles

5 mins

A turtle circling

Python turtles also have a built in function called circle() which, you guessed it, let's you draw circles.

The code that follows will draw a circle with a radius (half the circle's width) of 60px: tia.circle(60) .

The circle is always drawn on the turtle's left. If the turtle is facing a different direction, the circle will be drawn in a different place.

To fill a circle, do the following: tia.begin_fill() tia.circle(50) tia.end_fill()

Semi circles

We can also draw semicircles by putting a second number inside the brackets: tina.circle(60, 180)
This code draws half of a circle, because we've told the turtle to only draw 180 degrees of it.

Because circles are always drawn on the turtle's left, sometimes we might want to tell the turtle exactly which direction to face, using setheading(90) is very helpful here to point the turtle straight up.

Extension: Concepts

Movement—absolute and relative (optional)

5 mins

Absolute and relative are two different ways to talk about directions.

Absolute	Relative
Absolute directions use fixed positions- the top, bottom, left side and right side of the screen (or North, South, East and West, meters above or below sea level).	Relative directions are based on the position of the object or person. There is forward, backwards, up, down, left and right.
We can illustrate this more by explaining that there are often two different ways of giving directions.
Absolute map	Relative map
Directions: 1. "Face north on First St, drive to Second St, 2. Turn to face west, 3. Drive to Food Avengers, 4. Face north to enter."	Directions: 1. "Go forward up this road we are on for 10 min, 2. Turn right and 3. Go down that road for 5 min, 4. Food Avengers is on the left."
The first set of directions are how you read a map and the second might be used by a helpful stranger or your GPS. Both work as directions. What is the difference?
The first example shows something called absolute. The directions on it have nothing to do with you, instead they are connected to the area around you. As long as you are on Earth, North is always a set direction. If you are backwards, frontwards or upside down, it does not change the direction of North. The corner of 1^st street and 2^nd street is exact point, it doesn't rely on how far you have traveled or what direction you are facing to know where it is.	The second example is relative to you. The instructions centered around you (or the object moving). It doesn't matter what way you are facing, "right" is always on your right side and forward is always the way you are facing.

In coding, it is useful to know the difference between code that is relative to the object or absolute.

	Python	JavaScript
Absolute	`talia.goto(300,200)`	`new Game.GoodItem(30, 220)`
Relative	`talia.forward(30)`	`robot.forward(3)`

1. NAV BAR

13HRS

Resources

Guide

</div>
<div class="js comments_comment-content">
<div class="comments_comment-profile-info">
<span class="js comments_comment-profile-name">{{codeName}}</span>
        
<span class="js comments_comment-timestamp">{{timestamp}}</span>
      </div>
<p class="js comments_comment-text">{{comment}}
<div class="js comments_comment-buttons">
<span class="js comments_comment-replies-count" data-upvotes="{{upvotes}}">{{upvotes}}</span>
<button class="js comments_comment-up-vote"></button>
<button class="js comments_comment-reply"></button>
      </div>
    </div>
    {{#if parentID}}

{{else}}
<div class="js comments_comment-replies">
        
      </div>
    {{/if}}
  </div>

<div class="guiders-preview_content">
      {{#if complete}}{{else}}
<h4 class="guiders-preview_subtitle">{{subtitle}}</h4>
      {{/if}}
<h2 class="guiders-preview_title">{{{title}}} {{#if complete}}{{{message}}}{{/if}}</h2>
      {{#if complete}}{{else}}
<div class="guiders-preview_description"><p>{{{message}}}</div>
      {{/if}}
      {{#if complete}}
<div class="guiders-preview_social-buttons">
<a href="{{{twitterUrl}}}" target="_blank" onclick="ai.publish(true, null, event);" class="js guiders-preview_social-button -twitter"><i class="guiders-preview_social-icon icon-ca-twitter"></i> {{{twitter}}}</a>
<button class="js guiders-preview_social-button -facebook" onclick="ai.share.facebook();ai.publish(true, null, event);"><i class="guiders-preview_social-icon icon-ca-facebook"></i> {{{facebook}}}</button>
      </div>
      {{/if}}
    </div>
  </div>  
  {{#if tour}}
<p class="guiders-preview_action">{{{action}}}
  {{/if}}

{{#with pricing}}
<div id="pricing-popup">
<div class="pricing">
<h3 class="pricing_header">{{{header}}}</h3>
<p class="pricing_info">
    
    {{{text}}}

<div class="pricing_sections">
    {{#each sections}}
<div class="pricing_section-wrapper">
<div class="pricing_section">
<h3 class="pricing_section-header">{{header}}</h3>
          {{#if list}}
            {{#each list}}
<p class="pricing_section-info">{{this}}
            {{/each}}
          {{else}}
<p><span class="js- pricing_section-price">{{price}}</span> <span class="js- pricing_section-dom">{{dom}}</span> <span class="pricing_section-details">{{{details}}}</span>
<p class="pricing_section-info">{{{text}}}</p>
          {{/if}}
        </div>
        {{#if button1}}
<button class="pricing_button js signup-button">{{../button1}}</button>
        {{/if}}
        {{#if button2}}
<button class="pricing_button -red js-quote-button" data-analytic="submit-quote">{{../button2}}</button>
        {{/if}}
      </div>
    {{/each}}
    </div>
    
  </div>
</div>
{{/with}}

<div id="quote" class="js quote">
    <div class="pricing">
        <h3 class="pricing_header">{{{header}}}</h3>
        <p class="pricing_info">{{{text}}}</p>
        <div class="js pricing_sections">
        {{#each inputs}}
            <div class="pricing_input-wrapper {{size}}">
                <label class="pricing_label">{{placeholder}}</label>
                {{#if list}}
                    <select required name="{{name}}" class="js pricing_input">
                    {{#each list}}
                        <option value="{{#if name}}{{name}}{{/if}}">{{#if name}}{{name}}{{else}}{{this}}{{/if}}</option>
                    {{/each}}
                    </select>
                {{else}}
                    <input required type="{{#if type}}{{type}}{{else}}text{{/if}}" name="{{name}}" placeholder="{{placeholder}}" class="js pricing_input" value="{{value}}">
                {{/if}}
            </div>
        {{/each}}
        </div>
        <button class="js-teacher-quote pricing_button -red" data-analytic="submit-quote-button Quote">{{{button}}}</button>
  </div>
</div>

{{else}}
            {{{level}}}
          {{/if}}
        </h2>
<h3 class="track-popup_name">{{name}}</h3>
<p class="track-popup_description">{{description}}</p>
      </div>
    </div>
<div class="track-popup_header-right">
      {{{trackBox}}}
      
      {{#if secondaryButton}}
<a href="{{trackUrl}}" class="js track-popup_header-button">{{secondaryButton}}</a>
      {{/if}}
    </div>
  </div>
<div class="js track-popup_tracks">
    {{#each courses}}
<div class="track-popup_course">
<div class="track-popup_course-left">
<div class="track-popup_course-left-content">
<h2 class="track-popup_course-name">{{name}} {{type}}</h2>
<p class="track-popup_course-info">{{{description}}}</p>
          </div>
        </div>
<div class="track-popup_course-right">
          {{{boxHtml}}}
<a href="{{url}}" class="track-popup_course-button {{#if ../disableTrack}}is-disabled{{/if}}">{{../startNowButton}}</a>
        </div>
      </div>
    {{/each}}
  </div>
</div>

<div class="guides-info-section">
<h3 class="guides-info-section_heading">Key</h3>
<div class="js guides-info-section_key">
<p class="js guides-info-section_key-text">There are five types of lesson segments:</p>
<i class="guides-info-section_key-icon icon-ca-puzzle"></i> <span class="guides-info-section_type">Concepts</span>: <p class="guides-info-section_key-description">Notes on the concepts covered in the CA lessons.</p>
<i class="guides-info-section_key-icon icon-ca-rocket"></i> <span class="guides-info-section_type">Activities</span>: <p class="guides-info-section_key-description">Off-line and online activities to supplement the CA lessons. </p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Lessons</span> = <p> class="guides-info-section_key-description"Online lessons created by CA.</p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Projects</span> = <p class="guides-info-section_key-description">Online projects created by CA to reinforce your learning.</p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Quizzes</span> = <p class="guides-info-section_key-description">Online quizzes created by CA to review previous lessons.</p>
<p class="js guides-info-section_key-text">These small segments can be organised into three sections</p>
<p><span>Prior Learning</span>: These are recap/review segments</p>
<p><span>The Lesson</span>: This section leads you through the concepts, activities and CA lessons.</p> 
<p><span>Extension</span>: These are additional concepts, activities and lessons.</p>
  </div>
</div>

<div class="js purchase-item {{handler}} {{type}} {{#if purchased}}has-purchased{{/if}} {{#if isComplete}}is-complete{{/if}} {{#if new}}-new{{/if}}" {{#if id}} data-id="{{id}}" {{/if}} {{#if plan}} data-plan="{{plan}}" {{/if}} {{#if item}} data-item="{{item}}" {{/if}} {{#if url}} data-url="{{url}}" {{/if}}>
<img src="{{img}}" class="purchase-item_img">
<p class="purchase-item_header">{{title}}</p>
    {{#if description}}
<p class="purchase-item_text">{{description}}</p>
    {{/if}}
<p class="purchase-item_price"><span class="purchase-item_price-price {{#if salePrice}}-strikethrough{{/if}}">{{price}}</span> {{#if salePrice}}<span class="purchase-item_price-sale">{{salePrice}}</span>{{/if}}</p>
<p class="purchase-item_type">USD {{per}}</p>
<div class="purchase-item_buttons">
      {{#each buttons}}
        {{#if url}}
<a href="{{url}}" {{#if target}} target="{{target}}" {{/if}} class="js purchase-item_button external-link" title="{{text}}">{{text}}</a>
        {{else}}
<button class="js purchase-item_button {{hander}}" title="{{text}}">
<span class="js show-spinner">{{text}}</span>
<div class="js show-spinner" data-loader="circle-side"></div>
          </button>
        {{/if}}
      {{/each}}
    </div>
    {{#if info}}
<p class="purchase-item_info">{{info}}</p>
    {{/if}}
  </div>

<div class="js payment-form">
<div class="payment-form_content">
      {{{header}}}
<div class="payment-form_inputs">
<div class="js payment-form_input-wrapper -wide -radios">
<div class="js payment-form_option" data-type="ccd">
<label class="js payment-form_label" title="{{creditCard}}">{{creditCard}}</label> 
<span class="js payment-form_option-radio is-active"></span>
          </div>
<div class="js payment-form_option" data-type="paypal">
<label class="js payment-form_label" title="Paypal">Paypal</label> 
<span class="js payment-form_option-radio"></span> 
          </div>
        </div>
      </div>
<form class="js payment-form_input-wrapper -wide ccd_form">

<div class="payment-form_inputs">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{firstName}} *</label>
<input class="js payment-form_input -dark" type="text" data-recurly="first_name">

</div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{lastName}} *</label>
<input class="js payment-form_input" type="text" data-recurly="last_name">

</div> 
        </div>
        
        {{#if includeSignup}}
<div class="js payment-form_inputs include-signup">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{email}} *</label>
<input class="js payment-form_input -dark" type="email">

</div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{password}} *</label>
<input class="js payment-form_input" type="password">

</div> 
          </div>
        {{/if}}

<div class="payment-form_inputs">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{cardNumber}} *</label>
<div data-recurly="number"></div>
          </div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">CVV *</label>
<div data-recurly="cvv"></div>
          </div> 
        </div>
<div class="payment-form_inputs">  
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{month}} *</label>
<div data-recurly="month"></div>
          </div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{year}} *</label>
<div data-recurly="year"></div>
          </div> 
<input type="hidden" name="recurly-token" data-recurly="token">

</div>
      </form>
<div class="payment-form_input-wrapper -wide js code">
<label class="js payment-form_label">{{couponCode}} </label>
<input type="text" name="coupon" class="js payment-form_input">

</div>
      
      {{#if includeSignup}}
<div class="js payment-form_input-wrapper include-signup">
<span class="js payment-form_option-checkbox policy-consent -dark" data-value="yes"></span>
<label class="js payment-form_label -checkbox -no-caps">
            {{{consent}}}
          </label>
        </div>
      {{/if}}

<div class="payment-form_buttons">
<div class="js payment-form_error"></div>
<button class="js payment-form_continue-button">
<span class="payment-form_continue-button-text js show-spinner">{{buttonText}}</span>
<div class="js show-spinner" data-loader="circle-side"></div>
        </button>
      </div>
    </div>
  </div>

<!doctype html>

<body class="slide -{slideType}">
<header class="slide_header"> 
<i class="slide_logo icon-ca-ca-logo"></i>
<span class="slide_title">{header}</span>
<div class="slide_controls">
<button id="presentation-jump" class="js slide_controls-button -jump" onclick="window.opener.ai.presentation.previousSlide(true)"><i class="slide_controls-icon icon-ca-left-arrow -double"></i><i class="slide_controls-icon icon-ca-left-arrow -double"></i></button>
<button id="presentation-prev" class="js slide_controls-button -prev" onclick="window.opener.ai.presentation.previousSlide(false)"><i class="slide_controls-icon icon-ca-left-arrow"></i></button>
<button id="presentation-next" class="js slide_controls-button -next" onclick="window.opener.ai.presentation.nextSlide(false)"><i class="slide_controls-icon icon-ca-right-arrow"></i></button>
<button id="presentation-skip" class="js slide_controls-button -skip" onclick="window.opener.ai.presentation.nextSlide(true)"><i class="slide_controls-icon icon-ca-right-arrow -double"></i><i class="slide_controls-icon icon-ca-right-arrow -double"></i></button>
</div>
</header>

{content}
</section>

</body>

<div class="js- projects-popup -{{type}}">
<div class="js- projects-popup_top">
    {{#if image}}
<div class="js- projects-popup_image-wrapper">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
<img src="{{image}}" class="js- projects-popup_image">

</div>
    {{/if}}
<div class="projects-popup_info">
<div class="projects-popup_header">
<span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
<div class="projects-popup_progress-bar">
<div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
  </div>
<div class="js- projects-popup_bottom">
<div class="projects-popup_info">
<div class="projects-popup_header">
<span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
<div class="projects-popup_progress-bar">
<div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
    {{#if image}}
<div class="js- projects-popup_image-wrapper {{#if promo}}-promo{{/if}}">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
<img src="{{image}}" class="js- projects-popup_image">

</div>
    {{/if}}
  </div>
</div>

<div class="pdf-header_title">{{name}} Answers</div>
</header>
<section class="pdf-section">
  {{#each lessons}}
<div class="pdf-section_lesson-title">{{lessonNo}}. {{{title}}}</div>
    {{#each tasks}}
<div class="pdf-section_task">
<h2 class="pdf-section_task-title">{{lessonNo}}.{{taskNo}}. {{{objective}}}</h2>
        {{#if solution}}
<pre class="prettyprint pdf-section_code">{{{solution}}}</pre>
        {{else if questions}}
<p>Review Quiz Questions:<br>

<ol class="pdf-section_list">
            {{#each questions}}
<li class="pdf-section_list-item">{{{answer}}}
            {{/each}}
          </ol>
        {{else if answer}}
<p>{{{answer}}}
        {{/if}}
      </div>
    {{/each}}
  {{/each}}
</section>
<script>addEventListener("load", function (event) { prettyPrint() }, false);</script>

<div class="pdf-header_title">{{name}} Instructions</div>
</header>
<section class="pdf-section">
  {{#each lessons}}
<div class="pdf-section_lesson-title">{{lessonNo}}. {{{title}}}</div>
    {{#each tasks}}
<div class="pdf-section_task">
<h2 class="pdf-section_task-title">{{lessonNo}}.{{taskNo}}. {{{objective}}}</h2>
        {{#if goal}}
          {{{goal}}}
        {{/if}}
        {{#if questions}}
<p>Review Quiz Questions:<br>

<ol class="pdf-section_list">
            {{#each questions}}
<li class="pdf-section_list-item">{{{question}}}
            {{/each}}
          </ol>
        {{/if}}
        {{#if answer}}
<p>{{{answer}}}
        {{/if}}
      </div>
    {{/each}}
  {{/each}}
</section>
<script>addEventListener("load", function (event) { prettyPrint() }, false);</script>

{{#each this}}
<div class="course-box -{{theme}}">
<div class="course-box_content">
<div class="course-box_top-bar">
<div class="course-box_top-bar-left">
<span class="course-box_type">{{level}}</span>
<span class="course-box_title">{{{name}}}</span>
          </div>
<div class="course-box_top-bar-right">
<span>{{hours}} HRS</span>
<span class="course-box_top-post"></span>
<span class="course-box_preview-btn">Preview <i class="icon-ca-play-full course-box_preview-btn-triangle"></i></span>
          </div>
        </div>
<div class="course-box_details">
<p class="course-box_description">{{{description}}}</p>
<div class="course-box_buttons">
<div class="course-box_buttons-left">
              {{#if progress}}
<a href="{{url}}" class="button course-box_resume-button">Resume</a>
              {{else}}
<a href="{{url}}" class="button course-box_resume-button">Start</a>
              {{/if}}
            </div>
<div class="course-box_buttons-right">
<button class="button course-box_details-button">View Details</button>
<div class="course-box_content-footer">
<div class="course-box_footer-info">
                  
                </div>
<div class="course-box_footer-info">
                  {{difficulty}}
                </div>
<div class="course-box_footer-info">
                  {{taskCount}} Tasks
                </div>
              </div>
            </div>
          </div>
<div class="course-box_footer">
<div class="course-box_footer-info">
                  
            </div>
<div class="course-box_footer-info">
              {{difficulty}}
            </div>
<div class="course-box_footer-info">
              {{taskCount}} Tasks
            </div>
          </div>
        </div>
      </div>
<div class="course-box_preview">
        {{#if image}}
<div class="course-box_preview-image">
<image src="{{image}}" class="course-box_preview-image-image">
          </div>
        {{else}}
<div class="course-box_preview-video">
<div class="course-box_preview-video-play">
<div class="course-box_preview-video-play-icon">
<i class="icon-ca-play"></i>
              </div>
            </div>
          </div>  
        {{/if}}
      </div>
<div class="course-box_percentage-top">
<span class="course-box_percentage-circle"></span>
<div class="course-box_percentage-percent-wrapper">
<span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
<i class="icon-ca-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
<div class="course-box_percentage-bottom">
<span class="course-box_percentage-circle"></span>
<div class="course-box_percentage-percent-wrapper">
<span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
<i class="icon-ca-star course-box_percentage-star"></i>
<i class="icon-ca-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
    </div>
  {{/each}}

<!doctype html>
<style>
    html {
        font-size: 0 !important;
    }

.t-quiz > * {
        font-size: initial !important;
        margin-bottom: 0 !important;
    }
</style>
<link rel="stylesheet" href="/dist/style.min.css?0.052468554855654936">
{{#each css}}
{{/each}}
<script>
    window.CHINA = true;
    window._MIN_ = '';
    window.CURRENT_VERSION = '1';
    window.IFRAME = true;
</script>
<script src="/js/jquery.js?v=yOKaW5htuhTZ_ZEWQ-n3h0ennNBkN3zmVmtasuaxVKk"></script>
<script src="/js/jquery-ui.min.js?v=_CzTpg6QTje_ISm9yjDTYORSNm5j6oJ56j0nP6TCzhc"></script>

download
new file
upload media
rename

delete

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

canvas {
        background-color: white;
        border: 1px solid black;
    }

table {
        position: absolute;
        width: 360px;
        height: 300px;
        background-color: black;
        top: 50%;
        opacity: 0.9;
        margin: auto;
        margin-top: -150px;
        left: 0;
        right: 0;
        cursor: pointer;
    }

td {
        padding: 24px;
    }

p {
        line-height: 28px;
    }

.social-share img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

h1 {
        font-size: 28px;
    }

#code {
        display: none;
    }
</style>

<a href="{protocol}//{domain}"><img src="{protocol}//{domain}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
<iframe id="myApp" {events} width="{width}" height="{height}"></iframe>
<p>Learn to make apps, games and websites with <a style="color: #ef5555" href="/">CodeAvengers.com</a>

<table onclick="this.style.display='none';displayApp()">
<tr>
<td>  
<h2>Instructions</h2>
<p>{instructions}
  
<p>
<b>Click to start</b>

</table>

<div id="code">
{content}
</div>

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

canvas {
        background-color: white;
        border: 1px solid black;
    }

td {
        padding: 24px;
    }

p {
        line-height: 28px;
    }

.social-share img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

h1 {
        font-size: 28px;
    }

.fullscreen footer, .fullscreen header {
        display: none;
    }

.fullscreen table {
        top: 170px;
    }
</style>

<header>
<a href="{protocol}//{domain}"><img src="{protocol}//{domain}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
</header>

<canvas id="paperscriptCanvas" tabindex="0"
        {canvasEvents} width="{width}" height="{height}"></canvas>

<footer>
<p>Learn to make apps, games and websites with <a style="color: #ef5555;" href="/">CodeAvengers.com</a>

</footer>

<tr>
<td>  
<h2>Instructions</h2>
<p>{instructions}
  
<p>
<b>Click to start</b>

</table>

<title>Code Avengers Profile</title>
<meta name="viewport" content="width=device-width">

<header>
<a href="https://codeavengers.com"><img src="/images/logo.png"></a>
<a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a>
</header>
<section>
<h2>My Profile</h2>
<img src="/images/profile9.png" width="180" alt="profile">

</a>
<strong>Name</strong>: Supacoda<br>

<strong>Birthday</strong>: 14<sup>th</sup> April<br>

<strong>Height</strong>: 1.79m<br>

<h3>My Super Powers</h3>
<p>I have super endurance, once I start, I keep going until I finish!
	
<p>I will eat anything and lots of it... if there is a plate with food on it, I will eat it!

Overview

What are turtle graphics and other modules

5 mins

Reference list

5 mins

Sequences

5 mins

Coordinates

5 mins

Drawing graphics back to back activity

20 mins

Loops

5 mins

Lists

5 mins

Intro Turtle Graphics - Lesson 1. Turtle Challenge

15 mins

Lesson 5. Turtle graphics

30 mins

Lesson 6. Turtle drawing basics

15 mins

Moving

5 mins

Turning

5 mins

Drawing/Coloring

5 mins

Circles

5 mins

Movement—absolute and relative (optional)

5 mins

Turtle Graphics

Overview

What are turtle graphics and other modules

5 mins

Reference list

5 mins

Sequences

5 mins

Coordinates

5 mins

Drawing graphics back to back activity

20 mins

Loops

5 mins

Lists

5 mins

Intro Turtle Graphics - Lesson 1. Turtle Challenge

15 mins

Lesson 5. Turtle graphics

30 mins

Lesson 6. Turtle drawing basics

15 mins

Moving

5 mins

Turning

5 mins

Drawing/Coloring

5 mins

Circles

5 mins

Movement—absolute and relative (optional)

5 mins

Turtle graphics in Python

Guide

Overview

Key to lesson icons

Concepts

What are turtle graphics and other modules

How to import the turtle module

What is a module?

Concepts

Reference list

Move (relatively*)

Move (absolutely*)

Drawing

Circles

Concepts

Sequences

Break down the code

How to import the `turtle` module

Stroke color —`.pencolor()`

Fill color —`.fillcolor()`