microsoft / pxt-brainpad

Microsoft MakeCode editor for the GHI Brainpad
https://makecode.brainpad.com/
Other
3 stars 11 forks source link

Disappearing in-line code snippets. #113

Closed greg-norris closed 6 years ago

greg-norris commented 6 years ago

When running a newly created 'variable' tutorial. There is an issue with disappearing in-line code snippets. Other tutorials work fine when adding the blocks, it only seems to be when using a variable with the same name as the one inside the tutorial. I made 3 example videos to demonstrate the problem.

1st example, shows all the inline code snippets working when I just click next through the tutorial. https://www.youtube.com/watch?v=1VSBGrOsly8

2nd example, shows when following the instructions in the tutorial and naming the variable 'count' and dragging it into the 'on start' block. All future in-line block snippets disappear and are no longer rendered inside the tutorial. https://www.youtube.com/watch?v=ZmZLfTof-DE

3rd example demonstrates that if I name my variable 'test' instead of 'count' all the in-line blocks render correctly. https://www.youtube.com/watch?v=Q6DjjbscoOc

Desktop:

riknoll commented 6 years ago

@greg-norris can you post the markdown for the tutorial?

greg-norris commented 6 years ago

Creating and Using Variables

Step 1 @unplugged

A ||variables:variable|| is a value that can change depending on conditions or information in our code. In this tutorial, we will create and manipulate the data inside a ||variables:variable||.

Step 2 @fullscreen

Under menu, select ||variables:VARIABLES||. Then select ||variables:Make a Variable...|| We try to give ||variables:variables|| meaningful names that will make the code easier to read. Let's name ours ||variables:count||.

on Start and forever blocks

Step 3 @fullscreen

After naming our ||variables:count|| variable. We now see NEW blocks inside the ||variables:VARIABLES|| menu that contain our newly created ||variables:count|| variable.

drag in on start block

Step 4 @fullscreen

We need to set the our new ||variables:count|| variable. Drag the ||variables:set count to|| block into the ||loops:onstart|| block. We can leave the parameter at zero.

let count = 0
count = 0

Step 5 @fullscreen

Next, let's add 1 to our ||variables:count|| variable, by dragging in the ||variables:change count by|| block. We can leave it's parameter set to 1

let count = 0
count = 0
count += 1

Step 6 @fullscreen

1 has now been added to our ||variables:count|| variable, but we can't see it anywhere. Let's display it on screen by dragging in a ||display:show number at line||block.

let count = 0
count = 0
count += 1
display.showNumber(0, 1)

Step 7 @fullscreen

Our ||variables:variable|| won't show on screen until we add it to our ||display:show number at line||block. Under the ||variables:VARIABLES|| menu select the oval holding our ||variables:count variable|| and drag it into ||display:show number at line|| block where the first parameter is.

let count = 0
count = 0
count += 1
display.showNumber(count, 1)

Step 8 @fullscreen

You may have noticed the ||display:display|| just shows one. This is lot of code just to show the number 1 on screen. Right? Next we'll demonstrate the real benefit of using variables.

let count = 0
count = 0
count += 1
display.showNumber(count, 1)

Step 9 @fullscreen

Drag the ||variables:change count by|| block and the ||display:show number at line|| block into the ||loops:forever|| block. What number or numbers now show on the ||display:display||? Now we see the real power of variables.

let count = 0
count = 0
forever(function () {
    count += 1
    display.showNumber(count, 1)
})

Step 10 @fullscreen

As you can see the ||variables:count|| increased by 1 and continues to count up on the ||display:display||. This is because the ||variables: change count by|| block is now inside the ||loops:forever|| block. Finally try changing the ||variables:change count by|| 5. What happens now?

let count = 0
count = 0
forever(function () {
    count += 5
    display.showNumber(count, 1)
})

Step 11 @fullscreen

In this quick lesson we learned that ||variables:variables|| can be set, changed and used inside of code. ||variables:Variables|| are an import tool in the programmers tool kit for manipulating and managing data.

greg-norris commented 6 years ago

@riknoll I tried removing the count references in the steps but still had the same issue.

pelikhan commented 6 years ago

@riknoll this looks like some weird interaction between our decompilation happening in the tutorial - it probably impacts all tutorials with variables.

riknoll commented 6 years ago

I'll take a look

riknoll commented 6 years ago

Fixed by https://github.com/Microsoft/pxt/pull/4662

pelikhan commented 6 years ago

Please pickup 3.22.18 or up to get this fix.