more docs cleanup
This commit is contained in:
Peli de Halleux
@ -1,106 +0,0 @@
|
||||
# bounce image lesson
|
||||
|
||||
scroll an image across the screen.
|
||||
|
||||
## Topic
|
||||
|
||||
Basic- Show Animation
|
||||
|
||||
## Quick Links
|
||||
|
||||
* [tutorial](/lessons/bounce-image/tutorial)
|
||||
* [quiz](/lessons/bounce-image/quiz)
|
||||
* [quiz answers](/lessons/bounce-image/quiz-answers)
|
||||
* [challenges](/lessons/bounce-image/challenges)
|
||||
|
||||
## Class
|
||||
|
||||
Year 7
|
||||
|
||||
## Prior learning / place of lesson in scheme of work
|
||||
|
||||
Learn how to creating an **animation**, `basic->show animation` to display a series of images. We will be learning how to create a counter app using a forever loop, the input on shake, and show animation.
|
||||
|
||||
## What the teacher needs to know / QuickStart Computing Glossary
|
||||
|
||||
* Algorithm: An unambiguous set of rules or a precise step-by-step guide to solve a problem or achieve a particular objective.
|
||||
* Command: An instruction for the computer to execute, written in a particular programming language.
|
||||
* Hardware: The physical systems and components of digital devices; see also software.
|
||||
* Input: Data provided to a computer system, such as via a keyboard, mouse, microphone, camera or physical sensors.
|
||||
* Loop: A block of code repeated automatically under the program’s control.
|
||||
* Output: The information produced by a computer system for its user, typically on a screen, through speakers or on a printer, but possibly through the control of motors in physical systems.
|
||||
* Programmable toys: Robots designed for children to use, accepting input, storing short sequences of simple instructions and moving according to this stored program.
|
||||
* 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.
|
||||
* Selection: A programming construct in which one section of code or another is executed depending on whether a particular condition is met.
|
||||
* Sequence: To place program instructions in order, with each executed one after the other.
|
||||
* Simulation: Using a computer to model the state and behaviour of real-world (or imaginary) systems, including physical or social systems; an integral part of most computer games.
|
||||
|
||||
## Documentation
|
||||
|
||||
* **forever** : [read more...](/reference/basic/forever)
|
||||
* **show animation** : [read more...](/reference/basic/show-animation)
|
||||
* **on shake** : [read more...](/reference/input/on-gesture)
|
||||
|
||||
## Resources
|
||||
|
||||
* Activity: [tutorial](/lessons/bounce-image/tutorial)
|
||||
* Activity: [quiz](/lessons/bounce-image/quiz)
|
||||
* Extended Activity: [challenges](/lessons/bounce-image/challenges)
|
||||
|
||||
## Objectives
|
||||
|
||||
* learn how to repeat code in the background forever
|
||||
* learn how to show a series of image frames on the LED screen, pausing the specified time after each frame
|
||||
* learn how to run code when the micro:bit is shaken; when running code in the web browser, moving the mouse quickly simulates shaking
|
||||
|
||||
## Links to the National Curriculum Programmes of Study for Computing
|
||||
|
||||
## Progression Pathways / Computational Thinking Framework
|
||||
|
||||
#### Algorithms
|
||||
|
||||
* Uses diagrams to express solutions.(AB)
|
||||
* Uses logical reasoning to predict outputs, showing an awareness of inputs (AL)
|
||||
* 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)
|
||||
* Selects the appropriate data types(AL) (AB)
|
||||
|
||||
#### Hardware & Processing
|
||||
|
||||
* Knows that computers collect data from various input devices, including sensors and application software (AB)
|
||||
|
||||
#### Communication Networks
|
||||
|
||||
* Demonstrates responsible use of technologies and online services, and knows a range of ways to report concerns Understands how search engines rank search results (AL)
|
||||
|
||||
#### Information Technology
|
||||
|
||||
* Collects, organizes, 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)
|
||||
* Recognises ethical issues surrounding the application of information technology beyond school.
|
||||
|
||||
Computational Thinking Concept: AB = Abstraction; DE = Decomposition; AL = Algorithmic Thinking; EV = Evaluation; GE = Generalisation
|
||||
|
||||
## Activity
|
||||
|
||||
* time: 20 min.
|
||||
* [tutorial](/lessons/bounce-image/tutorial)
|
||||
* [quiz](/lessons/bounce-image/quiz)
|
||||
|
||||
## Extended Activity
|
||||
|
||||
* time: 20 min.
|
||||
* [challenges](/lessons/bounce-image/challenges)
|
||||
|
||||
## Homework
|
||||
|
||||
* Extended Activity: [challenges](/lessons/bounce-image/challenges)
|
||||
|
||||
## Intended follow on
|
||||
|
||||
Publish script to the classroom.
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
# bounce image challenges
|
||||
|
||||
Coding challenges for the bounce image tutorial. #docs
|
||||
|
||||
## Before we get started
|
||||
|
||||
Complete the following guided tutorial:
|
||||
|
||||
* [tutorial](/lessons/bounce-image/tutorial)
|
||||
|
||||
At the end of the tutorial, click `keep editing`. Your code should look like this:
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.showAnimation(`
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . #
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . #
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . #
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . #
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . #
|
||||
`, 200)
|
||||
})
|
||||
```
|
||||
|
||||
### Challenge 1
|
||||
|
||||
Now, let's add frames to reverse the animation so it looks like the bar is bouncing off the right edge of the display.
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.showAnimation(`
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
`, 200) // ***
|
||||
})
|
||||
```
|
||||
|
||||
* Run the code to see if it works as expected.
|
||||
|
||||
### Challenge 2
|
||||
|
||||
Let's add a condition for on shake!
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.showAnimation(`
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
`, 200)
|
||||
})
|
||||
input.onGesture(Gesture.Shake, () => {
|
||||
}) // ***
|
||||
```
|
||||
|
||||
### Challenge 3
|
||||
|
||||
When the BBC micro:bit is shaken we want to show a new animation. Here is an example, but you can create your own. Be creative!
|
||||
|
||||
```
|
||||
basic.forever(() => {
|
||||
basic.showAnimation(`
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
|
||||
`, 200)
|
||||
})
|
||||
input.onGesture(Gesture.Shake, () => {
|
||||
basic.showAnimation(`
|
||||
. . . . . . . . . . # # # # # . . . . . . . . . .
|
||||
. . . . . . # # # . # # # # # . # # # . . . . . .
|
||||
. . # . . . # # # . # # # # # . # # # . . . # . .
|
||||
. . . . . . # # # . # # # # # . # # # . . . . . .
|
||||
. . . . . . . . . . # # # # # . . . . . . . . . .
|
||||
`, 200) // ***
|
||||
})
|
||||
```
|
||||
|
||||
* Run the code to see if it works as expected.
|
||||
@ -1,60 +0,0 @@
|
||||
# bounce image quiz answers
|
||||
|
||||
scroll an image on the BBC micro:bit.
|
||||
|
||||
This is the answer key for the [bounce image quiz](/lessons/bounce-image/quiz).
|
||||
|
||||
## 1. What does it mean to 'add frames' ?
|
||||
|
||||
Adding frames modifies the animation by including more still images in each animation.
|
||||
|
||||
## 2. Write the code that will display this animation.
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
```
|
||||
basic.showAnimation(`
|
||||
# . . . .
|
||||
# . . . .
|
||||
# . . . .
|
||||
# . . . .
|
||||
# . . . .
|
||||
`, 400)
|
||||
```
|
||||
|
||||
## 3. Write the code that will display this animation with two frames.
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
```
|
||||
basic.showAnimation(`
|
||||
# . . . . . # . . .
|
||||
# . . . . . # . . .
|
||||
# . . . . . # . . .
|
||||
# . . . . . # . . .
|
||||
# . . . . . # . . .
|
||||
`, 400)
|
||||
```
|
||||
|
||||
## 4. Write the code that will display this animation with three frames.
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
```
|
||||
basic.showAnimation(`
|
||||
# . . . . . # . . . . . # . .
|
||||
# . . . . . # . . . . . # . .
|
||||
# . . . . . # . . . . . # . .
|
||||
# . . . . . # . . . . . # . .
|
||||
# . . . . . # . . . . . # . .
|
||||
`, 400)
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
# bounce image quiz
|
||||
|
||||
scroll an image on the BBC micro:bit.
|
||||
|
||||
## Name
|
||||
|
||||
## Directions
|
||||
|
||||
Use this document to guide your work in the [bounce image tutorial](/lessons/bounce-image/tutorial) !
|
||||
|
||||
Answer the questions while completing the tutorial. Pay attention to the dialogues!
|
||||
|
||||
## 1. What does it mean to 'add frames' ?
|
||||
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
## 2. Write the code that will display this animation.
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
## 3. Write the code that will display this animation with two frames.
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
## 4. Write the code that will display this animation with three frames.
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
Reference in New Issue
Block a user