Migrate docs from the other repo
This commit is contained in:
Michal Moskal
63
docs/reference/js/lessons/flashing-heart/activity.md
Normal file
63
docs/reference/js/lessons/flashing-heart/activity.md
Normal file
@ -0,0 +1,63 @@
|
||||
# flashing heart activity
|
||||
|
||||
Ccontrol images with variables.
|
||||
|
||||
### ~avatar avatar
|
||||
|
||||
### @video td/videos/flashing-heart-0
|
||||
|
||||
In this activity, you will learn how to blink an image on the LED screen.
|
||||
|
||||
### ~
|
||||
|
||||
To create a new script, go to the [Create Code](https://www.microbit.co.uk/create-code) page and tap `New Project` under **KindScript**.
|
||||
|
||||
Let's start by adding code that plots a heart image on the screen using `basic->plot image`. Once you are done coding, don't forget to run your code in the simulator or the BBC micro:bit.
|
||||
|
||||
```
|
||||
basic.plotImage(`
|
||||
. # . # .
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`) // ***
|
||||
```
|
||||
|
||||
We want to leave the image on the screen for 0.5 seconds (500 milliseconds), then clear the screen. We can use `basic->pause` to wait and `basic->clear screen` to turn off the LEDs.
|
||||
|
||||
```
|
||||
basic.plotImage(`
|
||||
. # . # .
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
basic.pause(500) // ***
|
||||
basic.clearScreen() // ***
|
||||
```
|
||||
|
||||
Finally, we can surround this code with a `basic->forever` loop to repeat it and add a pause after `basic->clear screen` to keep the screen off for a little while. Modify your code so that your code looks like this.
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.plotImage(`
|
||||
. # . # .
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
basic.pause(500)
|
||||
basic.clearScreen()
|
||||
basic.pause(500)
|
||||
})
|
||||
```
|
||||
|
||||
### ~avatar boothing
|
||||
|
||||
Excellent, you're ready to continue with the [challenges](/microbit/lessons/flashing-heart/challenges)!
|
||||
|
||||
### ~
|
||||
|
||||
93
docs/reference/js/lessons/flashing-heart/challenges.md
Normal file
93
docs/reference/js/lessons/flashing-heart/challenges.md
Normal file
@ -0,0 +1,93 @@
|
||||
# flashing heart challenges
|
||||
|
||||
Coding challenges for flashing heart.
|
||||
|
||||
## Before we get started
|
||||
|
||||
Complete the [flashing heart](/microbit/lessons/flashing-heart/activity) activity and your code will look like this:
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.plotImage(`
|
||||
. # . # .
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
basic.pause(500)
|
||||
basic.clearScreen()
|
||||
basic.pause(500)
|
||||
})
|
||||
```
|
||||
|
||||
### Challenge 1
|
||||
|
||||
### @video td/videos/flashing-heart-1
|
||||
|
||||
Let's plot a different image. Let's display a broken heart!
|
||||
|
||||
To do this, you need to **add a line** between the last line and the end loop. Plot the image of the broken heart and then add a pause of 500 milliseconds.
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.plotImage(`
|
||||
# # . # #
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
basic.pause(500)
|
||||
basic.clearScreen()
|
||||
basic.pause(500)
|
||||
basic.plotImage(`
|
||||
. # . # .
|
||||
# . # # #
|
||||
# . . # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`) // ***
|
||||
basic.pause(500) // ***
|
||||
})
|
||||
```
|
||||
|
||||
* click `run main` to see if the code works as expected.
|
||||
|
||||
### Challenge 2
|
||||
|
||||
### @video td/videos/flashing-heart-2
|
||||
|
||||
Now let's alternate flashing the heart and the broken heart. To do this, we need to clear the screen and then add a pause of 500 milliseconds under the new code we added in Challenge 1.
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.plotImage(`
|
||||
# # . # #
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
basic.pause(500)
|
||||
basic.clearScreen()
|
||||
basic.pause(500)
|
||||
basic.plotImage(`
|
||||
. # . # .
|
||||
# . # # #
|
||||
# . . # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
basic.pause(500)
|
||||
basic.clearScreen() // ***
|
||||
basic.pause(500) // ***
|
||||
})
|
||||
```
|
||||
|
||||
* click `run main` to see if the code works as expected.
|
||||
|
||||
### Challenge 3
|
||||
|
||||
You now have a heart and broken heart flashing! Now plot a new image to alternate in with the heart and broken heart.
|
||||
|
||||
102
docs/reference/js/lessons/flashing-heart/lesson-plan.md
Normal file
102
docs/reference/js/lessons/flashing-heart/lesson-plan.md
Normal file
@ -0,0 +1,102 @@
|
||||
# flashing heart lesson plan
|
||||
|
||||
Learn how to create LED images with a variable.
|
||||
|
||||
### @video vimeo/134118661
|
||||
|
||||
## Topic
|
||||
|
||||
Global Variable - Blinking Images
|
||||
|
||||
## Class
|
||||
|
||||
Year 7
|
||||
|
||||
## Prior learning/place of lesson in scheme of work
|
||||
|
||||
Learn how to control a blinking LED image. We will be learning how to create a blinking app using global variables, forever as well as simple commands, such as create image, show image, pause, and clear screen.
|
||||
|
||||
## What the teacher needs to know
|
||||
|
||||
**Program:** A stored set of instructions encoded in a language understood by the computer that does some form of computation, processing input and/or stored data to generate output.**
|
||||
|
||||
**Algorithm:** An unambiguous set of rules or a precise step-by-step guide to solve a problem or achieve a particular objective. The guided tutorial follows a algorithm and is a precise step-by-step guide to solve a problem**
|
||||
|
||||
**Loop:** A block of code repeated automatically under the program’s control. ** The blink program introduces Forever. Forever will repeats code in the background forever.
|
||||
|
||||
**Command:** An instruction for the computer to execute, written in a particular programming language.**
|
||||
|
||||
**QuickStart Computing Glossary
|
||||
|
||||
## Documentation
|
||||
|
||||
* **global variables**: [read more...](/microbit/js/data)
|
||||
* **create image** : [read more...](/microbit/reference/images/create-image)
|
||||
* **show image** : [read more...](/microbit/reference/images/show-image)
|
||||
* **pause**: [read more...](/microbit/reference/basic/pause)
|
||||
* **clear screen**: [read more...](/microbit/reference/basic/clear-screen)
|
||||
* **forever**: [read more...](/microbit/reference/basic/forever)
|
||||
|
||||
## Resources
|
||||
|
||||
* Activity: [tutorial](/microbit/lessons/flashing-heart/tutorial)
|
||||
* Activity: [quiz](/microbit/lessons/flashing-heart/quiz)
|
||||
* Extended Activity: [challenges](/microbit/lessons/flashing-heart/challenges)
|
||||
|
||||
## Objectives
|
||||
|
||||
* learn how to create a global variable
|
||||
* learn how to blink a light
|
||||
* learn how to repeat turning on and off the light
|
||||
|
||||
## Links to the National Curriculum Programmes of Study for Computing
|
||||
|
||||
## Assessment
|
||||
|
||||
### Progression Pathways
|
||||
|
||||
### Computational Thinking Framework
|
||||
|
||||
#### Algorithms
|
||||
|
||||
* Understands that iteration is the repetition of a process such as a loop. (AL)
|
||||
* Represents solutions using a structured notation. (AL) (AB)
|
||||
|
||||
#### Programming & Development
|
||||
|
||||
* Creates programs that implement algorithms to achieve given goals. (AL)
|
||||
* Declares and assigns variables.(AB)
|
||||
|
||||
#### Data & Data Representation
|
||||
|
||||
* Understands the difference between data and information. (AB)
|
||||
* Defines data types: real numbers and Boolean. (AB)
|
||||
|
||||
#### Information Technology
|
||||
|
||||
* Collects, organises and presents data and information in digital content. (AB)
|
||||
* Makes appropriate improvements to solutions based on feedback received, and can comment on the success of the solution. (EV)
|
||||
|
||||
Computational Thinking Concept: AB = Abstraction; DE = Decomposition; AL = Algorithmic Thinking; EV = Evaluation; GE = Generalisation
|
||||
|
||||
## Activity
|
||||
|
||||
* time: 20 min.
|
||||
* [tutorial](/microbit/lessons/flashing-heart/tutorial)
|
||||
* [quiz](/microbit/lessons/flashing-heart/quiz)
|
||||
* assessment opportunities: forever, plot, pause, clear screen
|
||||
|
||||
## Extended Activity
|
||||
|
||||
* time: 20 min.
|
||||
* [challenges](/microbit/lessons/flashing-heart/challenges)
|
||||
* assessment opportunities: loops, plot, pause, clear screen
|
||||
|
||||
## Homework
|
||||
|
||||
* Extended Activity: [challenges](/microbit/lessons/flashing-heart/challenges)
|
||||
|
||||
## Intended follow on
|
||||
|
||||
Publish script to the classroom.
|
||||
|
||||
38
docs/reference/js/lessons/flashing-heart/quiz-answers.md
Normal file
38
docs/reference/js/lessons/flashing-heart/quiz-answers.md
Normal file
@ -0,0 +1,38 @@
|
||||
# flashing heart quiz answers
|
||||
|
||||
Learn how to create images with global variables.
|
||||
|
||||
This is the answer key for the [flashing heart quiz](/microbit/lessons/flashing-heart/quiz).
|
||||
|
||||
## 1. Describe what `basic->show leds` does
|
||||
|
||||
Show LEDs displays an Image on the BBC micro:bit's LED screen
|
||||
|
||||
## 2. Draw the areas being displayed on the BBC micro:bit
|
||||
|
||||
```
|
||||
basic.showLeds(`
|
||||
# # . # #
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`, 400)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Write the code to show LEDs of a broken heart forever.
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.showLeds(`
|
||||
# # . # #
|
||||
# . # # #
|
||||
# # . # #
|
||||
. # . # .
|
||||
. . # . .
|
||||
`, 400)
|
||||
})
|
||||
```
|
||||
|
||||
36
docs/reference/js/lessons/flashing-heart/quiz.md
Normal file
36
docs/reference/js/lessons/flashing-heart/quiz.md
Normal file
@ -0,0 +1,36 @@
|
||||
# flashing heart quiz
|
||||
|
||||
Learn how to create a blinking LED script with a variable.
|
||||
|
||||
## Name
|
||||
|
||||
## Directions
|
||||
|
||||
Use this activity document to guide your work in the [flashing heart activity](/microbit/lessons/flashing-heart/activity).
|
||||
|
||||
Answer the questions while completing the activity. Pay attention to the dialogues!
|
||||
|
||||
## 1. Describe what pause does?
|
||||
|
||||
<br/>
|
||||
|
||||
## 2. Draw the image being displayed using the BBC micro:bit image.
|
||||
|
||||
```
|
||||
basic.showLeds(`
|
||||
. # . # .
|
||||
# # # # #
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`, 400)
|
||||
```
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
## 3. Write the code to show LEDs of a broken heart forever.
|
||||
|
||||
<br/>
|
||||
|
||||
Reference in New Issue
Block a user