moving turtle examples

docs/examples.md

@@ -76,24 +76,3 @@ Here are some fun programs for your @boardname@!
   "cardType": "example"
 }]
 ```
-
-## Turtle graphics
-
-```codecard
-[{
-  "name": "Turtle Square",
-  "description": "Move in a square",
-  "url": "/examples/turtle-square",
-  "cardType": "example"
-}, {
-  "name": "Turtle Spiral",
-  "description": "Move in a spiral",
-  "url": "/examples/turtle-spiral",
-  "cardType": "example"
-}, {
-  "name": "Turtle Scanner",
-  "description": "Scan down the screen",
-  "url": "/examples/turtle-scanner",
-  "cardType": "example"
-}]
-```

docs/examples/turtle-square.md

@@ -1,17 +0,0 @@
-# Turtle Square
-
-A turtle that traces a square pattern.
-
-```blocks
-turtle.setPosition(0, 0)
-turtle.turnRight()
-turtle.setSpeed(29)
-basic.forever(() => {
-    turtle.forward(4)
-    turtle.turnRight()
-})
-```
-
-```package
-microturtle=github:Microsoft/pxt-microturtle#master
-```

docs/projects/turtle-scanner.md

@@ -1,5 +1,17 @@
 # Turtle Scanner
 
+## Setting up your project
+
+This project uses an **microturtle** Extension. You'll need to add it to your project to make it work.
+
+* create a new project
+* click on the gearwheel menu and click **Extensions**
+* select the **microturtle** extension
+
+After the project reloads, you should see the **turtle** category in the blocks.
+
+## Code
+
 The turtle scans the display over and over again.
 
 ```blocks

docs/projects/turtle-spiral.md

@@ -1,5 +1,17 @@
 # Turtle Spiral
 
+## Setting up your project
+
+This project uses an **microturtle** Extension. You'll need to add it to your project to make it work.
+
+* create a new project
+* click on the gearwheel menu and click **Extensions**
+* select the **microturtle** extension
+
+After the project reloads, you should see the **turtle** category in the blocks.
+
+## Code
+
 A turtle that spirals into the center of the display and back out again.
 
 ```blocks

docs/projects/turtle-square.md

@@ -0,0 +1,37 @@
+# Turtle Square
+
+## Setting up your project
+
+This project uses an **microturtle** Extension. You'll need to add it to your project to make it work.
+
+* create a new project
+* click on the gearwheel menu and click **Extensions**
+* select the **microturtle** extension
+
+After the project reloads, you should see the **turtle** category in the blocks.
+
+## Moving the turtle
+
+Imagine that a virtual turtle, as big as an LED, that you can control with commands. It starts in the center of the screen facing up.
+
+You can use the ``||turtle:forward||`` and ``||turtle::turnRight||`` to move and turn the turtle.
+
+```blocks
+turtle.forward(2)
+turtle.turnRight()
+```
+
+## Drawing a square
+
+Drawing a square can be decomposed into a sequence of moves and turns. Since this is quite repetitive, you can use a **for** loop to repeat code.
+
+```blocks
+for (let i = 0; i < 4; i++) {
+    turtle.forward(2)
+    turtle.turnRight()
+}
+```
+
+```package
+microturtle=github:Microsoft/pxt-microturtle#master
+```

docs/projects/turtle.md

@@ -0,0 +1,21 @@
+# Turtle
+
+Turtle graphics on your @boardname@ screen!
+
+## Turtle graphics
+
+```codecard
+[{
+  "name": "Square",
+  "description": "Move in a square",
+  "url": "/projects/turtle-square"
+}, {
+  "name": "Spiral",
+  "description": "Move in a spiral",
+  "url": "/projects/turtle-spiral"
+}, {
+  "name": "Scanner",
+  "description": "Scan down the screen",
+  "url": "/projects/turtle-scanner"
+}]
+```