Update Tutorial Tutorial and prep to update Jungle (#6125)

microsoft · Oct 19, 2023 · 0b67a82 · 0b67a82
1 parent b8e27a1
commit 0b67a82
Show file tree

Hide file tree

Showing 21 changed files with 2,416 additions and 52 deletions.
diff --git a/docs/courses/educator-trainings.md b/docs/courses/educator-trainings.md
@@ -1,54 +1,39 @@
 # Training Opportunities for MakeCode Educators
 
-A collection of courses meant to help educators learn to use Microsoft MakeCode
+A collection of courses that provide professional learning opportunities for Microsoft MakeCode.
 
 
-
-Minecraft - https://learn.microsoft.com/en-us/training/paths/minecraft-teacher-academy/
-Arcade - https://learn.microsoft.com/en-us/training/modules/utilize-makecode-arcade-your-classroom/
-Micro:bit - https://microbit.org/teach/professional-development/
-
-
-## Course Sections
+## MakeCode Sections
 
 ```codecard
 [
     {
-        "name": "CS Intro 1",
-        "description": "A semester length computer science course for beginning coders",
-        "url":"/courses/csintro1",
-        "imageUrl": "/static/courses/csintro1.gif"
+        "name": "Arcade PL",
+        "description": "A 42 min course on MS Learn that shows you how to utilize MakeCode Arcade in your classroom",
+        "url":"https://learn.microsoft.com/en-us/training/modules/utilize-makecode-arcade-your-classroom/",
+        "imageUrl": "https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWOYCd?ver=bf04&q=90&m=6&h=291&w=517&b=%23FFFFFFFF&l=f&o=t"
     }, {
-        "name": "CS Intro 2",
-        "description": "A continuation of the Intro to CS course",
-        "url":"/courses/csintro2",
-        "imageUrl": "/static/courses/csintro2.gif"
+        "name": "micro:bit PL",
+        "description": "Explore courses covering a range of topics to do with computing and the micro:bit",
+        "url":"https://microbit.org/teach/professional-development/",
+        "imageUrl": "https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWP52j?ver=a251&q=90&m=6&h=291&w=517&b=%23FFFFFFFF&l=f&o=t"
     }, {
-        "name": "CS Intro 3",
-        "description": "A quarter length transition from blocks to JavaScript",
-        "url": "/courses/csintro3",
-        "imageUrl": "/static/courses/csintro3.gif"
+        "name": "Minecraft PL",
+        "description": "This series focuses on using Minecraft Education as a teaching and learning tool to support strong pedagogical practices",
+        "url": "https://learn.microsoft.com/en-us/training/paths/minecraft-teacher-academy/",
+        "imageUrl": "https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE5fBrs?ver=79f6&q=90&m=6&h=291&w=517&b=%23FFFFFFFF&l=f&o=t"
     }
 ]
 ```
 
-## About the CS Intro Series
-
-The CS Intro Series is designed to teach new developers how to code from the ground up.
-
-In CS Intro 1, students are introduced to programming through the MakeCode Blocks editor. They can create their own games, while learning concepts that are crucial to software development: creating variables, responding to events, and using iteration to simplify and extend their programs. Throughout the course, they will learn to develop their own games through small daily tasks, as well as projects that guide them through the process of turning basic ideas into full-fledged games.
-
-In CS Intro 2, students will continue to develop the software development skills they were introduced to in the first course, with more advanced programming concepts such as functions, logical comparisons, and arrays. These new skills will allow students to create more advanced and compelling games.
-
 ### ~hint
 
-In the future CS Intro 3 and CS Intro 4 courses, students will transition the skills they have learned in a Block based environment into skills in a text based coding environment, allowing them to dig deeper into the games they make, as well as transition their skills in the @boardname@ into other environments.
+In addition to the trainings found here, Arcade and micro:bit occasionally provide live professional learning opportunities in persona and online. Follow @MSMakeCode on Twitter to learn more.
 
 ### ~
 
 ## See also
 
-[Courses Home Page](/courses),
-[CS Intro 1](/courses/csintro1),
-[CS Intro 2](/courses/csintro2),
-[CS Intro 3](/courses/csintro3)
+[Arcade Courses Home Page](https://arcade.makecode.com/courses) <br/>
+[micro:bit Courses Home Page](https://makecode.microbit.org/courses) <br/>
+[Minecraft Lessons Home Page](https://education.minecraft.net/en-us/resources/explore-lessons)
diff --git a/docs/courses/tut-tut/edit-tutorial.md b/docs/courses/tut-tut/edit-tutorial.md
@@ -0,0 +1,42 @@
+# Edit a MakeCode Tutorial 
+
+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) 
+
+
+## Follow Along
+
+Let's do an example together. 
+
+### 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).
+
+For this example, we'll use [hundred.md](https://github.com/microsoft/pxt-arcade/blob/master/docs/tutorials/hundred.md)
+
+You will need to copy the text from the "Raw" version of the file, then paste it into the [Tutorial Tool](https://makecode.com/tutorial-tool).
+
+![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). 
+
+### ~
+
+
+
+## See also
+
+[Tutorial Creation Documentation](https://makecode.com/writing-docs/tutorials)<br/>
+[Skillmap Creation Documentation](https://makecode.com/writing-docs/skillmaps)
diff --git a/docs/courses/tut-tut/make-smap.md b/docs/courses/tut-tut/make-smap.md
@@ -0,0 +1,34 @@
+# Create a MakeCode Skillmap 
+
+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) 
+
+
+## Follow Along
+
+Let's do an example together. 
+
+### 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).
+
+For this example, we'll use [hundred.md](https://github.com/microsoft/pxt-arcade/blob/master/docs/tutorials/hundred.md)
+
+
+### ~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. 
+
+### ~
+
+
+
+## See also
+
+[Tutorial Creation Documentation](https://makecode.com/writing-docs/tutorials)<br/>
+[Skillmap Creation Documentation](https://makecode.com/writing-docs/skillmaps)
diff --git a/docs/courses/tut-tut/tutorial-tutorial.md b/docs/courses/tut-tut/tutorial-tutorial.md
@@ -0,0 +1,50 @@
+# Create or Edit Your Own MakeCode Skillmaps 
+
+Did you know you can create your own MakeCode tutorials? 
+
+You can also create or edit MakeCode skillmaps to better reflect your classroom interests. 
+
+This 3 part series will show you how. 
+
+## Introduction
+
+[**Tutorials**](https://makecode.com/writing-docs/tutorials) are created using [markdown text](https://www.markdownguide.org/getting-started/) and custom instructions to provide the experience you're trying to achieve. 
+
+[**Skillmaps**](https://makecode.com/writing-docs/skillmaps) are also the result of a markdown file, but this one sews multiple tutorials together into a custom pathway that guides users from one experience to another. 
+
+Small sections of tutorials can be edited very easily using our [Tutorial Tool](https://makecode.com/tutorial-tool) located at [https://makecode.com/tutorial-tool](https://makecode.com/tutorial-tool).  Those edited tutorials can be shared by clicking the share button in the upper-right corner. 
+
+![An image pointing to the upper right share button](/static/courses/tutorial-tutorial/share-tut.png)
+
+<br/>
+If you would like to create your own tutorials or skillmaps, follow the instructions provided below to get started. 
+
+
+## Course Sections
+
+```codecard
+[
+    {
+        "name": "Edit a Tutorial",
+        "description": "Customize an existing tutorial for your students",
+        "url":"courses/tut-tut/edit-tutorial",
+        "imageUrl": "/static/courses/tutorial-tutorial/edit-tut.png"
+    }, {
+        "name": "Make a Tutorial",
+        "description": "Create your own tutorial to use in your lessons",
+        "url":"courses/tut-tut/make-tutorial",
+        "imageUrl": "/static/courses/tutorial-tutorial/make-tut.png"
+    }, {
+        "name": "Make a Skillmap",
+        "description": "Design a skillmap to guide students through multiple tutorials",
+        "url": "courses/tut-tut/make-smap",
+        "imageUrl": "/static/courses/tutorial-tutorial/make-smap.png"
+    }
+    
+]
+```
+
+## See also
+
+[Tutorial Creation Documentation](https://makecode.com/writing-docs/tutorials)<br/>
+[Skillmap Creation Documentation](https://makecode.com/writing-docs/skillmaps)
diff --git a/docs/static/courses/tutorial-tutorial/copy-raw.gif b/docs/static/courses/tutorial-tutorial/copy-raw.gif
diff --git a/docs/static/courses/tutorial-tutorial/edit-tut.png b/docs/static/courses/tutorial-tutorial/edit-tut.png
diff --git a/docs/static/courses/tutorial-tutorial/make-smap.png b/docs/static/courses/tutorial-tutorial/make-smap.png
diff --git a/docs/static/courses/tutorial-tutorial/make-tut.png b/docs/static/courses/tutorial-tutorial/make-tut.png
diff --git a/docs/static/courses/tutorial-tutorial/share-tut.png b/docs/static/courses/tutorial-tutorial/share-tut.png
diff --git a/docs/static/courses/tutorial-tutorial/tut-warn.png b/docs/static/courses/tutorial-tutorial/tut-warn.png
diff --git a/docs/test/skillmap/class/class1.md b/docs/test/skillmap/class/class1.md
@@ -8,7 +8,7 @@
 
 
 
-# Miss Kiki's Class
+# Trapped in the Halls
 ### @explicitHints true
 <!-- ***************************************************
 // Use the single hash to name the tutorial, and the
@@ -99,11 +99,11 @@ switch to the **Gallery** tab to choose a student image.
 ![Toggle to Gallery](/static/skillmap/assets/gallery.png "Click the Gallery tab to choose a character")
 
 
-<!-- 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 -->
+<!-- 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 -->
 
 #### ~ tutorialhint
 

diff --git a/docs/test/skillmap/jungle.md b/docs/test/skillmap/jungle.md
@@ -0,0 +1,119 @@
+# Jungle Jump Platformer
+* name: Jungle Jump Platformer
+* description: Create a wild sidescroller called Jungle Jump! In these activities, you'll code your monkey, add magic platforms, toss explosives, and collect valuables throughout a pair of customizable level maps.
+* infoUrl: skillmap/educator-info/jungle-map-info
+* bannerUrl: /static/skillmap/jungle/jungle6.gif
+* backgroundurl: /static/skillmap/backgrounds/jungle-bg.png
+* primarycolor: #2EA9B0
+* secondarycolor: #F392BD
+* tertiarycolor: #83C252
+* highlightcolor: #FAED28
+* alternatesources: github:https://github.com/microsoft/pxt-skillmap-sample/skillmap.md
+
+
+
+## Build a Platformer Game!
+* name: Jungle Jump Platformer
+* layout: manual
+
+### jungle1
+* allowcodecarryover: false
+* name: Moving Monkey
+* type: tutorial
+* description: Make your player jump and move around!
+* url: /skillmap/jungle/jungle1
+* imageUrl: /static/skillmap/jungle/jungle1.gif
+* tags: easy
+* next: jungle2
+* position: 0 2
+
+### jungle2
+* name: Game Over
+* type: tutorial
+* description: Add poisonous plants and valuable baubles to your game!
+* url: /skillmap/jungle/jungle2
+* imageUrl: /static/skillmap/jungle/jungle2.gif
+* tags: easy, tiles, tilemaps
+* next: jungle3
+* position: 1 2
+
+### jungle3
+* name: Leaps and Bounds
+* type: tutorial
+* description: Add the code to spawn platforms with the touch of a button!
+* url: /skillmap/jungle/jungle3
+* imageUrl: /static/skillmap/jungle/jungle3.gif
+* tags: easy, events
+* next: jungle4
+* position: 1 3
+
+### jungle4
+* name: Blown Away
+* type: tutorial
+* description: Use dynamite to clear platforms!
+* url: /skillmap/jungle/jungle4
+* imageUrl: /static/skillmap/jungle/jungle4.gif
+* tags: easy, events, overlap
+* next: jungle5
+* position: 2 3
+
+### jungle5
+* name: Watch Out!
+* type: tutorial
+* description: Make your dynamite just a little dangerous.
+* url: /skillmap/jungle/jungle5
+* imageUrl: /static/skillmap/jungle/jungle5.gif
+* tags: easy, events, overlap, lives
+* next: jungle6
+* position: 2 2
+
+
+### jungle6
+* name: Animations
+* type: tutorial
+* description: Animate your monkey!
+* url: /skillmap/jungle/jungle6
+* imageUrl: /static/skillmap/jungle/jungle6.gif
+* tags: easy, animations
+* next: jungle7
+* position: 2 1
+
+
+### jungle7
+* name: Extra Levels
+* type: tutorial
+* description: Add another level to the end of your game for more fun!
+* url: /skillmap/jungle/jungle7
+* imageUrl: /static/skillmap/jungle/jungle7.gif
+* tags: easy, levels, tilemaps
+* next: jungle8, platformer-cert-1
+* position: 3 1
+
+
+### jungle8
+* name: Make it Your Own
+* type: tutorial
+* description: Change your images and tilemaps to make a game of your own!
+* url: /skillmap/jungle/jungle8
+* imageUrl: /static/skillmap/jungle/jungle8.gif
+* tags: intermediate, art, assets
+* position: 4 0
+
+
+### platformer-cert-1
+* name: Congrats!
+* kind: completion
+* type: certificate
+* imageUrl: /static/skillmap/certificates/jungle-cert.png
+* url: /static/skillmap/certificates/jungle-cert.pdf
+* position: 4 1
+* actions:
+    * map: [Try Space Explorer](/skillmap/space)
+    * editor: [Edit Your Project with a Full Toolbox](/)
+* rewards:
+        * certificate:
+            * url: /static/skillmap/certificates/jungle-cert.pdf
+            * preview: /static/skillmap/certificates/jungle-cert.png
+        * completion-badge:
+            * image: /static/badges/badge-jungle.png
+            * name: Jungle Jump