Tutorial Creators

Here is the slide decks for CS Intro 1 > Intro > Makecode Orientation. I am creating the Tutorial Editor slide deck next.

Google Slides

PowerPoint

I was trying to test my tutorial in the Makecode Arcade editor but I keep receiving this following message. Any idea on what I could be doing wrong? I know its not my internet connect and the tutorial is connected to my Github. @MakeCode @richard @jwunderl @KIKIvsIT

2 Likes

Can you screenshot any errors that show up in the console?

There are no errors showing up in the console. When I go use the link via the Share button that brings up tutorial, so I can just use that now. I only get that error when trying to open tutorial using the experiment button.

hmmm @rymc88 can you give me the share link so that I can import it and try to reproduce it locally?

Of course

https://arcade.makecode.com/#tutorial:github:rymc88/tutorial-test/test-tutorial

@rymc88 thanks! you definitely found a bug. I’ve filed an issue here:

1 Like

I am having trouble figuring out place an image/gif into a tutorial. Looking at examples and the writing docs I understand how to reference it in the markdown, I just understand how to store so it can be reference. The bit below from the writing docs have me confused.

“Images should be hosted under the ./docs/static/ folder path of the editor project’s repository files. The relative URL in markdown begins with just /static/ though.” - Writing Doc

Any help would be greatly appreciated!

You can pull images from anywhere, you just need to use the full URL instead of relative addressing. I believe only MakeCode can use relative addressing, since it’s relative to the MakeCode docs folder and not the skillmap itself.

For an image hosted in your Github repo, you can right click the image to get the blob address. It will be long, but it should work!

3 Likes

Awesome! Thank you for the help :slight_smile:

I created a slide deck that walks through the basics of making a tutorial with Blocks, JavaScript or Python. I plan on making another that covers Github integration and more advanced tutorial features.

Google Slides

PowerPoint

1 Like

@MakeCode I cannot seem to have the “mySprite say block” available in the toolbox in my tutorial even when using the ghost markdown.

2024-03-14_11-49-28

@MakeCode @richard I am having trouble getting images to appear in my tutorials and skillmaps. What is the proper markdown for inserting images because I have tried every way the Writing Docs & samples have mentioned and still I have no luck :frowning:

Hi, @rymc88 !

This seemed to work just fine. Note the exclamation mark before the alt-text and URL.

# My Tutorial

## Step 1

![Microsoft logo](https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWCZER?ver=1433&q=90&m=6&h=120&w=120&b=%23FFFFFFFF&l=f&o=t&aim=true)

Here is some text.

## Step 2

Congratulations, you did it!
    
1 Like

@rymc88 : If I am interpreting the MakeCode Tutorial system correctly, the tutorial and your code both need to be well-formed. If I enter just those six lines as a tutorial, the tutorial will fail to run … although I’m guessing that you have additional code following those six. :slight_smile:

  • A tutorial must have at least one page (i.e., you need at least one level-two heading).
  • In your code snippet, mySprite is undefined.

This seems to work:

# Lab 1.2 - Sprites in the Corner

## Step 1

This is step 1.

## Step 2

This is step 2.

```ghost
let mySprite = sprites.create(img`.`, SpriteKind.Player)
mySprite.sayText(":)")
game.showLongText("", DialogLayout.Bottom)
```

I’m still getting accustomed to the tutorial environment, so I’m sure I’m missing some things. Please keep posting questions. We’ll learn together! :smile:

1 Like

I think the issue was I grabbing the image from my GitHub repository. I had to append the link with:
?raw=true

Overview

3 Likes

I went back to it and it was not having mySprite defined, I cannot believe it was that easy haha.

2 Likes

Okay, this isn’t even close to done yet, but it should be helpful for this thread.

Only the first card is working at this point (“Edit a Tutorial”) and the main takeaway from it is that these two tutorials are SUPER-COMMENTED so they can help you understand how to do most of what we do internally.

https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/tutorials/hundred.md

and

https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/test/skillmap/class/class1.md

3 Likes

I cannot figure out why my Skillmap gets stuck loading when a step is chosen. Any ideas?

Skillmap Link

Skillmap Github

Interesting…

image

I’ve forked your repository so that I can play around with some ideas. I’ll report back if I find anything interesting!