Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the popular set of tutorials #5354

Merged
merged 5 commits into from
Sep 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 12 additions & 18 deletions docs/projects/dice.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,28 @@

## {Introduction @unplugged}

Let's turn the @boardname@ into dice!
(Want to learn how the accelerometer works? [Watch this video](https://youtu.be/byngcwjO51U)).
Let's create some digital 🎲 dice 🎲 with our micro:bit!

![A microbit dice](/static/mb/projects/dice.png)

## {Step 1}

We need 3 pieces of code: one to detect a throw (shake), another to pick a random number, and then one to show the number.

Use the ``||input:on shake||`` block you see in the editor workspace. It runs code when you shake the @boardname@.
The ``||input:on shake||`` block runs code when you shake 👋 the @boardname@. From the ``||basic:Basic||`` category, get a ``||basic:show number||`` block and place it inside the ``||input:on shake||`` block to display a number.

```blocks
input.onGesture(Gesture.Shake, function() {

//@highlight
basic.showNumber(0)
})
```

## {Step 2}

Get a ``||basic:show number||`` block and place it inside the ``||input:on shake||`` block to display a number.

```blocks
input.onGesture(Gesture.Shake, function() {
//@highlight
basic.showNumber(0)
})
```
Press the white **SHAKE** button on the micro:bit on-screen simulator, or move your cursor quickly back and forth over the simulator. Do you see the number 0 appear? ⭐ Great job! ⭐

## {Step 3}

Put a ``||Math:pick random||`` block in the ``||basic:show number||`` block to pick a random number.
But we don't want to show 0 on our dice all the time. From the ``||math:Math||`` Toolbox category, drag a ``||Math:pick random||`` block and drop it into the ``||basic:show number||`` block replacing the **0**.

```blocks
input.onGesture(Gesture.Shake, function() {
Expand All @@ -43,7 +34,7 @@ input.onGesture(Gesture.Shake, function() {

## {Step 4}

A typical dice shows values from `1` to `6`. So, in ``||Math:pick random||``, don't forget to choose the right minimum and maximum values!
A typical dice shows values from 1 to 6 dots. So, in the ``||Math:pick random||`` block, change the minimum value to **1** and the maximum value to **6**.

```blocks
input.onGesture(Gesture.Shake, function() {
Expand All @@ -54,11 +45,14 @@ input.onGesture(Gesture.Shake, function() {

## {Step 5}

Use the simulator to try out your code. Does it show the number you expected?
Press the white **SHAKE** button again on the micro:bit simulator. Do you see random numbers between 1 and 6 appear? ⭐ Great job! ⭐

## {Step 6}

If you have a @boardname@ connected, click ``|Download|`` and transfer your code to the @boardname@!
If you have a @boardname@ device, connect it to your computer and click the ``|Download|`` button. Follow the instructions to transfer your code onto the @boardname@. Once your code has been downloaded, attach your micro:bit to a battery pack and use it as digital 🎲 dice for your next boardgame!

## {Step 7}
Go further - Try adding some Music blocks to make a sound when you shake your dice, or use the micro:bit LED lights to show number values. Want to learn how the micro:bit motion detector or accelerometer works? [Watch this video](https://youtu.be/byngcwjO51U).

```validation.global
# BlocksExistValidator
Expand Down
20 changes: 12 additions & 8 deletions docs/projects/flashing-heart.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# Flashing Heart

## Introduction @unplugged

Learn how to use the LEDs and make a flashing heart!
(Want to learn how lights work? [Watch this video](https://youtu.be/qqBmvHD5bCw)).
## Code a Flashing Heart @unplugged

Code the lights on the micro:bit into a flashing heart animation! 💖

![Heart shape in the LEDs](/static/mb/projects/flashing-heart/sim.gif)

## {Step 1 @fullscreen}

Place the ``||basic:show leds||`` block in the ``||basic:forever||`` block and draw a heart.
Click on the ``||basic:Basic||`` category in the Toolbox.
Drag the ``||basic:show leds||`` block into the ``||basic:forever||`` block.
Then in the ``||basic:show leds||`` block, click on the squares to draw a heart design.

![An animation that shows how to drag a block and paint a heart](/static/mb/projects/flashing-heart/showleds.gif)

## {Step 2}

Place another ``||basic:show leds||`` block. You can leave it blank and draw what you want.
Drag another ``||basic:show leds||`` block underneath the first.

```blocks
basic.forever(function() {
Expand All @@ -37,11 +37,15 @@ basic.forever(function() {

## {Step 3}

Look at the virtual @boardname@, you should see the heart and your drawing blink on the screen.
Look at the @boardname@ on the screen. Do you see a flashing heart animation? ⭐ Great job! ⭐

## {Step 4}

If you have a @boardname@ connected, click ``|Download|`` to transfer your code and watch the hearts flash!
If you have a @boardname@ device, connect it to your computer and click the ``|Download|`` button. Follow the instructions to transfer your code onto the @boardname@ and watch the hearts flash!

## {Step 5}

Go further - try adding more ``||basic:show leds||`` blocks to create a longer animation! Learn more about how the @boardname@ lights work by watching [this video](https://youtu.be/qqBmvHD5bCw).

```template
basic.forever(function() {})
Expand Down
27 changes: 17 additions & 10 deletions docs/projects/love-meter.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,55 @@

## {Introduction @unplugged}

Make a love meter, how sweet! The @boardname@ is feeling the love, then sometimes not so much!
How much love 😍 are you emitting today? Create a 💓 LOVE METER 💓 machine with your micro:bit!

![Love meter banner message](/static/mb/projects/love-meter/love-meter.gif)

## {Step 1}

Let's build a **LOVE METER** machine. We'll use an ``||input:on pin pressed||`` block to run code when pin **0** is pressed. Use ``P0`` from the list of pin inputs.
We'll use this ``||input:on pin pressed||`` block to run code when pin **0** on the micro:bit is pressed. From the ``||basic:Basic||`` Toolbox category, drag a ``||basic:show number||`` block and drop into the ``||input:on pin pressed||`` block.

```blocks
input.onPinPressed(TouchPin.P0, function() {
//@highlight
basic.showNumber(0)
})
```

## {Step 2}

Using ``||basic:show number||`` and ``||Math:pick random||`` blocks, show a random number from `0` to `100` when pin **0** is pressed.
From the ``||math:Math||`` category, get a ``||Math:pick random||`` block and drop it into the ``||basic:show number||`` block replacing 0.

```blocks
input.onPinPressed(TouchPin.P0, function() {
//@highlight
basic.showNumber(randint(0, 100))
})
```
## {Step 3}

Click on pin **0** in the simulator and see which number is chosen.

## {Step 4}
## {Step 3}

Show ``"LOVE METER"`` on the screen when the @boardname@ starts.
Now let's be sure to label our Love Machine! From the ``||basic:Basic||`` Toolbox category, drag an ``||basic:on start||`` block and drop it anywhere on the Workspace. Then get a ``||basic:show string||`` block and place it in the ``||basic:on start||`` block. Type the words "LOVE METER" into the ``||basic:show string||`` block.

```blocks
//@highlight
basic.showString("LOVE METER")
input.onPinPressed(TouchPin.P0, function() {
basic.showNumber(randint(0, 100))
});
})
```

## {Step 4}

Let's test our code. Press **Pin 0** on the micro:bit on-screen simulator (bottom left). Numbers between 0-25 = 🖤 No Love, 26-50 = 🫶 BFF Love, 51-75 = 💘 Brokenhearted Love, 76-100 = 💖🔥 Fiery Hot Love!

## {Step 5}

Click ``|Download|`` to transfer your code in your @boardname@. Hold the **GND** pin with one hand and press pin **0** with the other hand to trigger this code.
If you have a @boardname@ device, connect it to your computer and click the ``|Download|`` button. Follow the instructions to transfer your code onto the @boardname@. Once your code has been downloaded, hold the **GND** pin with one hand and touch the **0** pin with the other hand. Your micro:bit 💓 LOVE METER 💓 machine will detect the love current flowing through your body!

```blockconfig.global
randint(0, 100)
```

```validation.global
# BlocksExistValidator
Expand Down
55 changes: 38 additions & 17 deletions docs/projects/micro-chat.md
Original file line number Diff line number Diff line change
@@ -1,65 +1,86 @@
# Micro Chat

## Introduction @unplugged
## {Introduction @unplugged}

![Two @boardname@ connected via radio](/static/mb/projects/a9-radio.png)

Use the **radio** to send and receive messages with other @boardname@.
Use the micro:bit 📻 radio to send and receive 💬 messages between micro:bits!

## Set a radio group
## {Step 1}

The first thing you want to do is to put in a ``||radio:set group||``. This will make certain that you and another @boardname@ will receive just the messages assigned to that group and not the messages sent from some other @boardname@ that's not part of your conversation. This like tuning to a particular channel to talk on.
From the ``||radio:Radio||`` Toolbox category, drag a ``||radio:radio set group||`` block into the ``||basic:on start||`` block. This will act as the channel over which we'll send messages. Only micro:bits who are in the same group will be able to send and receive messages between them.

```blocks
radio.setGroup(1)
```

## Sending a message
## {Step 2}

Use ``||input:on button pressed||`` to send a text message over radio with ``||radio:send string||``.
Every @boardname@ nearby will receive this message.
From the ``||input:Input||`` Toolbox category, drag an ``||input:on button A pressed||`` block onto the Workspace.

```blocks
input.onButtonPressed(Button.A, function() {})
```

## {Step 3}

From the ``||radio:Radio||`` category, drag a ``||radio:radio send string||`` block into the ``||input:on button A pressed||`` block and type a message. When we press button A on our micro:bit, we'll send this message to every micro:bit nearby in group 1.

```blocks
input.onButtonPressed(Button.A, function() {
radio.sendString(":)")
radio.sendString("Micro Chat!")
})
```

## {Step 4}

From the ``||radio:Radio||`` category, drag an ``||radio:on radio received string||`` block onto the Workspace.

```blocks
radio.onReceivedString(function (receivedString) {
})
```

## Receiving a message
## {Step 5}

Add a ``||radio:on received string||`` block to run when a message is received.
From the ``||basic:Basic||`` category, get a ``||basic:show string||`` block and drop it in the ``||radio:on radio received string||`` block.

```blocks
radio.onReceivedString(function (receivedString) {
basic.showString("Hello!");
})
```

## Displaying text
## {Step 6}

Add a ``||basic:show string||`` to display the string on the screen. Pull the ``||variables:receivedString||`` out of ``||radio:on received string||`` and put it into ``||basic:show string||``.
Pull the ``||variables:receivedString||`` variable block out of the ``||radio:on received string||`` block and put it into the ``||basic:show string||`` block replacing "Hello!"

```blocks
radio.onReceivedString(function (receivedString) {
basic.showString(receivedString);
})
```

## Testing in the simulator
## {Step 7}

Press button **A** on the simulator, you will notice that a second @boardname@ appears (if your screen is too small, the simulator might decide not to show it). Try pressing **A** again and notice that the ":)" message gets displayed on the other @boardname@.
Let's test our code! In the micro:bit on-screen simulator, press button **A**. You should see a second @boardname@ appear. Now try pressing **A** again. Do you see your message appear on the second micro:bit? ⭐ Great job! ⭐

```blocks
input.onButtonPressed(Button.A, function() {
radio.sendString(":)");
radio.sendString("Micro Chat!");
})
radio.onReceivedString(function (receivedString) {
basic.showString(receivedString);
})
```

## Try it for real
## {Step 8}

If you have a @boardname@ device, connect it to your computer and click the ``|Download|`` button. Follow the instructions to transfer your code onto the @boardname@. If you have two micro:bits, download the program to each one. Press button **A** on one and see if the other gets the message!

## {Step 9}

If you have two @boardname@s, download the program to each one. Press button **A** on one and see if the other gets a message.
Go further - try using different buttons to send a mix of messages 📝, or send secret 🔒 messages to different radio groups!

```template
//
Expand Down
23 changes: 9 additions & 14 deletions docs/projects/name-tag.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,34 @@
# Name Tag

## {Introduction @unplugged}
## Turn your micro:bit into a digital name tag @unplugged

Tell everyone who you are. Show you name on the LEDs.
See your name in 💡 lights! 💡 Code the micro:bit to scroll your name across the screen.

![Name scrolling on the LEDs](/static/mb/projects/name-tag/name-tag.gif)

## {Step 1}

Place the ``||basic:show string||`` block in the ``||basic:forever||`` block to repeat it. Change the text to your name.
Click on the ``||basic:Basic||`` category in the Toolbox.
Drag a ``||basic:show string||`` block into the ``||basic:forever||`` block.
Then in the ``||basic:show string||`` block, change the text from "Hello!" to your name.

```blocks
basic.forever(function() {
basic.showString("MICRO");
basic.showString("My Name");
})
```

## {Step 2}

Look at the simulator and make sure it shows your name on the screen.
Look at the @boardname@ simulator on the screen. Do you see your name scrolling across? ⭐ Great job! ⭐ You've turned the micro:bit into a digital name tag!

## {Step 3}

Place more ``||basic:show string||`` blocks to create your own story.

```blocks
basic.forever(function() {
basic.showString("MICRO")
basic.showString("<3<3<3")
})
```
If you have a @boardname@ device, connect it to your computer and click the ``|Download|`` button. Follow the instructions to transfer your code onto the @boardname@ and watch your name appear in lights!

## {Step 4}

If you have a @boardname@ connected, click ``|Download|`` to transfer your code and watch your name scroll!
Go further - try adding more ``||basic:show string||`` blocks to create a story! Learn more about how the @boardname@ lights work by watching [this video](https://youtu.be/qqBmvHD5bCw).

```template
basic.forever(function() {})
Expand Down
Loading
Loading