Updating tut-tut and globetrotters (#6139)

docs/courses/tut-tut/edit-tutorial.md

@@ -2,15 +2,17 @@
 
 It's pretty easy to take a MakeCode tutorial and make it your own!  The basic steps are as follows:
 
-- Copy the markdown from a [MakeCode tutorial](https://github.com/microsoft/pxt-arcade/tree/master/docs/tutorials)
-- Edit the items you want to change in the [Tutorial Tool](https://makecode.com/tutorial-tool) 
-- Distribute your new version using the [Share Button](/static/courses/tutorial-tutorial/share-tut.png) 
+1) Copy the markdown from a [MakeCode tutorial](https://github.com/microsoft/pxt-arcade/tree/master/docs/tutorials)<br/>
+2) Edit the items you want to change in the [Tutorial Tool](https://makecode.com/tutorial-tool)<br/>
+3) Distribute your new version using the [Share Button](/static/courses/tutorial-tutorial/share-tut.png)<br/>
 
 
 ## Follow Along
 
 Let's do an example together. 
 
+### ~hint
+
 ### Step 1. Find the tutorial that you want to edit
 
 You can find MakeCode tutorials at [https://github.com/microsoft/pxt-arcade/tree/master/docs/tutorials](https://github.com/microsoft/pxt-arcade/tree/master/docs/tutorials).
@@ -21,21 +23,46 @@ You will need to copy the text from the "Raw" version of the file, then paste it
 
 ![Copy the text from the raw file](/static/courses/tutorial-tutorial/copy-raw.gif "Try not to get in their way!" )
 
+### ~
 
 
+### ~hint
 
+#### Note:
+
+This example uses only a single tutorial.  If you want to learn more about multi-tutorial sequences (called skillmaps) you can [try this exercise instead](/courses/tut-tut/make-smap). 
+
+### ~
 
 
 ### ~hint
 
-#### Note:
 
-This example uses only a single tutorial.  If you want to learn more about multi-tutorial sequences (called skillmaps) you can [try this exercise instead](/courses/tut-tut/make-smap). 
+### Step 2. Make your changes in the Tutorial Tool 
+
+
+Open the Tutorial Tool at [https://makecode.com/tutorial-tool](https://makecode.com/tutorial-tool) and paste the copied code inside the editor. 
+
+Since we're working with Arcade here, we'll choose the Arcade emulator from the dropdown. We also have emulators for micro:bit, Minecraft, and Circuit Playground. 
+
+Then we click "Run".
+
+![Paste the text into the tutorial tool and click Run](/static/courses/tutorial-tutorial/run-tut.gif "We will use the Arcade emulator" )
+<br/>
+
+To customize this tutorial, we'll change 100 to 50 throughought the whole document using find/replace. Click "Run" again to see the updates.
+
+![Run the emulator each time you make an update](/static/courses/tutorial-tutorial/update-tut.gif "" )
+
+<br/>
 
 ### ~
 
 
 
+---
+
+
 ## See also
 
 [Tutorial Creation Documentation](https://makecode.com/writing-docs/tutorials)<br/>

docs/test/skillmap/class/class1.md

@@ -69,6 +69,15 @@ Sprites have properties that you can use and change — things like scale, posit
 
 Our "student" character will be a sprite, too.
 
+You create a sprite using a block like this:
+
+<!-- https://makecode.com/writing-docs/snippets#block
+// This will embed a block directly into the instructions
+-->
+```block
+let mySprite = sprites.create(class_img.stand, SpriteKind.Player)
+```
+
 hint~
 
 <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
@@ -77,15 +86,20 @@ hint~
 
 
 <!-- This next part of the instruction uses a couple of different
-// formats to guide students. First, the -:paper plane: text
-// adds an icon to the side of the instruction that hints at the
-// type of action students will be doing (this one adds the sprite icon)
+// formats to guide students. 
+// https://makecode.com/writing-docs/snippets#namespace-coloring
+//
+// The -:paper plane: text adds an icon to the side of the instruction 
+// that corresponds to the category used in the step (this one adds the sprite icon)
+//
 // Next, the ``||sprites:Sprites||`` text creates a highlighted word that
 // opens the category it points to when clicked (here, it's the Sprites category.)
+//
 // Want the formatted text to link to a different category than the color
 // sends it to by default, use a different category in parentheses
 // ``||variables(sprites):set [mySprite]||`` makes a red block that
 // goes to the blue Sprites category.
+//
 // ``||loops(noclick):on start||`` makes the text green but doesn't
 // open any category
 // --------------------------------------------------------------->
@@ -100,10 +114,13 @@ switch to the **Gallery** tab to choose a student image.
 
 
 <!-- This section will add blocks to the answer key.
-// tutorialhint tells the tutorial that we're adding a hint now 
-// Include all of the blocks that students will see within 
-// the code segment that they're working on, then 
-// use //@highlight to highlight the instruction from this step -->
+// https://makecode.com/writing-docs/tutorials/basics#using-blocks
+// tutorialhint tells the tutorial that we're adding a hint now. 
+// Include all of the blocks that students will see within
+// the code segment that they're working on. 
+//  
+// Use //@highlight to highlight the instruction from this step 
+// https://makecode.com/writing-docs/snippets#highlight -->
 
 #### ~ tutorialhint
 
@@ -288,10 +305,11 @@ skillmap where we'll add timers and overlap events!
 
 
 
-<!-- *************** End Tutorial Text Portion ******************//
+<!-- **************************** End Tutorial Text Portion *************************//
 // ---------------------------------------------------------------------------------//
-// The following code sets up the images, blocks, and extensions //
-// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->
+// The following code sets up the images, blocks, and extensions                   //
+// see https://makecode.com/writing-docs/tutorials/control-options#special-blocks //
+// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->
 
 
 
@@ -310,6 +328,7 @@ stopwatch.startTimer(stopwatch.TimerType.Tens)
 <!-- ***************************************************
 //            PACKAGE - IMPORT EXTENSIONS
 // ****************************************************
+// https://makecode.com/writing-docs/snippets#package
 // This is how you import extensions into your tutorial
 ******************************************************-->
 ```package
@@ -327,6 +346,7 @@ class_img=github:kiki-lee/class_img#v0.0.1
 <!-- ***************************************************
 //            TEMPLATE - START WITH BLOCKS
 // ****************************************************
+// https://makecode.com/writing-docs/tutorials/control-options#special-blocks
 // This is how you start with code in the workspace
 ******************************************************-->
 ```template
@@ -337,6 +357,7 @@ scene.setBackgroundColor(13)
 <!-- ***************************************************
 // GHOST - ADD BLOCKS EVEN IF THEY'RE NOT YET IN TUTORIAL
 // ****************************************************
+// https://makecode.com/writing-docs/tutorials/control-options#ghost-blocks
 // This is how you add blocks to the toolbox, even
 // if the tutorial doesn't use them
 // I've preloaded this with all of the code for our game.
@@ -364,6 +385,7 @@ stopwatch.startTimer(stopwatch.TimerType.Tens)
 <!-- ***************************************************
 //            CUSTOMTS - BEHIND THE SCENES
 // ****************************************************
+// https://makecode.com/writing-docs/tutorials/control-options#custom-code
 // This is how you add code "behind the scenes"
 // This code is hidden from the user so it's a good way
 // to hide confusing steps or add custom functions
@@ -394,6 +416,7 @@ namespace loops{
 <!-- ***************************************************
 //            ASSETJSON - ADD NON_EXTENSION ASSETS
 // ****************************************************
+// https://makecode.com/writing-docs/tutorials/resources#assetjson
 // This imports items into 'My Assets". This is important for things
 // like music and tilemaps that don't have a gallery.
 // You get this from saving a project containing only assets