# MakeCode Tutorial Editor: Help with showing all coding blocks from the start

**URL:** <https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038>\
**Category:** Educators' Lounge\
**Tags:** tutorial\
**Created:** [September 2, 2025, 11:42pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038 "2025-09-02T23:42:21Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 2, 2025, 11:42pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/1 "2025-09-02T23:42:21Z")

</div>

Hello All,

I’m creating a tutorial, and I want to use the hint blocks, but I want the hit blocks to show for that level, not the entire lesson. Is there a way to make it so on certain steps you have all the coding blocks and on others only certain ones?

Also can you including short videos instead of just image and gifs?

---

<div class="post-metadata">

**Author:** ![redSprite](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/redsprite/32/34262_2.png) [@redSprite](https://forum.makecode.com/u/redSprite)\
**Post date:** [September 4, 2025, 2:16am UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/2 "2025-09-04T02:16:37Z")

</div>

First part: Not so sure.

Second part: I recall being able to put youtube videos in tutorials as one about a carnival had one. So yes… Probably.

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [September 4, 2025, 2:32am UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/3 "2025-09-04T02:32:50Z")

</div>

Take a look at this one for reference. Feel free to copy-and-paste the code into the [tutorial tool](https://makecode.com/tutorial-tool).

[https://raw.githubusercontent.com/Microsoft/pxt-microbit/refs/heads/master/docs/projects/flashing-heart.md](https://raw.githubusercontent.com/Microsoft/pxt-microbit/refs/heads/master/docs/projects/flashing-heart.md)

Specifically, look at **Step 2** :

````markdown
## {Step 2}

Drag another ``||basic:show leds||`` block underneath the first.

```blocks
basic.forever(function() {
    basic.showLeds(`
        . # . # .
        # # # # #
        # # # # #
        . # # # .
        . . # . .`);
    basic.showLeds(`
        . . . . .
        . . . . .
        . . . . .
        . . . . .
        . . . . .`);
})
```

````

This group of blocks will only appear in the hint in step 2. It will not appear elsewhere.

If I’m misinterpreting your question, then feel free to provide an example of what you’re trying to do. (A link to your current tutorial would be helpful in that case.)

As for videos, you can embed YouTube videos as demonstrated in the first tutorial from _Whack the Mole_.

```markdown
## Whack-the-Mole Intro @showdialog

![whack-the-mole](youtube:UKYPIXl7agI)

---

Special thanks to MakeCode forum User _SoftTalker_ for this submission.

```

Otherwise, you could include a URL to the video.

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [September 5, 2025, 1:24am UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/5 "2025-09-05T01:24:13Z")

</div>

I do not believe that is possible. You can configure a tutorial to show just the blocks used in the tutorial, or it can show the entire toolbox. You cannot show different “versions” of the toolbox in each step.

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 5, 2025, 4:09pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/6 "2025-09-05T16:09:50Z")

</div>

Okay that makes sense. I had thought you could change or as the student goes through more levels the toolbox opens up more before somewhere.

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 10, 2025, 5:27pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/7 "2025-09-10T17:27:35Z")

</div>

How do you get the emojis to work? I saw in some tutorials they would use them, and the markup code is for example :suitcase: but they do not load.

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 11, 2025, 4:40pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/8 "2025-09-11T16:40:04Z")

</div>

Another question, can I make custom functions that can be preloaded into the tutorial Toolbox? Some of the heavier math, I would rather it be in a function and students can just bring that out, like a custom library.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [September 11, 2025, 5:23pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/9 "2025-09-11T17:23:06Z")

</div>

@Winess yes! you can either create your own extension in a github repo and reference it like this in your tutorial markdown:

````auto
```package
extension-name=github:github-username/extension-name
```

````

or you can inline the extension in your markdown file like this:

````auto
```customts
//% weight=100 color=#0fbc11 icon=""
namespace custom {
    //% block
    export function foo(n: number, s: string): void {
        // Add code here
    }
}
```

````

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 11, 2025, 9:21pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/10 "2025-09-11T21:21:37Z")

</div>

Thank you, I have been referencing the tutorial guide. How do you get the emojis to work? I saw in some tutorials they would use them, and the markup code is for example :suitcase: but they do not load.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [September 15, 2025, 4:50pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/11 "2025-09-15T16:50:28Z")

</div>

@Winess try embedding the emoji directly in the markdown instead of using the `:whatever:` syntax

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 17, 2025, 3:30pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/12 "2025-09-17T15:30:13Z")

</div>

Thank you, the UTF-8 Unicode inserting does work, for example 🗻

Another question: can students only do the block coding when making Arcade MakeCode Tutorials in the Tutorial Editor? The box in the middle that allows you to choose your programming language dissapears when using the share link.

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [September 17, 2025, 3:32pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/13 "2025-09-17T15:32:10Z")

</div>

When writing tutorials, you set which languages are used.

> **[Multiple languages](https://makecode.com/writing-docs/tutorials/multi-lang)**
>
> In addtion to Block-based tutorials, MakeCode supports tutorials for JavaScript and Python.

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [September 29, 2025, 4:57pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/14 "2025-09-29T16:57:04Z")

</div>

This is harder than I thought. I am trying to create a simple function that shows 4 sprites appear at random on the map.

````auto
```block

function() {}

```

```customts

//% weight=100 color=#0fbc11 icon=""

namespace custom {

    //% block="test"

    export function data() void{

        for (let i = 0; i < 4; i++) {

            let myData = sprites.create(img\`\`, SpriteKind.Food)

            myData.setPosition(randint(10, scene.screenWidth()-10), randint(10, scene.screenHeight()-10))

        }   

    }

}   

```

````

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [September 29, 2025, 5:09pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/15 "2025-09-29T17:09:26Z")

</div>

@Winess give this a shot:

````markdown
## step 1

```blocks
custom.data()
```

```customts

//% weight=100 color=#0fbc11 icon=""
namespace custom {

    //% block="test"
    export function data(): void {
        for (let i = 0; i < 4; i++) {
            let myData = sprites.create(img`.`, SpriteKind.Food);
            myData.setPosition(randint(10, screen.width - 10), randint(10, screen.height - 10))
        }   
    }
}   

```

````

this should produce a block that looks like this:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/f/f/fff73f4085fbea1c16b74fe8ac4a35303a9e3415.png)

some notes on the code you posted:

- you forgot the colon before the return type in the function declaration. it should be `function data(): void`, not `function data() void`
- make sure you don’t escape the backticks (don’t put a backslash before them). not sure if you did that in your markdown or just for the post here, but make sure it isn’t in the tutorial
- when declaring an image, it needs to have at least one pixel in between the backticks.

---

<div class="post-metadata">

**Author:** ![Winess](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/winess/32/25976_2.png) [@Winess](https://forum.makecode.com/u/Winess)\
**Post date:** [October 3, 2025, 5:08pm UTC](https://forum.makecode.com/t/makecode-tutorial-editor-help-with-showing-all-coding-blocks-from-the-start/39038/16 "2025-10-03T17:08:03Z")

</div>

Thank you, that worked great!

Im having a major problem with my skill map, the first tile worked great! When I get to my tiles 2-6 the makecode simulator never runs, just keeps loading. Any thoughts?

Link to skillmap: [https://arcade.makecode.com/--skillmap#github:sjwines/hourofai/forest.md](https://arcade.makecode.com/--skillmap#github:sjwines/hourofai/forest.md)

Link to my github: [https://github.com/sjwines/hourofai](https://github.com/sjwines/hourofai)