Add the 'Algorithms' lesson to csintro (#425)

* Push the initial migration of the 'algorithms' lesson.

* Adjust lesson part names and link into main csintro page.

* Add 'Algoritms' lesson to SUMMARY

* Put standards page in there too.
This commit is contained in:
Galen Nickel 2017-06-25 21:11:55 -07:00 committed by Peli de Halleux
parent 108a07fe51
commit 0873b5651c
27 changed files with 493 additions and 1 deletions

View File

@ -60,6 +60,12 @@
* [Walkthrough](/courses/csintro/making/walkthrough)
* [Project](/courses/csintro/making/project)
* [Standards](/courses/csintro/making/standards)
* [Algorithms](/courses/csintro/algorithms)
* [Overview](/courses/csintro/algorithms/overview)
* [Unplugged](/courses/csintro/algorithms/unplugged)
* [Activity](/courses/csintro/algorithms/activity)
* [Project](/courses/csintro/algorithms/project)
* [Standards](/courses/csintro/algorithms/standards)
## #reference

View File

@ -32,7 +32,7 @@ UNDER CONSTRUCTION: We are still migrating the CSIntro content to this format...
### ~
1. [Making](/courses/csintro/making)
2. Algorithms
2. [Algorithms](/courses/csintro/algorithms)
3. Variables
4. Conditionals
5. Iteration

View File

@ -0,0 +1,22 @@
# Algorithms
This lesson introduces a conceptual framework for thinking of a computing device as something that uses code to process one or more inputs and send them to an output(s).
## Lesson objectives
Students will...
* Understand the four components that make up a computer and their functions.
* Understand that the micro:bit takes input, and after processing the input, produces output.
* Learn the variety of different types of information the micro:bit takes in as input.
* Apply this knowledge by creating a micro:bit program that takes input and produces an output.
## Lesson plan
1. [**Overview**: What is a computer and micro:bit hardware](/courses/csintro/algorithms/overview)
2. [**Unplugged**: What's your function?](/courses/csintro/algorithms/unplugged)
3. [**Activity**: Happy face, sad face](/courses/csintro/algorithms/activity)
4. [**Project**: Fidget cube](/courses/csintro/algorithms/project)
## Related standards
[Targeted CSTA standards](/courses/csintro/algorithms/standards)

View File

@ -0,0 +1,216 @@
# Activity: Happy Face, Sad Face
The micro:bit itself is considered hardware. It is a physical piece of technology. In order to make use of hardware, we need to write software (otherwise known as "code" or computer programs). The software "tells" the hardware what to do, and in what order to do it using algorithms. Algorithms are sets of computer instructions.
In this activity, we will discover how to use the micro:bit buttons as input devices, and write code that will make something happen on the screen as output. We will also learn about pseudocode, the MakeCode tool, event handlers, and commenting code.
## Pseudocode
What do you want your program to do?
The first step in writing a computer program is to create a plan for what you want your program to do. Write out a detailed step-by-step plan for your program. Your plan should include what type of information your program will receive, how this input will be processed, what output your program will create and how the output will be recorded or presented. Your writing does not need to be written in complete sentences, nor include actual code. This kind of detailed writing is known as pseudocode. Pseudocode is like a detailed outline or rough draft of your program. Pseudocode is a mix of natural language and code.
For the program we will write, the pseudocode might look like this:
* Start with a blank screen
* Whenever the user presses button A, display a happy face.
* Whenever the user presses button B, display a sad face.
## Microsoft MakeCode
Now that you have a plan for your program, in the form of pseudocode, let's start creating the real program. In a browser window, open the Microsoft MakeCode for micro:bit tool (https://makecode.microbit.org). The MakeCode tool is called an IDE (Integrated Development Environment), and is a software application that contains everything a programmer needs to create, compile, run, test, and even debug a program.
## Tour of Microsoft MakeCode
* Simulator - on the left side of the screen, you will see a virtual micro:bit that will show what your program will look like running on a micro:bit. This is helpful for debugging, and instant feedback on program execution.
* Toolbox - in the middle of the screen, there are a number of different categories, each containing a number of blocks that can be dragged into the programming workspace on the right.
* Workspace - on the right side of the screen is the Programming Workspace where you will create your program. Programs are constructed by snapping blocks together in this area.
![IDE tour](/static/courses/csintro/algorithms/ide-tour.png)
## Event handlers
When you start a new project, there will be two blue blocks, on start and forever already in the coding workspace. These two blocks are event handlers.
In programming, an event is an action done by the user, such as pressing a key or clicking a mouse button. An event handler is a routine that responds to an event. A programmer can write code telling the computer what to do when an event occurs.
One fun unplugged activity you can do with kids to reinforce the idea of an action that waits for an event is the Crazy Conditionals activity.
Notes:
* Tooltips - Hover over any block until a hand icon appears and a small text box will pop up telling you what that block does. You can try this now with the on start and forever blocks. Notice that it also shows you the equivalent code in JavaScript.
>![Blocks tooltips](/static/courses/csintro/algorithms/blocks-tooltips.png)
> Hovering over the code in JavaScript has the same effect.
>![Code tooltips](/static/courses/csintro/algorithms/code-tooltips.png)
* Help/Documentation - You can also right-click on any block and select Help to open the reference documentation.
>![Help menu](/static/courses/csintro/algorithms/help-menu.png)
* Deleting blocks - Click on the 'forever' block and drag it left to the Toolbox area. You should see a garbage can icon appear. Let go of the block and it should disappear. You can drag any block back to the Toolbox area to delete it from the coding workspace. You can also remove a block from your coding window by selecting the block and then pressing the "delete" key on your keyboard (or command-X on a mac).
>![Trash](/static/courses/csintro/algorithms/trash.png)
Looking at our pseudocode, we want to make sure to start a program with a clear screen.
* We can do this by going to the Basic menu -> More and choosing a clear screen block.
>![Clear screen block](/static/courses/csintro/algorithms/clear-screen-block.png)
* Drag the clear screen block to the coding Workspace.
>Notice that the block is grayed out. If you hover over the grayed out block, a pop up text box will appear letting you know that since this block is not attached to an event handler block, it will not run.
>![Clear screen disabled](/static/courses/csintro/algorithms/clear-screen-disabled.png)
* Go ahead and drag the clear screen block into the on start block. Now the block is no longer grayed out, indicating that it will run when the event, the program starts, occurs.
```blocks
basic.clearScreen()
```
## Save early, save often!
We now have a working program running on the micro:bit simulator!
As you write your program, MakeCode will automatically compile and run your code on the simulator. The program doesnt do much at this point, but before we make it more interesting, we should name our program and save it.
On the bottom left of the application window, to the right of the Download button, is a text box in which you can name your program. After naming your program, press the save button to save it.
![Save button](/static/courses/csintro/algorithms/save-button.png)
Important: Whenever you write a significant piece of code or just every few minutes, you should save your code. Giving your code a meaningful name will help you find it faster from a list of programs and will let others know what your program does.
## More event handlers
Now to make our program a bit more interesting by adding two more event handlers.
* From the Input menu, drag two on button A pressed blocks to the coding window.
>Notice that the second block is grayed out. This is because, right now, they are the same block, both listening for the same event on button A pressed.
>![Two on buttons](/static/courses/csintro/algorithms/two-on-buttons.png)
* Leave the first block alone for now, and using the drop-down menu within the second block, change the A to B. Now this block will no longer be grayed out, as it is now listening for a different event, on button B pressed.
>![Make on button B](/static/courses/csintro/algorithms/on-button-b.png)
```blocks
input.onButtonPressed(Button.A, () => {
})
input.onButtonPressed(Button.B, () => {
})
```
## Show LEDs
Now we can use our LED lights to display different images depending on what button the user presses.
* From the Basic menu, drag two show leds blocks to the coding workspace
* Place one show leds block into the on button A pressed event handler and the second show leds block into the on button B pressed event handler.
```blocks
input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . . . . .
       . . . . .
       . . . . .
       . . . . .
       `)
})
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . . . . .
       . . . . .
       . . . . .
       . . . . .
       `)
})
```
* Click on the individual little boxes in the show leds block that is in the on button A pressed event handler to create the image of a happy face.
* Click on the individual little boxes in the show leds block that is in the on button B pressed event handler to create the image of a sad face.
```blocks
input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       # . . . #
       . # # # .
       `)
})
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       . # # # .
       # . . . #
       `)
})
```
## Test your program!
Remember, MakeCode automatically compiles and runs your program, so all you need to do now is press button A and then button B in the simulator to see the output produced by your code.
* Feel free to play around with turning LEDs on or off in the show leds blocks until you get the images you want.
* Remember to save your code.
>![Face on micro:bit screen](/static/courses/csintro/algorithms/microbit-screen-face.png)
## Commenting your code
It is good practice to add comments to your code. Comments can be useful in a number of ways. Comments can help you remember what a certain block of code does and/or why you chose to program something the way you did. Comments also help others reading your code to understand these same things.
To comment a block of code:
* Right-click on the icon that appears before the words on a block.
* A menu will pop up. Select Add Comment.
![Add comment menu](/static/courses/csintro/algorithms/add-comment.png)
* This will cause a question mark icon to appear to the left of the previous icon.
* Click on the question mark and a small yellow box will appear into which you can write your comment.
![Write comment](/static/courses/csintro/algorithms/write-comment.png)
* Click on the question mark icon again to close the comment box when you are done.
* Click on the question mark icon whenever you want to see your comment again or to edit it.
Notes
* When you right-click on the icon that appears before the words on a block, notice that there are other options available to you that allow you to duplicate and delete blocks, as well as get help. Feel free to explore and use these as you code.
* In JavaScript, you can add a comment by using two forward slashes, then typing your comment. The two forward slashes tell JavaScript that the following text (on that same line) is a comment.
```typescript
// Display a happy face when button A is pressed.
```
## Cleaning up!
Clean up your coding workspace before you do a final save! What does this mean?
* It means that only the code and blocks that you are using in your program are still in the workspace.  
* Remove (delete) any other blocks that you may have dragged into the coding workspace as you were experimenting and building your program.
## Save and download
Now that your code is running just fine in the simulator, is commented, and your coding window is clean, save your program, download it to your micro:bit, and enjoy!
Here is the complete program:
```blocks
// Display a happy face when button A is pressed.
input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       # . . . #
       . # # # .
       `)
})
// Display a sad face when button B is pressed.
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       . # # # .
       # . . . #
       `)
})
basic.clearScreen()
```
Here it is online: [**HappySadFace**](https://makecode.microbit.org/_52r8737R8d88)

View File

@ -0,0 +1,41 @@
# Introduction
What is a micro:bit?
The micro:bit was created in 2015 in the UK by the BBC to teach computer science to students. The BBC gave away a micro:bit to every Year 7 student in the UK. You can think of a micro:bit as a mini computer.
http://microbit.org
![BBC micro:bit](/static/courses/csintro/algorithms/bbc-microbit.jpg)
## What is a computer?
There are 4 main components that make up any computer:
![Computer components](/static/courses/csintro/algorithms/computer-components.png)
1. The Processor this is usually a small chip inside the computer, and its how the computer processes and transforms information. Has anyone heard of the term “CPU”? CPU stands for Central Processing Unit. You can think of the processor as the Brains of the computer - the faster the processor, the more quickly the computer can think.
2. The Memory this is how the computer remembers things. There are two types of memory:
>* RAM (random access memory) - you can think of this as the computers short-term memory
>* Storage (also referred to as the “hard drive”) - this is the computers long-term memory, where it can store information even when power is turned off
3. Inputs this is how a computer takes in information from the world.  On humans, our input comes in through our senses, such as our ears and eyes. What are some Computer Inputs?  Keyboard, Mouse, Touchscreen, Camera, Microphone, Game Controller, Scanner
4. Outputs this is how a computer displays or communicates information.  On humans, we communicate information by using our mouths when we talk. What are some examples of communication that don't involve talking? Blushing, sign language. What are some examples of Computer outputs?  Monitor/Screen, Headphones/Speakers, Printer
Now, lets look at our micro:bit:
![micro:bit hardware](/static/courses/csintro/algorithms/microbit-hardware.png)
* Use the diagram here as a visual aid: http://microbit.org/hardware/
* Can you find the Processor?
* How much memory does the micro:bit have? 16K, which is smaller than many files on your computer!
* Can you locate the following Inputs?  Buttons (on board), Pins (at base), Accelerometer / Compass.
>Note: Though not pictured, the Light Sensor is located on the LED lights
* Where are the Outputs?  LED lights, Pins
All computers need electricity to power them.  There are 3 ways to power your micro:bit:
* Through the USB port at the top
* By connecting a battery pack to the battery connector
* Through the 3V Pin at the bottom (not the recommended way to power your micro:bit)
On the top left corner you may notice that your micro:bit has a Bluetooth antenna.  This means your micro:bit can communicate and send information to other micro:bits. We will learn more about this feature in the Radio Lesson.

View File

@ -0,0 +1,45 @@
# Project: Fidget Cube
A fidget cube is a little cube with something different that you can manipulate on each surface. There are buttons, switches, and dials, and people who like to “fidget” find it relaxing to push, pull, press, and play with it. In this project, students are challenged to turn the micro:bit into their very own “fidget cube”.
Show students some examples of fidget cubes:
* Original Kickstarter Fidget Cube - https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy (there is a funny video showing the fidget cube in action).
## Discussion questions
* Do any of your students fidget?
* What kinds of things do they fidget with? Spinning pens, fidget spinners, rings, coins?
* There are many different versions of fidget cubes available now. Do any students have any?
* Have they seen them before?
* What are the types of fidget activities?
* If students could add or modify features of the fidget cube, what would they choose to do?
* What would make the ultimate fidget cube?
Remind students that a computing device has a number of inputs, and a number of outputs. The code that we write processes input by telling the micro:bit what to do when various events occur.
## Project
Make a fidget cube out of the micro:bit, create a unique output for each of the following inputs:
* on button A pressed
* on button B pressed
* on button A+B pressed
* on shake
See if you can combine a maker element similar to what you created in Lesson 1 by providing a holder for the micro:bit that holds it securely when you press one of the buttons.
![](/static/courses/csintro/algorithms/fidget-cube.jpg)
Sample fidget cube designs
## Project Mod
* Add more inputs and more outputs - use more than 4 different types of input. Try to use other types of output (other than LEDs) such as sound!
## Assessment
| | 4 | 3 | 2 | 1 |
| - | - | - | - |
| ============= | =============== | =============== | ============== | ============= |
| Inputs | At least 4<br/>different inputs<br/>are successfully<br/>implemented | At least 3<br/>different inputs<br/> are successfully<br/>implemented | At least 2<br/>different inputs<br/>are successfully<br/>implemented | Fewer than 2<br/>different inputs<br/>are successfully<br/>implemented |
| ============= | =============== | =============== | ============== | ============= |
| Outputs | At least 4<br/>different outputs<br/>are successfully<br/>implemented | At least 3<br/>different outputs<br/>are successfully<br/>implemented | At least 2<br/>different outputs<br/>are successfully<br/>implemented | Fewer than 2<br/>different outputs<br/>are successfully<br/>implemented |
| ============= | =============== | =============== | ============== | ============= |
| Micro:bit<br/>program |Micro:bit<br/>program:<br/>- uses event<br/>handlers in a<br/>way that is<br/>integral to the<br/>program<br/>- compiles and<br/>runs as<br/>intended<br/>- includes<br/>meaningful<br/>comments | Micro:bit<br/>program lacks 1<br/>of the required<br/>elements | Micro:bit<br/>program lacks 2<br/>of the required<br/>elements | Micro:bit<br/>program lacks all<br/>or of the<br/>required<br/>elements |
| ============= | =============== | =============== | ============== | ============= |
| Collaboration<br/>reflection | Reflection piece<br/>includes:<br/>- brainstorming<br/>ideas<br/>- construction<br/>programming<br/>beta testing | Reflection piece<br/>lacks 1 of the<br/>required<br/>elements | Reflection piece<br/>lacks 2 of the<br/>required<br/>elements | Reflection piece<br/>lacks 3 of the<br/>required<br/>elements |

View File

@ -0,0 +1,9 @@
# Standards
## CSTA K-12 Computer Science Standards
* CT.L2-03 Define an algorithm as a sequence of instructions that can be processed by a computer.
* CD.L2-01 Recognize that computers are devices that execute programs.
* CD.L2-02 Identify a variety of electronic devices that contain computational processors.
* CD.L2-03 Demonstrate an understanding of the relationship between hardware and software.
* CD.L3A-04 Compare various forms of input and output.

View File

@ -0,0 +1,153 @@
# Unplugged: What's your function & crazy conditionals
Materials
* Pencils
* Paper (or index cards)
![Inputs process outputs](/static/courses/csintro/algorithms/inputs-process-outputs.png)
In computer programming, algorithms are sets of instructions.
Algorithms tell the computer how to process input and what, if any, output to produce.
An example of an algorithm you have seen in math class is the function machine.
![Inputs function output](/static/courses/csintro/algorithms/input-function-output.png)
A function machine takes an input, processes the input, and then delivers an output.
The inputs and their outputs are usually recorded in an input output table, where the value of x represents the input and the value of y represents the output. See example.
```
Input (x) Output (y)
======================
1 2
2 4
3 6
4 8
```
A common math problem is to determine what processing is happening to the input that results in the given output. In the example above, each input is being doubled (multiplied by 2) to produce the corresponding output.
```
Input (x) Processing => Output (y)
======================================
1 * 2 2
2 * 2 4
3 * 2 6
4 * 2 8
```
## Unplugged: What's your function?
For this activity, the students can work in pairs, Player A and Player B. The pairs will take turns being the function machine for their partner who will be providing input to be processed.
Direct the students how you would like them to record their work.
They can use pencil and paper or index cards.
On paper, they can keep track of inputs and outputs in a table (see example above).
With index cards, Player A can write each input on one side of an index card, hand the card to Player B, who then writes the corresponding output on the other side of the card.
To begin:
* Player B decides on a mathematical function or bit of processing* that will be done on whatever input she receives from Player A.
* Player B should write down the function or bit of processing and set it aside, out of sight of Player A.
* Player A then gives Player B a number to process.
* Player B processes the number and returns an output to Player A.
* Player A can then state what function or bit of processing she thinks Player B is using on the input to produce the given output. One try per round of input/output.
* If Player A states the correct function, Player B confirms that it is correct by showing the previously hidden function and the players switch roles and start the game over.
* If Player A does not guess correctly, Player A provides another input that Player B processes and provides an output for.
* The goal is for Player A to figure out what function or bit of processing Player B is using in the fewest number of rounds of input/output possible.
* After each student has had at least one chance to be the function machine, play more rounds as time permits.
Notes:
* The difficulty level of the possible functions should be determined by the teacher and shared with the students ahead of playing. Alternately, the teacher can provide function cards that are handed out at random to be used by the players, rather than the players creating their own.
* The player providing the input should not just guess what the function is. She should be able to explain why she thinks her input resulted in the given output.
* Examples of easier functions:
> * [ ] Add 8
> * [ ] Subtract 6
> * [ ] Multiply by 3
> * [ ] Divide by 2
* Examples of more difficult functions:
> * [ ] Multiply by 2 and then subtract 1
> * [ ] Square the input
> * [ ] Return 20% of the input
## Unplugged: Crazy Conditionals
This is a fun, interactive exercise to introduce conditionals and event handlers as computer processing. Read through the entire activity and adjust as needed for your class and classroom.
 
Preparation:
* Print & cut into strips with one conditional on each strip
* Note that some of the same conditionals can be given to multiple students, while other conditionals are to be given to just one student.
* Except for the first BEGIN conditional, hand out the conditionals PRINT SIDE DOWN.
* Besides the BEGIN and STOP conditional, give at least two other conditionals to each student. A lesson from this is that it is challenging for a student to keep track of a lot of different conditionals, though not so for a computer! : )
 
Notes:
* Some of the same conditionals can be given to multiple students, while other conditionals are to be given to just one student.
* Technically these conditionals are all event handlers because the students are simply waiting for a specific event to trigger them into action.
* Unless instructed otherwise, students do not speak or make noise during this activity.
Extensions/Variations:
* Add AND, OR, AND/OR statements to the conditionals.
* Create nested IFs
* Let students create the IFs
* Relate this activity to a system and have the students create the conditionals that would end in a product of some kind or the completion of some task.
 
Give these 2 conditionals to all students.
* These 2 conditionals will be triggered only once.
* These conditionals start and stop this activity.
* Give the first BEGIN conditional to the students PRINT SIDE UP.
 
**IF** the teacher writes the word **BEGIN** on the whiteboard,<br/>
**THEN** flip over the conditionals in front of you and follow the directions.
 
**IF** you see the word **STOP** on the whiteboard,<br/>
**THEN** sit back, cross your arms, and look at the teacher (smile!).
=================================================================
Give these 6 conditionals to multiple students.
* These 6 conditionals may be triggered more than once.
* Walk around the classroom during the activity to trigger some of these conditionals.
**IF** the teacher says the word popcorn,<br/>
**THEN** stand up and say Pop! once and sit back down.
 
**IF** any student stands up for any reason,<br/>
**THEN** clap 3 times.
 
**IF** anyone writes on the whiteboard with a GREEN marker,<br/>
**THEN** get up and touch something GREEN in the room and sit back down.
 
**IF** anyone walks past you while you are seated,<br/>
**THEN** snap your fingers 3 times.
 
**IF** someone snaps their fingers **AND** you have the letter e in your first name,<br/>
**THEN** select a book from the bookcase and sit back down.
 
**IF** anyone writes anything on the whiteboard,<br/>
**THEN** get up and turn around in place one full turn and sit back down.
 
=================================================================
Give one student each of the following 7 conditionals.
* These 7 conditionals will be triggered only once and set in motion the spelling of STOP on the whiteboard.
 
**IF** the teacher picks up a book,<br/>
**THEN** get up and write the letter S on the whiteboard and sit back down.
 
**IF** someone writes the letter S on the whiteboard,<br/>
**THEN** go open and close the classroom door and sit back down.
 
**IF** someone opens and closes the classroom door,<br/>
**THEN** get up and write the letter T (after the letter S) on the whiteboard.
 
**IF** someone writes the letter T on the whiteboard,<br/>
**THEN** get up and turn the lights on and off and sit back down.
 
**IF** someone turns on and off the lights,<br/>
**THEN** get up and write the letter O (after the letter T) on the whiteboard.
 
**IF** someone writes the letter O on the whiteboard,<br/>
**THEN** get up and sharpen a pencil.
 
**IF** someone sharpens a pencil,<br/>
**THEN** get up and write the letter P (after the letter O) on the whiteboard.

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB