Update the popular set of tutorials (#5354)

* import the updated 'blocks' tutorials

* import the updated 'spy' tutorials

* snippet errors

* smiley button edits

* swap in new tutorial links

docs/projects/dice.md

@@ -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() {
@@ -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() {
@@ -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

docs/projects/flashing-heart.md

@@ -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() {
@@ -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() {})

docs/projects/love-meter.md

@@ -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

docs/projects/micro-chat.md

@@ -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
 //

docs/projects/name-tag.md

@@ -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() {})