Adding Polish To Custom Tutorials through Step Icons

First off, I would like to say thank you to the whole Make Code Team for creating an amazing tutorial editor as well as inspiring me to dive deeper into higher levels of coding than I would have on my own. One of my favorite things to do for my job, at the moment, is work on developing custom tutorials using the editor, Github, and a few Markdown editors.

However I have run into a bit of a snag and was hoping someone from the team could help me out.
I have looked extensively though GitHub as well as the various tutorials and skill maps MakeCode has provided and I have come up with an effective format for all of my tutorial steps. One thing that I was really happy to discover was the use of the icons before each step.

See Example Below:

  • :paper plane: Next we are going to add our ||sprites:set mySprite to sprite [] of kind Player|| from our ||sprites:Sprites|| category to our ||loops:on start|| container.

As an educator I think this is an important feature to include as it provides students an additional sign as to what section the code is located in. Through my research I found many of the icons titles (paper plane, gamepad, game, calculator, image, id card, justify, sync, etc.), but I am still struggling to find a few different ones. Specifically the function icon title has eluded me. I have tutorials planned where I wanted to teach students how to effectively use functions but became frustrated with myself when I couldn’t find the icon or a suitable substitute.

To that end I have a simple question. Is there a list of the icons and icon titles included in the MakeCode Engine, and if so where is it located so I may view it?

Additionally I would love to see a video from you guys about how to make a custom Skill Map. I think it would be a lot of fun for students to create larger scale games by combining different games together and using the Skill Map as a pseudo over world.

1 Like

I’ll see if I can track down the function icon. They’re all Font Awesome icons, they’re just sometimes a bit obscure.

Also, you’re reading my mind about the Skillmap video! I have some tutorial/skillmap videos in the pipeline, but it will take a little while to get them out. Let me know if there’s anything in particular you want me to cover.

It looks like the f(x) icon is a custom creation.

:function: should come close, but to make it perfect, an engineer will need to add the custom svg.

Ah! Right now we’re using the Semantic UI short names for icons, so you can look here: for most of them. We also have custom icons like the blocks puzzle piece, which are specified by adding xicon (so xicon blocks). The function icon is a custom one but it hasn’t been added to the allowed-icons list yet, I’ll make a note to update this ASAP! You’re using Arcade, right?

Thank you so much for the quick responses. Knowing that you are using Semantic UI’s names for the icons is a huge help when it comes to polishing my tutorials. I am using the Arcade settings within the tutorial editor. I will keep my eyes out for when that update is made. I’m looking forward to it.

There are a few things I would love to see included in the videos about designing a Skillmap. First I would love to learn the basic coding structure to create and edit the map itself. I feel like there will be some understanding of GitHub to effectively do that and that is something I would need to look into myself in order to make sure I have the needed knowledge. Second I would love to learn how to take user generated code from one tutorials and include it in the next one. That way students can take their work with them as well as include custom assets from previous tutorials or games. Knowing these pieces of information can open up many possibilities about how the Skillmaps can be used to teach but also to create an enjoyable and engaging large scale gaming experience.

Hello, we’ve added the “function” icon and updated Arcade! If you use :function: now you should see the correct symbol in the bullet :slight_smile: Definitely let me know if there are any issues!

1 Like