Makecode Tutorial Recipe Doesn't Show Code Blocks

Howdy!

I’m working on putting together a series of very short tutorials to give people a quick lay of the land of the Makecode Arcade Editor. I’m aiming to use these for a hopefully up and coming game jam.

I would like to use the PRIMM (Predict- Run- Inspect- Modify- Make) method for these tutorials. I am hoping to start with a starter code that asks for a prediction and then test out the prediction. From looking at the docs, it seems that using the aracde.makecode.com#recipe:urloftutorial should load the code blocks when the tutorial first starts. I’m using Github to store the project. I’m finding that it does not reliably load the blocks. I’ve tried versions, deleting what’s in the cache, different browsers. Any other ideas?

Here are two example tutorials:

BTW… the tutorials are currently a work in progress… I’m just seeing if I should continue down this path.

1 Like

Two things:

  • If you want to start with specific blocks in the workspace in your tutorial, you should use a ```template snippet rather than a ```blocks snippet – if you search for that in this file https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/skillmap/star/star3.md (a recent tutorial in the sing skillmap) you can see the code in that snippet is the code that starts in the workspace. ```blocks snippets are used to create hints, and often just contain the full content of the tutorial code up to the given step for that reason, so they do not get added to the workspace by themselves.
  • Pretty minor but you should typically use http://arcade.makecode.com/#tutorial:urloftutorial vs recipe – recipes are technically a very similar feature where you can load tutorials into an existing project, so using the recipe link may behave slightly differently in the future.
2 Likes

Thanks so much, @jwunderl. That was a most helpful distinction. The link to the demo tutorial was also very helpful. I also figured out that you cannot have both code blocks in your editor and ```template blocks in the tutorial. It lead to duplicate sprites loading (see screenshot). Removing the editor blocks resolved this issue.

arcade-Things-that-Go-Bump

I just have a few follow-up questions…

  • Is there somewhere in the file structure I can set the simulator to load in the stopped position? I want the user to start the simulator on their own.
  • Is there a list of available emojis that are supported? I like the idea of providing icon supports within the instructions. :paper plane: worked but :brain: or :crystal_ball: did not. Is it using bootstrap icons/ syntax?

Thanks again for the help!

As of right now, there’s not a way to pause the simulator on load, but I look forward to being able to have that setting!

I don’t know of a list of emojis, but I usually copy emojis from here (https://emojipedia.org) and paste them in. That usually works pretty well.

@shakao ^^ was there a limit on what emojis you can put in tutorials?

Thanks for the reply @KIKIvsIT! Good to know about the pause. I think moving forward I’ll try and have a controller event start the code.

Thanks for the emoji link! I also ran into this most helpful GitHub gist that lists the syntax for emoji using markup and trying to use those codes: https://gist.github.com/rxaviers/7360908. I definitely have not exhaustively tried all the emoji syntax but was hoping if there was documentation on it I can save myself some time. I’m thinking I’ll just make a tutorial section with all the emojis and see what loads :wink:

Thanks also for looking into it @jwunderl . I’ll let you know what I figure out.

Ah! Yes, the icons that appear next to each instruction step are not emojis, they’re Fontawesome icons from the Semantic UI library: https://semantic-ui.com/elements/icon.html We do also have an allow-list of icon names, but I think most of the icons on that page should show up.

It’s a little limited at the moment but we’re in the process of upgrading our icon library and there should be more icon options after that!

Sweet! It works! Thanks so much for the link @shakao.

1 Like