diff --git a/docs/test/courses/csintro.md b/docs/test/courses/csintro.md new file mode 100644 index 00000000000..eaa298f7faf --- /dev/null +++ b/docs/test/courses/csintro.md @@ -0,0 +1,65 @@ +# Intro to CS + +## A 14 week Introduction to Computer Science course. + +This course is targeted to middle school grades 6-8 (ages 11-14 years). It is also written for teachers who may not have a Computer Science background, or who may be teaching an "Intro to Computer Science" course for the first time. + +This course takes approximately 14 weeks to complete, spending about 1 week on each of the first 11 lessons, and 3 weeks for students to complete the final project at the end. Of course, teachers should feel free to customize the curriculum to meet individual school or district resources and timeframe. + +![Space race image](/static/courses/csintro.jpg) + +### ~ hint +**Download it** + +The entire course is also available as a download or as a book. Choose any of these formats: + +||| +|-|-| +| [![](/static/courses/csintro/icons/html-24x24.png)](/--docs#book:/courses/csintro/SUMMARY) | [- **HTML** - The entire course in a single HTML page that you can print to PDF or paper](/--docs#book:/courses/csintro/SUMMARY) | +| [![](/static/courses/csintro/icons/microsoft-onenote-24x24.png)](https://aka.ms/MakeCodeforMicroBitNotebook) | [- **OneNote** - Intro to CS with MakeCode for micro:bit](https://aka.ms/MakeCodeforMicroBitNotebook) | +| [![](/static/courses/csintro/icons/adobe-pdf-file-icon-24x24.png)](https://1drv.ms/b/s!AqsgsTyHBmRBgQ1Fjzm5y5wKG75M) | [- **PDF** - Intro to CS with MakeCode for micro:bit](https://1drv.ms/b/s!AqsgsTyHBmRBgQ1Fjzm5y5wKG75M) | +| [![](/static/courses/csintro/icons/apple-itunes-ibook-24x24.png)](https://itunes.apple.com/us/book/making-with-micro-bit/id1255260221?mt=11) | [- **iBooks** - Making with micro:bit](https://itunes.apple.com/us/book/making-with-micro-bit/id1255260221?mt=11) | +| [![](/static/courses/csintro/icons/paperback-book-24x24.png)](http://www.lulu.com/shop/mary-douglas-kiang/making-with-makecode-microbit/paperback/product-23457217.html) | [- **Paperback** - Making with MakeCode and Micro:bit](http://www.lulu.com/shop/mary-douglas-kiang/making-with-makecode-microbit/paperback/product-23457217.html) | + +**Educators**: For educators, there's an separate edition of this course containing downloadable materials for teaching the course in a classroom setting: + +* **[Intro to Computer Science - Educator edition](/test/courses/csintro-educator)** + +### ~ + +### Lesson structure + +Each of the 12 lessons is structured in this format: +* Topic Introduction +* Unplugged Activity (30 min) - An offline game or activity that demonstrates the concept/topic +* micro:bit Activity (45-60 min) - An activity that everyone makes on their micro:bit that teaches the skills learned in this lesson. +* Project (60-120 min) - A prompt for an original project that each student will create to demonstrate their understanding of the skills and concepts covered in this lesson. +* Project Mods - Examples of additional things students can do to extend the project. +* Assessment - A project rubric and guidance for grading the project. +* Standards - A list of CSTA K-12 Computer Science Standards and/or concepts covered by this lesson. + +### Course on Flipgrid + +Flipcode for the **Intro to CS** course grid: **[csintromicrobit](https://flipgrid.com/csintromicrobit)** + +## Course contents + +* [About](/test/courses/csintro/about) +* [Introduction](/test/courses/csintro/introduction) +* [References](/test/courses/csintro/references) +* [Acknowledgements](/test/courses/csintro/acknowledgements) + +### Lessons + +1. [Making](/test/courses/csintro/making) +2. [Algorithms](/test/courses/csintro/algorithms) +3. [Variables](/test/courses/csintro/variables) +4. [Conditionals](/test/courses/csintro/conditionals) +5. [Iteration](/test/courses/csintro/iteration) +6. [Review/Mini-Project](/test/courses/csintro/miniproject) +7. [Coordinate grid system](/test/courses/csintro/coordinates) +8. [Booleans](/test/courses/csintro/booleans) +9. [Bits, bytes, and binary](/test/courses/csintro/binary) +10. [Radio](/test/courses/csintro/radio) +11. [Arrays](/test/courses/csintro/arrays) +12. [Independent final project](/test/courses/csintro/finalproject) diff --git a/docs/test/courses/csintro/SUMMARY.md b/docs/test/courses/csintro/SUMMARY.md new file mode 100644 index 00000000000..a7227db752e --- /dev/null +++ b/docs/test/courses/csintro/SUMMARY.md @@ -0,0 +1,125 @@ +# [CS Intro](/test/courses/csintro) + +* [CS Intro](/test/courses/csintro) + +## About + +* [About](/test/courses/csintro/about) + +## Introduction + +* [Introduction](/test/courses/csintro/introduction) + +## References + +* [References](/test/courses/csintro/references) + +## Acknowledgements + +* [Acknowledgements](/test/courses/csintro/acknowledgements) + +## Making + +* [Making](/test/courses/csintro/making) + * [Introduction](/test/courses/csintro/making/introduction) + * [Unplugged](/test/courses/csintro/making/unplugged) + * [Walkthrough](/test/courses/csintro/making/activity) + * [Project](/test/courses/csintro/making/project) + * [Standards](/test/courses/csintro/making/standards) + +## [Algorithms](/test/courses/csintro/algorithms) + +* [Algorithms](/test/courses/csintro/algorithms) + * [Overview](/test/courses/csintro/algorithms/overview) + * [Unplugged](/test/courses/csintro/algorithms/unplugged) + * [Activity](/test/courses/csintro/algorithms/activity) + * [Project](/test/courses/csintro/algorithms/project) + * [Standards](/test/courses/csintro/algorithms/standards) + +## Variables + +* [Variables](/test/courses/csintro/variables) + * [Overview](/test/courses/csintro/variables/overview) + * [Unplugged](/test/courses/csintro/variables/unplugged) + * [Activity](/test/courses/csintro/variables/activity) + * [Project](/test/courses/csintro/variables/project) + * [Standards](/test/courses/csintro/variables/standards) + +## Conditionals + +* [Conditionals](/test/courses/csintro/conditionals) + * [Overview](/test/courses/csintro/conditionals/overview) + * [Unplugged](/test/courses/csintro/conditionals/unplugged) + * [Activity](/test/courses/csintro/conditionals/activity) + * [Project](/test/courses/csintro/conditionals/project) + * [Standards](/test/courses/csintro/conditionals/standards) + +## Iteration + +* [Iteration](/test/courses/csintro/iteration) + * [Overview](/test/courses/csintro/iteration/overview) + * [Unplugged](/test/courses/csintro/iteration/unplugged) + * [Activity](/test/courses/csintro/iteration/activity) + * [Project](/test/courses/csintro/iteration/project) + * [Standards](/test/courses/csintro/iteration/standards) + +## Mini-project + +* [Mini-project](/test/courses/csintro/miniproject) + * [Review](/test/courses/csintro/miniproject/review) + * [Activity](/test/courses/csintro/miniproject/activity) + * [Project](/test/courses/csintro/miniproject/project) + * [Standards](/test/courses/csintro/miniproject/standards) + +## Coordinates + +* [Coordinates](/test/courses/csintro/coordinates) + * [Overview](/test/courses/csintro/coordinates/overview) + * [Unplugged](/test/courses/csintro/coordinates/unplugged) + * [Activity](/test/courses/csintro/coordinates/activity) + * [Project](/test/courses/csintro/coordinates/project) + * [Standards](/test/courses/csintro/coordinates/standards) + +## Booleans + +* [Booleans](/test/courses/csintro/booleans) + * [Overview](/test/courses/csintro/booleans/overview) + * [Unplugged](/test/courses/csintro/booleans/unplugged) + * [Activity](/test/courses/csintro/booleans/activity) + * [Project](/test/courses/csintro/booleans/project) + * [Standards](/test/courses/csintro/booleans/standards) + +## Binary + +* [Binary](/test/courses/csintro/binary) + * [Overview](/test/courses/csintro/binary/overview) + * [Unplugged](/test/courses/csintro/binary/unplugged) + * [Activity](/test/courses/csintro/binary/activity) + * [Project](/test/courses/csintro/binary/project) + * [Standards](/test/courses/csintro/binary/standards) + +## Radio + +* [Radio](/test/courses/csintro/radio) + * [Overview](/test/courses/csintro/radio/overview) + * [Unplugged](/test/courses/csintro/radio/unplugged) + * [Activity](/test/courses/csintro/radio/activity) + * [Project](/test/courses/csintro/radio/project) + * [Standards](/test/courses/csintro/radio/standards) + +## Arrays + +* [Arrays](/test/courses/csintro/arrays) + * [Overview](/test/courses/csintro/arrays/overview) + * [Unplugged](/test/courses/csintro/arrays/unplugged) + * [Activity](/test/courses/csintro/arrays/activity) + * [Project](/test/courses/csintro/arrays/project) + * [Standards](/test/courses/csintro/arrays/standards) + +## Final Project + +* [Final Project](/test/courses/csintro/finalproject) + * [Review](/test/courses/csintro/finalproject/review) + * [Project](/test/courses/csintro/finalproject/project) + * [Examples](/test/courses/csintro/finalproject/examples) + * [Standards](/test/courses/csintro/finalproject/standards) diff --git a/docs/test/courses/csintro/about.md b/docs/test/courses/csintro/about.md new file mode 100644 index 00000000000..fbc76d15c74 --- /dev/null +++ b/docs/test/courses/csintro/about.md @@ -0,0 +1,10 @@ +# About The Authors + +![Douglas Kiang](/static/courses/csintro/douglas-kiang-foto.jpg) + +Douglas Kiang is a speaker, teacher, and workshop presenter with twenty-seven years of teaching experience in independent schools at every grade level. He currently teaches high school computer science at Punahou School in Honolulu, Hawaii. Douglas holds a master’s degree in Technology, Innovation, and Education from Harvard and is a Microsoft Innovative Educator. +You can follow him on Twitter at [@dkiang](http://twitter.com/dkiang). + +![Mary Kiang](/static/courses/csintro/mary-kiang-foto.png) + +Mary Kiang has been teaching for over twenty-five years at elementary, middle, and high school levels. She also developed curriculum in the Education Department of the Museum of Science in Boston. She currently teaches 6th grade Math/Science at Punahou School. Mary is a former programmer for Houghton Mifflin and Dun & Bradstreet and holds a Master’s degree in Elementary Education from Simmons College. Mary is the founder of GO Code!, an organization that supports girls and young women in exploring coding and STEM. diff --git a/docs/test/courses/csintro/acknowledgements.md b/docs/test/courses/csintro/acknowledgements.md new file mode 100644 index 00000000000..5f3e623f8b7 --- /dev/null +++ b/docs/test/courses/csintro/acknowledgements.md @@ -0,0 +1,13 @@ +# Acknowledgements + +Many thanks to the following individuals who helped to make this guide possible. + +Thank you to the many students who contributed their energy, creativity, and passion to bring so many of these wonderful examples to life. + +Thank you to Microsoft and to the Micro:bit Foundation for their support of our work. Thank you, as well, to George Saltsman of Lamar University for his original encouragement and support of this project. + +Thank you as well to Peli de Halleux for his advice on all sorts of programming questions, as well as for the wonderful [Infection](/projects/infection) simulation that he created just for this guide. Sam El-Husseini, your advice and wise counsel was instrumental in shaping the format of this book. Richard Knoll, we are so grateful for your help with the [Arrays](/test/courses/csintro/arrays) chapter and the [Song-maker](/test/courses/csintro/arrays/project#song-maker) example. Galen Nickel, thank you for polishing and formatting our work to look good on the web. To Guillaume, Tom, Brahma, and the entire Microsoft MakeCode team, your caring and support meant so much to our students this year. Thank you! + +Above all, our sincere thanks to Jacqueline Russell, Project Lead at Microsoft MakeCode. Your patience, advice, and innumerable suggestions and assistance made this curriculum possible. + +Douglas and Mary. diff --git a/docs/test/courses/csintro/algorithms.md b/docs/test/courses/csintro/algorithms.md new file mode 100644 index 00000000000..2a63424b400 --- /dev/null +++ b/docs/test/courses/csintro/algorithms.md @@ -0,0 +1,21 @@ +# Algorithms + +This unit introduces the four main components that make up a computer and the concept of **input** and **output** as it relates to programming the micro:bit. The coding activity starts with an explanation of pseudocode that leads to working with events and event handlers to program your micro:bit to make faces. The project incorporates all the new learning from this unit as you create your own fidget cube that responds to different inputs. + +## Lesson objectives +You will... + +* Understand the functions of the four components that make up a computer. +* 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](/test/courses/csintro/algorithms/overview) +2. [**Activity**: Happy face, sad face](/test/courses/csintro/algorithms/activity) +3. [**Project**: Fidget cube](/test/courses/csintro/algorithms/project) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/algorithms/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/algorithms/activity.md b/docs/test/courses/csintro/algorithms/activity.md new file mode 100644 index 00000000000..696dc710b10 --- /dev/null +++ b/docs/test/courses/csintro/algorithms/activity.md @@ -0,0 +1,275 @@ +# 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 [Microsoft MakeCode](https://makecode.microbit.org/). Remember, 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. + +1. In [Microsoft MakeCode](https://makecode.microbit.org/), start a new project. + +## 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) + +The features highlighted here are: + +1. Go to the **Home Screen** to start a new project or open an existing project +2. **Simulator** shows what your program will look like when running on a @boardname@ +3. **Hide** or **Show** the simulator pane +4. Program in either **Blocks** or **JavaScript** +5. Programming **Workspace** where you will build you program +6. Blocks **Toolbox** +7. **Download** your program to the @boardname@ +8. Name your project and **Save** it on your computer + +## 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. + +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. + +>![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/drag-to-trash.gif) + +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** toolbox category and under **...more**, choose a ``||basic: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 doesn’t 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(` + . . . . . + . # . # . + . . . . . + . # # # . + # . . . # + `) +}) +``` + +### ~ hint + +Did you ever wonder how those LEDs turn on and make light? Well, watch this video and find out! + +https://www.youtube.com/watch?v=qqBmvHD5bCw + +### ~ + +## 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. + +```sim +basic.forever(() => { + basic.showLeds(` + . . . . . + . # . # . + . . . . . + # . . . # + . # # # . + `) + basic.pause(800) + basic.showLeds(` + . . . . . + . # . # . + . . . . . + . # # # . + # . . . # + `) + basic.pause(800) +}) +``` + +## 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 the code block. +* A menu will pop up. Select ‘Add Comment’. + +![Add comment menu](/test/static/courses/csintro/algorithms/add-comment.png) + +* This will cause a comment icon to appear to the left of the previous icon. +* Click on the comment icon and a small yellow box will appear into which you can write your comment. + +![Write comment](/test/static/courses/csintro/algorithms/write-comment.png) + +* Click on the comment icon again to close the comment box when you are done. +* Click on the comment 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, collapse, 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() +``` + +## Knowledge Check + +Questions: + +1. What is the difference between RAM and hard drive memory? + a. RAM is the computer’s short-term memory and the hard drive is where the computer stores its long-term memory. + b. The hard drive is where the computer stores its short-term memory and RAM is the computer’s long-term memory. + c. RAM is used for programming and the hard drive memory is for storage. + d. Hard drive memory is for storing files and RAM is used for processing inputs. + +2. What’s an algorithm? + a. The word used to describe all computer codes + b. Sets of instructions to a computer + c. A type of hardware used with micro:bit + d. The area of a MakeCode project that shows how a program looks when run on the micro:bit + +3. What is an event in programming? +4. What is an event handler? + +Answers: + +1. a. RAM is the computer’s short-term memory and the hard drive is where the computer stores its long-term memory. +2. b. Sets of instructions to a computer +3. An action done by the user, such as pressing a key or clicking a mouse button +4. A routine that responds to an event diff --git a/docs/test/courses/csintro/algorithms/overview.md b/docs/test/courses/csintro/algorithms/overview.md new file mode 100644 index 00000000000..8c1a43986f2 --- /dev/null +++ b/docs/test/courses/csintro/algorithms/overview.md @@ -0,0 +1,62 @@ +# Introduction + +What is a micro:bit? +The [micro:bit](www.microbit.org) was created in 2015 in the UK by the BBC and partners to teach computer science to students. The BBC gave away a micro:bit to every Year 7 (6th grade) 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/cpu.png) + +1. The Processor – this is usually a small chip inside the computer, and it’s how the computer processes and transforms information. Have you heard of the term “CPU”? CPU stands for Central Processing Unit. You can think of the processor as the brain 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 computer’s short-term memory. Things that are stored here will disappear when the computer is turned off. Can you think of examples of things that are stored in our short-term memory? Things that you forget after you go to sleep? +>* Storage (also referred to as the “hard drive”) - This is the computer’s long-term memory, where it can store information even when power is turned off. Can you think of examples of things that are stored in our long-term memory? Things we never forget? + +3. Inputs – This is how a computer takes in information from the world. In humans, our input comes in through our senses, such as our ears and eyes. Computer Inputs might be things like: Keyboard, mouse, touchscreen, camera, microphone, game controller, scanner. Can you think of others? + +4. Outputs – This is how a computer displays or communicates information. As humans, we communicate information by using our mouths when we talk. What are some examples of communication that don’t involve talking, like blushing or sign language? Some examples of computer outputs are: monitor/screen, headphones/speakers, printer. Can you think of others? + +Now, let’s look at our micro:bit, using the [features page on the microbit website](http://microbit.org/guide/features/) as a visual aid. + +![micro:bit hardware](/static/courses/csintro/algorithms/microbit-hardware.png) + +See if you can answer the following questions: + +* Can you find the Processor? +* How much memory does the micro:bit have? +* Can you locate the following Inputs? Buttons, Pins, and Accelerometer/Compass +* Where are the Outputs? + +Answers: + +* Processor: On the back of the micro:bit, just below the Bluetooth and radio antenna +* Memory: 16K, which is smaller than many files on your computer! +* Inputs: Buttons (on board), Pins (at base) Note: Though not pictured, the Light Sensor is located on the LED lights. +* Outputs: LED lights, Pins + +All computers need electricity to power them.  There are 3 ways to power your micro:bit: + +* Connecting the micro:bit to a computer 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 Unit 10: Radio communication. + +## Knowledge Check + +Questions: + +1. What are the four main components that make up any computer? + +2. How many programmable buttons are on the micro:bit? + +Answers: + +1. The processor, the memory, the inputs and the outputs + +2. Two \ No newline at end of file diff --git a/docs/test/courses/csintro/algorithms/project.md b/docs/test/courses/csintro/algorithms/project.md new file mode 100644 index 00000000000..1fb8ba21f3f --- /dev/null +++ b/docs/test/courses/csintro/algorithms/project.md @@ -0,0 +1,37 @@ +# Project: Fidget Cube + +![Sample fidget cube](/static/courses/csintro/algorithms/fidgetcube.jpg) + +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, you will be challenged to turn the micro:bit into your very own “fidget cube”. + +Here's an example of a fidget cube: + +* Original Kickstarter Fidget Cube - [Fidget Cube: A Vinyl Desk Toy](https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy) (there is a funny video showing the fidget cube in action). + +Consider some of the following questions: + +* Do you fidget? How about someone you know? +* What kinds of things might that person fidget with? Spinning pens, fidget spinners, rings, coins? +* There are many different versions of fidget cubes available now. Have you seen them before? Do you have one? +* What are the types of fidget activities on these cubes? +* If you could add or modify features of the fidget cube, what would you choose to do? +* What would make the ultimate fidget cube? + +Remember that a computing device has a number of inputs, and a number of outputs. The code that we'll write in this project will process input by telling the micro:bit what to do when various events occur. + +## Project + +Make a fidget cube out of the micro:bit by creating 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! \ No newline at end of file diff --git a/docs/test/courses/csintro/algorithms/standards.md b/docs/test/courses/csintro/algorithms/standards.md new file mode 100644 index 00000000000..5676240aa86 --- /dev/null +++ b/docs/test/courses/csintro/algorithms/standards.md @@ -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. diff --git a/docs/test/courses/csintro/algorithms/unplugged.md b/docs/test/courses/csintro/algorithms/unplugged.md new file mode 100644 index 00000000000..38708147e34 --- /dev/null +++ b/docs/test/courses/csintro/algorithms/unplugged.md @@ -0,0 +1,155 @@ +# Unplugged: What's your function & crazy conditionals + +This is a classroom activity that teachers might choose to run with a classrom of students. + +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 IF’s +* Let students create the IF’s +* 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,
+**THEN** flip over the conditionals in front of you and follow the directions. +  +**IF** you see the word ‘**STOP**’ on the whiteboard,
+**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’,
+**THEN** stand up and say ‘Pop!’ once and sit back down. +  +**IF** any student stands up for any reason,
+**THEN** clap 3 times. +  +**IF** anyone writes on the whiteboard with a GREEN marker,
+**THEN** get up and touch something GREEN in the room and sit back down. +  +**IF** anyone walks past you while you are seated,
+**THEN** snap your fingers 3 times. +  +**IF** someone snaps their fingers **AND** you have the letter ‘e’ in your first name,
+**THEN** select a book from the bookcase and sit back down. +  +**IF** anyone writes anything on the whiteboard,
+**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,
+**THEN** get up and write the letter S on the whiteboard and sit back down. +  +**IF** someone writes the letter S on the whiteboard,
+**THEN** go open and close the classroom door and sit back down. +  +**IF** someone opens and closes the classroom door,
+**THEN** get up and write the letter T (after the letter S) on the whiteboard. +  +**IF** someone writes the letter T on the whiteboard,
+**THEN** get up and turn the lights on and off and sit back down. +  +**IF** someone turns on and off the lights,
+**THEN** get up and write the letter O (after the letter T) on the whiteboard. +  +**IF** someone writes the letter O on the whiteboard,
+**THEN** get up and sharpen a pencil. +  +**IF** someone sharpens a pencil,
+**THEN** get up and write the letter P (after the letter O) on the whiteboard. + diff --git a/docs/test/courses/csintro/arrays.md b/docs/test/courses/csintro/arrays.md new file mode 100644 index 00000000000..7f3393db6c2 --- /dev/null +++ b/docs/test/courses/csintro/arrays.md @@ -0,0 +1,37 @@ +# Arrays + +![Cover image](/static/courses/csintro/arrays/cover.jpg) + +This lesson introduces the fundamental concept of storing and retrieving data in an ordered fashion using Arrays. We'll also look at JavaScript as an alternate way of creating and modifying code. We'll look at the structure of a Melody as a list of notes. +  +## Lesson objectives +Students will... +* Explain the steps they would take to sort a series of numbers. +* Recognize three common sorting algorithms. +* Practice creating Arrays. +* Practice storing and retrieving values in Arrays. +* Learn common Array operations such as setting and getting values by index. +* Demonstrate understanding and apply skills by creating a musical instrument that uses a micro:bit and a program that correctly and effectively uses Arrays to store data. +  +## Lesson structure +* Introduction: Arrays +* Unplugged Activity: Different sorts of people +* micro:bit Activity: Headband charades, Starry Starry Night +* Project: Make a musical instrument +* Assessment: Rubric +* Standards: Listed +  +## Lesson plan + +1. [**Overview**: Arrays](/test/courses/csintro/arrays/overview) +2. [**Unplugged**: Different sorts of people](/test/courses/csintro/arrays/unplugged) +3. [**Activity**: Headband charades](/test/courses/csintro/arrays/activity) +4. [**Project**: Musical instrument ](/test/courses/csintro/arrays/project) + +## Flipgrid + +The [Flipgrid](https://info.flipgrid.com/) topic for the **Arrays** lesson: https://flipgrid.com/f0f1bbc5 + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/arrays/standards) diff --git a/docs/test/courses/csintro/arrays/activity.md b/docs/test/courses/csintro/arrays/activity.md new file mode 100644 index 00000000000..06561173036 --- /dev/null +++ b/docs/test/courses/csintro/arrays/activity.md @@ -0,0 +1,296 @@ +## Activity: Headband charades and starry starry night + +![Starry Night](/static/courses/csintro/arrays/starry-night.png) + +Create an array of words that can be used as part of a charades-type game. +This activity is based on a very popular phone app invented by Ellen DeGeneres (https://bits.blogs.nytimes.com/2013/05/03/ellen-degeneres-iphone-game/). + +![Heads up game](/static/courses/csintro/arrays/headband-charades.png) + +* From the Arrays Toolbox drawer, drag a 'set text_list to array of' block into the 'on start' block. +* You can use the variable name of text_list or rename it to something more meaningful like arrayWords. + +```blocks +let arrayWords = ["a", "b", "c"] +``` + +Notice that the array comes with 2 string blocks. We’ll want more for our charades game. + +* Click on the **(+)** symbol at the end of the 'array of' block. +* Add as many values (elements) as you'd like to the array block by continuing to click on the **(+)**. +* For now, we’ll add 3 more values for a total of 6 values. + +```blocks +let arrayWords = ["a", "b", "c", "", "", ""] +``` +* Fill each string with one word. Choose words that will be fun for a game of charades. Example: + +```blocks +let arrayWords = ["cat", "guitar", "flashlight", "cupcake", "tree", "frisbee"] +``` + +Now, we need a way to access one word at a time from this array of words. +* We can use the 'show string' block from the Basic Toolbox drawer, and the 'on screen up' event handler from the Input Toolbox drawer (this is a drop-down menu choice of the 'on shake' block) to tell the micro:bit to display a word when we tilt the micro:bit up. +* For this version, we’ll display the words one at a time in the order they were first placed into the array. +* We’ll use the index of the array to keep track of what word to display at any given time, so you'll need to create an 'index' variable. + +```block +let arrayWords: string[] = [] +let index = 0 +input.onGesture(Gesture.ScreenUp, () => { + basic.showString(arrayWords[index]) +}) +``` + +* To start the game with the index at zero, add a 'set' variable block to the 'on' start block. +* Next, add the following: + +>* an image as a placeholder for when the program has started. Since charades is a guessing game, we made one that looks like a question mark (?), +* a countdown to the first word using show number blocks and pause blocks +* And show the first word in the array + +```blocks +let index = 0 +let arrayWords: string[] = [] +   +arrayWords = ["cat", "guitar", "flashlight", "cupcake", "tree", "frisbee"] +index = 0 +basic.showLeds(` + . # # # . + . . . # . + . . # # . + . . . . . + . . # . . + `) +basic.pause(100) +basic.showNumber(3) +basic.pause(100) +basic.showNumber(2) +basic.pause(100) +basic.showNumber(1) +basic.showString(arrayWords[index]) +``` + +So far we have a start to our game and a way to display the first word. + +Once that word has been guessed (or passed), we need a way to advance to the next word in the array. + +* We can do this by changing the index of the array with the 'on screen down' event handler from the Input Toolbox drawer (this is a drop-down menu choice of the 'on shake' block) to advance to the next word when we tilt the micro:bit down. + +```block +let index = 0 +input.onGesture(Gesture.ScreenDown, () => { + index += 1 +}) +``` + +We have a limited number of elements in our array, so to avoid an error, we need to check and make sure we are not already at the end of the array before we change the index. +  +* Under the Arrays Toolbox drawer, drag out a 'length of' block. The 'length of' block returns the number of items (elements) in an array. For our array, the length of block will return the value 6. +* But because computer programmers start counting at zero, the index of the final (6th) element is 5. +  +Some pseudocode for our algorithm logic: +* When the player places the micro:bit screen down: +>Check the current value of the index. +>> **If:** the current value of the index is less than the length of the array minus one (see **array bounds** note),
+**Then:** change the value of the index by one,
+**Else:** indicate that it is the end of the game. + +### ~hint + +#### Array bounds + +Our array has a length 6, so this will mean that as long as the current value of the index is less than 5, we will change the array by one. + +Using ‘less than the length of the array minus one’ instead of the actual numbers for our array makes this code more flexible and easier to maintain. We can easily add more elements to our array and not have to worry about changing numbers elsewhere in the code. + +### ~  + +We can put this all together with an 'if...then...else' block and a 'less than' comparison block from the Logic Toolbox drawer, a subtraction block from the Math Toolbox drawer, and a 'game over' block from the Game Toolbox drawer (located under the Advanced menu). + +```blocks +let index = 0 +let arrayWords: string[] = [] +input.onGesture(Gesture.ScreenDown, () => { +   if (index < arrayWords.length - 1) { +       index += 1 +   } else { +       game.gameOver() +   } +}) +``` + +To make our game more polished, we’ll add 2 more blocks for smoother game play. + +* In case a word is already scrolling on the screen when a player places the micro:bit screen down, we can stop this animation and clear the screen for the next word by using a 'stop animation' block from the Led More Toolbox drawer, and a 'clear screen' block from the Basic More Toolbox drawer. + +```blocks +let index = 0 +let arrayWords: string[] = [] +input.onGesture(Gesture.ScreenDown, () => { + led.stopAnimation() + basic.clearScreen() + if (index < arrayWords.length - 1) { + index += 1 + } else { + game.gameOver() + } +}) +``` + +## Game Play + +There are different ways you can play charades with our program. Here is one way you can play with a group of friends. + +* With the micro:bit on and held so Player A cannot see the screen, another player starts the program to see the first word. +* The other players act out this word charades-style for Player A to guess. +* When Player A guesses correctly or decides to pass on this word, a player places the micro:bit screen down. +* When ready for the next word, a player turns the micro:bit screen up. Play continues until all the words in the array have been used. +  +## Mod this! + +* Add a headband to hold the micro:bit on the Players' foreheads (using cardboard, paper, rubber bands, etc.) +* Add a way to keep score +* Keep track of the number of correct guesses and passes +* Add a time limit +  +Headband Charades Complete Program (simple version - no time limit or scoring): +  +```blocks +let index = 0 +let arrayWords: string[] = [] +input.onGesture(Gesture.ScreenUp, () => { + basic.showString(arrayWords[index]) +}) +input.onGesture(Gesture.ScreenDown, () => { + led.stopAnimation() + basic.clearScreen() + if (index < arrayWords.length - 1) { + index += 1 + } else { + game.gameOver() + } +}) +arrayWords = ["cat", "guitar", "flashlight", "cupcake", "tree", "frisbee"] +index = 0 +basic.showLeds(` + . # # # . + . . . # . + . . # # . + . . . . . + . . # . .`) +basic.pause(100) +basic.showNumber(3) +basic.pause(100) +basic.showNumber(2) +basic.pause(100) +basic.showNumber(1) +basic.showString(arrayWords[index]) +``` + +![Random stars](/static/courses/csintro/arrays/starry-night.gif) + +## Activity: Starry starry night + +In this micro:bit activity, we will create a set of random constellations on the micro:bit screen. We will use an array filled with numbers to tell us how many stars (dots) should be in each constellation. + +Review the use of the random block in the Math category. + +* Create a block that will plot a single dot at a random location on the screen by choosing a random number from 0 to 4 for the x axis and a random number from 0 to 4 for the y axis. + +```blocks +led.plot(randint(0, 4), randint(0, 4)) +``` + +Next, let’s create a loop that will repeat the above code five times, for a constellation with five stars. + +```blocks +for (let index = 0; index <= 4; index++) { + led.plot(randint(0, 4), randint(0, 4)) +} +``` + +Note that to keep things simple we don’t check for duplicates, so it’s possible you may end up with fewer than five visible stars. That’s okay. + +Next, let’s create an array with five numbers in it. We will loop through the array and create five separate constellations, using the numbers in the array to represent the number of stars in each of the five constellations. + +To create an array, you need to set the value of a variable to the array. The Arrays Toolbox has one already made for us. + +* From the Arrays Toolbox drawer, drag out the 'set list to' block that's attached to the ‘array of’ block containing numbers. +* Then click on the **(+)** symbol to add more values to the block, for a total of five. + +You can drag additional numbers out of the Math category and snap them to the open slots in the Create array with block. Go ahead and change them to some random values, then attach the whole thing to the ‘on start’ event handler block. + +Now, when the micro:bit starts, it will create an array with those five values. Let’s create the constellations when the A button is pressed. Looking at our loop, instead of repeating 0 to 4 times, we actually want to use the value from the array to figure out how many stars to create. + +* Drag the ‘list get value at’ block from the Arrays Toolbox drawer and replace the 4 with that block. + +You should see that there are more stars printed now, although there is an extra star; if the first value in the array is 5, you will actually see 6 stars because the loop runs when index is 0. + +To fix this, we need to do a little math by subtracting 1 from whatever the value in the array is. You can use a Math operation block to do this. + +**Note:** Be sure to hit Refresh a few times on the simulator, because sometimes some stars get hidden behind other stars. + +```block +let list = [5, 2, 1, 3, 4] + +for (let index = 0; index < list[0] - 1; index++) { + led.plot(randint(0, 4), randint(0, 4)) +} +``` + +The above code takes the first value in the array and creates that many stars at random locations. Now, all we need to do is iterate through the entire array and do the same thing for each of the values. We will put the above code inside another loop that will run the same number of times as the length of the array (in this case, 5). You should also use a 'pause' block and a 'clear screen' block in between each constellation. + +Finally, you might attach the code that shows the constellations to an 'on button A pressed' event handler. + +Here is the complete program. + +```blocks +let list: number[] = [] +input.onButtonPressed(Button.A, () => { + for (let i = 0; i <= list.length - 1; i++) { + for (let j = 0; j <= list[i] - 1; j++) { + led.plot(randint(0, 4), randint(0, 4)) + } + basic.pause(1000) + basic.clearScreen() + } +}) +list = [5, 2, 1, 3, 4] +``` + +## Traversing an array + +Traversing an array means proceeding through the elements of the array in sequence. Note that there is a special loop in the Loops Toolbox drawer called ‘for element value of list’. This loop automatically takes each element of your array in turn and copies it into a variable called value. + +```block +let list: number[] = [] +for (let value of list) {} +``` + +The following code is useful for printing out the values of the elements in your array: + +```blocks +let list = [5, 2, 1, 3, 4] + +input.onButtonPressed(Button.B, () => { +   for (let value of list) { +       basic.showNumber(value) +   } +   basic.clearScreen() +}) +``` + +However, note that value holds a copy of the element in the array, so changing value doesn’t affect the original element. + +If you run the code below, then print out the array again, you will see that it is unchanged. + +```blocks +let list = [5, 2, 1, 3, 4] + +input.onButtonPressed(Button.A, () => { +   for (let value of list) { +       value += 1 +   } +}) +``` diff --git a/docs/test/courses/csintro/arrays/overview.md b/docs/test/courses/csintro/arrays/overview.md new file mode 100644 index 00000000000..f6d20b351ea --- /dev/null +++ b/docs/test/courses/csintro/arrays/overview.md @@ -0,0 +1,59 @@ +# Introduction + +Any collector of coins, fossils, or baseball cards knows that at some point you need to have a way to organize everything so you can find things. For example, a rock collector might have a tray of specimens numbered like this: + +![Rock collection is an array](/static/courses/csintro/arrays/rock-collection.png) + +Every rock in the collection needs its own storage space, and a unique address so you can find it later. +  +As your MakeCode programs get more and more complicated, and require more variables to keep track of things, you will want to find a way to store and organize all of your data. MakeCode provides a special category for just this purpose, called an Array. +  +* Arrays can store numbers, strings (words), or sprites. They can also store musical notes. +* Every spot in an array can be identified by its index, which is a number that corresponds to its location in the array. The first slot in an array is index 0, just like our rock collection above. +* The length of an array refers to the total number of items in the array, and the index of the last element in an array is always one less than its length (because the array numbering starts at zero.) +  +In MakeCode, you can create an array by assigning it to a variable. The Array blocks can be found under the Advanced Toolbox menu. + +![Arrays block menu](/static/courses/csintro/arrays/arrays-menu.png) + +```blocks +let list = [4, 2, 5, 1, 3] +``` + +The code above creates an empty array called list, then fills it with five numbers, indexed from 0 to 4. The index of the first value (4) is 0. The index of the second value (2) is 1. The index of the last value (3) is 4. +  +You can get items out of the array by specifying its index like this: + +```blocks +let list = [4, 2, 5, 1, 3] + +input.onButtonPressed(Button.A, () => { + basic.showNumber(list[0]) +}) +```  +The code above takes the first element in the array (the value at index 0) and shows it on the screen. +  +There are lots of other blocks in the Arrays Toolbox drawer. The next few Activities will introduce you to them. +  +## Discussion + +* Ask your students if any of them collects anything. What is it? Comic books, cards, coins, stamps, books, etc. +* How big is the collection? +* How is it organized? +* Are the items sorted in any way? +* How would you go about finding a particular item in the collection? +  +In the discussion, see if you can explore the following array vocabulary words in the context of kids’ personal collections. +* Length: the total number of items in the collection +* Sort: Items in the collection are ordered by a particular attribute (e.g., date, price, name) +* Index: A unique address or location in the collection +* Type: The type of item being stored in the collection +  +## References + +Once you start saving lots of different values in an array, you will probably want to have some way to sort those values. Many languages already implement a sorting algorithm that students can call upon as needed. However, understanding how those different sorting algorithms work is an important part of computer science, and as students go on to further study they will learn other algorithms, as well as their relative efficiency. + +There are some good array sorting videos: +* Visually displays a number of different types of sorts: https://www.youtube.com/watch?v=kPRA0W1kECg +* Bubble-sort with Hungarian folk dance: https://youtu.be/lyZQPjUT5B4 +* Insert-sort with Romanian folk dance: https://youtu.be/ROalU379l3U \ No newline at end of file diff --git a/docs/test/courses/csintro/arrays/project.md b/docs/test/courses/csintro/arrays/project.md new file mode 100644 index 00000000000..b0f686e362c --- /dev/null +++ b/docs/test/courses/csintro/arrays/project.md @@ -0,0 +1,126 @@ +# Project: Musical instrument + +This is a project in which students are challenged to create a musical instrument that uses arrays to store sequences of notes. The array of notes can be played when an input occurs, such as one of the buttons being pressed, or if one or more of the pins is activated. +  +Ideally, the micro:bit should be mounted in some kind of housing, perhaps a guitar shape or a music box. Start by looking at different kinds of musical instruments to get a sense of what kind of shape you might want to build around your micro:bit. + +![micro:bit guitar](/static/courses/csintro/arrays/microbit-guitar.png) + +Here are some examples of guitars that were made out of cardboard and colored, patterned duct tape that you can buy in craft stores. + +## Example guitar code + +This is an example of a project that uses the micro:bit accelerometer to play different tones when the guitar is held and tilted while playing. Pressing the A button will save the current tone to an array. After ten tones, a repeating melody will be performed. Press the B button to clear the array and start over. + +### Song-maker + +```blocks +let currentNote = 0 +let list: number[] = [] +basic.forever(() => { + if (list.length < 10) { + currentNote = input.acceleration(Dimension.X) + 1300 + music.ringTone(currentNote) + } else { + basic.showLeds(` + . . # . . + . # . # . + # . . . # + . # . # . + . . # . . + `) + for (let value of list) { + music.playTone(value, music.beat(BeatFraction.Whole)) + } + } +}) +input.onButtonPressed(Button.A, () => { + if (list.length < 10) { + list.push(currentNote) + basic.showNumber(10 - list.length) + } +}) +input.onButtonPressed(Button.B, () => { + list = [] + basic.clearScreen() +}) +``` + +## Using arrays with musical notes +You can create an array of notes by attaching Music blocks to an array. Musical notes are described in words (e.g., Middle C, High C) but they are actually numbers. You can do Math operations on those numbers to change the pitch of your song. +  +Here is an example of how to create an array with musical notes. Button A plays every note in the array. Button B plays the notes at twice the frequency (but doesn't alter the original notes.) + +```blocks +let list: number[] = [] +let value = 0 +input.onButtonPressed(Button.A, () => { + for (let value of list) { + music.playTone(value, music.beat(BeatFraction.Whole)) + } + basic.pause(1000) +}) +input.onButtonPressed(Button.B, () => { + for (let value of list) { + music.playTone(value * 2, music.beat(BeatFraction.Whole)) + } + basic.pause(1000) +}) +list = [262, 392, 330, 392, 262] +``` + +Remember that a 'for element value of list' loop makes a temporary copy of the value, so even if you change a value, it will not change the original element in the array. If students want to permanently change the values in their array (transpose music to increasingly higher keys, for example) they can use a for loop like this: + +```blocks +let list: number[] = [] +input.onButtonPressed(Button.AB, () => { + for (let index = 0; index <= list.length - 1; index++) { + list[index] = list[index] * 2 + } +}) +``` + +## Reflection +Have students write a reflection of about 150–300 words, addressing the following points: + +* Explain how you decided on your musical instrument. What brainstorming ideas did you come up with? +* What properties does it share with a real musical instrument? What is unique? +* Describe the type of array you used (Numbers, Strings, or Notes) and how it functions in your project. +* What was something that was surprising to you about the process of creating this program? +* Describe a difficult point in the process of designing this program, and explain how you resolved it. +* What feedback did your beta testers give you? How did that help you improve your musical instrument? + +## Assessment + +**Competency scores**: 4, 3, 2, 1 + +### Array + +**4 =** Stores and iterates through each element of the array successfully.
+**3 =** Stores each element of the array successfully.
+**2 =** Array skips values or has other problems with storing and/or retrieving elements.
+**1 =** Array doesn't work at all or no array present. + +### Maker component + +**4 =** Tangible component is tightly integrated with the micro:bit and each relies heavily on the other to make the project complete.
+**3 =** Tangible component is somewhat integrated with the micro:bit but is not essential.
+**2 =** Tangible component does not add to the functionality of the program.
+**1 =** No tangible component. + +### micro:bit program + +**4 =** The program:
+`*` Uses at least one array in a fully integrated and meaningful way
+`*` Compiles and runs as intended
+`*` Meaningful comments in code
+**3 =** Uses an array in a tangential way that is peripheral to function of project and/or program lacks 1 of the required elements.
+**2 =** Array is poorly implemented and/or peripheral to function of project, and/or lacks 2 of the required elements.
+**1 =** micro:bit program lacks 3 or more of the required elements. + +### Collaboration reflection + +**4 =** Reflection piece addresses all prompts.
+**3 =** Reflection piece lacks 1 of the required elements.
+**2 =** Reflection piece lacks 2 of the required elements.
+**1 =** Reflection piece lacks 3 of the required elements. diff --git a/docs/test/courses/csintro/arrays/standards.md b/docs/test/courses/csintro/arrays/standards.md new file mode 100644 index 00000000000..0a0a332776e --- /dev/null +++ b/docs/test/courses/csintro/arrays/standards.md @@ -0,0 +1,10 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CT.L1:6-02 Develop a simple understanding of an algorithm using computer-free exercise. +* CPP.L1:6-05 Construct a program as a set of step-by-step instructions to be acted out. +* 2-A-2-1 Solicit and integrate peer feedback as appropriate to develop or refine a program. +* 2-A-6-10 Use an iterative design process (e.g., define the problem, generate ideas, build, test, and improve solutions) to solve problems, both independently and collaboratively. +* CT.L3B-06 Compare and contrast simple data structures and their uses (e.g., arrays and lists). +* CL.L2-05 Implement problem solutions using a programming language, including: looping behavior, conditional statements, logic, expressions, variables, and functions. diff --git a/docs/test/courses/csintro/arrays/unplugged.md b/docs/test/courses/csintro/arrays/unplugged.md new file mode 100644 index 00000000000..0ee1740542c --- /dev/null +++ b/docs/test/courses/csintro/arrays/unplugged.md @@ -0,0 +1,256 @@ +## Unplugged: Different sorts of people + +In this activity, you will demonstrate different kinds of sorting methods on your own students. This is an unplugged activity, so your students will be standing at the front of the room. If you or your students are curious to see what these different sorts look like in code, we have included a MakeCode version of each algorithm in this lesson, for you to explore if you choose. +  +## Materials + +* Sheets of paper numbered 1–10, one large printed number to a page + +## Set Up + +* Have up to ten students (the Sortees) stand up at the front of the classroom. Ask another student to volunteer to be the Sorter. +* Mix up the order of the papers and give each student a piece of paper with a number on it. They should hold the paper facing outward so their number is visible. Each of these students is like an element in an array. + +![Illustration of line of students representing an array](/static/courses/csintro/arrays/sorts-people.png) +  +## Initial Sort + +* Ask the Sorter to place the students in order by directing them to move, one at a time, to the proper place. +* Once the students are sorted, ask students the following: + +>*  How did she sort you into the right order? +* Did you see a pattern? +* What did she do? +  +Try to get students to be as precise as possible in explaining their thinking. Sometimes it helps to put the steps on the board, in an algorithm: +* _First, she went to the first student, then put him in the right place._ +* _Then she went to each of the next students and put them in the right place._ +  +Ask for clarification when necessary: _What does it mean when you say “put them in the right place”?_ +  +_To Put Someone in the Right Place:_ + +_Bring the person to the front of the line and then compare that person’s number with the first person’s number. If it’s larger, then move that person to the right. K eep doing this as long as the person’s number is larger than the person on the right._ +  +## Some Different Types of Sorts +In computer science, there are certain common strategies, or algorithms, for sorting a collection of values. Try acting out each of these different sorts with your students. +  +### Bubble Sort +Compare the first two students. If the student on the right is smaller than the student on the left, they should swap places. Then compare the second and third students. If the student on the right is smaller than the student on the left, they should swap places. When you reach the end, start over at the beginning again. Continue in this way until you make it through the entire row of students without swapping anybody. +  +#### In pseudocode: +1. Create a variable called counter. +2. Set the counter to zero. +3. Go through the entire array. +4. If the value you are considering is greater than the value to its right: +>1. Swap them +>2. Add one to counter +5. Repeat steps 2 through 4 as long as counter is greater than zero. +  +![Bubble Sort Animation](/static/courses/csintro/arrays/bubble-sort.gif) + +#### In MakeCode: + +**Note:** Press B to display the array visually. The length of each vertical bar represents each number in the array, from left to right. Press A to sort the array using Bubble Sort. Press A + B to generate new random numbers for the array. + +```blocks +let temp = 0 +let row = 0 +let list: number[] = [] +let counter = 0 +let column = 0 +let index = 0 +input.onButtonPressed(Button.AB, () => { + for (let index = 0; index <= 4; index++) { + list[index] = randint(0, 5) + 1 + } +}) +input.onButtonPressed(Button.B, () => { + basic.clearScreen() + for (let column = 0; column <= 4; column++) { + row = 0 + while (row < list[column]) { + led.plot(column, 4 - row) + row += 1 + } + } +}) +input.onButtonPressed(Button.A, () => { + while (counter > 0) { + counter = 0 + for (let index = 0; index <= 3; index++) { + if (list[index] > list[index + 1]) { + temp = list[index] + list[index] = list[index + 1] + list[index + 1] = temp + counter += 1 + } + basic.clearScreen() + for (let column = 0; column <= 4; column++) { + row = 0 + while (row < list[column]) { + led.plot(column, 4 - row) + row += 1 + } + basic.pause(100) + } + } + } +}) +basic.showLeds(` + # # # . . + # . . # . + # # # . . + # . . # . + # # # . . + `) +list = [4, 2, 5, 1, 3] +counter = 1 +``` + +### Selection Sort +Take the first student on the left and consider that person’s number the smallest number you have found so far. If the next person in line has a number that is smaller than that number, then make that person’s number your new smallest number and continue in this way until you reach the end of the line of students. Then, move the person with the smallest number all the way to the left. Then start over from the second person in line. Keep going, finding the smallest number each time, and making that person the rightmost person in the sorted line of students. +  +#### In pseudocode: +1. Find the smallest unsorted value in the array. +2. Swap that value with the first unsorted value in the array. +3. Repeat steps 1 and 2 while the number of unsorted items is greater than zero. + +![Selection Sort Animation](/static/courses/csintro/arrays/selection-sort.gif) + +#### In MakeCode: + +**Note:** The inner loop gets smaller as the sorting algorithm runs because the number of unsorted items decreases as you go. The index that the inner loop starts at needs to change as the number of sorted items increases, which is why we have to use a separate counter (item) and compute j every time through the inner loop. + +```blocks +let temp = 0 +let j = 0 +let min = 0 +let row = 0 +let list: number[] = [] +let item = 0 +let column = 0 +input.onButtonPressed(Button.B, () => { + basic.clearScreen() + for (let column = 0; column <= 4; column++) { + row = 0 + while (row < list[column]) { + led.plot(column, 4 - row) + row += 1 + } + } +}) +input.onButtonPressed(Button.AB, () => { + for (let index = 0; index <= 4; index++) { + list[index] = randint(0, 5) + 1 + } +}) +input.onButtonPressed(Button.A, () => { + item = 1 + for (let i = 0; i <= 3; i++) { + min = i + for (let inner = 0; inner <= 3 - i; inner++) { + j = inner + item + if (list[j] < list[min]) { + min = j + } + } + if (min != i) { + temp = list[min] + list[min] = list[i] + list[i] = temp + } + item += 1 + basic.clearScreen() + for (let column = 0; column <= 4; column++) { + row = 0 + while (row < list[column]) { + led.plot(column, 4 - row) + row += 1 + } + basic.pause(100) + } + } +}) +basic.showLeds(` + . . # # . + . # . . . + . . # . . + . . . # . + . # # . . + `) +list = [] +list = [4, 2, 5, 1, 3] +min = 1 +``` + +### Insertion Sort +Take the first student on the left and consider that person sorted. Next, take the next student and compare him to the first student in the sorted section. If he is greater than the first student, then place him to the right of the student in the sorted section. Otherwise, place him to the left of the student in the sorted section. Continue down the line, considering each student in turn and then moving from left to right along the students in the sorted section until you find the proper place for each student to go, shifting the other students to the right to make room. +  +#### In pseudocode: +1. For each element in the unsorted section of the list, compare it against each element in the sorted section of the list until you find its proper place. +2. Shift the other elements in the sorted list to the right to make room. +3. Insert the element into its proper place in the sorted list. + +![Insertion Sort Animation](/static/courses/csintro/arrays/insertion-sort.gif) + +#### In MakeCode: + +```blocks +let j = 0 +let row = 0 +let element = 0 +let list: number[] = [] +input.onButtonPressed(Button.A, () => { + for (let i = 0; i <= 4; i++) { + element = list[i] + j = i + while (j > 0 && list[j - 1] > element) { + list[j] = list[j - 1] + j += -1 + list[j] = element + } + basic.clearScreen() + for (let column2 = 0; column2 <= 4; column2++) { + row = 0 + while (row < list[column2]) { + led.plot(column2, 4 - row) + row += 1 + } + basic.pause(100) + } + } +}) +input.onButtonPressed(Button.AB, () => { + for (let index = 0; index <= 4; index++) { + list[index] = randint(0, 5) + 1 + } +}) +input.onButtonPressed(Button.B, () => { + basic.clearScreen() + for (let column = 0; column <= 4; column++) { + row = 0 + while (row < list[column]) { + led.plot(column, 4 - row) + row += 1 + } + } +}) +list = [] +basic.showLeds(` + . # # # . + . . # . . + . . # . . + . . # . . + . # # # . + `) +list = [] +list = [4, 2, 5, 1, 3] +j = 1 +``` + +## Sidebar +In 2008, Illinois Senator Barack Obama was interviewed by Google’s CEO Eric Schmidt, who asks him a computer science interview question. Watch as the interview doesn’t go exactly as planned… + +https://www.youtube.com/watch?v=k4RRi_ntQc8 +[Barack Obama interviewed by Eric Schmidt](https://www.youtube.com/watch?v=k4RRi_ntQc8) diff --git a/docs/test/courses/csintro/binary.md b/docs/test/courses/csintro/binary.md new file mode 100644 index 00000000000..bbe1f4091f7 --- /dev/null +++ b/docs/test/courses/csintro/binary.md @@ -0,0 +1,36 @@ +# Binary + +![Binary numbers shown on a monitor](/static/courses/csintro/binary/binary-crt.png) + +This lesson presents the concept of binary digits and base-2 notation. Students will learn how data is stored digitally and how it can be read and accessed. + +## Lesson objectives + +Students will... +* Understand what bits and bytes are and how they relate to computers and the way information is processed and stored. +* Learn to count in Base-2 (binary) and translate numbers from Base-10 (decimal) to binary and decimal. +* Apply the above knowledge and skills to create a unique program that uses binary counting as an integral part of the program. + +## Lesson structure + +* Introduction: Bits and Bytes +* Unplugged Activity: Binary Vending Machine +* micro:bit Activity: Binary Transmogrifier +* Project: Make a Binary Cash Register +* Assessment: Rubric +* Standards: Listed + +## Lesson plan + +1. [**Overview**: Bits, bytes, binary](/test/courses/csintro/binary/overview) +2. [**Unplugged**: Binary vending machine](/test/courses/csintro/binary/unplugged) +3. [**Activity**: Binary transmogrifier](/test/courses/csintro/binary/activity) +4. [**Project**: Make binary a cash register](/test/courses/csintro/binary/project) + +## Flipgrid + +The [Flipgrid](https://info.flipgrid.com/) topic for the **Binary** lesson: https://flipgrid.com/d44cd204 + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/binary/standards) diff --git a/docs/test/courses/csintro/binary/activity.md b/docs/test/courses/csintro/binary/activity.md new file mode 100644 index 00000000000..f9eea274eab --- /dev/null +++ b/docs/test/courses/csintro/binary/activity.md @@ -0,0 +1,170 @@ +# Activity: Binary transmogrifier + +Guide the students through building a binary transmogrifier (converter) that converts between binary (base-2) and decimal (base-10) numbers. Let them figure out a pattern that will allow them to do the conversion on the fly. + +![Transmogrifier cartoon](/static/courses/csintro/binary/transmogrifier.png) +Calvin & Hobbes + +Tell the students that they will be building a binary transmogrifier with the micro:bit. +The user will be able to use the buttons to enter binary 0s and 1s and will be able to press A+B at any time to display the decimal equivalent of the number that has been entered. + +## Create the Variables +Students will need to create a number variable to hold the running decimal total. +They should also create a string variable to hold the current binary number. + +* From the Variables menu, make and name these two variables: decimal, binary. + +>![Make a variable](/static/courses/csintro/binary/make-a-variable.png) + +>![Name a variable](/static/courses/csintro/binary/name-a-variable.png) + +## Initialize the Variables +When the program starts up, you should initialize your variables to starting values. +* `decimal` = `0` +* `binary` = `""` (empty string) +This also tells the micro:bit what type of variable it is. Use the empty string value found in the **Text** toolbox drawer, under the **Advanced** menu. + +![Select text on block menu](/static/courses/csintro/binary/select-text-blocks.png) + +```blocks +let binary = "" +let decimal = 0 +``` + +By setting the binary variable to an initial value of “ “ you tell the micro:bit that it is a string variable: a literal string of characters. This is important because you will be adding to this string character by character. + +## Transmogrify Me! +We are ready to start entering numbers. Remember that binary numbers are calculated based on the number of place values (“bits”) and as you enter 1s and 0s, the value changes. One way to calculate the decimal value is to wait until the user presses A+B, and then calculate the entire number based on the value of the string. + +However, a much simpler method is to calculate the decimal number “on the fly”, which is to say, every time the user presses a 1 or a 0, calculate the current decimal value of that string so you only have to deal with one 0 or 1 at a time. + +## What’s the Pattern? +This is a table of the first fourteen binary numbers and their decimal equivalents. Your goal is to use this table to figure out how to calculate a new correct decimal value based on whether a user enters a 0, or a 1 as the next number in the string. + +``` +Binary Decimal Binary Decimal +=============================== + 1 1 1000 8 + 10 2 1001 9 + 11 3 1010 10 + 100 4 1011 11 + 101 5 1100 12 + 110 6 1101 13 + 111 7 1110 14 +``` +For example, imagine you are the micro:bit. If the first number the human enters is a 1, you automatically know the new decimal value is a 1. If the second number that is entered is a 0, then your decimal value goes from 1 to 2. However, if the second number is also a 1, then your new decimal value goes from 1 to 3. + +At that point, you either have a 10, or a 11 in your binary string. Let’s take 10 as an example. The decimal value of binary 10 is 2. If the third number entered is a 0, then your new decimal value goes from 2 to 4. If the third number entered is a 1, then your new decimal value goes from 2 to 5. + +If, on the other hand, you have 11 in your binary string, then your decimal value is 3. If the third number entered is a 0, then your new decimal value goes from 3 to 6. If the third number entered is a 1, then your new decimal value goes from 3 to 7. + +See if you can spot a pattern that will help you figure out, for any given decimal value, what the new decimal value should be if the user enters a 0, or if the user enters a 1. + +![Binary number patterns](/static/courses/csintro/binary/binary-patterns.png) + +## Pseudocode +Recall from our Algorithms lesson that it is a good idea to write out your algorithm in plain English, before you start coding in MakeCode. This is called pseudocode. The Input for this program will be the buttons. Try to write out what should happen when each of the buttons is pressed. + +Here is one possible solution. Your own pseudocode might be different and that’s okay. + +When Button A is pressed: +1. Add a “1” to the end of the binary string. +2. Show the current value of the binary string. +3. Update the decimal value with the total. + +When Button B is pressed: +1. Add a “0” to the end of the binary string. +2. Show the current value of the binary string. +3. Update the decimal value with the total. + +When Buttons A+B are pressed: +1. Show the current value of the decimal string. + +## Coding Steps +* From the Input Toolbox drawer, drag 3 of the ‘on button A pressed’ event handlers to your coding workspace +* Leave one block with button 'A’. Use the drop-down menus in the other 2 blocks to choose button ‘B’, and button ‘A+B’ + +```block +input.onButtonPressed(Button.A, () => { + +}) +input.onButtonPressed(Button.B, () => { + +}) +input.onButtonPressed(Button.AB, () => { + +}) +``` + +### ~ hint + +Buttons are on all kinds of electronic devices that we use. Did ever wonder how they actually work to signal an input event? + +https://www.youtube.com/watch?v=t_Qujjd_38o + +### ~ + +Let’s work on what to do when button A is pressed. +* Button A represents a binary “1”. Our first task is to join a “1” to the existing string variable called binary. +* From the Text Toolbox drawer (under the Advanced menu), drag the 'join' block to your programming workspace +* Next, use the 'set' variable block to assign the value of the 'binary' variable to the 'join' block +* Join the 'binary' variable and “1” by entering them into the appropriate slots in the 'join' block +* And show the binary value on the screen so that when users press a button they can see the entire binary string + +```block +let binary = "" +input.onButtonPressed(Button.A, () => { + binary = binary + "1" + basic.showString(binary) +}) +``` + +* Finally, you will need to update the current decimal value with the value of the entire binary string. This is pretty straightforward if you have been keeping track of the decimal value every time someone presses a button. The pattern is as follows: _(spoiler alert!)_ + +>* Whenever someone enters a 0, the new decimal value is twice the previous value. +>* If someone enters a 1, the new decimal value is twice the previous value, plus 1. + +* For Button A, you will need to use the multiplication Math block and your binary variable block to create the proper formula. You will need to put that formula inside another Math addition block in order to add one to the result. + +```block +let binary = "" +let decimal = 0 +input.onButtonPressed(Button.A, () => { + binary = binary + "1" + basic.showString(binary) + decimal = decimal * 2 + 1 +}) +``` + +* Your Button B algorithm is similar, although you will be joining a “0” to the binary variable and you are just multiplying the decimal variable by 2. +* Your Button A+B algorithm just uses a Show block to show the value of the decimal variable. + +Here is the completed program. + +```blocks +let binary = "" +let decimal = 0 +input.onButtonPressed(Button.A, () => { + binary = binary + "1" + basic.showString(binary) + decimal = decimal * 2 + 1 +}) +input.onButtonPressed(Button.B, () => { + binary = binary + "0" + basic.showString(binary) + decimal = decimal * 2 +}) +input.onButtonPressed(Button.AB, () => { + basic.showNumber(decimal) +}) +decimal = 0 +binary = "" +``` + +### Try it out! +Have someone else try your program out. Then think about how the program might be improved. +Here are some additional modifications you might try: +* Add a way to clear the binary and decimal values so you can start over. +* Add a way to erase the previous value. +* Create a decimal-binary converter that allows you enter a decimal value and see the binary equivalent when you press A+B. + diff --git a/docs/test/courses/csintro/binary/overview.md b/docs/test/courses/csintro/binary/overview.md new file mode 100644 index 00000000000..fef314e837e --- /dev/null +++ b/docs/test/courses/csintro/binary/overview.md @@ -0,0 +1,30 @@ +# Introduction + +Most everyone who uses a computer has heard the terms, kilobyte (kB), Megabyte (MB), Gigabyte (GB) and even Terabyte (TB), usually when referring to the size of computer files and hard drives as well as download speeds. Bandwidth or connection rates are measured in bits/second. But what is a bit and what is a byte and what do they have to do with computers? + +Picture a basic room light. The light is either on or it is off. You control the current state of the light by flipping a switch that has only two settings, down (light off) and up (light on). The earliest computers used a series of mechanical switches to control the flow of electricity through their circuits, turning each one on or off. The on/off states of the circuits was used to represent and even store information. The smallest unit of information, representing the state of one switch, is known as a bit. + +A bit is a binary digit and has only two possible values, zero or one. The value of the bit represents the current state of a single switch. If the switch is off, then the bit has the value zero. If the switch is on, then the bit has the value one. + +A bit can only represent two different values, zero or one. To represent larger pieces of information, bits are strung together in sequences of 8 called bytes. + +A byte is a sequence of binary digits made up of 8 bits. + +A byte can represent any value from 00000000 through 11111111, for a total of 256 different possible values. Each digit in a byte can be thought of as representing an individual switch that is either off (zero) or on (one). + +Modern computers rely on transistors, which pack millions of tiny switches into a chip smaller than your thumb, but information is still represented in essentially the same way: as a series of ones and zeros. By using binary, computers can represent information simply and efficiently using a system that is very effectively modeled in digital circuitry. + +## Review + +* A Bit is a binary digit with two possible values, zero or one +* A Byte is a sequence of 8 bits and has 256 possible values from 00000000 through 11111111 +* A kilobyte (kB) is 1,024 bytes or 2^10 bytes +* A Megabyte (MB) is 1,048, 576 bytes or 2^20 bytes +* A Gigabyte (GB) is 1,073,741,824 bytes or 2^30 bytes +* A Terabyte (TB) is 1,099,511,627,776 bytes or 2^40 bytes + +## Notes + +* The ones and zeros of bits and bytes can be used to represent letters, numbers, and even different keys on a computer keyboard. +* A bit can be used to hold a Boolean (true/false) value. A value of zero represents ‘false’ and a value of one represents ‘true’. + diff --git a/docs/test/courses/csintro/binary/project.md b/docs/test/courses/csintro/binary/project.md new file mode 100644 index 00000000000..47318cd244f --- /dev/null +++ b/docs/test/courses/csintro/binary/project.md @@ -0,0 +1,94 @@ +# Project: Make a binary cash register + +The unplugged activity uses a vending machine as a model for creating different combinations of binary place values. We found that for n coins, there is one and only one way to make every number between 0 and 2^_n-1_. + +For this project, students should invent a paper and cardboard version of the binary counter, then program it to display the decimal value of those numbers. + +Materials +* Cardboard or heavy paper +* Copper tape - sources: +>https://www.adafruit.com/product/1128
https://www.sparkfun.com/products/10561 +* 3 quarters or other heavy coins +* Scissors +* Duct tape + +![micro:bit cash register](/static/courses/csintro/binary/microbit-cash-register.png) +Binary micro:bit Cash Register + +## Tips +This is one possible design for a binary cash register. We used coins and copper tape on a piece of cardboard. Normally, the coins are flipped up (“off” or 0) and to indicate “on” or 1, the coin is flipped so it lays flat across both pieces of copper tape, completing the circuit so the micro:bit can detect that that pin has been activated, and calculates and displays the decimal value of the binary number that is indicated by the coins. + +Copper tape is a thin, flexible strip of copper with an adhesive back. You can sometimes find copper tape at the hardware, sold as slug tape, to keep slugs out of your garden. Usually, copper tape can conduct electricity even through the sticky side but if you are sticking one piece of copper tape to another, be sure to go over the connection with your fingernail, pressing it down firmly. + +Because the micro:bit only has three pins, this binary register is limited to three place values. Students might use variables to represent each of the three place values, or they can simply keep a running total by adding the appropriate amount when each of the three pins is pressed. + +You can stick the micro:bit into place using some sticky tape, or you can create an actual holder. The copper tape connections are delicate though, so be careful when plugging and unplugging the power cable from the board. + +![Binary cash register project](/static/courses/csintro/binary/binary-cash-register.jpg) +An implementation of the Binary Cash Register + +## Extra mods +* Write some code that will display the number in binary when you press the A button. +* Think of a way to create more place values, perhaps by using a second micro:bit and a Radio connection. + +## Optional project: Build a binary wristwatch +* Write a program that will display the correct time (once set) on the micro:bit. +* The 3-4 numbers displayed will be in binary (not decimal). +* To make the strap of the wristwatch, put 2 pieces of duct tape back-to-back, and use velcro tabs as the fasteners + +![Binary wrist watch project](/static/courses/csintro/binary/binary-wrist-watch.jpg) + +To make the strap of the wristwatch, you can put two pieces of duct tape back-to-back, and use Velcro tabs as the fasteners. + +![Holder](/static/courses/csintro/binary/microbit-holder.jpg) +This is a holder that allows the micro:bit to be worn on the wrist. + +![Wooden structure to hold the micro:bit on the wrist](/static/courses/csintro/conditionals/microbit-holder.jpg) +This design supports the micro:bit in a rigid cradle and allows more delicate connections to the pins. + +## Reflection +Have students write a reflection of about 150–300 words, addressing the following points: + +* Describe what the physical component of yur micro:bit project was (e.g., an armband, a cardboard mount, a holder, etc.) +* How well did your prototype work? What were you happy with? What would you change? +* What was something that was surprising to you about the process of creating this project? +* Describe one way in which your project differed from the example that was given. How would you recognize it as your own? + +## Assessment + +**Competency scores**: 4, 3, 2, 1 + +### Binary display + +**4 =** All binary numerals display correctly.
+**3 =** At least 2 binary numerals display correctly.
+**2 =** At least 1 binary numeral displays.
+**1 =** No binary numerals display correctly. + +### micro:bit program + +**4 =** micro:bit program:
+`*` Uses binary in a way that is integral to the program
+`*` Uses mathematical operations to convert decimal-binary
+`*` Compiles and runs as intended
+`*` Meaningful comments in code
+**3 =** micro:bit program lacks 1 of the required elements.
+**2 =** micro:bit program lacks 2 of the required elements.
+**1 =** micro:bit program lacks 3 or more of the required elements. + +### Reflection + +**4 =** Reflection piece includes addresses all prompts.
+**3 =** Reflection piece lacks 1 of the required elements.
+**2 =** Reflection piece lacks 2 of the required elements.
+**1 =** Reflection piece lacks 3 of the required elements. + +## Additional questions to ponder +* How could you use a row of flashlights to represent a number to someone else far away? +* How might you use those flashlights to send a message? + +## Resources + +[Math is fun: Binary number system](https://www.mathsisfun.com/binary-number-system.html) + + diff --git a/docs/test/courses/csintro/binary/standards.md b/docs/test/courses/csintro/binary/standards.md new file mode 100644 index 00000000000..921af7291d7 --- /dev/null +++ b/docs/test/courses/csintro/binary/standards.md @@ -0,0 +1,9 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CT.L1:3-05 Demonstrate how 0s and 1s can be used to represent information. +* CT.L1:6-03 Demonstrate how a string of bits can be used to represent alphanumeric information. +* CT.L2-14 Examine connections between elements of mathematics and computer science, including binary numbers, logic, sets and functions. +* CT.L3B-07 Discuss the interpretation of binary sequences in a variety of forms (e.g., instructions, numbers, text, sound, image). +* CPP.L1:6-06 Implement problem solutions using a block-based visual programming language. diff --git a/docs/test/courses/csintro/binary/unplugged.md b/docs/test/courses/csintro/binary/unplugged.md new file mode 100644 index 00000000000..5e9c6c4495d --- /dev/null +++ b/docs/test/courses/csintro/binary/unplugged.md @@ -0,0 +1,140 @@ +# Unplugged: Binary vending machine + +In this activity, students will explore the concept of binary numbers by experimenting with a very odd vending machine that only accepts Base-2 coins and doesn’t give change! In the process, students will become familiar with an alternate numbering system, in this case binary (Base-2). Students will learn how binary relates to decimal, and will be able to convert between the two systems. + +## Materials +* Paper +* Pencil +* Set of ‘coins’ - these could be checkers/chess pieces, cardboard rounds, or even post-it notes +* Vending machine visual (optional) + +## Pre-activity preparation +Gather or create small counters or ‘coins’ in the following denominations: 1, 2, 4, 8, 16, 32 +Plastic white poker chips work well as coins. You can write the denominations onto one side of the coins with a whiteboard marker. You can also use small index cards or paper squares. Make sure to leave one side of each coin blank. + +Amount: One set of coins (with one coin of each of the first four denominations in it) for each student or each pair of students. + +Hold onto the 16 and 32 unit coins for later. + +### ~hint +**Tip** + +If you have time, create on a poster board, on the whiteboard, or on paper as a handout, a big rectangle representing a vending machine. Draw in different items for purchase that would appeal to the students. Have the different items priced differently from 1 unit to 15 units. This is particularly good to have for younger and more visually oriented students. + +You can also just make a very simple vending machine diagram like the one below: + +![Vend-o-matic diagram](/static/courses/csintro/binary/vendomatic.png) +### ~ +## Introduction +Ask the students the following questions to spark discussion: +* Have any of them bought anything in the last 24 hours? _Usually they have bought a snack or perhaps lunch._ +* Did any of them use cash? +* What bills or coins did they use? +* What are the core denominations of money in the United States? + +Lead the students to realize that our core monetary denominations, like our number system are based on ten. +* 1 penny +* 1 dime = 10 pennies +* 1 one dollar bill = 10 dimes (or 100 pennies) +* 1 ten dollar bill = 10 one dollar bills +* 1 hundred dollar bill = 10 ten dollar bills + +Our money system is based on our number system, the decimal system. The _deci-_ prefix means ‘one tenth’. Each place value in the decimal is one tenth of the place value to its left. + +**Example:** The amount eleven is written in decimal notation as 11. +There is a numeral one in the ‘tens place’ and a numeral one in the ‘ones place’. +The leftmost numeral one in the ‘tens place’ represents one ten. +The next numeral one represents an amount that is one tenth the amount of the place value to its left; in this case, one tenth of ten, or one. + +But what is it like to use a different monetary system? A monetary system that has a base other than ten? + +## Process +* Give a set of the coins you prepared earlier to each student or pair of students +* Remember to hold onto the 16-unit and 32-unit coins for now +* Present the following scenario: + +>* There is a vending machine that sells items of all prices +* However, the machine cannot give change +* Therefore, you must pay for everything in exact amounts +* You have one of each coin: 1, 2, 4, 8. + +**Questions** + +* What is the price of the least expensive item you can buy? (1 unit) +* What is the price of the most expensive item you can buy? (15 units) +* What else can you buy? What coin(s) would you use to do this? +* What is the price of something you cannot buy, because you don’t have exact change? + +Here is where students will start to figure out the different combined sums of different coins. +You can also prompt them by saying, for example, “It’s impossible to buy something that costs 11 units, isn’t it?” Someone will immediately point out that you CAN buy an 11-unit item with 8 + 2 + 1. + +You can now have the students write down how they could pay, what coin(s) could they use to purchase each of the items priced 1 unit through 15 units with the coins they have OR have a whole class discussion with you keeping track of their methods of payment on the whiteboard. + +There will soon be a general agreement among the students that: +* You can make every amount between 1 unit and 15 units with the 4 coins in their set +* There is only one way to make each of those amounts. + +Have students line up the coins in their set from greatest to least denomination, left to right. + +**Questions** + +* What do you notice about the denominations as they increase from right to left? _Each amount is double (or times 2 or twice) the denomination before it (to its right)._ +* If we added one more coin to your set of coins that is greater than the 8 unit coin, what is the next logical coin denomination? 16. Why? _Because 16 is ‘2 times’ greater than 8._ + +Hand out the 16 unit coins, one to each student or pair of students. + +**Questions** + +* What is the new maximum price you could pay for an item? _31_ +* What combinations of coins can you use to pay for an item priced from 16 units to this new maximum price? + +Once again, you can now have the students write down how they could pay, what coin(s) could they use to purchase each of the items priced 16 units through the new maximum price with the coins they have, OR have a whole class discussion with you keeping track of their methods of payment on the whiteboard. + +Again, there will soon be a general agreement among the students that: +* You can make every amount between 16 units and the new maximum with the 5 coins now in their set. +* There is only one way to make each of those amounts. + +**Questions** + +* If we added one more coin to your set of coins that is greater than the 16 unit coin, what is the next logical coin denomination? 32. Why? _Because 32 is ‘2 times’ greater than 16. _ + +Hand out the 32 unit coins, one to each student or pair of students. + +**Questions** + +* What is the new maximum price you could pay for an item? _63_ +* What combinations of coins can you use to pay for an item priced from 32 units to this new maximum price? + +![Coins representing binary digits](/static/courses/csintro/binary/binary-place-values.png) +From coins to binary notation - the number 45 + +Once students are comfortable making combinations of numbers, encourage them to use ones and zeroes to represent the numbers instead. This number system uses the number 2 as its base (each place is two times the one before it.) It is called the Base-2 system, or binary system. The number system we are normally familiar with is the Base-10 system, or decimal system (each place is ten times the one before it.) + +With their coins in a line in descending order from right to left on a piece of paper, ask students to represent a given number by keeping face up the coins they would use to make this amount and flipping over or putting face down the coins not used. + +**Example:** Ask them to represent the number 45. _See image above._ + +They should have the 32, 8, 4, and 1 coins face up and the 16 and 2 coins face down. +Ask the students to place a numeral 1 above the coins that are face up and a numeral zero over the coins that are face down. + +The ones and zeros they just drew are the binary number version of the amount represented by the flipped-up coins. For the example: 45 in Base-10 = 101101 in Base-2 + +Practice translating numbers from Base-10 to Base-2 +The students can now use this same method to translate other numbers from Base-10 to Base-2. + +**Examples:** +>22 (_1 0 1 1 0_ )
+37 (_1 0 0 1 0 1_ ) + +Practice translating numbers from Base-2 to Base-10 +Next, have the students use the above method in reverse to translate numbers from Base-2 to Base-10. +* Start with all the coins face up in a line from greatest to least denomination from left to right. +* Write the ones and zeros representing the binary number being translated above the coins. +* Flip to face down any coin with a zero above it. +* Add up the remaining face up coins. + +**Examples:** +>0 1 0 1 0 (_10_ )
+1 1 0 1 1 0 (_54_ ) + + diff --git a/docs/test/courses/csintro/booleans.md b/docs/test/courses/csintro/booleans.md new file mode 100644 index 00000000000..926da8e4e26 --- /dev/null +++ b/docs/test/courses/csintro/booleans.md @@ -0,0 +1,35 @@ +# Booleans + +![micro:bit Combo Box](/static/courses/csintro/booleans/cover.jpeg) + +This lesson introduces the use of the boolean data type to control the flow of a program, keep track of state, and to include or exclude certain conditions. + +## Lesson objectives +Students will... +* Understand what booleans and boolean operators are, and why and when to use them in a program. +* Learn how to create a boolean, set the boolean to an initial value, and change the value of the boolean within a micro:bit program. +* Learn how to use the random true or false block. +* Apply the above knowledge and skills to create a unique program that uses booleans and boolean operators as an integral part of the program. +  +## Lesson structure +* Introduction: Booleans in daily life +* Unplugged Activity: Two Heads are Better Than One +* micro:bit Activity: Double Coin Flipper +* Project: Boolean +* Assessment: Rubric +* Standards: Listed + +## Lesson plan + +1. [**Overview**: Booleans](/test/courses/csintro/booleans/overview) +2. [**Unplugged**: Two heads are better than one](/test/courses/csintro/booleans/unplugged) +3. [**Activity**: Double coin flipper](/test/courses/csintro/booleans/activity) +4. [**Project**: Boolean](/test/courses/csintro/booleans/project) + +## Flipgrid + +The [Flipgrid](https://info.flipgrid.com/) topic for the **Booleans** lesson: https://flipgrid.com/36e0c7e0 + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/booleans/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/booleans/activity.md b/docs/test/courses/csintro/booleans/activity.md new file mode 100644 index 00000000000..80ba000a082 --- /dev/null +++ b/docs/test/courses/csintro/booleans/activity.md @@ -0,0 +1,205 @@ +# Activity: Double coin flipper + +![Example Board](/static/courses/csintro/booleans/fuzzies.jpg) + +Guide the students to create a program using Boolean variables and operators. +We’ll use our pseudocode from the previous activity to code a double coin flipper program. +  +For the first step, let’s create our variables. +Make a variable for each of the following: +* `CoinAHeads` +* `CoinBHeads` +* `PlayerAScore` +* `PlayerBScore` +  +Now we need to initialize the variable values. +Put a 'set' variable block for each of these 4 variables inside the 'on start' block. +  +The initial value of a variable is the value the variable will hold each time the program starts. +By default: +* a string variable is initialized to an empty string `""` +* a number variable is initialized to `0` +* a Boolean is initialized to `false` +  +Initialize the number variables to zero and the Boolean variables to `false`. +  +You can find the false blocks under the Logic menu. + +![Logic menu](/static/courses/csintro/booleans/logic-menu.png) + +```blocks +let CoinAHeads = false +let CoinBHeads = false +let PlayerAScore = 0 +let PlayerBScore = 0 +basic.showLeds(` + . # . . . + # # # . . + . # . # . + . . # # # + . . . # . +`) +``` + +Notice that we also added an image for the start screen, so the user knows the program has started and is ready. Does the image look like two coins? +  +## Random coin flips + +When the player shakes the micro:bit, we will code the micro:bit to give each of our Boolean variables a random true/false value. +  +* From the Input Toolbox drawer, drag an 'on shake' block to the coding workspace +* From the Variables Toolbox drawer, drag 2 'set' variable blocks to the coding workspace +* Drag the 2 'set' blocks into the 'on shake' block +* Change the default `item` to `CoinAHeads` and `CoinBHeads` +* From the Math Toolbox drawer, drag 2 'pick random true or false' blocks to the coding workspace +* Hover over this 'pick random' block and note that its pop-up description mentions coin flipping! +  +![Pick Math random boolean](/static/courses/csintro/booleans/math-random-boolean.png) + +* Attach these 'pick random' blocks to the 'set' variable blocks in the 'on shake' block + +```blocks +let CoinBHeads = false +let CoinAHeads = false +input.onGesture(Gesture.Shake, () => { + CoinAHeads = Math.randomBoolean() + CoinBHeads = Math.randomBoolean() +}) +``` + +Now that the virtual CoinA and CoinB have been virtually flipped, we need to compare the outcomes to see if they are the same or different. +  +* From the Logic Toolbox drawer, drag an 'if...then...else' block to the coding workspace +* Drag the 'if...then...else' block into the 'on shake' block under the 'set' variable blocks + +```blocks +let CoinBHeads = false +let CoinAHeads = false +input.onGesture(Gesture.Shake, () => { + CoinAHeads = Math.randomBoolean() + CoinBHeads = Math.randomBoolean() + if (true) { + + } else { + + } +}) +``` + +Now our logic block is ready for the next steps of our pseudocode. +1. Compare the current values of Coin A and Coin B. +2. If the current true/false values of Coin A and Coin B are the same, add a point to Player A’s score. +3. Otherwise, if the current true/false values of Coin A and Coin B are different, add a point to Player B’s score. +  +Because we were able to visualize our blocks as we wrote our pseudocode, we already know what blocks we will use and also know that we have simplified our code as much as possible! +  +* We can now simply add this to our current code +* And provide user feedback by adding some visuals + +```blocks +let PlayerBScore = 0 +let PlayerAScore = 0 +let CoinBHeads = false +let CoinAHeads = false +input.onGesture(Gesture.Shake, () => { + CoinAHeads = Math.randomBoolean() + CoinBHeads = Math.randomBoolean() + if (CoinAHeads == CoinBHeads) { + basic.showLeds(` + . . # . . + . # . # . + . # # # . + . # . # . + . # . # . + `) + basic.pause(100) + PlayerAScore += 1 + } else { + basic.showLeds(` + . # # . . + . # . # . + . # # . . + . # . # . + . # # . . + `) + basic.pause(100) + PlayerBScore += 1 + } + basic.showLeds(` + . # . . . + # # # . . + . # . # . + . . # # # + . . . # . + `) +}) +``` + +To finish our program, we’ll display the players’ current scores on button A pressed. + +Here is the complete program for our Double Coin Flipper. + +```blocks +let PlayerBScore = 0 +let PlayerAScore = 0 +let CoinBHeads = false +let CoinAHeads = false +input.onButtonPressed(Button.A, () => { + basic.showString("A:" + PlayerAScore) + basic.pause(100) + basic.showString("B:" + PlayerAScore) +}) +input.onGesture(Gesture.Shake, () => { + CoinAHeads = Math.randomBoolean() + CoinBHeads = Math.randomBoolean() + if (CoinAHeads == CoinBHeads) { + basic.showLeds(` + . . # . . + . # . # . + . # # # . + . # . # . + . # . # . + `) + basic.pause(100) + PlayerAScore += 1 + } else { + basic.showLeds(` + . # # . . + . # . # . + . # # . . + . # . # . + . # # . . + `) + basic.pause(100) + PlayerBScore += 1 + } + basic.showLeds(` + . # . . . + # # # . . + . # . # . + . . # # # + . . . # . + `) +}) +```  + +Try it out! +Have the students play a few more rounds of the Double Coin Flip using their new micro:bit Double Coin Flipper! +  +## Boolean operator NOT in a Loop + +```block +input.onGesture(Gesture.Shake, () => { + while (!(input.buttonIsPressed(Button.A))) { + for (let i = 0; i < 2; i++) { + music.playTone(262, music.beat(BeatFraction.Half)) + music.playTone(523, music.beat(BeatFraction.Half)) + } + } +}) +``` + +Do you remember this code from our micro:bit Alarm? +Can you read this code and tell what it does? + +_If the micro:bit is shaken, the micro:bit will play two tones twice and keep repeating this action until button A is pressed. So, after shaking, as long as ‘is button A pressed?’ is false, the two tone alarm will continue to repeat._ diff --git a/docs/test/courses/csintro/booleans/overview.md b/docs/test/courses/csintro/booleans/overview.md new file mode 100644 index 00000000000..2ad4b95869a --- /dev/null +++ b/docs/test/courses/csintro/booleans/overview.md @@ -0,0 +1,73 @@ +# Introduction + +There are several different data types used in computer programming. We have already used two of these types: +* [String](/types/string) (for text) +* [Integer](/types/number) (for numbers) + +Boolean is another type of data. A boolean data type has only two values: true or false. +In true binary fashion, these two values can be represented by the numbers 1 = true, and 0 = false. +  +Booleans are useful in programming for decision-making, often deciding when certain functions and parts of programs should start or stop running and are also used in database searches. +  +Ask the students to think of things in daily life that have only two values or states. The status is always one value or the other value. +  +Examples of Booleans in daily life +* Lights: On or Off +* Time: AM or PM +* You!: Asleep or Awake +* Weather: Raining or Not Raining +* Math: Equal to or Not Equal to +* Game: Truth or Dare +* Soda: Coke or Pepsi +* At the store: Paper or Plastic? Cash or Credit? Chip or Swipe? +  +Note: +Arguments can be made that some of these can have more than two values. +For example: At the store, you may have brought your own reusable bags or pay by check. + +Let the students discuss these to help them hone in on which examples best represent Booleans. + +A student might argue that a dimmer switch on a light or the brightness value on the micro:bit LEDs allow the lights to be in a state between on and off. One could respond that you can classify ‘on’ as the state where any electricity at all is running through the bulb (on) versus no electricity at all (off). +  +In programming, if you have worked with conditionals or loops, you have already worked with this type of logic: +* If a certain condition is true, do this, otherwise (if condition is false), do something else. +* While a certain condition is true, do this +  +Boolean Operators: AND, OR, and NOT +To make working with Booleans useful for solving more complex decisions and searches, we can connect two or more Booleans into one decision statement. To do this, we use what are known as Boolean operators. The three most common and the ones we will use with the micro:bit are And, Or, and Not. + +These operators can be used in conditionals and loops, like so: +* If condition A is true AND condition B is true +* If condition A is true OR condition B is true +* While event A has NOT happened +  +Let’s look at how each of these work. + +## AND +(Condition A AND Condition B) +For this expression to evaluate as true, both conditions in the expression need to be true. +So, if both Condition A AND Condition B are true, the expression will evaluate as or return true. +  +## OR +(Condition A OR Condition B) +For this expression to evaluate as true, only one of the conditions in the expression needs to be true. +If Condition A is true, the expression will return true regardless of whether Condition B is true or false. +If Condition B is true, the expression will return true regardless of whether Condition A is true or false. +  +## NOT +NOT can be used when checking that a condition is false (or not true). +For example: +* (NOT Condition A and Condition B) evaluates as true only if Condition A is false and Condition B is true. +* (Condition A and NOT Condition B) evaluates as true only if Condition A is true and Condition B is false. +* (NOT Condition A and NOT Condition B) evaluates as true only if both Condition A and Condition B are true. +NOT is also useful when using a loop. For example, you can use a NOT to check   +While button A is NOT pressed, continue to run this code… +  +Note: ‘False’ can be thought of as equivalent to ‘NOT true’. + +## Sidebar material +![George Boole](/static/courses/csintro/booleans/george-boole.jpg) +Image credit: Wikimedia Commons + +George Boole (2 November 1815 – 8 December 1864) was an English mathematician, educator, philosopher and **logician**. He worked in the fields of differential equations and algebraic **logic**, and is best known as the author of The Laws of Thought (1854) which contains **Boolean** algebra. + diff --git a/docs/test/courses/csintro/booleans/project.md b/docs/test/courses/csintro/booleans/project.md new file mode 100644 index 00000000000..d3e51a8698f --- /dev/null +++ b/docs/test/courses/csintro/booleans/project.md @@ -0,0 +1,356 @@ +# Project: Boolean + +![Two-Player Game Example Board](/static/courses/csintro/booleans/two-player.jpg) + +This is an assignment for students to come up with a micro:bit program that uses Boolean variables, Boolean operators, and possibly the random function. +  +## Input +Remind the students of all the different inputs available to them through the micro:bit. + +![micro:bit input list](/static/courses/csintro/variables/input-list.png) +  +## Project Ideas + +### Sunscreen Monitor + +When you shake the micro:bit, it reports the current temperature in degrees Fahrenheit. Button B measures the light level and if it is above 70 degrees AND very bright, it will display a sun icon. If it is above 70 degrees and less bright, it will display a cloudy symbol. If it is dark, it will display a nighttime icon. + +[**micro:bit Sunscreen Monitor**](https://youtu.be/VmD-dcZZQFc) +https://youtu.be/VmD-dcZZQFc + +#### Sunscreen code + +```blocks +input.onButtonPressed(Button.B, () => { + if (128 > input.lightLevel() && 0 < input.lightLevel() && input.temperature() > 22) { + basic.showLeds(` + . # . # . + # . . . # + . . . . . + . . . . . + . . . . . + `) +basic.showLeds(` + . # # # . + # . . . # + . . . . . + . . . . . + . . . . . + `) +basic.showLeds(` + . # # # . + # . . . # + . # . # . + . . . . . + . . . . . + `) +basic.showLeds(` + . # # # . + # . . . # + . # # # . + . . . . . + . . . . . + `) +basic.showLeds(` + . . . . . + . # . # . + . . . . . + . # # # . + # . . . # + `) + } else { + basic.showLeds(` + # . . . . + . . . . . + . . . . . + . . . . . + . . . . . + `) +basic.showLeds(` + . # . . . + # # . . . + . . . . . + . . . . . + . . . . . + `) +basic.showLeds(` + . . # . . + . . # . . + # # # . . + . . . . . + . . . . . + `) +basic.showLeds(` + . . # # . + . . # . . + # # # . . + # . . # . + . . . . . + `) +basic.showLeds(` + . . # # # + . . # . . + # # # . . + # . . # . + # . . . # + `) +basic.showLeds(` + . . . . . + . # . # . + . . . . . + # . . . # + . # # # . + `) + } +}) +input.onButtonPressed(Button.A, () => { + if (input.temperature() < 22 && input.temperature() > 6) { + basic.showLeds(` + . . . . . + . . . . . + . . # . . + . . . . . + . . . . . + `) +basic.showLeds(` + . . . . . + . . # . . + . # # # . + . . # . . + . . . . . + `) +basic.showLeds(` + . . . . . + . . . . . + . . . . . + . . . . . + . . . . . + `) +basic.showLeds(` + # # # # # + # # # # # + # # # # # + # # # # # + # # # # # + `) + } else { + basic.showLeds(` + . . . . . + . . . . . + . . # . . + . . . . . + . . . . . + `) +basic.showLeds(` + . . . . . + . . . . . + . # # # . + . . . . . + . . . . . + `) +basic.showLeds(` + . . . . . + . . . . . + . . . . . + . . . . . + . . . . . + `) +basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } +}) +input.onGesture(Gesture.Shake, () => { + basic.clearScreen() + basic.showNumber(input.temperature() * 2 + 32) +}) +``` + +Button A displays an animation to tell you whether or not you should use sunscreen (on sunny or cloudy days but not at night or indoors.) + +Make a holder that can hold the micro:bit and a bottle of sunscreen. + +This example uses boolean operations because both light level AND temperature must be high in order to trigger the sun icon: + +```block +if (128 > input.lightLevel() && 0 < input.lightLevel() && input.temperature() > 22) {} +``` +### ~ hint + +The @boardname@ uses some clever tricks to measure both light and temperature. Want to see how it can measure the light level and temprature? Watch these videos to learn how it does it. + +https://www.youtube.com/watch?v=TKhCr-dQMBY +
+https://www.youtube.com/watch?v=_T4N8O9xsMA + +### ~ + +### Two-player game + +Create a game in which two players take turns on the same micro:bit. You can use a boolean variable called PlayerATurn to keep track of whose turn it is. + +**Board Game:** Use boolean variables and random values as part of a board game (or improve your Board Game from the Variables lesson). Make the board and pieces and a holder for the micro:bit. Try modding a current board game. + +![Two player game project](/static/courses/csintro/booleans/two-player-game.png) +Board Game with Arrows + +#### Board game arrow code + +```blocks +let player1Turn = false +let spin = 0 +let delay = 0 +input.onGesture(Gesture.Shake, () => { + if (player1Turn == true && randint(0, 4) < 3) { + basic.clearScreen() + delay = 0 + while (delay < 500) { + basic.showLeds(` + . . # . . + . # # . . + # # # # . + . # # . . + . . # . . + `) + delay += 50 + basic.pause(delay) + basic.showLeds(` + . . # . . + . # # # . + # # # # # + . . # . . + . . . . . + `) + delay += 50 + basic.pause(delay) + basic.showLeds(` + . . # . . + . . # # . + . # # # # + . . # # . + . . # . . + `) + delay += 50 + basic.pause(delay) + basic.showLeds(` + . . . . . + . . # . . + # # # # # + . # # # . + . . # . . + `) + basic.pause(delay) + delay += 50 + player1Turn = false + } + } else if (player1Turn) { + basic.showString("Crash!") + player1Turn = false + } else if (randint(0, 4) < 3) { + basic.clearScreen() + delay = 0 + while (delay < 500) { + basic.showLeds(` + . . # . . + . # # . # + # # # # # + . # # . # + . . # . . + `) + delay += 50 + basic.pause(delay) + basic.showLeds(` + . . # . . + . # # # . + # # # # # + . . # . . + . # # # . + `) + delay += 50 + basic.pause(delay) + basic.showLeds(` + . . # . . + # . # # . + # # # # # + # . # # . + . . # . . + `) + delay += 50 + basic.pause(delay) + basic.showLeds(` + . # # # . + . . # . . + # # # # # + . # # # . + . . # . . + `) + basic.pause(delay) + delay += 50 + player1Turn = true + } + } else { + basic.showString("Crash!") + player1Turn = true + } +}) +basic.forever(() => { + +}) +delay = 0 +spin = 0 +player1Turn = true +``` + + +This is an example of a board game in which the micro:bit displays an arrow pointing in a random direction. The paper legend indicates different actions the player must take.  + + +Here is a portion of the board game's code. A boolean variable is used to determine whose turn it is. If player1Turn is false, then it's player 2's turn. A random number is generated to show the arrow seventy-five percent of the time (for values of 0, 1, or 2). + +```blocks +let player1Turn = false; +input.onGesture(Gesture.Shake, () => { + if (player1Turn == true && randint(0, 4) < 3) { + + } +}) +``` +## Reflection + +Have students write a reflection of about 150–300 words, addressing the following points: +* How did you incorporate boolean variables into your micro:bit program? +* How did you incorporate boolean operators into your micro:bit program? +* Describe something in your project that you are proud of. +* If you had more time to work on this project, describe what you might add or change. + +## Assessment +  +**Competency scores**: 4, 3, 2, 1 +  +### Boolean + +**4 =** More than 2 Boolean variables are implemented in a meaningful way.
+**3 =** At least 2 Boolean variables are implemented in a meaningful way.
+**2 =** At least 1 Boolean variable is implemented in a meaningful way.
+**1 =** No Boolean variables are implemented. +   +### micro:bit program + +**4 =** micro:bit program:
+`*` Uses Booleans in a way that is integral to the program.
+`*` Compiles and runs as intended
+`*` Meaningful comments in code
+**3 =** micro:bit program lacks 1 of the required element.
+**2 =** micro:bit program lacks 2 of the required elements.
+**1 =** micro:bit program lacks all of the required elements. + +### Collaboration reflection + +**4 =** Reflection piece addresses all prompts.
+**3 =** Reflection piece lacks 1 of the required elements.
+**2 =** Reflection piece lacks 2 of the required elements.
+**1 =** Reflection piece lacks 3 of the required elements. diff --git a/docs/test/courses/csintro/booleans/standards.md b/docs/test/courses/csintro/booleans/standards.md new file mode 100644 index 00000000000..804627ad9c2 --- /dev/null +++ b/docs/test/courses/csintro/booleans/standards.md @@ -0,0 +1,10 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities +* CT.L1:6-01 Understand and use the basic steps in algorithmic problem-solving +* CT.L1:6-02 Develop a simple understanding of an algorithm using computer-free exercises +* CPP.L1:6-05 Construct a program as a set of step-by-step instructions to be acted out +* 2-A-5-7 Create variables that represent different types of data and manipulate their values. + diff --git a/docs/test/courses/csintro/booleans/unplugged.md b/docs/test/courses/csintro/booleans/unplugged.md new file mode 100644 index 00000000000..a75c86a1ca2 --- /dev/null +++ b/docs/test/courses/csintro/booleans/unplugged.md @@ -0,0 +1,187 @@ +# Unplugged: Two heads are better than one + +Materials: A penny for each student, paper and pencils + +Most students have used a penny to decide something. Ask for some examples. +Who goes first in a game, to break a tie, to decide which activity to do... + +A simple penny is the most common binary decision making tool ever! +When you flip a coin to decide something there are only two possible outcomes, heads or tails. +When you flip a coin the outcome is random. + + +What’s a common issue with coin tosses? Students may bring up issues of trust and fairness. Who gets to flip the coin? Who gets to ‘call’ it? What if it’s a ‘faulty’ coin? + +Here’s a solution... The double coin toss. + +![Two pennies showing heads and tails](/static/courses/csintro/booleans/pennies.png) + +In a double coin toss, both people have a coin and they flip the coins at the same time. + +Working in pairs, have the students make a table or list of the possible outcomes if each student flipped a coin at the same time. + +Example: + +``` + Coin A Coin B + ============== + Heads Heads + Heads Tails + Tails Heads + Tails Tails +``` + +There are 4 possible outcomes. + +* For 2 outcomes, the result is the same for both coins, both heads or both tails. +* For the other 2 outcomes, the result for each coin is different, heads/tails and tails/heads. + +So, if 2 coins are flipped, the chance that the outcomes will be the same (HH/TT) is equal to the chance that the outcomes will be different (HT/TH). Both outcomes, coins the same/coins are different have a 2 in 4 or 50% chance of occurring. + +Therefore, if Person A wins each time the outcomes are the same and Person B wins each time the outcomes are different, both have an equal chance of winning each double coin flip. With this system, no one person’s outcome, heads or tails, guarantees a win. If Person A’s coin flips to heads, she would win if Person B also flipped heads, but lose if Person B flipped tails. Students will usually see that this is a fair system. + +Let the students experiment with this. Have students flip their coins together, keeping track of the outcomes, perhaps by adding another column to their table. + +Example: + +``` + Coin A Coin B Totals + ======================== + Heads Heads + Heads Tails + Tails Heads + Tails Tails +``` + +Just for fun, have them play to a certain total number of rounds. + +So, what does this have to do Boolean variables and operators? Think about how you would code a program a double coin flipper. How would you represent each of the 4 different possible double coin flip outcomes? + +Let’s pseudocode it! + +We can create a Boolean variable to represent whether an outcome is heads or tails. We can make: + +* Heads = True +* Tails = False + +Note: Tails = False can also be thought of as Tails = not true. + +Have the students copy their Heads/Tails table of possible outcomes, but label the columns "Coin A Heads" and "Coin B Heads" and replace each entry of ‘Heads’ with ‘True’ and ‘Tails’ with ‘False’. In the study of logic, this is known as a truth table. + +We’ll use it to help us pseudocode our program, by adding a third column describing the results of each outcome. + +``` + Coin A Coin B Results + Heads Heads + ================================================================================== + True True If Coin A is true AND Coin B is true, add one to Player A score + True False If Coin A is true AND Coin B is false, add one to Player B score + False True If Coin A is false AND Coin B is true, add one to Player B score + False False If Coin A is false AND Coin B is false, add one to Player A score +``` + +Can we make this code more efficient? Can we combine any of these lines? Try using an OR to combine both conditions in which Player A scores a point. Do the same for both conditions in which Player B scores a point. + +Give the students a chance to work this out on their own. + +Combining the conditions in which each player wins, gives us: + +* If (Coin A is true AND Coin B is true) OR (Coin A is false AND Coin B is false), add one to Player A score. +* If (Coin A is true AND Coin B is false) OR (Coin A is false AND Coin B is true), add one to Player B score. + +Note: Just as you do for math expressions with multiple operators, use parentheses to make it clear how the conditions and statements are grouped together. + +The students are by now familiar with the MakeCode blocks. As they think through their algorithms, they may even have started to visualize the blocks they might use. Visualizing the blocks as they pseudocode can help them with the logical steps of their program. It can also help them to visualize and recognize the big picture of their code as well as the details. + +Using blocks to start coding these two conditionals as currently written, might look like this: + +```block +let CoinAHeads = false +let CoinBHeads = false +if ((CoinAHeads && CoinBHeads) || (!CoinAHeads && !CoinBHeads)) {} +``` + +Then add one to Player A score. + +```block +let CoinAHeads = false +let CoinBHeads = false +if ((CoinAHeads && !CoinBHeads) || (!CoinAHeads && CoinBHeads)) {} +``` + +Then add one to Player B score. + +Though this code will work as we want it to, it’s a lot of code. It is good practice to keep your code as simply as possible. Let’s see how we can do just that. + +## Booleans and simplifying code + +A boolean can have only one of two values: True or False. Conditionals like 'if...then' check whether a condition is true. Notice that the default condition for the 'if...then' blocks is true. In other words, the 'if...then' blocks will check to see whether whatever condition you place there is true. + +```block +basic.forever(() => { if (true) { } }) +``` + +So now we have: + +```block +let CoinAHeads = false +let CoinBHeads = false +basic.forever(() => { + if ((CoinAHeads && CoinBHeads) || (!CoinAHeads && !CoinBHeads)) {} + if ((CoinAHeads && !CoinBHeads) || (!CoinAHeads && CoinBHeads)) {} +}) +``` + +Can we simplify it even more? For this particular program, since we are checking to see if the conditions `CoinAHeads` and `CoinBHeads` are the same, whether both true or both false, we can use a logic equals block to simplify our code to: + +```block +let CoinAHeads = false +let CoinBHeads = false +if (CoinAHeads == CoinBHeads) {} +``` + +Then add one to Player A score. + +What about our other big block of code for the conditions for a Player B win? We could simplify that to: + +```block +let CoinAHeads = false +let CoinBHeads = false +if (CoinAHeads != CoinBHeads) {} +``` + +Then add one to Player B score. + +We don’t need to do this! Since the only other option to being equal is to be not equal, we can simply do this: + +```block +let CoinAHeads = false +let CoinBHeads = false +let PlayerAScore = 0 +let PlayerBScore = 0 + +basic.forever(() => { + if (CoinAHeads != CoinBHeads) { + PlayerAScore += 1 + } else { + PlayerBScore += 1 + } +}) +``` + +## Random functions + +We use a coin flip to decide things because the result is random, meaning the result happens without any conscious decision or direction. We use dice and game spinners for the same reason. The results are not predetermined or directed in any way. + +So, how do we get a random flip in code? Most computer programming languages have a built in function that will select a random number given a range of values. Microsoft MakeCode has a block for this. And it also has a block for getting a random true or false value. + +We will call on this built in function to get a random true or false value for each flip of a coin in the next [activity](/test/courses/csintro/booleans/activity). + +Our basic pseudocode for our 'double coin flipper' could look like this: + +1. Use the random function to get a true/false value for Coin A. +2. Use the random function to get a true/false value for Coin A. +3. Compare the current values of Coin A and Coin B. +4. If the current true/false values of Coin A and Coin B are the same, add a point to Player A’s score. +5. Otherwise, the current true/false values of Coin A and Coin B must be different, so add a point to Player B’s score. +6. When players are done with their double coin flipping, show the final scores for each player. diff --git a/docs/test/courses/csintro/conditionals.md b/docs/test/courses/csintro/conditionals.md new file mode 100644 index 00000000000..35638e88af6 --- /dev/null +++ b/docs/test/courses/csintro/conditionals.md @@ -0,0 +1,23 @@ +# Conditional statements + +![Board game example](/static/courses/csintro/conditionals/cover.jpg) + +This unit introduces the Logic blocks, such as ‘If…then’ and ‘If…then…else’. You will learn what **conditional** statements are, and why and when to use them in a program, practicing skills of creativity, problem solving, and collaboration in the process. You will code a game of “Rock, paper, scissors” with the micro:bit via the programmable buttons and the LED screen. In the final project, you'll be designing, building, and coding your own unique micro:bit-based board game using conditionals. + +## Lesson objectives +You will... + +* Understand what conditional statements are, and why and when to use them in a program. +* Learn how to use the Logic blocks 'If...then' and 'If…then...else'. +* Practice using the Logic blocks so different conditions yield specified outcomes. +* Demonstrate understanding and apply skill by creating a game that uses a micro:bit and a program that correctly and effectively uses conditionals. + +## Lesson plan + +1. [**Overview**: Conditional statements](/test/courses/csintro/conditionals/overview) +2. [**Activity**: Rock, paper, scissors](/test/courses/csintro/conditionals/activity) +3. [**Project**: Board game](/test/courses/csintro/conditionals/project) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/conditionals/standards) diff --git a/docs/test/courses/csintro/conditionals/activity.md b/docs/test/courses/csintro/conditionals/activity.md new file mode 100644 index 00000000000..58144091311 --- /dev/null +++ b/docs/test/courses/csintro/conditionals/activity.md @@ -0,0 +1,70 @@ +# Activity: Rock, paper, scissors + +In this micro:bit activity, you will create a *Rock, Paper, Scissor* game program with conditionals. In *Unit 3: Variables*, you coded your micro:bit to keep score, and in this unit you will code to play *Rock, Paper, Scissors* with the micro:bit. + +![Rock, paper, scissors](/static/courses/csintro/conditionals/rock-paper-scissors-items.png) + +## Introduction + +Let's come up with some pseudocode to describe the behavior of the classic *Rock, Paper, Scissors* game. Your code might look something like this: + +>Example pseudocode:
+On shake: choose random number from 0-2 +IF random number = 0, THEN display rock icon, +ELSE if random number = 1, THEN display paper icon, +ELSE display scissors icon. + +Because there are only three possibilities, we don’t need to do a separate check to see if random number = 2. So, we just use ELSE. + +## micro:bit + +You should now have the information you need in order to begin coding a Rock, Paper, Scissors game on your own. If you get stuck, or if you would prefer to work along with a tutorial, you can find one here: [rock, paper, scissors](/projects/rock-paper-scissors) (steps 1 through 4) + +Once you've finished, play a few games against your program! + +The solution code can be found here: [makecode.microbit.org/_D2DCDoJbEYat]() + +## Ideas for Mods + +* Add a way to keep score: Steps 5 through 7 in the tutorial +* Mod the game to use different images or to add more options like ‘Rock Paper Scissors Lizard Spock’, Step 8 in the tutorial + +Here's an example mod: + +```blocks +let hand = 0 +input.onGesture(Gesture.Shake, () => { + hand = randint(0, 3) + if (hand == 0) { + basic.showLeds(` + # # # # # + # . . . # + # . . . # + # . . . # + # # # # # + `) + } else if (hand == 1) { + basic.showLeds(` + . . . . . + . # # # . + . # # # . + . # # # . + . . . . . + `) + } else { + basic.showLeds(` + # # . . # + # # . # . + . . # . . + # # . # . + # # . . # + `) + } +}) +input.onButtonPressed(Button.A, () => { + game.addScore(1) + basic.pause(100) + basic.showString("Wins:") + basic.showNumber(game.score()) +}) +``` diff --git a/docs/test/courses/csintro/conditionals/overview.md b/docs/test/courses/csintro/conditionals/overview.md new file mode 100644 index 00000000000..0cead80ccc0 --- /dev/null +++ b/docs/test/courses/csintro/conditionals/overview.md @@ -0,0 +1,29 @@ +# Introduction + +Computer programs are instructions telling the computer how to process input and deliver output. An important part of programming is telling the computer WHEN to perform a certain task. For this, we use something called **conditionals**. Conditionals get their name because a certain condition or rule must be met in order for an action to be carried out. + +Fortunately, people use conditionals all the time in their daily lives! + +Have you ever heard your parents say: + +* “If you clean your room, you can go out with your friends.” + +* “If your homework is done, you can play video games.” + +* “If you do your chores all week, you get your allowance, else you are grounded.” + +These are all conditionals! Conditionals follow the format of IF this, THEN that. + +**IF** (condition is met), **THEN** (action performed) + +Try to think of a few conditionals from your own life. Once you've gotten the hang of it, add the ELSE portion of a conditional. + +**IF** (condition is met), **THEN** (action performed), **ELSE** (different action performed) + +Example: + +* **IF** it is snowing, **THEN** wear boots, **ELSE** wear shoes. + +The ELSE portion makes sure that a different action is performed in either case. Without the ELSE action, you might end up barefoot! + +![If-Then workflow](/static/courses/csintro/conditionals/flowchart.PNG) \ No newline at end of file diff --git a/docs/test/courses/csintro/conditionals/project.md b/docs/test/courses/csintro/conditionals/project.md new file mode 100644 index 00000000000..47f3873faea --- /dev/null +++ b/docs/test/courses/csintro/conditionals/project.md @@ -0,0 +1,147 @@ +# Project: Board Game + +![Close-up of game tokens](/static/courses/csintro/conditionals/game-pieces.jpg) + +## Introduction +Many board games use an electronic toy to signal moves, or provide clues. There are some funny examples online if you search for “electronic board game”. Here are some examples: + +[Dark Tower](https://youtu.be/cxrY7MWEkwE) (featuring Orson Welles): This is an example of a circular board game in which the pieces start on the edges and move in toward the middle. + +[Electronic Dream Phone Board Game Commercial - 1992](https://www.youtube.com/watch?v=pqYsQgDqlmg): This board game is really a logic puzzle. There are printed clues that illustrate relationships and the phone provides clues that help you to narrow down possibilities by a process of elimination. + +[Stop Thief Electronic Board Game commercial 1979](https://www.youtube.com/watch?v=q3wpPRdDy4E): This board game uses a device to give audio clues that help you to figure out what to do on the game board. It’s a good example of how you might use sound as a clue. + +## Assignment +Create an original board game project in which micro:bit is a central feature. The rules of your board game should use Conditionals. + +Come up with: + +* A set of written rules (how to play) +* A game board +* A program for the micro:bit +* Photo documentation of the different game pieces, cards, or other components of the game with the micro:bit included as well as a screenshot of your micro:bit code. Each photo should have a caption that describes what the photo is documenting. +* Reflection: A text entry describing your game-making process from brainstorming ideas, through construction, programming, and beta testing. + +The micro:bit needs to work in conjunction with the game board and/or game pieces and should be a central feature of the game. Ideally, it should be more than a simple substitute for a six-sided die. + +The micro:bit might: + +* Simulate the results of a battle between two pieces +* Randomly point in a different direction of travel +* Generate a result based on its current incline +* Point randomly at players and eliminate them +* Display a dynamic score +* ...let your imagination run wild! + +Try to code your micro:bit to do something original. Here is one example: + +![Close-up of game tokens](/static/courses/csintro/conditionals/battle-pieces.jpg) + +### Battle pieces + +In this example, pieces start out at full strength and lose points based on random events on the board. + +Rules: When two pieces meet on the same space, they battle. + +* Press A to enter the strength of piece A. + +* Then press B to enter the strength of piece B. + +* Shake the micro:bit to determine the winner of the battle, which is proportionately random to the strength of each piece. + +```blocks +let p2 = 0 +let p1 = 0 +input.onButtonPressed(Button.A, () => { + p1 += 1 + basic.showNumber(p1) +}) +input.onButtonPressed(Button.B, () => { + p2 += 1 + basic.showNumber(p2) +}) +input.onGesture(Gesture.Shake, () => { + if (randint(0, p1 + p2) <= p1) { + basic.showString("A") + } else { + basic.showString("B") + } +}) +``` +Solution link: [https://makecode.microbit.org/_0fx9hY9EbM5T]() + +### Bonus + +The micro:bit uses its accelerometer to detect when you're shaking it. How does an accelerometer actually work? + +[https://www.youtube.com/watch?v=byngcwjO51U]() + +### Space Race + +How to win: Starting from Earth, your goal is to progress to Mars. The first person to reach Mars is the winner. + +Rules: + +* Shake the micro:bit to randomize how far you get to advance. +* If you land on a pink square, press B on the micro:bit until your previous roll number appears. Then press A and B at the same time to see whether or not you move based upon the number on the square. +* Up to four players. + +![Space race game](/static/courses/csintro/conditionals/space-race.jpg) +Finished game + +![micro:bit holder square](/static/courses/csintro/conditionals/microbit-holder.jpg) +micro:bit holder + +![Game pieces](/static/courses/csintro/conditionals/game-pieces.jpg) +Game pieces + +```blocks + +let yes_or_no = 0 +let current_roll = 0 +let previous_roll = 0 +input.onButtonPressed(Button.AB, () => { + previous_roll = 0 + if (4 <= previous_roll) { + yes_or_no = randint(0, 8) + } + if (4 > previous_roll) { + yes_or_no = randint(0, 5) + } + if (2 < yes_or_no) { + basic.showString("YES") + basic.clearScreen() + } else { + basic.showString("NO") + basic.clearScreen() + } +}) +input.onGesture(Gesture.Shake, () => { + current_roll = randint(0, 6) + basic.showNumber(current_roll + 1) + basic.pause(5000) + basic.clearScreen() +}) +input.onButtonPressed(Button.B, () => { + previous_roll += 1 + basic.showNumber(previous_roll) +}) +input.onButtonPressed(Button.A, () => { + previous_roll += -1 + basic.showNumber(previous_roll) +}) +basic.showString("SPACE RACE") +previous_roll = 0 +``` +Solution link: [makecode.microbit.org/_H7kPewAyifhk]() + +## Journal Prompt + +Write a short reflection in your journal (about 150–300 words), addressing the following points: + +* Explain how you decided on your particular board game idea. +* What was something that was surprising to you about the process of creating this game? +* Describe a difficult point in the process of designing this game, and explain how you resolved it. +* If you had other poeple play your game, what feedback did they give you? How did that help you improve your game? What were the Conditionals that you used as part of your game rules? +* Publish your MakeCode program and include the link. + diff --git a/docs/test/courses/csintro/conditionals/standards.md b/docs/test/courses/csintro/conditionals/standards.md new file mode 100644 index 00000000000..65ab5170dc9 --- /dev/null +++ b/docs/test/courses/csintro/conditionals/standards.md @@ -0,0 +1,8 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities. +* CL.L2-04 Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.    +* CL.L3A-01 Work in a team to design and develop a software artifact. +* K-12 Computer Science Framework Core concept: Control Structures diff --git a/docs/test/courses/csintro/conditionals/unplugged.md b/docs/test/courses/csintro/conditionals/unplugged.md new file mode 100644 index 00000000000..84255c62875 --- /dev/null +++ b/docs/test/courses/csintro/conditionals/unplugged.md @@ -0,0 +1,50 @@ +# Unplugged: Red light, green light + +![Red and green stoplight](/static/courses/csintro/conditionals/traffic-light.png) + +## Objective +To reinforce the programming of basic conditionals by having students experience conditionals through acting them out in real life. + +## Activity overview +Students will line up at one end of the classroom with the goal of reaching the other side of the classroom. The teacher, and then the students themselves will call out conditionals and all the students will advance or not depending on the specific conditional statement. + +**Note:** As the teacher you will need to keep an eye out for any ‘errors’ that occur during the running of the program. + +## Materials +* Pencils and lined paper (if doing this activity seated). Students can advance across the paper instead of the room with one inch line equal to one step. + +## Process + +* Have the students line up at one side of the room. +* Explain the rules: +>* The object of the game is to get across the room first. +>* For `if...then` conditionals: If the condition called out is `true` for you, then perform the action described in the `then`. If the condition called out is `false` for you, then do nothing. +>* For `if...then...else` conditionals, listen carefully to the whole condition, as the `else` may apply to you. + +## Example conditional statements + +* If you are wearing something green, then take a step forward. +* If you have the letter ‘e’ in your first name, then take two giant steps forward. +* If you are wearing sneakers, then take a step forward, else take 2 steps forward. +* If your birthday is this month, then take a giant hop forward. +The conditionals you use will depend on your individual class. + +After the students get the idea of the game, allow them to make up and call out conditionals (that meet teacher approval). + +They will need to be observant, as a conditional that moves them forward, will also move their competition forward! + +## Tips +* SAFETY FIRST! Students, especially younger ones, can get quite silly with this and while it is meant to be fun and even funny, safety first! +* Student conditionals need to apply to at least two people in the class. + +## Reflections +How did they do? Were there any ‘run-time errors’? Did a student miss a conditional being met or fail to correctly carry out the THEN or ELSE action?  Were there some conditions that could be evaluated as something other than True or False (maybe, sometimes)? + +## Extensions/Variations +* Add AND, OR, AND/OR statements to the conditionals. +>Example: If you have brown hair AND brown eyes, then... +* Create nested IF’s +>Example: If you are wearing sneakers, then... if you are also wearing white socks, take three steps forward. +* Let students create their own conditionals for future program runs with the class. (A very popular activity, though all conditionals should be run by the teacher first for approval.) +* 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, like writing a sentence or setting a table or constructing a simple structure. + diff --git a/docs/test/courses/csintro/coordinates.md b/docs/test/courses/csintro/coordinates.md new file mode 100644 index 00000000000..ff47f3139d1 --- /dev/null +++ b/docs/test/courses/csintro/coordinates.md @@ -0,0 +1,34 @@ +# Coordinate grid and LEDs + +![Sample Heart Simulator](/static/courses/csintro/coordinates/cover.png) + +This lesson introduces the use of coordinates to store data or the results of mathematical operations. It provides practice programming for the LEDs of the micro:bit screen using coordinates, and introduces the basic game blocks of MakeCode. + +## Lesson objectives + +You will... + +* Understand that the 5 x 5 grid of LEDs on the micro:bit represents a coordinate grid with the origin (0,0) in the top left corner. +* Understand that the values of the x-coordinates range from 0 through 4 and increase from left to right. +* Understand that the values of the y-coordinates range from 0 through 4 and increase from top to bottom. +* Learn how to refer to an individual LED by its **X** and **Y** coordinates. +* Learn how to plot (turn on) and unplot (turn off) individual LEDs and how to toggle between these two states. +* Learn how to check the current on or off status of an individual LED as well as check and set the brightness level. +* Apply the above knowledge and skills to create a unique program that uses coordinates as an integral part of the program. + +## Lesson structure + +* Introduction: Coordinate Grid +* micro:bit Activities: Animation and Patterns +* Project: Screensaver or Game +* Standards: Listed + +## Lesson plan + +1. [**Overview**: Coordinate grid and LEDs](/test/courses/csintro/coordinates/overview) +2. [**Activity**: Animation and patterns](/test/courses/csintro/coordinates/activity) +3. [**Project**: Screensaver or game](/test/courses/csintro/coordinates/project) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/coordinates/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/coordinates/activity.md b/docs/test/courses/csintro/coordinates/activity.md new file mode 100644 index 00000000000..7e194e71d5b --- /dev/null +++ b/docs/test/courses/csintro/coordinates/activity.md @@ -0,0 +1,194 @@ +# Activity: Animation and patterns + +Each of these short exercises demonstrates how to use coordinates to control the LEDs. These programs can later be modified and used in your more complex projects. +  +* Smile animation - A short exercise in plotting and toggling LEDs to create a simple animation. +* Random Patterns generator - A short exercise using a loop to generate random LED patterns and then checking the status of a specific LED. +* Brightness - A short exercise in using the brightness settings for the micro:bit LEDs. + +## Coding activity 1: Smile animation + +A short exercise in plotting and toggling LEDs to create a simple animation. Although you can use the 'show leds' block for images and animation, there is another way to tell the micro:bit what LEDs to turn on and off using coordinates. + +### Create a smiling and non-smiling face with ‘show leds’ blocks + +We can still use the 'show leds' block to plan which LED coordinates to turn on. + +* In Microsoft MakeCode, start a new project and name it something like **‘smile animation’.** +* From the Basic Toolbox drawer, drag out a couple of ‘show leds’ blocks from the Basic Toolbox drawer to the coding Workspace. Since we’ll be using them as a guide, **don’t** connect them to the ‘on start’ block. Remember, the blocks will be grayed out, but you can still create a smiling face in one and non-smiling face in the other by selecting the squares you want. + +```block +basic.showLeds(` + . . . . . + . # . # . + . . . . . + # . . . # + . # # # . + `) +basic.showLeds(` + . . . . . + . # . # . + . . . . . + # # # # # + . . . . . +`) +``` + +### Plot coordinates for LEDs that are in both images + +* From the LED Toolbox drawer, drag out 6 **'plot x y'** blocks and connect them inside on the **'on start'** block. + +>* Tip: you can also right-click on a block and select Duplicate to copy blocks + +* Compare the two face images and determine which LEDs are on in both images. +* Plot these LEDs using the correct (x,y) coordinates. +* When done, place these 'plot x y' blocks inside an 'on start' block. + +```blocks +led.plot(1, 0) +led.plot(3, 0) +led.plot(2, 1) +led.plot(1, 3) +led.plot(2, 3) +led.plot(3, 3) +``` +### Code the toggle coordinates + +Now we can code for the 4 LEDs that change back and forth, on and off, as we switch from one face to the other and back again over and over. + +* From the LED Toolbox drawer, drag out 4 **'toggle x y'** blocks and connect them to the **'forever'** block. The **‘toggle x y’** block will change the status of an LED from on to off and off to on. +* Determine the coordinates for the LEDs that will toggle. +* First, update the default (0,0) coordinates with the correct (x,y) coordinates for the two LEDs to create the smile in the first two ‘toggle x y’ blocks. Then, update the other two ‘toggle x y’ blocks with the correct (x,y) coordinates for the two LEDs to create the non-smile. +* Run the code in the Simulator to check it out. It toggles all four blocks at the same time! Let’s fix it. + +### Add a pause between the smile and non-smile + +* You may notice that the toggling happens too quickly. Let’s slow it down a bit by placing a 'pause' block between the two pairs of 'toggle x y' blocks. Set the pause value to 250 milliseconds. + +Here is the full program: + +```blocks +basic.forever(() => { +   led.toggle(0, 2) +   led.toggle(4, 2) +   basic.pause(250) +   led.toggle(0, 3) +   led.toggle(4, 3) +}) +led.plot(1, 0) +led.plot(3, 0) +led.plot(2, 1) +led.plot(1, 3) +led.plot(2, 3) +led.plot(3, 3) +``` +Solution link: [makecode.microbit.org/_AjmLfgc31EMk]() + +### ~ hint + +LEDs are amazing little devices. If you haven't seen this video about how they work, take a few minutes to learn more about them. + +[https://www.youtube.com/watch?v=qqBmvHD5bCw]() + +### ~ + +## Mod this! +* Add a third image to the animation, perhaps a frown face. +* Make your own custom animation! What LEDs stay the same and which need to be toggled? + +## Coding activity 2: Random patterns generator +A short exercise using a loop to generate random LED patterns and then checking the status of a specific LED. + +Pseudocode: + +* On button A pressed we’ll use a loop to turn on a random set of LED lights on our micro:bit. +* Our display will have one LED lit for each column or x coordinate value from 0 through 4. + +### Code button A + +* Start a new MakeCode project and name it. We don’t need the ‘on start’ or ‘forever’ blocks in this activity, so delete them from the coding Workspace or move them to the side. +* From the Input Toolbox drawer, select the ‘on button pressed’ block. +* From the Basic – More Toolbox drawer, drop a ‘clear screen’ block in the ‘on button pressed’ block. +* From the Loops Toolbox drawer, drop in a ‘for’ block under the ‘clear screen’ block. +* From the LED Toolbox drawer, drop a ‘plot x y’ block into the ‘for’ block. +* From the Variable Toolbox drawer, drag an ‘index’ variable into the x value in the ‘plot x y’ block. +* From the Math Toolbox drawer, drag a ‘pick random’ block into the y value and change the second parameter from 0 to 4. + +### Code button B + +Now, we’ll code to check the on/off state of one of the LEDs with button B. + +* From the Input Toolbox drawer, drag an ‘on button pressed’ block to the coding Workspace and use the dropdown menu to select B. +* On button B pressed, we’ll use an ‘If then else’ block from the Logic Toolbox drawer. +* From the LED Toolbox drawer, drop a ‘point x y’ block into the ‘if’ condition to check the current on/off state of a specific LED. This means: + * If the LED located at (0,0) on the micro:bit is currently on, the ‘point x y’ block will return true. + * If the LED located at (0,0) is currently off, the ‘point x y’ block will return false. +* For this exercise, we’ll use the two built-in icons to display the LED’s current status. From the Basic Toolbox drawer, drag two ‘show icon’ blocks into each of the ‘then’ and ‘else’ clauses +* Use the dropdown menu to select the check mark for Yes, and the X icon for No. + +Solution link: [makecode.microbit.org/_hT458oiDR7AL]() + +### Try it out! +* Download the program to your micro:bit +* Press button A to create a random pattern +* Press button B to check and display the status of the specific LED + +### Mod this! +Add a loop to test for all coordinates on the micro:bit when button B is pressed instead of testing only for the (0, 0) LED. + +## Coding activity 3: Brightness +A short exercise in using the brightness settings for the micro:bit LEDs. Our program will change the brightness of the LEDs and numerically display the brightness level. + +### Pseudocode + +* We’ll set the brightness level for the LEDs to the highest level on start and then use on button A pressed to decrease the brightness level, and on button B pressed to increase the brightness level. +* We’ll use on button A+B pressed to check and display numerically the current brightness level. + +### Code for the start + +* Start a new project in MakeCode and name it. +* Select the LED Toolbox drawer. You’ll notice a **“…more”** Toolbox drawer appear; select that and drag a **‘set brightness’** block onto the coding Workspace. Drop this into the **‘on start’** block. +* From the Basic Toolbox drawer, drag a **‘show icon’** block and drop it after the **‘set brightness’** block so we will have an image to look at. + +### Code for button A and button B + +* From the Input Toolbox drawer, drag out three **‘on button pressed’** blocks onto your coding Workspace. +* Leave one **‘on button pressed’** block with the default setting of A and use the dropdown menu to change the other to B, and the third to A+B (this is when buttons A and B are pressed together) +* From the LED …more Toolbox drawer, drag out two more **‘set brightness’** blocks and drop one each into the **‘on button A pressed’** and **‘on button B pressed’** blocks. +* From the Math Toolbox drawer, drag out an **addition** block and a **subtraction** block. +* Drop the addition block within the **‘set brightness’ **block in the **‘on button B pressed’** block, and the subtraction block within the **‘set brightness’** block in the **‘on button A pressed’** block, replacing the default value of ‘255’. +* From the LED …more Toolbox drawer, drag out two **‘brightness’** value blocks to the Workspace and drop one into the **first slot of the subtraction block,** and drop the second one into the **first slot of the addition block.** +* Change the default value of 0 on the right side of each math expression to 25. + +### Code for button A + B together + +Since we can't see if our program is working in the simulator, let’s add a check into our code. + +* From the Basic …more Toolbox drawer, drag a **‘clear screen’** block onto the Workspace and drop it into the **‘on button A+B pressed’** block. +* From the Basic Toolbox drawer, drag a **‘show number’** block onto the Workspace and drop it below the **‘clear screen’** block. +* From the LED …more Toolbox drawer, drag another **‘brightness’** value block onto the Workspace and drop it into the **‘show number’** block, replacing the default 0 value. This will clear the screen when buttons A and B are pressed and display the current brightness level as a number on the micro:bit screen. +* Now, from the Basic Toolbox drawer, drag a **‘show icon’** block to the coding Workspace and connect it below the **‘show number’** block. This will re-display the image we used on start of the program + +Solution link: [makecode.microbit.org/_JjwMLL6Da3jP]() + +### Try it out! + +Check it in the simulator first, then download the program to the micro:bit to run the program. + +### Mod this! + +What happens if adding 25, or subtracting 25, from the current brightness level would result in a sum or difference outside of the 0 to 255 brightness range? + +## Knowledge Check + +**Questions:** + +1. How many coordinate pairs are represented on the micro:bit LED screen? +2. We’ve learned how to light LEDs on the micro:bit screen using blocks from three different Toolbox drawers. What are the three Toolbox drawers? +3. What type of variable is the (x,y) coordinate? + +**Answers:** + +1. 25 +2. **Basic** (i.e., ‘show leds’ and ‘show icon’ blocks); **Led** (i.e., ‘plot’, ‘unplot’, ‘toggle’, and ‘point’); and **Game** under Advanced (i.e., ‘sprite move by’, ‘sprite turn’) +3. sprite \ No newline at end of file diff --git a/docs/test/courses/csintro/coordinates/overview.md b/docs/test/courses/csintro/coordinates/overview.md new file mode 100644 index 00000000000..e10a358ac71 --- /dev/null +++ b/docs/test/courses/csintro/coordinates/overview.md @@ -0,0 +1,62 @@ +# Introduction + +Let's review coordinate grids and mapping x and y coordinates on a plane: + +## Axes +* The basic coordinate grid has two axes: + * **x-axis** which runs horizontally (left to right), *and* + * **y-axis** which runs vertically (up to down). + +## Origin + +These two axes meet at a point called the origin, where both the x- and the y-values are zero. On this basic coordinate grid, the origin is in the lower left corner of the grid and has the coordinates (0,0). + +## Coordinate pair +The first value in a coordinate pair is the x-value and the second value in a coordinate pair is the y-value, e.g., (x,y). + +**Hint:** A simple way to remember which value comes first is to remember their order in the alphabet. The letter x comes before the letter y in the alphabet, and the x-coordinate comes before the y-coordinate in a coordinate pair. + +## Coordinate value changes +On a basic coordinate grid, + +* The value of the x-coordinate increases from left to right and is a measure of how many units a point is horizontally from the origin. +* The value of the y-coordinate increases from bottom to top and is a measure of how many units a point is vertically from the origin. + +![Math coordinates](/static/courses/csintro/coordinates/math-coords.png) + +## Coordinate grid and the micro:bit + +The 5 x 5 grid of LEDs on the micro:bit represents a coordinate grid with a horizontal x-axis and a vertical y-axis. It has an origin, and you can refer to the position of the LEDs with coordinate pairs. There are similarities and differences between the micro:bit coordinate grid and basic coordinate grids in math class. + +### Similar to coordinate grids in math +The values of the x-coordinates range from 0 through 4 and increase from left to right just as they do in the coordinate grids used in math class. + +### Different from coordinate grids in math + +It is important, however, to understand the two major differences between the micro:bit LED grid and the coordinate grid that you might be used to from other math classes: + +* The origin (0,0) is in the top left corner. +* The values of the y-coordinates range from 0 through 4 and increase from top to bottom. + +![micro:bit LED coordinates](/static/courses/csintro/coordinates/microbit-led-coords.png) + +## Sidebar material + +![Rene Descartes](/static/courses/csintro/coordinates/rene-descartes.jpg) +(image credit: Wikipedia Commons) + +René Descartes (1596-1650), was a French philosopher and mathematician who developed the coordinate system we use today. A story goes that while lying in bed, he noticed a fly on the ceiling. In wondering how he could describe the fly’s exact position on the ceiling, he decided to use a corner of the ceiling as a reference point and then describe the fly’s position as a measure of how far away from the reference point one would need to travel horizontally and then vertically to reach the fly. His coordinate system proved useful in many ways including creating an important link between the studies of algebra and geometry. Geometric shapes could now be described by points on a coordinate plane. + +## Knowledge Check + +**Questions:** + +1. What location is the origin on the micro:bit screen? +2. What is the range of x-values on the micro:bit screen, and in which direction do they increase? +3. What is the range of y-values on the micro:bit screen, and in which direction do they increase? + +**Answers:** + +1. (0,0) in the upper left +2. 0 to 4, increasing from left to right horizontally +3. 0 to 4, increasing from top to bottom vertically diff --git a/docs/test/courses/csintro/coordinates/project.md b/docs/test/courses/csintro/coordinates/project.md new file mode 100644 index 00000000000..52da1524d08 --- /dev/null +++ b/docs/test/courses/csintro/coordinates/project.md @@ -0,0 +1,207 @@ +# Project: Screensaver or game + +Use what you now know about LEDs, coordinates, and brightness to create your own project: a screensaver, or a game. You should find a way to use coordinates in your program. Even better, use variables to store and update your coordinates. + +Your task is to create: + +* A “screen saver” animation using the plot/unplot blocks. You can fill the screen line by line, pausing between each one, or fill it with a random constellation of stars. + +– OR – + +* A game that uses sprites to manage the x- and y-coordinate values of the different objects. + +Your project might use variables to store the values of sprites, which are special structures that contain an x- and a y-coordinate together that describe the sprite’s location as one LED on the screen. + +## Screensavers +One type of project is a screensaver. A long time ago, computers and televisions used cathode ray tube (CRT) screens for displays. The glass screen of the display was coated on the back with phosphor, a substance that glows when painted with electrons from an electron gun at the other end of the tube. When the same area of the screen was painted (or excited) over and over again by the stream of electrons, that part of the screen would sometimes “freeze” with the same image burned into the phosphor for good. This was called **burn-in.** + +Normally, if a show was running or if someone was actively using the computer, the display changed often enough that burn-in wasn’t a problem. Programmers learned to create a demo screen with an animation that would run whenever the screen was idle. Today, nearly all computers and television sets use LCD displays, which are not affected by burn-in. But you can still find a screen saver in nearly every computer’s Settings panel as an opportunity to show off some neat graphics or animation. + +## Project Expectations + +Make sure your project meets these specifications: + +* Uses at least three of the different kinds of ‘plot’, ‘unplot’, ‘toggle’, ‘point x y’ blocks, and uses variables to update the coordinates in some way +* Uses plotted LEDs in a meaningful way +* The program compiles and runs as intended and includes meaningful comments in code +* Provide the written Journal entry reflection (which we’ll talk about after you complete your project) + +## Project Ideas + +### Firework screensaver + +This project uses a for loop with the plot/unplot blocks to create a symmetrical design on the screen. The following sample code uses a subtraction operation to get a variable that decreases as the index variable in the loop increases. + +```sim +basic.forever(() => { + for (let x = 0; x <= 4; x++) { + led.plot(x, 0) + led.plot(0, 4 - x) + led.plot(4 - x, 4) + led.plot(4, x) + basic.pause(50) + led.unplot(x, 0) + led.unplot(4 - x, 4) + led.unplot(0, 4 - x) + led.unplot(4, x) + basic.pause(50) + } +}) +``` +Solution link: [makecode.microbit.org/_97A6Ru6LELcP]() + +### Cascade screensaver + +This example creates a diagonal cascading effect across the screen. Note the use of a variable (speed) to allow you to easily change the speed of the animation by changing just one number value. + +```sim +let reverse = 0 +let speed = 10 +let inner = 0 +let outer = 0 +basic.forever(() => { + for (let outer = 0; outer <= 4; outer++) { + reverse = 4 - outer + for (let inner = 0; inner <= 4; inner++) { + led.plot(outer, reverse) + basic.pause(speed) + led.plot(reverse, outer) + basic.pause(speed) + led.plot(reverse - inner, reverse) + basic.pause(speed) + led.plot(reverse, reverse - inner) + basic.pause(speed) + } + } + for (let outer = 0; outer <= 4; outer++) { + reverse = 4 - outer + for (let inner = 0; inner <= 4; inner++) { + led.unplot(outer, reverse) + basic.pause(speed) + led.unplot(reverse, outer) + basic.pause(speed) + led.unplot(reverse - inner, reverse) + basic.pause(speed) + led.unplot(reverse, reverse - inner) + basic.pause(speed) + } + } +}) +``` + +```blocks +let reverse = 0 +let speed = 0 +let inner = 0 +let outer = 0 +basic.forever(() => { + for (let outer = 0; outer <= 4; outer++) { + reverse = 4 - outer + for (let inner = 0; inner <= 4; inner++) { + led.plot(outer, reverse) + basic.pause(speed) + led.plot(reverse, outer) + basic.pause(speed) + led.plot(reverse - inner, reverse) + basic.pause(speed) + led.plot(reverse, reverse - inner) + basic.pause(speed) + } + } + for (let outer = 0; outer <= 4; outer++) { + reverse = 4 - outer + for (let inner = 0; inner <= 4; inner++) { + led.unplot(outer, reverse) + basic.pause(speed) + led.unplot(reverse, outer) + basic.pause(speed) + led.unplot(reverse - inner, reverse) + basic.pause(speed) + led.unplot(reverse, reverse - inner) + basic.pause(speed) + } + } +}) +speed = 10 +``` + +Solution link: [makecode.microbit.org/_Y2TU9cgWz07m]() + +### Dodge ball game + +This is a Dodge Ball game that uses one sprite (dodger) to try to avoid another sprite (ball). You use the A and B buttons to move the dodger to avoid the balls that are falling from the top of the screen. + +```sim +let dodger: game.LedSprite = null +let ball: game.LedSprite = null +basic.forever(() => { +   if (dodger.isTouching(ball)) { +       game.gameOver() +   } else if (ball.get(LedSpriteProperty.Y) < 4) { +       ball.change(LedSpriteProperty.Y, 1) +       basic.pause(250) +   } else { +       game.addScore(1) +       ball.set(LedSpriteProperty.Y, 0) +       ball.set(LedSpriteProperty.X, randint(0, 5)) +   } +}) +input.onButtonPressed(Button.A, () => { +   if (dodger.get(LedSpriteProperty.X) > 0) { +       dodger.change(LedSpriteProperty.X, -1) +   } +}) +input.onButtonPressed(Button.B, () => { +   if (dodger.get(LedSpriteProperty.X) < 4) { +       dodger.change(LedSpriteProperty.X, 1) +   } +}) +ball = game.createSprite(randint(0, 5), 0) +dodger = game.createSprite(2, 4) +game.setScore(0) +``` + +Here is the complete Dodge Ball program. + +```blocks +let dodger: game.LedSprite = null +let ball: game.LedSprite = null +basic.forever(() => { +   if (dodger.isTouching(ball)) { +       game.gameOver() +   } else if (ball.get(LedSpriteProperty.Y) < 4) { +       ball.change(LedSpriteProperty.Y, 1) +       basic.pause(250) +   } else { +       game.addScore(1) +       ball.set(LedSpriteProperty.Y, 0) +       ball.set(LedSpriteProperty.X, randint(0, 5)) +   } +}) +input.onButtonPressed(Button.A, () => { +   if (dodger.get(LedSpriteProperty.X) > 0) { +       dodger.change(LedSpriteProperty.X, -1) +   } +}) +input.onButtonPressed(Button.B, () => { +   if (dodger.get(LedSpriteProperty.X) < 4) { +       dodger.change(LedSpriteProperty.X, 1) +   } +}) +ball = game.createSprite(randint(0, 5), 0) +dodger = game.createSprite(2, 4) +game.setScore(0) +``` +Solution link: [makecode.microbit.org/_E9b733huX2DP]() + +## Journal Entry + +Write a short journal reflection of about 150–300 words, addressing the following points: + +* Did you do a screensaver? A game? Something different? How did you decide? +* If you did a game, what is the object of the game? +* How does your project use coordinates? +* Describe something in your project that you are proud of. +* Describe a difficult point in the process of designing this program, and explain how you resolved it. +* What feedback did your beta testers give you? How did that help you improve your design? +* Publish your MakeCode program and include the link.   diff --git a/docs/test/courses/csintro/coordinates/standards.md b/docs/test/courses/csintro/coordinates/standards.md new file mode 100644 index 00000000000..7e719839850 --- /dev/null +++ b/docs/test/courses/csintro/coordinates/standards.md @@ -0,0 +1,10 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities +* CT.L1:6-01 Understand and use the basic steps in algorithmic problem-solving +* CT.L1:6-02 Develop a simple understanding of an algorithm using computer-free exercises +* CPP.L1:6-05 Construct a program as a set of step-by-step instructions to be acted out +* 2-A-5-7 Create variables that represent different types of data and manipulate their values. +* CT.L2-14 Examine connections between elements of mathematics and computer science including binary numbers, logic, sets and functions. diff --git a/docs/test/courses/csintro/coordinates/unplugged.md b/docs/test/courses/csintro/coordinates/unplugged.md new file mode 100644 index 00000000000..4982f1c3f27 --- /dev/null +++ b/docs/test/courses/csintro/coordinates/unplugged.md @@ -0,0 +1,46 @@ +# Unplugged: Battleship + +The game Battleship is perhaps the most fun a student can have practicing using a coordinate grid. The original Battleship game is a 10x10 grid with numbers on one axis and letters on the other. +  +To help us practice using the correct coordinates for the grid of micro:bit LEDs, let's play a smaller 5x5 version of Battleship using x- and y-coordinates instead of letters and numbers. +  +First, make your own set of 5x5 grids to reinforce the layout of the micro:bit grid. + +Each player should make two grids. One grid is for placing their own ships and keeping track of their opponent’s hits and misses and the other grid is for keeping track of their own hits and misses while trying to determine the location of their opponent’s ships. + +![Player Grid Example](/static/courses/csintro/coordinates/player-grid.png) +Player’s grid: Mark where your ships are and keep track of your opponent’s hits and misses. + +``` + (0,0) (1,0) (2,0) (3,0) (4,0) + (0,1) (1,1) (2,1) (3,1) (4,1) + (0,2) (1,2) (2,2) (3,2) (4,2) + (0,3) (1,3) (2,3) (3,3) (4,3) + (0,4) (1,4) (2,4) (3,4) (4,4) +   +``` + +![Opponent Grid Example](/static/courses/csintro/coordinates/opponent-grid.png) +Opponent’s grid: Keep track of your hits and misses while trying to locate your opponent’s ships. + +``` + (0,0) (1,0) (2,0) (3,0) (4,0) + (0,1) (1,1) (2,1) (3,1) (4,1) + (0,2) (1,2) (2,2) (3,2) (4,2) + (0,3) (1,3) (2,3) (3,3) (4,3) + (0,4) (1,4) (2,4) (3,4) (4,4) +``` + +Then, find someone to play Battleship with. Each person's ships are hidden somewhere on their 5x5 grid. Take turns calling your shots using x- and y-coordinates, in the proper order. Your opponent will use those coordinates to plot the location of your shots. + +If a hit is recorded on a ship, then you say, "Hit". If the shot misses, you say, "Miss". If the entire length of a ship is hit, it is sunk and removed from play. Tradition dictates that the player announces, "You sank my battleship!" + +Since your grid is only one quarter the size of the original Battleship grid, we suggest that you use fewer and smaller ships. For example, you could play with 3 ships, one each of size 3, 2, and 1. + +The game can be played with just paper and pencils or you could use small tokens and markers, like coins, buttons, or paper clips to represent the ships. +  +## Notes: +* The official rules of Battleship are easily found on the internet. Modify them as needed! + +![Battleship board game](/static/courses/csintro/coordinates/battleship-board-game.jpg) +The original Battleship Board Game diff --git a/docs/test/courses/csintro/finalproject.md b/docs/test/courses/csintro/finalproject.md new file mode 100644 index 00000000000..700d8d3dfee --- /dev/null +++ b/docs/test/courses/csintro/finalproject.md @@ -0,0 +1,17 @@ +# Final project + +![micro:bit holder square](/static/courses/csintro/conditionals/microbit-holder.jpg) + +In this unit, we will be reviewing the concepts we covered in the previous weeks, and providing some ideas for an independent final project that students can focus on in the next several weeks. We will also provide a rubric for keeping students on task and tracking the learning that they are doing as they work on their projects. This is an expanded version of the process students followed in the [Mini-Project](/test/courses/csintro/miniproject), in Lesson 6. + +Students are asked to create an independent project that demonstrates the use of something they have already learned, something they went out and researched for themselves, something they borrowed from somewhere else (with citations) and something completely original. They are also asked to document their learning process throughout the next couple of weeks using an independent project framework that emphasizes metacognitive development and process-oriented work. + +## Lesson plan + +1. [**Review**: Review of lessons 7 - 11](/test/courses/csintro/finalproject/review) +3. [**Final project**: Project goals and guidelines](/test/courses/csintro/finalproject/project) +4. [**Examples**: Final project examples](/test/courses/csintro/finalproject/examples) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/finalproject/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/finalproject/examples.md b/docs/test/courses/csintro/finalproject/examples.md new file mode 100644 index 00000000000..28f784e235b --- /dev/null +++ b/docs/test/courses/csintro/finalproject/examples.md @@ -0,0 +1,36 @@ +# Final project examples + +## 1. Baseball pitch counter + +![Baseball pitch counter](/static/courses/csintro/finalproject/baseball-pitch-counter.png) + +This project straps to a pitcher's arm and uses the micro:bit accelerometer to record how many pitches have been thrown in a session. + +## 2. micro:bit wrist-mounted step counter and compass + +![Step counter and compass](/static/courses/csintro/finalproject/step-counter.png) + +![micro:bit compass stand](/static/courses/csintro/finalproject/compass-stand.png) + +This project straps to your wrist, displays a compass that updates as you walk around, and keeps track of your steps. The micro:bit is elevated to allow room for the battery pack to fit underneath. + +## 3. Combination lock box + +[**micro:bit Combination lockbox**](https://youtu.be/OXks3MJWhhk) +https://youtu.be/OXks3MJWhhk +
+This project features a secret combination that opens the top of the box using a servo motor. + +## 4. Violin tuner + +![Violin tuner mount](/static/courses/csintro/finalproject/violin-tuner-mount.png) + +![Violin tuner](/static/courses/csintro/finalproject/violin-tuner.png) + +This project uses a piece of cardboard to mount the micro:bit to the side of a violin. This student wanted to use it to tune his violin by playing a specific series of tones. The micro:bit displays the note being played. + +## 5. Trumpet angle detector + +![Trumpet angle detector](/static/courses/csintro/finalproject/trumpet-angle-detector.jpg) + +This example was used for Marching Band practice, where students must hold the trumpet at a 15-degree angle to avoid hitting the person in front of them or playing directly into their ears. Because the trumpet is heavy, new trumpet players tend to let the trumpet droop. This displays an icon (a check mark or an X) to help new trumpet players learn what the proper angle is supposed to feel like. diff --git a/docs/test/courses/csintro/finalproject/project.md b/docs/test/courses/csintro/finalproject/project.md new file mode 100644 index 00000000000..96a6101184e --- /dev/null +++ b/docs/test/courses/csintro/finalproject/project.md @@ -0,0 +1,177 @@ +# Final project + +The final project is a chance for you to use all of the skills you have been learning throughout the semester to create something that is original, and that solves a problem or serves a purpose. + +## Possible ideas +* Create a game +* Create something that helps somebody by solving a problem +* Create something beautiful +* Create a musical instrument + +In addition, your project code must do each of the following things: + +## Show something you already know +You should demonstrate your knowledge of one or more concepts we have covered in these lessons. + +## Show something new +You should demonstrate a technique, efficiency, or block that you went out and learned how to do on your own, either from the documentation, or from another classmate. + +## Incorporate a maker component +You should not create a project that exists solely and independently on the micro:bit. Your project should work together with tangible components such as servos, real buttons, switches, to do something unique. + +## Timeframe +Three weeks of in-class work and activities + +Due each week: +* 2–3 work logs +* 1 Record of Thinking + +Due in three weeks: +* Beta testing period +* Final Narrative +* Final Project Code +* Final project showcase and celebration at the end + +Assessment: +* 50% Process (initial proposal, work logs, records of thinking, final narrative) +* 50% Product (project code and maker component) + +Teacher Note: This form of assessment places just as much weight on documenting the process of designing the project, as it does on the finished product itself. This is because in my classroom I want to prioritize "sustained effort over an extended period of time" over a project that might have resulted from three all-nighters in the final week it is due. + +However, you may decide to assign more or less weight to each of these pieces, and you should certainly feel free to scale up or down the documentation piece as appropriate for your classroom, grade level, and teaching priorities. +  +## While working on the project +The expectation is that you are working steadily on your independent project for three weeks, testing out ideas, trying things out, getting stuck, and getting yourself unstuck. Because everyone is working on a different project, we can't assign the same homework to everybody so besides the project work itself, you are also responsible for documenting the work you are doing on the project using work logs, and reflecting on the process of your learning in a record of thinking. Here are more details on these. + +## Work logs +A work log is a short, bullet point list of what you worked on, and how long it took. Stick to just the facts. It shouldn’t take more than thirty seconds or so to write up a work log. Students should do one for every class, several times a week. A shared Microsoft OneNote notebook is a great way to keep a work log that students can update regularly. Alternately, you might use a collaborative shared document, or your classroom management system, or even e-mail. + +Sample Work Log: + +>_Flappy Dino Project
+3/31: 45 min. Worked on attaching cardboard arm to servo and mounting servo to inside
+4/1: 30 min. Looked up documentation on talking to NeoPixel strip, worked through demos
+4/3: 45 min. Hot glued NeoPixel strip to outside of dinosaur, finished painting
+4/4: 30 min. Coded lighting patterns in MakeCode._ + +**Teacher note:** We generally don't accept late work logs. If a student simply didn't have time to do any work on the project, he should still file a work log, and report that no work got done. Work logs are worth a few points each, so missing one or two isn't a problem, but if it happens a lot it's usually time to do a check-in with that student and see where she is with the project. + +## Record of thinking +A Record of Thinking is like a journal entry (or like the reflection that you did for the mini-project) that tells the story of your learning throughout the past week. Go through your work logs for the week and look at what you did, where you got stuck, and how you figured it out. + +Then write a 150- to 300-word Record of Thinking addressing the following: +* Describe something that surprised you this week as you worked on your project. +* Describe a moment where you go stuck. How did you get unstuck? +* Did anyone help you this week? Who and how? +* Choose an adjective that describes how you are feeling about your project this week. Explain why you chose this word. +* What are you working on next week? (for weeks 1 and 2) +* If you had more time to work on this project, what would you add? (for week 3) + +Sample Record of Thinking Excerpt: + +>_Week of April 6
+I guess I would choose the word "elated" because that's what I am feeling right now. After Mr. Kiang helped me figure out why my code wasn't working I was able to see it working exactly how I pictured it last week! That was a great moment. I was surprised how hard writing code that works is. I planned out the steps I wanted it to do but I didn't realize that the loops had to be nested one inside the other so I was stuck for a while. It always seems more simple than it is, that's one thought I will take into next week. Now I have the head attached to the body and the jaws work. I'm going to keep trying to get the lights working._ + +Teacher Note: A Record of Thinking is not an expanded work log! Students will sometimes just write a more detailed list of all of the tasks they completed over the week, and that's not the point of the Record of Thinking. The Work Logs are to show WHAT you did. The Record of Thinking is to show HOW you learned how to do it. Unlike Work Logs, I will accept late Records of Thinking as long as they come no later than the due date for the next week’s Record of Thinking. It is an important form of documentation of the learning process. + +## Turning in the final project +When you turn in the final project, you should turn in your code, and a final narrative. +To turn in your code, you can Share the code by clicking the Share button at the top of the MakeCode window (next to Projects). + +![Share project button](/static/courses/csintro/finalproject/share-button.png) + +You acknowledge that you have consented to sharing your code by clicking Publish project. + +![Publish project dialog](/static/courses/csintro/finalproject/publish-dialog.png) + +You can then copy the URL, paste it into a OneNote page, or send it to your teacher. + +![Share project dialog](/static/courses/csintro/finalproject/share-dialog.png) + +You also need to create a written final narrative to accompany your code. +  +You have worked for the past three weeks to propose, design, and test an original micro:bit independent project. I am looking for an honest, accurate assessment of your work over this time. +  +Please go back and read through all of your Work Logs, Records of Thinking, Beta Testing feedback, and any notes from teacher conferences. +  +Then, compose a comprehensive narrative that tells the story of the development of this app, and your progress toward your goals along the way.  How you tell the story is up to you, but you might consider following most, if not all, of the following questions: +* How did you start the process of designing the product/meeting your goals? +* What did you hope to learn? +* What challenges did you face? How did you overcome them? +* What was the outcome? +* What did you learn in the end? +* Who in the class provided help to you along the way? How? +* What were you proud of? +* What would you do differently next time? +  +Throughout your narrative, you must cite evidence from your work logs and records of thinking (e.g., Record of Thinking 4/17, Work Log #3, Conference notes, etc.) You may use footnotes for this or add it in parentheses after the material you are citing. +  +I will read this carefully and grade it along with your final project code and average it with the total of your work logs and records of thinking to come up with your final grade for the project. +  +Sample Final Narrative: + +> _It’s clear to me now that in the second week, I was a little lost and confused with the direction my project was taking. I can see now that in my chats with Mr. Kiang and with classmates (Conference Notes 4/3) I was not being very precise in my questions, and I didn’t totally understand what he was explaining._ +  +>_Looking back, one of my goals was to meet more regularly with my table mates. Hopefully I would be a lot less confused and at least this time when I got stuck, we would be able to solve it together. I wrote about this in my Record of Thinking (Record of Thinking #2) but I am surprised that things cleared up for me so quickly once we did start meeting together. This allowed me to get past something that was really bothering me, specifically adding and removing things from an array, and I was able to complete that in less than a day after having been stuck for more than a week (Work Log #4)._ +   +>_Once I started to get a little more clear on what to do, I was able to get more effective help from my classmates. Specifically, Jordan helped me a lot with figuring out how to get an image to display properly on the screen. He also showed me how to search through the online documentation more effectively. I think if I could do this over again, I would have scheduled more time earlier to meet with Mr. Kiang and/or found a better way to share the different online sites with my table mates because we all found different places to go. I didn’t even find out until the end that you could jump into JavaScript to make changes to the code, and it makes it all with the right blocks when you go back! (Beta Testing notes) That would have saved me a lot of time._ + +## Beta testing +Beta testing is an important part of testing the final projects to uncover bugs or design issues that could make the projects difficult to use. One way to test the projects is to ask all students to come in to class on a specific day with the projects ready to test. This is not the final deadline, but projects should be "feature-complete" i.e., all features need to be incorporated into the micro:bit, and the construction of the real world elements of the project need to be done or almost done. + +Students can take turns presenting their projects to the entire class, or they can work in pairs to take turns trying their partner's project out and offering feedback. Students who are being critiqued should take beta testing feedback notes and turn them in as part of their final project narrative. + +## Final showcase +Have a celebration of your students' hard work and hold an event at your school for parents, administrators, and other community members to appreciate all of the hard work that went into making each of the final projects. + +We have found that a "science fair" format works nicely, with students sitting at tables where they can demonstrate their projects and answer questions. Some schools do a "shark tank" type of event where students take turns "pitching" their project ideas to a panel composed of local software developers, entrepreneurs, and investors. Either way, a little public recognition of all of your students' hard work goes a long way! + + +## Assessment + +**Competency scores**: 4, 3, 2, 1 + +### Code - Show what you know + +**4 =** Code very effectively demonstrates the use of previous concept(s). All variable names are unique and clearly describe what information values the variables hold. Code is highly efficient.
+**3 =** Code effectively demonstrates the use of previous concept(s). Most variable names are unique and/or clearly describe what information values the variables hold. Code is mostly efficient.
+**2 =** Code somewhat effectively demonstrates the use of previous concept(s). Only some variable names are unique and/or clearly describe what information values the variables hold. Code is somewhat efficient.
+**1 =** Code demonstrates the use of previous concept(s), yet is not effective. Few or no variable names are unique and/or clearly describe what information values the variables hold. Code is not efficient. + +### Code - Show something new + +**4 =** Code very effectively demonstrates the use of new concept(s). All variable names are unique and clearly describe what information values the variables hold. Code is highly efficient.
+**3 =** Code effectively demonstrates the use of new concept(s). Most variable names are unique and/or clearly describe what information values the variables hold. Code is mostly efficient.
+**2 =** Code somewhat effectively demonstrates the use of new concept(s). Only some variable names are unique and/or clearly describe what information values the variables hold. Code is somewhat efficient.
+**1 =** Code demonstrates the use of new concept(s), yet is not effective. Few or no variable names are unique and/or clearly describe what information values the variables hold. Code is not efficient. + +### Variable names + +**4 =** All variable names are unique and clearly describe what information values the variables hold.
+**3 =** Most variable names are unique and/or clearly describe what information values the variables hold.
+**2 =** Only some variable names are unique and/or clearly describe what information values the variables hold.
+**1 =** Few or no variable names are unique and/or clearly describe what information values the variables hold.
+ +### Maker component + +**4 =** Tangible component is tightly integrated with the micro:bit and each relies heavily on the other to make the project complete.
+**3 =** Tangible component is somewhat integrated with the micro:bit but is not essential.
+**2 =** Tangible component does not add to the functionality of the program.
+**1 =** No tangible component. + + +### Work Logs + +**4 =** All work logs submitted on time, and accurate.
+**3 =** Two late or missing work log and/or work logs not accurate nor sufficiently detailed.
+**2 =** Four late or missing work logs and/or work logs not accurate nor sufficiently detailed.
+**1 =** More than four late or missing work logs and/or not accurate nor sufficiently detailed.
+ +### Final narrative + +**4 =** Narrative piece is thoughtful and detailed and contains all required elements.
+**3 =** Reflection piece is mostly thoughtful and/or lacks 1 of the required elements.
+**2 =** Reflection piece is superficial and lacks 2 of the required elements.
+**4 =** Reflection piece is trivial and lacks 3 of the required elements. + +As always, these rubrics are just a starting point and you should certainly feel free to adjust them as appropriate for your own classroom or learning environment. \ No newline at end of file diff --git a/docs/test/courses/csintro/finalproject/review.md b/docs/test/courses/csintro/finalproject/review.md new file mode 100644 index 00000000000..debf8e5a3c1 --- /dev/null +++ b/docs/test/courses/csintro/finalproject/review.md @@ -0,0 +1,20 @@ +# Review + +![Review](/static/courses/csintro/miniproject/review.png) + +Here is a brief review of the topics we covered in lessons 7–12. +  +## Coordinate Grid and LEDs +The micro:bit’s 25 LEDs are arranged in a 5x5 grid, with the origin at the top left. Values for both the x and y axes start at zero and increase as you move down and to the right. Individual LEDs can be turned off and on by specifying a pair of coordinates. The current value of an LED can be checked, and its brightness can be changed, as well. +  +## Booleans +A Boolean is a data type that only has two possible values: True or False. You can use [boolean](/types/boolean) variables to keep track of the state of a game (`gameOver` is either `true` or `false`) or check to see whether a certain action has taken place yet (`messageSent` is either `true` or `false`). Boolean operators such as AND OR and NOT allow you to combine [boolean expressions](/blocks/logic/boolean) to make more complex conditions. +  +## Bits, bytes, and binary +Computers work with _base-2_, which uses binary numbers. Binary numbers only have two possible values: 0 or 1. +  +## Radio communication +A micro:bits can send a combination of strings and numbers using the Radio blocks. The [Infection](/projects/infection) activity is an example of a thought-provoking group simulation that uses the Radio to send and receive data between micro:bits. +  +## Arrays +Arrays in MakeCode are used to store and retrieve numbers, strings, musical notes, or sprites. Everything in a particular array needs to be the same data type and elements in an array are numbered starting from zero, also called the _index_. Objects can be accessed, changed, added to, or removed from an array using their index. Three common methods of sorting elements in an array are bubble sort, selection sort, and insertion sort. \ No newline at end of file diff --git a/docs/test/courses/csintro/finalproject/standards.md b/docs/test/courses/csintro/finalproject/standards.md new file mode 100644 index 00000000000..574a99a8976 --- /dev/null +++ b/docs/test/courses/csintro/finalproject/standards.md @@ -0,0 +1,7 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities. +* CL.L2-04 Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.    +* CL.L2-05 Implement problem solutions using a programming language, including: looping behavior, conditional statements, logic, expressions, variables, and functions. diff --git a/docs/test/courses/csintro/introduction.md b/docs/test/courses/csintro/introduction.md new file mode 100644 index 00000000000..d8bff817e1c --- /dev/null +++ b/docs/test/courses/csintro/introduction.md @@ -0,0 +1,87 @@ +# Introduction + +When we first started teaching computer science, we discovered two important things. We found that existing curriculum for beginners focused mostly on solving math problems or constructing geometric shapes and that there was a certain type of student that signed up for computer science classes and these students were almost always boys. We wondered whether a different approach to teaching the basics of computer programming would be more engaging and also attract a larger variety of different types of students, both boys and girls. +  +We decided to focus on what knowing how to program allowed you to do and create. Ultimately all programs are created to solve a problem or serve a purpose. The problem may be local or global, the purpose may be anything from helping doctors treat patients to pure entertainment. By starting with interesting problems the students wanted to solve, they were much more engaged in learning to code. They saw coding skills as an important part of building creative solutions. + +With this approach, we found that not only did we get more girls taking the course, we also got a more diverse group of boys. Opportunities for collaboration increased, and all the students got to see where their talents and skills meshed with others' interests and experiences, to make a whole that was greater than the sum of its parts. + +We are now at the point where a third of the students taking computer science are girls, and more importantly, students are coming out of the course not only with an understanding of code, but also knowing how to read through professionally written code, and take an idea from brainstorming through prototyping to build something that matters. + +> _- Authors Mary Kiang and Douglas Kiang_ + +## Course Introduction +This is an introduction to coding and computer science by way of making and design, using the revolutionary new micro:bit microcontroller board, and Microsoft's easy and powerful MakeCode block-based coding environment. It is a project-based curriculum with a maker philosophy at its core; the idea is that by making physical objects, students create a context for learning the coding and computer science concepts. + +![micro:bit man](/static/courses/csintro/microbitman.jpg) + +* micro:bits may be purchased from these resellers: + +> http://microbit.org/resellers (you will need 1 micro:bit per student for this course). The "micro:bit Go Kit" includes a battery pack and USB cable as well. + +* Other optional suggested micro:bit accessories include: + +> * [ ] Alligator/Crocodile clip cables + * [ ] Headphone/earbuds (for audio) + * [ ] Servo motor (for movement) + * [ ] Croc clip to Male connector (for connecting to Servo motor) + * [ ] Croc clip to Headphone jack adapter (http://microbit-accessories.co.uk/) + * [ ] Copper tape + +* MakeCode for the micro:bit is a free web app: https://makecode.microbit.org + +Copper tape is inexpensive and super useful in all sorts of maker activities so it’s worth it to invest in a few rolls to keep on hand for micro:bit projects. We use it in [Lesson 9 (Binary Cash Register)](/test/courses/csintro/binary/project). You can purchase copper tape at https://www.adafruit.com/product/1128/ and https://www.sparkfun.com/products/10561. + +When students complete this course they will have a good understanding of computer science concepts that can serve as the foundation for future study. They will develop powerful design skills that they can use in future projects of all types, whether they are designing 3D printed prototypes or creating apps that serve a real world purpose. + +This course is targeted to middle school grades 6-8 (ages 11-14 years). It is also written for teachers who may not have a Computer Science background, or may be teaching an "Intro to Computer Science" course for the first time. + +This course takes approximately 14 weeks to complete, spending about 1 week on each of the first 11 lessons, and 3 weeks for students to complete the final project at the end. Of course, teachers should feel free to customize the curriculum to meet individual school or district resources and timeframe. + +## Overall Course Scope & Sequence: + +1. [Making](/test/courses/csintro/making) +2. [Algorithms](/test/courses/csintro/algorithms) +3. [Variables](/test/courses/csintro/variables) +4. [Conditionals](/test/courses/csintro/conditionals) +5. [Iteration](/test/courses/csintro/iteration) +6. [Review/Mini-Project](courses/csintro/miniproject) +7. [Coordinate grid system](/test/courses/csintro/coordinates) +8. [Booleans](/test/courses/csintro/booleans) +9. [Bits, bytes, and binary](/test/courses/csintro/binary) +10. [Radio](/test/courses/csintro/radio) +11. [Arrays](/test/courses/csintro/arrays) +12. [Independent final project](/test/courses/csintro/finalproject) + +Each of the 12 lessons is comprised of the following parts: + +* Topic Introduction +* Unplugged Activity (30 min) ̶ An offline game or activity that demonstrates the concept/topic +* micro:bit Activity (45-60 min) ̶- An activity that everyone makes on their micro:bit that teaches the skills learned in this lesson. +* Project (60-120 min) ̶- A prompt for an original project that each student will create to demonstrate their understanding of the skills and concepts covered in this lesson. +* Project Mods ̶ Examples of additional things students can do to extend the project +* Assessment ̶- A project rubric and guidance for grading the project. +* Standards ̶ -A list of [CSTA K-12 Computer Science Standards](https://www.csteachers.org/?page=CSTA_Standards) and/or concepts covered by this lesson. + +### Topic introduction + +The introduction to each lesson will tell you what learning objectives are covered in the lesson, and presents an overview of that lesson's topic. Some lessons have a specific activity that can help introduce the topic to students in a fun way. + +### Unplugged activity (30 min) +Each lesson starts with an unplugged activity, which doesn't require a computer or a micro:bit. It's a chance to get students up and moving around, and is designed to be a fun introduction to the computer science concept covered in that lesson. Unplugged activities are an important way to demonstrate new concepts in a tangible, often kinesthetic, way. Since so many computer-based topics are abstract, unplugged activities are very effective at fostering understanding that students will then demonstrate in later activities. + +### micro:bit activity (45–60 min) +Each lesson also contains a micro:bit activity, which we informally refer to as a "birdhouse" activity, after the innumerable wooden birdhouses so many of us made in wood shop as a way to master basic skills. Each lesson's micro:bit activity is an example that walks students step-by-step through building a project that demonstrates that lesson's topic. By the time students finish the activity, they will have written code that they can use in a different project of their own design. + +Some students will finish the activity more quickly than others. Those students can then be a helpful resource for their classmates, or they can challenge themselves by modifying, or "modding" the activity to do something different. We have provided examples and suggestions at the end of many of these activities, and feel free to suggest your own (or encourage your students to come up with their own ideas!) + +### Project (60–120 min) +After presenting the concept in an unplugged fashion, then walking students through a demonstration activity, it is time to challenge students to use those skills to create something that is creative and original. Students will be working on their projects in a "collaboratively independent" way, which means each student is responsible for turning in his or her own project, but are encouraged to work together and help each other while doing so. Some form of reflection is an important part of documenting the learning that has taken place, and it's a great idea to share out the final projects and reflections, either at an event or on a blog. + +There are also a series of Project Mods that students can do to extend the project they have created. These are useful for students who already have some experience with coding or who want an extra challenge. + +### Assessment +A rubric is provided for each project that can be customized according to what students are being asked to demonstrate. For the Activities we just expect students to do them, so those are fairly simple to check off. For the Projects, however, there is often a range of grades based on how closely the project meets the specifications of the assignment. + +### Standards +Where applicable, we have mapped each of the lessons to the [Computer Science Teachers Association (CSTA) K-12 Standards](https://www.csteachers.org/?page=CSTA_Standards), which are US nationally recognized standards for computer science education. diff --git a/docs/test/courses/csintro/iteration.md b/docs/test/courses/csintro/iteration.md new file mode 100644 index 00000000000..38a0d41cfc0 --- /dev/null +++ b/docs/test/courses/csintro/iteration.md @@ -0,0 +1,33 @@ +# Iteration & Looping + +![Guitar Picture](/static/courses/csintro/iteration/guitar.jpg) + +This unit introduces the concept of iteration—or ways to make things repeat. In MakeCode, this is accomplished with loop blocks. You will learn to code with three types of loop blocks as well as sprite and music blocks. In the project, you'll code your own unique program using loops, variables, and other blocks you've explored and learned. You'll design and build an object that uses sound, display, and motion in some way. To incorporate sound and motion, additional materials such as micro-servo motors (a small motor) and crocodile clips are recommended for Lessons B and C. + +## Lesson objectives + +You will... + +* Understand the value of iteration in programming +* Understand looping as a form of iteration +* Learn how and when to use the Looping blocks ‘repeat’, ‘while’, and ‘for’ +* Apply the above knowledge and skills to create a unique program that uses iteration and looping as an integral part of the program + +## Lesson structure + +* Introduction: Lather. Rinse. Repeat. +* micro:bit Activities: Code a sprite to walk a Square, travelling light, micro:bit alarm! +* Project: Get Loopy! +* Project Mods: Use servo motors to add a motion element to the project +* Reflection: Write a short journal entry +* Standards: Listed + +## Lesson plan + +1. [**Overview**: Iteration and looping](/test/courses/csintro/iteration/overview) +2. [**Activity**: Loops demos](/test/courses/csintro/iteration/activity) +3. [**Project**: Get loopy](/test/courses/csintro/iteration/project) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/iteration/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/iteration/activity.md b/docs/test/courses/csintro/iteration/activity.md new file mode 100644 index 00000000000..d86ef3c6df1 --- /dev/null +++ b/docs/test/courses/csintro/iteration/activity.md @@ -0,0 +1,275 @@ +# Activity: Loops demos + +For this lesson's coding activities, we’ll use three different loop blocks in Microsoft MakeCode: + +* ‘repeat’ block – This block repeats the code n number of times. + +* ‘while’ block – This block runs the code as long as the condition inside of it is true. + +* ‘for’ block – This block repeats the code n number of times but with a variable. + +We’ll do three coding activities to demonstrate how each type of loop block works. + +## Coding activity 1: Code a sprite to walk a square with the ‘repeat’ loop +In this example, you'll be coding Sprite to walk in a square. + +* In Microsoft MakeCode, start a new project and name it something like: **Sprite walking square**. You can leave the ‘on start’ block in the coding Workspace but can delete the ‘forever’ loop block. + +![Loops category](/static/courses/csintro/iteration/loops-category.png) + +* On start, we want the sprite to appear. To make this happen, go to the Variables Toolbox drawer, and select the “Make a Variable” button. Name the new variable *sprite* and select OK. Now, in the Variables Toolbox drawer, drag a ‘set sprite to’ block to the coding Workspace and drop it inside the ‘on start’ block. + +### Create a Sprite + +* Select the *Advanced* category at the bottom of the Toolbox. This will open up more of the Toolbox menu. Select the Game category and drag a ‘create sprite’ oval block to the coding Workspace. Drop it in the ‘set sprite’ block, replacing 0. + +![Game category](/static/courses/csintro/iteration/game-category.png) + +You should now see the ‘sprite’, or a red LED light, appear in the middle of the micro:bit simulator. + +On the face of the micro:bit is a 5 x 5 grid of LED lights. The X coordinates are the horizontal light positions that go from 0-4, and the Y coordinates are the vertical light positions that go from 0-4 as well. We can see from the code blocks that we’ve created our sprite at X, Y position (2, 2). If we want to start our sprite in the top left of the screen, we’ll have to change the starting coordinates to (0, 0). + +### Moving the Sprite + +Now let’s make our sprite move around the face of the micro:bit. We’ll activate this when we press a button. + +* From the Input Toolbox drawer, drag a ‘on button pressed’ block onto the workspace. + +We’ll need two more blocks from the Game menu. Referring to the pseudocode, see if the you can find the blocks you need for moving your sprite forward and turning your sprite. + +* From the Game Toolbox drawer, drag out a ‘sprite move by’ block and a ‘sprite turn right by’ block to the coding Workspace and drop into the ‘on button pressed’ block. + +* To make the sprite move from one side of the screen to the other (as though walking around a chair), we’ll need to move the sprite 4 places. So, change the value in the ‘sprite move by’ block from 1 to 4. + +* To make the sprite turn to walk a square, change the ‘turn right by’ degrees from 45 to 90. For now, it’s OK to leave the sprite turning right instead of left as we did in our pseudocode. + +### Using the 'Repeat' block + +Following our pseudocode, we could add three more Move and Turn blocks to make our sprite walk a square, but there is an easier, more efficient way to code this! By using a Repeat loop. + +* Select the Loops category in the Toolbox. Drag the ‘repeat’ block to the coding Workspace and place it around the sprite ‘move by’ and ‘turn’ blocks. + +Notice that the ‘repeat’ block contains a default value of 4. This means that it will repeat whatever blocks of code it contains four times. + +Go ahead and run the program. Make the sprite move by pressing button A in the simulator. + +What happened? Did you see the sprite move? No? Why? Because it happens so quickly, you can’t see the sprite appear. + +### Use Debug Mode + +A helpful feature of Microsoft MakeCode is **Debug Mode.** Select the bug icon under the micro:bit simulator. This will halt the execution (running) of the program and allow you to press the Step button to run your program line by line. It will also highlight parts of your code so you can see at each step which line of code is being processed. + +Now, run your program several more times. Do you see the different lines of your code highlighted as the program runs? Do you see the sprite move? + +### Add a pause + +So, the code is running and the sprite is moving! Sometimes we forget just how fast computers are. So that we can see the sprite move even in “regular” mode, let’s add a pause to our program right after each time the sprite moves. This will give our human eyes a chance to see it move. + +Select the bug icon again to turn off Debug Mode. + +* From the Basic Toolbox category, drag a ‘pause’ block to the coding window and add it to our ‘repeat’ block right after the ‘turn right by’ block. + +Solution link: [makecode.microbit.org/_D3k3ydYj28VY]() + +Download and run your program on the micro:bit. Now we can see the sprite move. It still moves pretty quickly, but at least we can see it move. + +> Optional Mod +> +> Try experimenting with changing the Pause value, the number of times to Repeat, or the number of spaces to move the Sprite to see how these changes affect your program. + + +## Coding activity 2: Code a traveling light with ‘for’ loops + +Now we’ll move on to code with the ‘for’ loop block. The ‘for’ block is useful when you have a variable in your loop that you want to change by a fixed amount within a specific range each time through a loop. What does this mean? Let’s look at an example. + +Let’s make an LED light move across the entire micro:bit display from left to right, top row to bottom row. + +### Pseudocode + +The pseudocode + +Our pseudocode for the first row might look like: + +``` +Turn led (x:0, y:0) on +Pause +Turn led (x:0, y:0) off +Pause +Turn led (x:1, y:0) on +Pause +Turn led (x:1, y:0) off +Pause +Turn led (x:2, y:0) on +Pause +Turn led (x:2, y:0) off +Pause +Turn led (x:3, y:0) on +Pause +Turn led (x:3, y:0) off +Pause +Turn led (x:4, y:0) on +Pause +Turn led (x:4, y:0) off +``` + +That’s a lot of code, and most of it repeats. It’s perfect for a loop! + +* What is the only variable that is changing in this pseudocode? _The value of the x coordinate_. +* How much is the value of the x coordinate changing each time? _The value of the x coordinate is changing by 1 each time_. +* What is the range of values for the x coordinate? _The range of values for the x coordinate is 0 through 4_. + +Now let’s code! + +### Create variables to hold the x and y position + +The first thing we’ll want to do is create some Variables to hold the X and Y position values. + +* Create a new project and name it something like: **Traveling light.** Then, select the Variables Toolbox drawer and select the **Make a Variable** button. + +* Name the new variable something like: **Xvalue**. Then, create another variable and name it something like: **Yvalue**. + +Notice that these variable blocks now appear in the Variables Toolbox drawer. Now, we need to set the starting value for the x and y variables to be 0. + +* From the Variable Toolbox drawer, drag two ‘set (variable)’ blocks onto the Workspace and drop into the ‘on start’ block. Then, in one of the ‘set (variable)’ blocks, use the dropdown menu to select the ‘Xvalue’ variable. + +### Code the loop for the x values + +* From the Loops Toolbox drawer, drag a ‘for’ block to the coding Workspace and drop it into the ‘forever’ loop. + +* Instead of the default ‘index’ variable, we’re going to use the ‘Xvalue’ variable that we created. From the Variables Toolbox drawer, drag the ‘Xvalue’ variable block out onto the Workspace and drop it into the ‘for loop’, replacing the ‘index’ block. + +In this way, each time we iterate through the ‘for’ loop, our ‘Xvalue’ variable will increment its value—starting from 0 and going up to 4. + +* We’ll plot and unplot the LED lights to turn them on and off. From the Led Toolbox drawer, drag a ‘plot’ block and an ‘unplot’ block to the coding Workspace. Drop both into the ‘for’ loop. + +* From the Basic Toolbox drawer, drag two ‘pause’ blocks to the coding Workspace. Drop them in the ‘for’ loop—one after the ‘plot’ block, and one after the ‘unplot’ block. This will slow things down a bit so we can see the lights turning on and off. + +* Change the value of the x coordinates in the ‘plot’ and ‘unplot’ blocks to the x coordinate value from the ‘for’ loop. From the Variables Toolbox drawer, drag two ‘Xvalue’ variable blocks onto the Workspace and drop one each into the x coordinate of the ‘plot’ block, and the x coordinate of the ‘unplot’ block. + +Now, you should see a light moving from left to right along the top row of the micro:bit simulator! + +### Code the loop for the y values + +To make our pattern continue through all the LEDs, we can change the value of the Y coordinate as well. To do this efficiently using the fewest lines of code, we can put a loop inside a loop. Loops inside other loops are known as nested loops. + +* Drag out another ‘for’ loop block from the Loops Toolbox drawer and place it around our original ‘for’ block, all within the ‘forever’ block. + +* From the Variables Toolbox drawer, drag out the ‘Yvalue’ variable block and drop into the outer ‘for’ loop, replacing the default ‘index’ variable. + +* Change the value of the y coordinates in the ‘plot’ and ‘unplot’ blocks to this same variable (just like we did for the x coordinate earlier). + +### Solution and discussion + +Solution link: [makecode.microbit.org/_Kf4hF0PHPaYz]() + +Be sure that you can explain the complete code in words: + +Here is what is happening to the values of the x and y coordinates as the program steps through each line and loop inside the ‘forever’ block: + +1. In the outer of the two for loops, the value of the y coordinate is set to 0. + +2. The nested inner loop then sets the value of the x coordinate to 0. + +3. The corresponding led at (x:0, y:0) is plotted and then unplotted. + +4. Then the value of the x coordinate is increased by 1, and step 3 runs again with the coordinates now at (x:1, y:0). + +5. Then the value of the x coordinate is increased by 1 again, and step 3 runs again with the coordinates now at (x:2, y:0). + +6. The inner loop keeps running like this until it has completed its loop with the value of the x coordinate now at 4. + +7. With the inner loop complete, the program now runs the second iteration of the outer loop, increasing the value of the y coordinate by 1, then back to the inner loop which runs 4 more times stepping through values for x from 0 through 4. + +## Knowledge Check + +### Use Debug to count loops: + +Use Debug Mode to watch the program step through the loops. Then, answer the following questions: + +1. By the end of the program run, how many times has the inner loop executed? + +2. Other than knowing that there are 25 LEDs and each is lit up once, how else can you figure this out? + +**Answers:** + +1. 25 +2. The outer loop loops 5 times altogether, once for every value of the y coordinate from 0 through 4. +Each time the outer loop runs, the inner loop runs 5 times, once for every value of the x coordinate from 0 through 4. **5** runs of the outer loop **x 5** runs of the inner loop **= 25 times** the inner loop executes. + +> Mods: +> +> Experiment with changing the parameters to see how these changes affect your program: +> +> * What happens if you switch the positions of the nested loops, so the outer loop loops through the xindex values and the inner loop loops through the yindex values? +* What happens if you remove the ‘unplot’ block and the ‘pause’ block below it? + +## Coding activity 3: Code a micro:bit alarm with a ‘while’ loop + +The ‘while’ block is useful when you want your program to loop until a certain event happens or a different condition is met. For example, maybe you want an alarm to sound if someone shakes your micro:bit. In order to turn the alarm off, you press the button A. Until you press the button, the alarm should continue to sound. You can use a ‘while’ block with a nested ‘repeat’ block. + +### The ‘while’ loop + +* Create a new project in MakeCode and name it: Alarm Clock. Delete the default ‘on start’ and ‘forever’ blocks from the coding Workspace. Then from the Input Toolbox drawer, drag an ‘on shake’ block onto the Workspace. + +* From the Loops Toolbox drawer, drag a ‘while’ block to the Workspace and drop it inside the ‘on shake’ block + +Notice that there is a condition attached to the ‘while’ loop. Recall from the previous lesson that a conditional expression may evaluate to true or false. In this case, the default block always evaluates to true, so this ‘while’ loop will repeat forever! + +* *Have you come across another block that loops over and over forever?* **Answer:** the ‘forever’ block + +### Alarm 'on shake' + +We'll come back to the while loop condition. For now, let's code our alarm sound. + +* From the Music Toolbox drawer, drag two ‘play tone’ blocks to the coding Workspace and drop them inside the ‘while’ loop. + +* In the ‘play tone’ blocks, use the dropdown menu to change the beat value to ‘½’ a beat. In the second ‘play tone’ block, change the tone from ‘Middle C’, to ‘High C’. + +Try your code in the Simulator. What happens when you shake the micro:bit? **Warning:** You may want to turn down the volume on your computer! + +Our alarm goes off, and because the ‘while’ loop repeats continuously, there’s no way to turn off our alarm! + +### Turn off alarm when press button + +Let’s add a condition to our ‘while’ loop that will turn off the alarm when the user presses a button. + +* From the Logic Toolbox drawer, scroll down to the Boolean section. Drag a ‘not’ hexagon block to the workspace. Drop it in the ‘while’ loop, replacing . + +* From the Input Toolbox drawer, drag the ‘button A is pressed’ hexagon-shaped block onto the Workspace and drop it into the ‘not’ block in the ‘while’ loop. + +**Hint:** Make sure you hover the ‘button A is pressed’ hexagon over the ‘not’ hexagon until only the empty hexagon shows the yellow outline so you don’t replace the entire ‘not’ hexagon. + +Now, our ‘while’ loop will only repeat as long as button A has not been pressed. + +### Complete Code + +Solution link: makecode.microbit.org/_2cxF9yfCc1Ax + +Test the code in the simulator. + +## Knowledge Check + +**Questions:** + +1. Match the following types of loops with their definitions:
+**Loops:**
for, while, repeat
+**Definitions:**
Runs a command n times
Runs a command n times with a variable to increment each time
Runs a command as long as a certain condition is met + +2. How could you rewrite this pseudocode with loops? + +``` +Step forward +Turn left +Step forward +Turn left +Step forward +Turn left +Step forward +Turn left +``` + +**Answers:** + +1. **Repeat loop:** Runs a command n times; **For loop:** Runs a command n times with a variable to increment each time; **While loop:** Runs a command as long as a certain condition is met + +2. Repeat 4 times: Step forward, Turn left \ No newline at end of file diff --git a/docs/test/courses/csintro/iteration/overview.md b/docs/test/courses/csintro/iteration/overview.md new file mode 100644 index 00000000000..28481e0ca5f --- /dev/null +++ b/docs/test/courses/csintro/iteration/overview.md @@ -0,0 +1,55 @@ +# Introduction + +In computer programming, **iteration** is the repetition of a sequence of commands. Computer programmers can use a special type of code called a loop around the commands they want to repeat as a form of iteration. A **loop** repeats code until a certain condition is met. + +Most of us use shampoo to wash our hair, yet have never read the instructions on a bottle of shampoo, because we already know how to use it. + +What algorithm could you write for shampooing your hair? + +Example: + +1. Wet hair. +2. Apply shampoo to wet hair +3. Scrub shampoo into hair +4. Rinse shampoo out of hair + +If you did read the instructions on a bottle of shampoo, you may read similar instructions as the ones you just wrote with one added step at the end. That step is ‘Repeat.’ +How does this one extra step affect the algorithm? + +![Shampoo flowchart](/static/courses/csintro/iteration/shampoo-flowchart.png) + +In computer programming, this is known as the ‘shampoo algorithm’ and is an example of a loop. It is also an example of an ‘infinite’ or ‘endless’ loop as the algorithm keeps repeating with no condition that ends the looping. + +![Iteration cartoon](/static/courses/csintro/iteration/iteration-cartoon.png) +DBwebsolutions.com + +‘Rinse. Repeat.’ has even become a meme and made its way into modern song lyrics. +What other common activities involve repetitive actions? _Examples: Singing (choruses repeat), dancing, school cheers, walking and running, exercise routines..._ + +## "Lather, Rinse, Repeat" + +See the below content for interesting applications of "repeat" loops: + +Lather, Rinse, Repeat: Hygiene Tip or Marketing Ploy +By Lauren Goldstein +October 11, 1999 + +[https://money.cnn.com/magazines/fortune/fortune_archive/1999/10/11/267035/]() + +(FORTUNE Magazine) – In Benjamin Cheever's novel The Plagiarist, a marketing executive becomes an industry legend by adding one word to shampoo bottles: REPEAT. He doubles shampoo sales overnight. + +This bit of fiction reflects a small yet significant eddy of U.S. consumer angst: If we REPEAT, are we or are we not playing into the hands of some marketing scheme? It turns out that in real life there's a reason you should repeat, or at least there used to be. In the 1950s, when shampoos began to be mass-marketed, we didn't wash our hair all that often--once or twice a week, as opposed to five times a week as most of us do now. Also, we used a lot more goop in our hair. It was the age of Brylcream and antimacassars, remember. Paul Wallace, the director of hair-care research and development for Clairol, says that when cleaning agents in shampoo came up against that amount of oil and goop, "it depressed the lather." A second application was needed to get the suds that consumers expected. Lots of suds mean that hair is already clean. Maybe too clean (there's no oil to break through), but consumers like it. + +FORTUNE asked Frederic Fekkai, the noted and notably expensive New York City hairdresser, what he thought about the double lather. He says, "Yesterday I put oil on my hair for a different look and went to a restaurant where the smoke was horrible. This morning I realized I had to do two shampoos." + +At any rate, Wallace says advances in shampoo technology mean that only one application of, for instance, Clairol's Herbal Essences is sufficient to break through the oiliest hair. The company has stricken the use of both REPEAT and REPEAT IF DESIRED from all Clairol products. Yet a lot of brands, like Suave by Unilever and L'Oreal, still say REPEAT. Others, like Unilever's Finesse and Revlon's Flex, opt for the less imperative REPEAT IF DESIRED. Procter & Gamble uses REPEAT IF NECESSARY on Pantene. + +Getting consumers to wash twice can, of course, increase sales--in ways one might not imagine. Double sudsing leads to dry hair, Fekkai points out, and that means more beauty products! "When you do two shampoos, even if you don't usually use a conditioner, you have to use a little," he says. "The conditioner becomes very important." REPEAT. FOLLOW WITH CONDITIONER. Words Cheever's marketer could have retired on. + +-- Lauren Goldstein + +![Shampoo bottle](/static/courses/csintro/iteration/shampoo.png) + +From Wikipedia ([https://en.wikipedia.org/wiki/Lather,_rinse,_repeat](https://money.cnn.com/magazines/fortune/fortune_archive/1999/10/11/267035/)): +Lather, rinse, repeat (sometimes wash, rinse, repeat) is an idiom roughly quoting the instructions found on many brands of shampoo. It is also used as a humorous way of pointing out that such instructions if taken literally would result in an endless loop of repeating the same steps, at least until one runs out of shampoo. It is also a sarcastic metaphor for following instructions or procedures slavishly without critical thought. + diff --git a/docs/test/courses/csintro/iteration/project.md b/docs/test/courses/csintro/iteration/project.md new file mode 100644 index 00000000000..f4d757c25fa --- /dev/null +++ b/docs/test/courses/csintro/iteration/project.md @@ -0,0 +1,65 @@ +# Project: Get loopy! + +![Birthday Card Project](/static/courses/csintro/iteration/birthday-card.jpg) + +In this project, you will create a program with loops, variables, and parameters, then design and build an object that uses the micro:bit program and sound, display, and motion in some way. + +## Project expectations + +Make sure your project meets these specifications: + +* Use at least three different loops in a meaningful way + +* Use unique variable names that clearly describe what the variable values hold + +* Use sound, display, and motion in a way that’s integral to the program + +* The program should compile and run as intended and include meaningful comments in the code + +* Provide the written Reflection Diary entry (which we’ll talk about after you complete your project) + +## Project ideas + +There are many different ways to use the three types of loop blocks. Consider following questions to prompt your brainstorming process: + +* How will you use loops to create something useful, entertaining, or interesting? + +* What might you make? + +Some project suggestions: + +* Create an animated gif (looping image that changes) and add music that matches. + +* Create an animation that repeats for one of the melodies included in MakeCode (like Happy Birthday). + +* Create different animations that run when different buttons are pressed. + +* Create an alarm that includes sound and images. What will set the alarm off? What will make the alarm stop sounding? + +* Use servo motors to create a creature that dances and changes its expression while a song plays. + +### Project example: Hat Man + +![Hat Man](/static/courses/csintro/iteration/hatman.png) +Hat Man Project + +[**micro:bit Hat Man**](https://youtu.be/Xvybu_T5IL8) +https://youtu.be/Xvybu_T5IL8 +
+ +[**micro:bit Hat Man - inside view**](https://youtu.be/ZfKgFQjygQQ) +https://youtu.be/ZfKgFQjygQQ +
+ +This project uses the micro:bit light sensor to display a happy face when it is sunny, and a frowning face when it is dark. The micro:bit is connected to a servo mounted on the inside of the container, and the smile and frown are attached to plastic coffee stirrers with tape and hot glue. + +## Journal Entry + +Write a short reflection of about 150–300 words, addressing the following points: + +* Explain how you decided on your particular "loopy" idea. What brainstorming ideas did you come up with? +* What type of loops did you use? For, While, and/or Repeat +* What was something that was surprising to you about the process of creating this program? +* Describe a difficult point in the process of designing this program, and explain how you resolved it. +* What feedback did your beta testers give you? How did that help you improve your loop demo? +* Publish your MakeCode program and include the link. \ No newline at end of file diff --git a/docs/test/courses/csintro/iteration/standards.md b/docs/test/courses/csintro/iteration/standards.md new file mode 100644 index 00000000000..9a2053ddc82 --- /dev/null +++ b/docs/test/courses/csintro/iteration/standards.md @@ -0,0 +1,7 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-05 Implement problem solutions using a programming language, including: looping behavior, conditional statements logic, expressions, variables, and functions. +* CL.L3A-03 Explain how sequence, selection, iteration, and recursion are building blocks of algorithms. + diff --git a/docs/test/courses/csintro/iteration/unplugged.md b/docs/test/courses/csintro/iteration/unplugged.md new file mode 100644 index 00000000000..4a4e9731cbd --- /dev/null +++ b/docs/test/courses/csintro/iteration/unplugged.md @@ -0,0 +1,49 @@ +# Unplugged: Walk a square + +![Chair with Pseudocode on the board.](/static/courses/csintro/iteration/chair-pseudo.png) + +## Your Task +In this activity, you’ll guide yourself step-by-step through a simple exercise, then figure out how to make your instructions shorter and more efficient by using a loop. + +## WHat You'll Do + +* Place a chair in front of you. +* Stand at the back right side of the chair, facing forward. +* Now, think about what instructions you would need to give yourself in order to walk around the chair and end up exactly where you started. If you’re not sure, try walking around the chair once to get an idea of the steps. + +##Writing the Instructions + +1. Step forward +2. Turn left +3. Step forward +4. Turn left +5. Step forward +6. Turn left +7. Step forward +8. Turn left +![Square walking pattern](/static/courses/csintro/iteration/square-walk.png) + +That's eight lines of instructions for you to follow! + +## Make It More Efficient +Now, look at the instructions you wrote. Do you notice any steps that repeat? + +Hint: What actions do you keep doing? (1) Step forward. (2) Turn left. How many times do you repeat these steps? (Answer: Four times). + +Here’s the key: Whenever you see repeated steps, you can use a loop to simplify your instructions. How could you rewrite your directions? It might look like this: + +Repeat 4 times: Step forward, Turn left + +## Test the New Instructions +Now, follow your new, shorter set of instructions. Did it work? Great! You’ve just taken eight lines of instructions and turned them into three by using a loop! + +## Why Fewer Instructions Matter +Think about why using fewer instructions can be helpful. Some reasons could be: + +* It saves time +* It’s less to write down +* There’s less chance of making mistakes +* It’s easier to read +* It’s faster to find and fix problems + +You’ve just learned how to make your instructions (or code) more efficient by using loops! \ No newline at end of file diff --git a/docs/test/courses/csintro/making.md b/docs/test/courses/csintro/making.md new file mode 100644 index 00000000000..47d373830d3 --- /dev/null +++ b/docs/test/courses/csintro/making.md @@ -0,0 +1,31 @@ +# Making with micro:bit + +This Lesson introduces the micro:bit as a piece of hardware that has a specific size and weight, and +generally must be supported and incorporated as an essential component of a tangible artifact. Focus +on incorporating the physical micro:bit into a basic making activity. + +![micro:bit board](/static/courses/csintro/making/microbit-board.png) + +## Lesson objectives +Students will... + +* Exercise creativity and resourcefulness by coming up with ideas for using simple household materials to accommodate the micro:bit’s size and weight in many different ways. +* Test and iterate using different materials and sizes in order to create an optimal design to house the micro:bit and battery pack +* Learn how to download programs and move them to the micro:bit file to run on the micro:bit. +* Use the design thinking process to develop an understanding for a problem or user need. +* Apply their understanding in a creative way by making a “micro:pet” creature. + +## Lesson plan + +* [**Introduction**: The micro:bit is for making](/test/courses/csintro/making/introduction) +* [**Unplugged**: Design Thinking](/test/courses/csintro/making/unplugged) +* [**Activity**: MakeCode download](/test/courses/csintro/making/activity) +* [**Project**: micro:pet (including mods and rubric)](/test/courses/csintro/making/project) + +## Flipgrid + +The [Flipgrid](https://info.flipgrid.com/) topic for the **Making** lesson: https://flipgrid.com/5773f935 + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/making/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/making/activity.md b/docs/test/courses/csintro/making/activity.md new file mode 100644 index 00000000000..aa81a09f8b7 --- /dev/null +++ b/docs/test/courses/csintro/making/activity.md @@ -0,0 +1,91 @@ +# Activity: Installing a program + +**micro:bit activity:** Installing a Microsoft MakeCode Program on the micro:bit + +**Objective:** Learn how to download programs from the MakeCode tool. + +**Overview:** Students will create a simple program in Microsoft MakeCode and download it to their micro:bit using a USB cable. + +For this activity, students will each need a micro:bit, a micro-USB cable, a computer, and a battery pack. + +![micro:bit kit](/static/courses/csintro/making/microbit-kit.jpg) + +Open a browser window to [makecode.com](https://makecode.com), and select the micro:bit code editor + +![micro:bit card icon](/static/courses/csintro/making/microbit-card-icon.png) + +Create this program by dragging out blocks from the ``||basic:Basic||`` Toolbox category. Put the ``||basic:show icon||`` and ``||basic:pause||`` blocks in the ``||basic:forever||`` loop. Type in `5000` for the time in each ``||basic:pause||``. Set one icon to a ``Happy`` face and the other to a ``Sad`` face. It shows a repeating series of faces: + + +```blocks +basic.forever(() => { +   basic.showIcon(IconNames.Happy) +   basic.pause(5000) +   basic.showIcon(IconNames.Sad) +   basic.pause(5000) +}) +``` + +At the bottom of of the editor, name the project as "Happy Sad Face" and click on the disk icon to save the project. + +![Save file](/static/courses/csintro/making/happy-sad-file.jpg) + +Now, click on **Home** to go back to the home screen. + +At the right of **My Projects** on the home screen, click on the **Import** button and then click on **Import File** in the import dialog. Select the file that you just saved to your computer in the previous step. + +![Import button](/static/courses/csintro/making/import-button.png) + +![Import file](/static/courses/csintro/making/import-file.png) + +The program should again look like the following in MakeCode: + +```blocks +basic.forever(() => { +   basic.showIcon(IconNames.Happy) +   basic.pause(5000) +   basic.showIcon(IconNames.Sad) +   basic.pause(5000) +}) +``` + +## 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/making/ide-tour.png) + +The features highlighted here are: + +1. Go to the **Home Screen** to start a new project or open an existing project +2. **Simulator** shows what your program will look like when running on a @boardname@ +3. **Hide** or **Show** the simulator pane +4. Program in either **Blocks** or **JavaScript** +5. Programming **Workspace** where you will build you program +6. Blocks **Toolbox** +7. **Download** your program to the @boardname@ +8. Name your project and **Save** it on your computer + +The color of the blocks identifies their category. All of the blocks that make up the program above come from the **Basic** Toolbox category, which is light blue. + +## Downloading a MakeCode program to the micro:bit + +To download the file to your micro:bit, you must connect it to your computer’s USB port using a micro-USB cable. The micro:bit will draw power from your computer through the USB connection, or you can connect an optional battery pack so it can function even after it is unplugged from the computer. Once plugged in, the micro:bit shows up on your computer like a USB flash drive. + +![USB connection](/static/courses/csintro/making/microbit-usb.jpg) + +Click the purple Download button in the lower left of the MakeCode screen. This will download the file to your computer, to the location where your browser is set to save downloads. + +![Download button](/static/courses/csintro/making/download-button.png) + +To move the program to your micro:bit, drag the downloaded "microbit-xxxx.hex" file to the MICROBIT drive, as if you were copying a file to a flash drive. The program will copy over, and it will begin running on the micro:bit immediately. + +![micro:bit drive](/static/courses/csintro/making/microbit-drive.jpg) + +The micro:bit will hold one program at a time. It is not necessary to delete files off the micro:bit before you copy another onto the micro:bit; a new file will just replace the old one. + +For the next project, your students should attach the battery pack (it takes 2 AAA batteries) to the micro:bit using the white connector. That way they can build it into their design without having to connect it to the computer. + +![Battery pack](/static/courses/csintro/making/battery-pack.jpg) diff --git a/docs/test/courses/csintro/making/introduction.md b/docs/test/courses/csintro/making/introduction.md new file mode 100644 index 00000000000..afdf220f51b --- /dev/null +++ b/docs/test/courses/csintro/making/introduction.md @@ -0,0 +1,24 @@ +# Introduction + +The micro:bit is a great way to teach the basics of programming and computer science. The Microsoft MakeCode block-based coding environment is a powerful and intuitive way to make the micro:bit react to all sorts of input, and you can introduce fundamental concepts such as iteration, conditional statements, and variables using MakeCode. + +Students often focus primarily on the 5x5 LED screen for providing output. Although this is the most directly accessible way to see a reaction to some kind of input, there are many more creative possibilities when you encourage your students to see the micro:bit as a “brain” that can control physical, tangible creations. + +These creations don’t have to be complex or highly technical. It’s great to have students building with common household supplies. Because the micro:bit is so lightweight, and supports so many sensors, it can be incorporated easily into a physical design as long as students plan ahead for its size and weight. One of the first questions you might ask students is “Where does the micro:bit fit in your creation?” + +In this first lesson’s project, we focus on making something creative that features the micro:bit as its “face”. We purposely start this course with a lesson on Making and the physical nature of the micro:bit, because it is important to set the tone for the whole course that this is a class about making, building, crafting and construction. It helps if you have an art room available where kids can work, or arts and crafts supplies in your classroom that kids can use to build. + +Some common making supplies to gather: + +* pizza boxes +* scrap cardboard +* colored construction paper +* colored duct tape +* scissors +* pipe cleaners +* stickers +* feathers +* string +* markers + +![Maker materials](/static/courses/csintro/making/maker-materials.png) \ No newline at end of file diff --git a/docs/test/courses/csintro/making/project.md b/docs/test/courses/csintro/making/project.md new file mode 100644 index 00000000000..7f124e2b637 --- /dev/null +++ b/docs/test/courses/csintro/making/project.md @@ -0,0 +1,69 @@ +# Project: micro:pet + +## Project + +This project is an opportunity for students to create a micro:pet for the partner they interviewed in the Unplugged activity. They should review their notes and try to summarize what their partner finds appealing in a pet. Then, they should use whatever materials are available to create a prototype of a pet their partner would like. + +We often ask students to sketch a few designs on paper first, then consult with their partner to see which aspects of those designs they find most appealing. The purpose of prototyping is to gather more feedback to help you in your final design (“I like this part from Idea A, and I like this part from Idea B…”) + +Build a micro:pet that: +* Matches your partner’s needs +* Supports the micro:bit and its battery pack +* Allows you to easily access the micro:bit to turn it on and off + +Your design should use whatever materials are available to support the micro:bit so that its face is showing. You can be creative and decide how to mount the board, and how to decorate your critter. + +Think about the following questions when you construct it: +* Will it be an animal? A plant? A robot? A bug? +* Will it have any moving parts? +* If it moves, how can you hold the micro:bit securely? + +Some photos of sample micro:pets below! + +## Ideas for Mods + +* Find a way to make part of the animal move. +* Give your animal a natural habitat. +* Create a way to carry your animal. +* Create an animal that reacts when you pet it or move it (find a way to detect when the micro:bit is moved or when its position changes in a certain way.) + +## Reflection +Have students write a reflection of about 150–300 words, addressing the following points: +* Summarize the feedback you got from your partner on your idea. How would you revise your design, if you were to go back and create another version? +* What was it like to have someone designing a pet for you? Was it a pet you would have enjoyed? Why or why not? What advice did you give them that might help them redesign? +* What was it like to interview your partner? What was it like to be listened to? +* What was something that was surprising to you about the process of designing the micro:pet? +* Describe a difficult point in the process of designing the micro:pet, and explain how you resolved it. + +## Rubric +For creative projects such as these, we normally don’t use a qualitative rubric to grade the creativity or the match with their partner’s needs. We just check to make sure that the micro:pet meets the required specifications: +* Program properly downloaded to micro:bit +* micro:bit supported so the face is showing +* micro:bit can be turned on and off without taking critter apart +* Turned in notes on interview process +* Written reflection (prompt is above) + +## micro:pet Examples + +![A dog micro:pet](/static/courses/csintro/making/micropet-dog.jpg) +Dog + +https://youtu.be/2ZCDB-a_uRY +micro:pet Fish Tank + + +![A piggy bank micro:pet](/static/courses/csintro/making/micropet-piggy-bank.jpg) +Pink Piggy + +![A ladybug micro:pet](/static/courses/csintro/making/micropet-ladybug.jpg) +Ladybug + +![A caterpiller micro:pet](/static/courses/csintro/making/micropet-caterpillar.jpg) +Caterpillar + +![A fox micro:pet](/static/courses/csintro/making/micropet-fox.jpg) +Fox + +![A robot micro:pet](/static/courses/csintro/making/micropet-robot.jpg) +Robot + diff --git a/docs/test/courses/csintro/making/standards.md b/docs/test/courses/csintro/making/standards.md new file mode 100644 index 00000000000..b139c148815 --- /dev/null +++ b/docs/test/courses/csintro/making/standards.md @@ -0,0 +1,6 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* 2-A-2-1 Solicit and integrate peer feedback as appropriate to develop or refine a program. +* 2-A-6-10 Use an iterative design process (e.g., define the problem, generate ideas, build, test, and improve solutions) to solve problems, both independently and collaboratively. diff --git a/docs/test/courses/csintro/making/unplugged.md b/docs/test/courses/csintro/making/unplugged.md new file mode 100644 index 00000000000..9afd8edcc5b --- /dev/null +++ b/docs/test/courses/csintro/making/unplugged.md @@ -0,0 +1,49 @@ +# Unplugged: Design Thinking + +![Design thinking](/static/courses/csintro/making/design-thinking.png) + +**Objective:** To introduce a process of design that starts with talking to one another. Whatever you build with code should serve a purpose or fill a need. Sometimes what you build will make the world more beautiful, or help somebody else. Our design process, based on a process called design thinking, can give students a specific framework for thinking purposefully about design. + +**Overview:** In this activity, students will interview each other about their ideal pet. They should take notes. +The first step in coding by design involves understanding someone else’s need. Then, you can create prototypes that get you closer and closer to the best solution. + +**Materials:** Pairs of students, something to take notes on + +**Getting started:** +Pair students up with each other. One is Student A, the other is Student B. The goal of this activity is to gather information from their partner that will help them to design a micro:bit pet for their partner. + +**5 minutes:** Student A interviews Student B. The goal is to find out what Student B considers to be their ideal pet. Student A should mostly listen, and ask questions to keep Student B talking for the entire time. Here are some questions to start with: + +* Do you have a pet? What is it? +* What do you like about your pet? What do you dislike? +* Is there anything you wish your pet could do? Why? +* Tell me about your ideal pet. + +**5 minutes:** Student B interviews Student A, as above. + +The goal is to find out more about your partner by asking questions. Try to ask “Why?” as much as possible. Your partner will tell you about his or her ideal pet, but you are really finding out more about your partner’s likes and dislikes. When we design, we create real things for real people. So we need to start with understanding them first. + +**5 minutes:** Student A and Student B review their notes, and circle anything that seems as if it will be important to understanding how to create the ideal pet for their partner. Circle ideas, advice, anything that could be helpful when they start building. Then, they should use what they have discovered about their partner to fill in the blanks: + +"My partner needs a `__________________` because `__________________`." + +This definition statement should draw some conclusions about their partner's need based on the conversation they have had with that person. + +**5 minutes:** Student A and Student B sketch at least 5 ideas of pets that would meet their partner's needs. Stick figures and diagrams are okay. At this point, quantity is more important than quality. Students shouldn't limit themselves to real animals; unicorns and mashups are totally fine! + +Make sure students keep their notes and sketches! They will use them in the project for this lesson. + +## Examples + +![Design thinking sketch 1](/static/courses/csintro/making/dt-sketch1.jpg) + +![Design thinking sketch 2](/static/courses/csintro/making/dt-sketch2.jpg) + +![Design thinking sketch 3](/static/courses/csintro/making/dt-sketch3.jpg) + +![Design thinking sketch 4](/static/courses/csintro/making/dt-sketch4.jpg) + + + + + diff --git a/docs/test/courses/csintro/miniproject.md b/docs/test/courses/csintro/miniproject.md new file mode 100644 index 00000000000..669d4326073 --- /dev/null +++ b/docs/test/courses/csintro/miniproject.md @@ -0,0 +1,17 @@ +# Mini-project + +![Ideas](/static/courses/csintro/miniproject/problem-solving.png) + +In this unit, we’re going to review the stuff we’ve covered over the past few weeks, and give you some ideas for an independent “mini-project” that you’ll work on in the next few sessions. We’ll also show you a framework to help you stay on track with your work and give you some structure to guide your progress. + +This project is designed to remind you that how you solve problems is just as important as getting the right answer. Programming is all about being patient and working through challenges, and it's really important to recognize and reward the effort and thinking you put into solving problems—not just whether you got it right! + +## Lesson plan + +1. [**Review**: Looking back at what we've learned so far](/test/courses/csintro/miniproject/review) +2. [**Project**: Mini-project](/test/courses/csintro/miniproject/project) +3. [**Activity**: Collaboratively Independent (Tips for teachers)](/test/courses/csintro/miniproject/activity) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/miniproject/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/miniproject/activity.md b/docs/test/courses/csintro/miniproject/activity.md new file mode 100644 index 00000000000..c24695f6434 --- /dev/null +++ b/docs/test/courses/csintro/miniproject/activity.md @@ -0,0 +1,38 @@ +# Activity: Collaboratively independent + +Teachers want their students to collaborate on projects but they also want to be able to hold them accountable for getting their work done. Many teachers struggle with assessing exactly how much each individual contributed to a group project, as well as making sure that everyone does his or her “fair share”. + +The Mini-Project (and the Final Project) are not group projects. Students are asked to propose their own independent project and are expected to get it done. But they are not on their own in this process! We build in frequent opportunities for students to collaborate and share the collective knowledge of the class as they go. We ask them to be “collaboratively independent.” + +Here is how we structure our classes: + +## Beginning of class + +For groups of 15 or so, have students each **_briefly_** (no more than 30 seconds or so) report on their progress in front of the group: +* One-line description of project +* Their progress so far +* Something they are going to work on figuring out today + +It is important that everyone else is listening to each project and volunteering their help or solutions if they are figuring out the same thing or if they have solved that problem in a previous class. + +>Example: +_I’m working on a pinball machine. So far I have done the board and the ramp. Today I am going to be working on wiring the bumpers so that when the ball hits the bumper, the micro:bit detects it and displays the score._ + +>Sample response from a classmate: +_Yesterday I wired up my targets so that when you throw a ball it keeps score. I can show you how I did it._ + +Ideally students who are working on projects should be aware of what other students are working on and what they are figuring out. It creates more opportunities for collaboration in the classroom and can encourage students to seek help from each other rather than all waiting in line to talk to you. + +It’s important to hear from everybody but it shouldn’t take more than five or ten minutes. For groups larger than 15 or 20 students, you may want to split them into two or three larger groups and have them report out to each other. + +![Quick progress report](/static/courses/csintro/miniproject/quick-progress-report.png) + +## During class +This is a time to circulate and check in with students individually, starting with those students who seem to still be stuck from last time. For the most part, students should be working on their projects in small groups, helping each other wherever and whenever possible. + +## End of class +About ten minutes before the end of class, you can have students do a “work-in-progress” report. Gather the students together and have them move from table to table while each student presents one thing that he or she figured out during the class. This is really an informal presentation, and it is understood that it is not finished at all; it is still a “work in progress.” But everyone needs to show something, and the entire group needs to move as one throughout the classroom, almost like physicians making rounds in a hospital. This is an important way to spread ideas throughout the classroom, and to “cross-pollinate” with helpful tips and techniques. + +Work-in-progress reports should be short, no more than twenty or thirty seconds. If you have a large class, you might divide the class into several large groups and have them present to each other. + +![Work in progress report](/static/courses/csintro/miniproject/work-in-progress-report.png) diff --git a/docs/test/courses/csintro/miniproject/project.md b/docs/test/courses/csintro/miniproject/project.md new file mode 100644 index 00000000000..830a9f9f170 --- /dev/null +++ b/docs/test/courses/csintro/miniproject/project.md @@ -0,0 +1,84 @@ +## Project: Mini-Project + +This project should take approximately a week to complete. + +The mini-project is an opportunity for you to design a project that serves a purpose by solving a problem or filling a need. It is also an opportunity to do two things: + +* Show what you know +* Learn something new + +Ideally, there should be a maker component to this project. This is a real world component that works with the code on the micro:bit to do something unique. + +## Assignment + +* Create an original project using the micro:bit. +* Incorporate a physical component to the project. +* Demonstrate the use of one of the following concepts: + +>* Input / Processing / Output +* Variables +* Simple Circuits +* Iteration/Loops +* Conditional Statements + +## Project ideas + +* Make a “New and Improved” Fidget Cube +* Make a Moving Monster +* Make a musical instrument +* Fishing Game +* Make an Air Guitar (uses while loop to do tempo and pitch) +* Screensaver +* Screensaver that uses other inputs to draw +* Interactive book +* Binary Clock or some other way to represent numbers visually + +View projects at the following sites for inspiration: + +* https://microbit.org/projects/make-it-code-it/ +* [Projects](/projects) + +## Examples + +![Toss the ball project](/static/courses/csintro/miniproject/toss-the-ball.jpg) +Toss the Ball + +This is a skill game in which an aluminum foil ball is thrown into a plastic cup. Copper tape lining the sides and bottom of the cup completes the circuit when the ball touches it. + +[**micro:bit Bullseye Project**](https://youtu.be/NZUpoSixf4E) +https://youtu.be/NZUpoSixf4E + +This is a skill game in which tennis balls are thrown underhand at one of the three rings, which are lined with aluminum foil so they complete a circuit underneath when the ball makes contact with the ring. + +[**micro:bit Storybook**](https://youtu.be/yg1NNLMqa9c) +https://youtu.be/yg1NNLMqa9c + +This is a prototype of a storybook that could use the micro:bit to display animations for part of the story. Copper tape is used on the underside of the paper flaps to make contact between the GND pin and each of the other pins in sequence. + +## Work logs + +Because much of the benefit of completing a mini-project like this comes from working through problems, you should consider keeping a work log. + +A work log is a short, bullet point list of what you worked on, and how long it took. Stick to the facts. It shouldn’t take more than thirty seconds or so to write up a work log. Try to do one for every class. A shared Microsoft OneNote notebook is a great way to keep a work log that can be updated regularly. + +### Sample Work Log +>**_April 11_**
+_20 min. Created code that reacts when pins P0 and P1 are pressed._
+_0 min. Talked with Mr. Kiang about how to attach wires so they won’t fall off_
+_20 min. Put target back together with pins_
+_10 min. Helped Cody with attaching his scoreboard_ + +## Journal Entry + +At the end of the week, compose a final journal reflection that summarizes the process of your learning over the course of the week. You should go back through your work and discuss the following: + +* Talk about one challenge you faced in creating this project, either a challenge in coding or in making the artifact. How did you overcome this challenge? +* What did you demonstrate that you already knew? +* What was the new thing you learned in order to make this? How did you learn about it? +* Was anyone particularly helpful to you along the way? Who and how? +* Describe one specific thing you are proud of in this project. +* What would you do differently next time? +* If you had another week to work on this project, what might you add or improve? + +Sample Reflection (excerpt) +>_“I spent this week finishing up little details with my program, making it work better and more user friendly. The part that surprised me the most was the little things that kept popping into my head, little suggestions that could potentially be good to add, but might not be necessary or even useful. At the beginning of the assignment, I just added them as quickly as I thought of them, but as the project neared the midpoint and conclusion, I find myself considering if I actually need them (as previous additions have been since quickly deleted). Another thing that I find interesting about this is that it is a rather specialized project. Not many people would use it except for me. However, this is supposed to be easily used by other people, so I have to take them into consideration as I design the project. I also realized that I had, at some point, broken part of my code without realizing it, so I now have to fix part of it. The reason that it is a problem is because I added a lot of code at once without deleting it, which is unfortunate. Next time I will add small amounts of code and test it first.”_ diff --git a/docs/test/courses/csintro/miniproject/review.md b/docs/test/courses/csintro/miniproject/review.md new file mode 100644 index 00000000000..b0b660673ab --- /dev/null +++ b/docs/test/courses/csintro/miniproject/review.md @@ -0,0 +1,25 @@ +# Review + +![Take another look](/static/courses/csintro/miniproject/review.png) + +Take this time to review the concepts we have covered so far. + +## Making + +The micro:bit is very effective at bringing real things to life. It can be supported in a cardboard holder, attached to a wand, or even sewn into fabric. The design thinking process is a helpful way to gather more information about the person who will be using whatever you are designing. + +## Processing and algorithms + +The code you write for the micro:bit processes data from its inputs, and outputs it in some way. An algorithm is a series of specific instructions, or steps, that solve a problem or accomplish a task. + +## Variables + +Variables store information so that it can be accessed or referenced later. Some variables hold information that changes, and some hold information that stays constant. It is important to name your variables with something that explains what type of information it holds. Using variables in your code allows you to create algorithms that use mathematical operations to perform the same calculations every time, even when the values of your variables are different. + +## Conditionals + +Conditional statements tell the computer when to do something. They are used to create branches, or decision points, where a program can choose one path or the other based on the values of certain variables, or based on data from the micro:bit’s inputs. Conditional statements can be nested inside one another so that both conditions must be true in order for the enclosed statements to run. + +## Iteration and looping + +Portions of your code can be made to run over and over by using a Repeat or a For block loop. This allows you to iterate over several different variables, or items in a group, and do something to each of them. You can also combine a conditional statement and a loop by using a While block, which will repeat until a certain condition becomes true. \ No newline at end of file diff --git a/docs/test/courses/csintro/miniproject/standards.md b/docs/test/courses/csintro/miniproject/standards.md new file mode 100644 index 00000000000..574a99a8976 --- /dev/null +++ b/docs/test/courses/csintro/miniproject/standards.md @@ -0,0 +1,7 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities. +* CL.L2-04 Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.    +* CL.L2-05 Implement problem solutions using a programming language, including: looping behavior, conditional statements, logic, expressions, variables, and functions. diff --git a/docs/test/courses/csintro/radio.md b/docs/test/courses/csintro/radio.md new file mode 100644 index 00000000000..ceec0f93dd5 --- /dev/null +++ b/docs/test/courses/csintro/radio.md @@ -0,0 +1,35 @@ +# Radio and Communication + +![Combo Box Example](/static/courses/csintro/radio/combo-box.png) + +This lesson covers the use of more than one micro:bit to share and combine data. Students will explore a complex epidemiological program (Infection) that demonstrates the Radio functionality of the micro:bit. Students will send and receive numbers and strings in a series of guided activities. Finally, students are asked to collaborate so that they can share their micro:bits and create a project together. + +## Lesson objectives + +Students will... +* Understand how to use the Radio blocks to send and receive data between micro:bits +* Understand the specific types of data that can be sent over the Radio + +## Lesson structure + +* Introduction: Radio & communication +* Unplugged Activity: Infection simulation +* micro:bit Activity: Marco Polo & Morse Code +* Project: Radio +* Assessment: Rubric +* Standards: Listed + +## Lesson plan + +1. [**Overview**: Radio and communications](/test/courses/csintro/radio/overview) +2. [**Unplugged**: Infection simulation](/test/courses/csintro/radio/unplugged) +3. [**Activity**: Marco Polo and Morse code](/test/courses/csintro/radio/activity) +4. [**Project**: Radio project](/test/courses/csintro/radio/project) + +## Flipgrid + +The [Flipgrid](https://info.flipgrid.com/) topic for the **Radio** lesson: https://flipgrid.com/eb9af729 + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/radio/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/radio/activity.md b/docs/test/courses/csintro/radio/activity.md new file mode 100644 index 00000000000..4d9d1e67c32 --- /dev/null +++ b/docs/test/courses/csintro/radio/activity.md @@ -0,0 +1,321 @@ +# Activity: Marco Polo and Morse code + +![Marco Polo Cartoon](/static/courses/csintro/radio/marco-polo.png) + +Guide the students in creating programs that use the radio communication blocks to send and receive data between two micro:bits. + +Notes: +* When using the radio blocks, the micro:bit simulator will show two micro:bits +* In the simulator, a radio transmission icon will appear in the top right corner of the micro:bit. The icon will light up as the micro:bit is transmitting data. +* In the simulator, all the code in the coding workspace runs on both virtual micro:bits. You should include for how to send data as well as what to do when it receives data. + +## Marco Polo +Send and receive strings between micro:bits. +On button A pressed, we will send the string Marco and on button B pressed we will send the string Polo. + +* When communicating between micro:bits, it is important that the micro:bits involved are all using the same group ID. So, the first thing we will do is set the group ID number. +* From the Radio menu, drag a 'radio set group' block to the coding workspace and place the block into the on start block. +* In the 'radio set group block', leave the default value of 1 for the group ID + +```blocks +radio.setGroup(1) +``` + +* Drag 2 'on button pressed' blocks to the coding workspace +* Leave one with the default value A and change the other button to B +* From the Radio Toolbox drawer, drag 2 'radio send string' blocks to the coding workspace +* Place one 'radio send string' block into the 'on button A pressed' block, and the other'radio send string' block into the 'on button B pressed' block +* In the 'on button A pressed' block, change the default empty string value of the 'radio send string' block to the string "Marco" +* In the 'on button B pressed' block, change the default empty string value of the 'radio send string' block to the string "Polo" + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendString("Marco") +}) +input.onButtonPressed(Button.B, () => { + radio.sendString("Polo") +}) +``` +* To display the data sent between the micro:bits, drag an 'on radio received receivedString' block to the coding workspace +* From the Basic Toolbox drawer, drag a 'show string' block into the 'on radio received receivedString' block +* From the 'on radio received receivedString' block, drag the 'receivedString' variable block into the default string value of "Hello" in the 'show string' block + +Here is the complete Marco Polo program: + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendString("Marco") +}) +radio.onReceivedString(function (receivedString) { + basic.showString(receivedString) +}) +input.onButtonPressed(Button.B, () => { + radio.sendString("Polo") +}) +radio.setGroup(1) +``` + +## Mods +* Add a 'show leds' block to the 'on start' block. We created an image of the initials MP. +* From the Music Toolbox drawer, drag 2 'play tone' blocks to the coding workspace. See [hack your headphones](/projects/hack-your-headphones) for how to connect a speaker or headphones to the micro:bit. +* Drag one of the 'play tone' blocks to the 'on button A pressed' block, and the other one to the 'on button B pressed' block. +* Change the default value in the 'play tone' block that is inside the 'on button A pressed' block to the value Low C. + +Complete Marco Polo program with mods: + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendString("Marco") + music.playTone(131, music.beat(BeatFraction.Whole)) +}) +radio.onReceivedString(function (receivedString) { + basic.showString(receivedString) +}) +input.onButtonPressed(Button.B, () => { + radio.sendString("Polo") + music.playTone(262, music.beat(BeatFraction.Whole)) +}) +radio.setGroup(1) +basic.showLeds(` + # . # # # + # # # # # + # . # # # + # . # # . + # . # # . +`) +``` + +## Morse Code + +Send and receive numbers between micro:bits. +Depending on the button pressed, send a different number value between micro:bits. On receiving a number, display a different image unique to the number sent. One number will represent a dot, another a dash and another a space or stop. + +![Morse code alphabet](/static/courses/csintro/radio/morse.png) + +* Set the group ID number. +* Add a 'show string' block to the 'on start' block, to identify the program. +* We choose to change the default string value of "Hello" to the value "Morse Code" + +```blocks +radio.setGroup(1) +basic.showString("Morse Code") +``` + +* Drag 3 'on button pressed' blocks to the coding workspace. +* Leave one with the default value A, change the value in the second block to B, and change the value in the third block to A+B. +* From the Radio Toolbox drawer, drag 3 'radio send number' blocks to the coding workspace. +* Place one radio send number block into each of the 'on button pressed' blocks. +* In the 'on button A pressed' block, leave the default number value of the 'radio send number' block as 0. +* In the 'on button B pressed' block, change the default number value of the 'radio send number' block to the value 1. +* In the 'on button A+B pressed' block, change the default number value of the 'radio send number' block to the value 2. + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendNumber(0) +}) +input.onButtonPressed(Button.B, () => { + radio.sendNumber(1) +}) +input.onButtonPressed(Button.AB, () => { + radio.sendNumber(2) +}) +``` + +* From the Radio Toolbox drawer, drag an 'on radio received receivedNumber' event handler to the coding workspace. +* Since we will display a different image depending on the number value received, we need a logic block. +* From the Logic Toolbox drawer, drag an 'if...then' block to the coding workspace and place it in the 'on radio received receivedNumber' event handler. + +In order to know whether to display a dot, a dash, or a space/stop image, we need to compare the number received to the values 0, 1, and 2. + +* From the Logic Toolbox drawer, drag a 0=0 comparison block into the coding workspace. +* Replace the default value 'true' of the 'if...then' block with the comparison block. +* From the 'on radio received receivedNumber' block, pull down the 'receivedNumber' variable block and drop it into the first slot of the comparison block +* Leave the righthand side default value of zero in the 0=0 block. + +```blocks +radio.onReceivedNumber(function (receivedNumber) { + if (receivedNumber == 0) { + + } +}) +``` + +* Place a 'show leds' block in the space after the then of the 'if...then' block. +* Create an image to represent a dot. + +```blocks +radio.onReceivedNumber(function (receivedNumber) { + if (receivedNumber == 0) { + basic.showLeds(` + . . . . . + . . # . . + . # # # . + . . # . . + . . . . . + `) + } +}) +``` + +### Try it! +* Download your program to the micro:bit +* Press button A on the sending micro:bit +* Does this cause a dot to be displayed on the receiving micro:bit? +* However, pressing button A again does not appear to send another dot as the image on the receiving micro:bit does not appear to change. + +Challenge question: How can we fix this? +* Add a 'pause' block and a 'clear screen' block after the 'show leds' block + +```blocks +radio.onReceivedNumber(function (receivedNumber) { + if (receivedNumber == 0) { + basic.showLeds(` + . . . . . + . . # . . + . # # # . + . . # . . + . . . . . + `) + basic.pause(1) + basic.clearScreen() + } +}) +``` +Try running the program again. +Now each time the sender presses button A, you see a dot appear. + +![micro:bit dot display](/static/courses/csintro/radio/microbit-dot-display.png) + +* You can now right-click on the 'if…then' block and select Duplicate to copy that piece of code twice for the other 2 values that a sender may send. + +![If-block, right-click and duplicate](/static/courses/csintro/radio/if-then-duplicate.png) + +* Change the values on the righthand side of the comparison block to 1, and 2. +* Modify the images displayed to show a dash, and a full screen of lights + +### Morse code program + +```blocks + +radio.onReceivedNumber(function (receivedNumber) { + if (receivedNumber == 0) { + basic.showLeds(` + . . . . . + . . # . . + . # # # . + . . # . . + . . . . . + `) + basic.pause(100) + basic.clearScreen() + } + if (receivedNumber == 1) { + basic.showLeds(` + . . . . . + . . . . . + . # # # . + . . . . . + . . . . . + `) + basic.pause(100) + basic.clearScreen() + } + if (receivedNumber == 2) { + basic.showLeds(` + # # # # # + # # # # # + # # # # # + # # # # # + # # # # # + `) + basic.pause(100) + basic.clearScreen() + } +}) +input.onButtonPressed(Button.A, () => { + radio.sendNumber(0) +}) +input.onButtonPressed(Button.B, () => { + radio.sendNumber(1) +}) +input.onButtonPressed(Button.AB, () => { + radio.sendNumber(2) +}) +radio.setGroup(1) +basic.showString("Morse Code") +``` + +### Try it! +* Download your program to the micro:bit +* Press buttons A, B, and A+B together on the micro:bit + +Challenge question: Can our code be made more efficient? +* Whenever you look over a program and see the same lines of code repeated, there is usually a chance to improve the code making it more efficient by reducing the number of lines of code +* What lines are repeated in our program? If...then, pause, clear screen +* Can we edit the code to use only one 'if...then' block, one 'pause' block, and one 'clear screen' block? Yes! + +## Making our code more efficient + +Remind students that they can edit the 'if...then' block, adding as many 'else if' conditions as needed. +They can do this by clicking on the **(+)** or **(-)** symbols on the 'if...then' block. + +![Add else-if to if-then block](/static/courses/csintro/radio/if-then-else-if.png) + +A final else +In a conditional that might receive a number of different values, it is good coding practice to have a catch-all 'else' clause. In our example, if any number value other than the ones we coded for (0,1, and 2) is received, we can signal the user that an error has occurred by using a 'show icon' block to display an X. + +The pause and clear screen +Rather than repeat these lines of code 3 times, we can move the 'pause' block and the 'clear screen' block outside of the edited 'if...then…else' block. + +Now our program runs as we designed it to run and is more efficient, too! + +Final Morse Code Program: + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendNumber(0) +}) +input.onButtonPressed(Button.B, () => { + radio.sendNumber(1) +}) +input.onButtonPressed(Button.AB, () => { + radio.sendNumber(2) +}) +radio.onReceivedNumber(function (receivedNumber) { + if (receivedNumber == 0) { + basic.showLeds(` + . . . . . + . . # . . + . # # # . + . . # . . + . . . . . + `) + } else if (receivedNumber == 1) { + basic.showLeds(` + . . . . . + . . . . . + . # # # . + . . . . . + . . . . . + `) + } else if (receivedNumber == 2) { + basic.showLeds(` + # # # # # + # # # # # + # # # # # + # # # # # + # # # # # + `) + } else { + basic.showIcon(IconNames.No) + } + basic.pause(100) + basic.clearScreen() +}) +radio.setGroup(1) +basic.showString("Morse Code") +``` + +```package +radio +``` \ No newline at end of file diff --git a/docs/test/courses/csintro/radio/overview.md b/docs/test/courses/csintro/radio/overview.md new file mode 100644 index 00000000000..7689ed8b906 --- /dev/null +++ b/docs/test/courses/csintro/radio/overview.md @@ -0,0 +1,19 @@ +# Introduction + +Up to this point, we have been primarily challenging students to collaborate while they create their own projects. This lesson, on communication using the micro:bit radio, is a great opportunity to have students work in pairs on a project. Have kids find a partner to work with for this lesson, and make sure they are seated next to each other. +  +Note: Many teachers find the concept of “pair programming” to be a valuable way to have students collaborate when programming. Two students share one computer, with one student at the keyboard acting as the driver, and the other student providing directions as the navigator. Students must practice good communication with each other throughout the entire programming process. + +The micro:bit allows you to communicate with other micro:bits in the area using the blocks in the Radio category. You can send a number, a string (a word or series of characters) or a string/number combination in a radio packet. You can also give a micro:bit instructions on what to do when it receives a radio packet. + +## ~ hint + +Watch this video to see how the radio hardware works on the @boardname@: + +https://www.youtube.com/watch?v=Re3H2ISfQE8 + +## ~ + +This lesson starts with a “plugged” unplugged activity, in which students use their micro:bits to explore an advanced simulation. The code is quite complex, so students will focus more on how to use the micro:bits to explore aspects of viruses and epidemics, than the intricacies of the code itself. +  +The project for this lesson will challenge students to work together to send and receive some sort of data to and from each other. There is a wide range of simple and complex projects kids can try, but whatever they choose it is a whole lot of fun to communicate with each other using the micro:bits! diff --git a/docs/test/courses/csintro/radio/project.md b/docs/test/courses/csintro/radio/project.md new file mode 100644 index 00000000000..35832342369 --- /dev/null +++ b/docs/test/courses/csintro/radio/project.md @@ -0,0 +1,144 @@ +# Project: Radio project + +For this project, students should work in pairs to design a project that incorporates radio communication to send and receive data in some way. Some projects may have two separate programs: One that receives data, and one that sends data. Students might each choose to submit one program in that case. + +In other cases, a pair of students might submit one program that has both sending and receiving code in it, and the same code is uploaded to two or more micro:bits. + +## Project Ideas + +### Stop, thief! +Design an alarm system for your bedroom that alerts you with a screen animation when someone opens your door. You can mount one micro:bit on your door and use the accelerometer to send a signal over the radio when it is being moved. + +### Interactive art +Create a piece of interactive artwork that receives something as input over the radio from another micro:bit, and displays something based on that as output. + +### 3-Note keyboard +This is a simple three-note keyboard that uses wooden paint stirrers and copper tape to make a connection to each of the three pins on the micro:bit. + +![Keyboard with copper tape](/static/courses/csintro/radio/keyboard-copper-tape.png) +Keyboard with copper tape connections +  +When a key is pressed, it sends a number over the radio to a second micro:bit that plays the appropriate tone over a set of earbuds. This allows you to use each of the three pins on the first micro:bit to play a different tone. + +![Second micro:bit that plays notes](/static/courses/csintro/radio/microbit-number-two.png) +Second micro:bit that plays the notes + +#### ~ hint + +This project uses touch pin inputs. See how the @boardname@ detects a press at a pin or on something connected to a pin in this video: + +https://www.youtube.com/watch?v=GEpZrvbsO7o + +#### ~ + +#### 3-Note keyboard program + +```blocks +let sound = 0 +radio.onReceivedNumber(function (receivedNumber) { + if (receivedNumber == 0) { + sound = 349 + music.playTone(sound, music.beat(BeatFraction.Half)) + } else if (receivedNumber == 1) { + sound = 392 + music.playTone(sound, music.beat(BeatFraction.Half)) + } else if (receivedNumber == 2) { + sound = 440 + music.playTone(sound, music.beat(BeatFraction.Half)) + } +}) +input.onPinPressed(TouchPin.P0, () => { + sound = 0 + radio.sendNumber(sound) + basic.showLeds(` + . . # . . + . # . # . + . # . # . + . # . # . + . . # . . + `) + basic.pause(500) + basic.clearScreen() +}) +input.onPinPressed(TouchPin.P1, () => { + sound = 1 + radio.sendNumber(sound) + basic.showLeds(` + . . # . . + . # # . . + . . # . . + . . # . . + . # # # . + `) + basic.pause(500) + basic.clearScreen() +}) +input.onPinPressed(TouchPin.P2, () => { + sound = 2 + radio.sendNumber(sound) + basic.showLeds(` + . # # # . + # . . # . + . . # . . + . # . . . + # # # # . + `) + basic.pause(500) + basic.clearScreen() +}) +basic.showLeds(` + # # # # # + # # # # # + . . . . . + . . . . . + . . . . . + `) +basic.clearScreen() +``` + +### Radio tennis +In this project, the tennis racquets alternate displaying a ball on the micro:bit LED screen. When you swing the racquet, the ball disappears from one micro:bit display and shows up on the other micro:bit's display. + +![Radio tennis racquets](/static/courses/csintro/radio/radio-tennis-racquets.jpg) +Radio Tennis racquets (made from cardboard) + +## Reflection + +Have students write a reflection of about 150–300 words, addressing the following points: +* What kind of Project did you do? How did you decide what to pick? +* How does your project use radio communication? +* Are there separate programs for the Sender and the Receiver micro:bits? Or 1 program for both? +* Describe something in your project that you are proud of. +* Describe a difficult point in the process of designing this program, and explain how you resolved it. +* What feedback did your beta testers give you? How did that help you improve your design? +  +## Assessment + +**Competency scores**: 4, 3, 2, 1 +  +### Radio + +**4 =** Effectively uses the Radio to send and receive data, with meaningful actions and responses for each.
+**3 =** Effectively uses the Radio to send or receive data, with meaningful actions and responses for each.
+**2 =** Use of Radio is incomplete or non-functional and/or tangential to operation of program.
+**1 =** No working and/or meaningful use of Radio. +     +### micro:bit program +**4 =** micro:bit program:
+`*` Uses Radio blocks in a way that is integral to the program
+`*` Compiles and runs as intended
+`*` Meaningful comments in code
+**3 =** micro:bit program lacks 1 of the required elements.
+**2 =** micro:bit program lacks 2 of the required elements.
+**1 =** micro:bit program lacks all of the required elements. + +### Collaboration reflection + +**4 =** Reflection piece addresses all prompts.
+**3 =** Reflection piece lacks 1 of the required elements.
+**2 =** Reflection piece lacks 2 of the required elements.
+**1 =** Reflection piece lacks 3 of the required elements.   + +```package +radio +``` \ No newline at end of file diff --git a/docs/test/courses/csintro/radio/standards.md b/docs/test/courses/csintro/radio/standards.md new file mode 100644 index 00000000000..574a99a8976 --- /dev/null +++ b/docs/test/courses/csintro/radio/standards.md @@ -0,0 +1,7 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities. +* CL.L2-04 Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.    +* CL.L2-05 Implement problem solutions using a programming language, including: looping behavior, conditional statements, logic, expressions, variables, and functions. diff --git a/docs/test/courses/csintro/radio/unplugged.md b/docs/test/courses/csintro/radio/unplugged.md new file mode 100644 index 00000000000..ce6ef3ac35e --- /dev/null +++ b/docs/test/courses/csintro/radio/unplugged.md @@ -0,0 +1,66 @@ +## Unplugged: Infection Simulation + +For this activity, each student will need a micro:bit and battery pack, as well as the teacher who will be the Master controller. +  +There are four parts to this unplugged activity: +* Setup: Set up the code on all micro:bits +* Explore: Let students experience the game first +* Discuss: Talk about observations, theories, propose strategies +* Test: Play again, testing different strategies and approaches for containing outbreak +  +The goals of this activity are: +* Develop a common working vocabulary for talking about disease spread +* Make inferences based on observation +* Propose and test original hypotheses to explain complex behavior +* Explore a professionally developed micro:bit simulation +  + +![Biohazard symbol](/static/courses/csintro/radio/biohazard.png) + +## Setup +This site is the home page for the Infection game: [Infection](/projects/infection). +  +On that page you should be able to copy the JavaScript code, then go to your MakeCode JavaScript editor and paste the JavaScript code into the window. +  +Then click the Download button to download this program onto your micro:bit. This code should be downloaded onto all of your students’ micro:bits as well as your own. +  +This activity works best in an open area. If it’s possible to go outside, that works even better! To set up the game, the teacher should press the A + B buttons on his or her device. This will register all of the student devices and establish the teacher’s micro:bit as the Master device. +  +## Explore +In this phase, students should just play the game to get a feel for how it works. The object of the game is to meet as many people as possible without getting sick. If at any time players decide to stop meeting people, they should sit down and cover their micro:bit. +  +To start the game, students should take their devices and spread out. When everyone is ready to begin, the teacher should press the A + B buttons again. All of the student devices will show a unique player icon. +  +One of the players is randomly chosen to have a virus that is transmitted when they meet other players. Players can meet each other by going up to another player and placing the two devices next to each other. Players who are healthy, or who are infected but are not showing symptoms yet, will have a smile. Once a player is sick, their micro:bit will display a frowny face. +  +After a certain period of time being sick, the player dies and the micro:bit will display a skull icon. That player should sit down and wait for the game to end, when all players are dead or the virus stops spreading. +  +## Discuss +After one round, it is good to have a discussion with the players: +* Did anyone manage to stay healthy? If so, how? If not, why not? +* How do you think the disease spread? +* Who do you think started it? +* What could we do to find out? +* What strategies might we adopt next time, to have a better outcome? +  +## Test +Play the game one more time, or more depending on available time, and attempt to test some of the theories students came up with. +* What strategies worked well? +* Which strategies seemed like a good idea at the time, but in practice, were less effective? Why? +* Are there any real-world situations that this might remind you of? +  +## Vocabulary +As students talk through their theories, they will often talk about a scientific idea without knowing the specific word for it. This presents a nice opportunity, once students have surfaced an idea, to give it a proper name so that you can start to develop a common working vocabulary for talking about the problem. +  +Here are some common terms that come up in discussion: +* Asymptomatic: Someone who has the virus but is not showing outward symptoms of being sick. +* Carrier: Someone who has the virus and can transmit it to others. +* Immunity: Someone who cannot contract or transmit the virus. +* Incubation: The period of time between when a person contracts the virus and when the person starts to show symptoms of being sick. +* Inoculation: Make someone immune to the virus. +* Patient Zero: The first person to introduce a virus to a community. +* Quarantine: A strategy to isolate those who are suspected of carrying a virus +  +## Reference +This game is a distributed simulation of a viral outbreak. It is modeled after the Thinking Tags participatory simulations developed at MIT Media Lab. Participatory Simulations have been found to enhance student understanding of complex dynamic relationships, inquiry skills, and scientific understanding. (Colella, V. (2000). Participatory Simulations: Building Collaborative Understanding Through Immersive Dynamic Modeling. _Journal of the Learning Sciences, 9(4), 471–500._ http://dx.doi.org/10.1207/S15327809JLS0904_4) + diff --git a/docs/test/courses/csintro/references.md b/docs/test/courses/csintro/references.md new file mode 100644 index 00000000000..361c349a8ac --- /dev/null +++ b/docs/test/courses/csintro/references.md @@ -0,0 +1,71 @@ +# References + +We have included some additional reference books and materials if you are interested in learning more about the maker mindset. + +## Maker Education, Physical Computing or Design Thinking in the Classroom + +### [Invent To Learn](http://inventtolearn.com/) +by **Sylvia Libow Martinez and Gary Stager** + +Making, Tinkering, and Engineering in the Classroom + +[![Invent to Learn Book Cover](/static/courses/csintro/references/invent-to-learn.jpg)](http://inventtolearn.com/) + +### [Launch](http://thelaunchcycle.com/) +by **John Spencer and AJ Juliani** + +Using Design Thinking to Boost Creativity and Bring Out the Maker in Every Student + +[![Launch Book Cover](/static/courses/csintro/references/launch.jpg)](http://thelaunchcycle.com/) + +### [The Innovator's Mindset](http://georgecouros.ca/blog/archives/5715) +by **George Couros** + +Empower Learning, Unleash Talent, and Lead a Culture of Creativity + +[![Innovator's Mindset Book Cover](/static/courses/csintro/references/innovators-mindset.jpg)](http://georgecouros.ca/blog/archives/5715) + +### [The Big Book of Makerspace Projects](https://colleengraves.org/bigmakerbook/) +by **Colleen Graves** + +Inspiring Makers to Experiment, Create, and Learn + +[![Makerspace Projects Book Cover](/static/courses/csintro/references/makerspace-projects.jpg)](https://colleengraves.org/bigmakerbook/) + +## Code and Computational Thinking + +### [Code](http://www.charlespetzold.com/code/) +by **Charles Petzold** + +The Hidden Language of Computer Hardware and Software + +[![Code Book Cover](/static/courses/csintro/references/code.jpg)](http://www.charlespetzold.com/code/) + +### [Girl Code](https://www.girlcodethebook.com/) +by **Andy Gonzales and Sophie Houser** + +Gaming, Going Viral, and Getting it Done + +[![Girl Code Book Cover](/static/courses/csintro/references/girl-code.jpg)](https://www.girlcodethebook.com/) + +### [Secret Coders](http://www.secret-coders.com/) +by **Gene Luen Yang and Mike Holmes** + +Get with the PROGRAM! + +[![Secret Coders Book Cover](/static/courses/csintro/references/secret-coders.jpg)](http://www.secret-coders.com/) + +### [How to Count](https://stevenf.com/books/) +by **Steven Frank** + +Programming for Mere Mortals, Vol. 1 + +[![How to Count Book Cover](/static/courses/csintro/references/how-to-count.png)](https://stevenf.com/books/) + +## Feedback + +If you have feedback for the Microsoft MakeCode team, you can fill out their survey form here: https://aka.ms/microbitfeedback + +The support site for the micro:bit is located here: [https://support.microbit.org](https://support.microbit.org/) + + diff --git a/docs/test/courses/csintro/variables.md b/docs/test/courses/csintro/variables.md new file mode 100644 index 00000000000..e198ed34396 --- /dev/null +++ b/docs/test/courses/csintro/variables.md @@ -0,0 +1,27 @@ +# Variables + +![Variable value](/static/courses/csintro/variables/cover.jpg) + +This unit introduces the use of variables to store information. You will practice giving variables unique and meaningful names, and use basic mathematical operations for adding, subtracting, multiplying, and dividing variable values. You'll code a program for the micro:bit that keeps and displays the score of a game of *Rock, Paper Scissors* by using the programmable buttons for input and the LED screen for output. In the final project, you'll code your own unique program using variables, and design and build an object that uses the micro:bit to track score, count steps, turns, or something else. + +## Lesson Objectives + +You will... + +* Understand what variables are and why and when to use them in a program. +* Learn how to create a variable, set the variable to an initial value, and change the value of the variable within a micro:bit program. +* Learn how to create meaningful and understandable variable names. +* Understand that a variable holds one value at a time. +* Understand that when you update or change the value held by a variable, the new value replaces the previous value. +* Learn how to use the basic mathematical blocks for adding, subtracting, multiplying, and dividing variables. +* Apply the above knowledge and skills to create a unique program that uses variables as an integral part of the program. + +## Lesson plan + +1. [**Overview**: Variables in Daily Life](/test/courses/csintro/variables/overview) +2. [**Activity**: Make a Game Scorekeeper](/test/courses/csintro/variables/activity) +3. [**Project**: Everything Counts](/test/courses/csintro/variables/project) + +## Related standards + +[Targeted CSTA standards](/test/courses/csintro/variables/standards) \ No newline at end of file diff --git a/docs/test/courses/csintro/variables/activity.md b/docs/test/courses/csintro/variables/activity.md new file mode 100644 index 00000000000..13af0f7c079 --- /dev/null +++ b/docs/test/courses/csintro/variables/activity.md @@ -0,0 +1,271 @@ +# Activity: Scorekeeper + +This micro:bit activity guides you to create a program with three variables that will keep score for a game of _Rock Paper Scissors_. + +To do this, you will need to create variables for the parts of scorekeeping that change over the course of a gaming session. What are those variables? + +* The number of times the first player wins +* The number of times the second player wins +* the number of times the players tie + +First, let's consider the names of our variables. In general, variable names should clearly describe what type of information they hold. They should be clear and easy for a reader to understand regardless of their familiarity with your program. + +In MakeCode, from the Variables menu, make and name these three variables: `PlayerAWins`, `PlayerBWins`, `PlayersTie`. + +![Make a new variable](/static/courses/csintro/variables/make-a-variable.png) + +![Set new variable name](/static/courses/csintro/variables/new-variable.png) + +## Initializing the variable value + +It is important to give your variables an initial value. The initial value is the value the variable will hold each time the program starts. For our counter program, we will give each variable the value 0 (zero) at the start of the program. + +```blocks +let PlayerAWins = 0 +let PlayerBWins = 0 +let PlayersTie = 0 +``` + +## Updating the variable value + +In our program, we want to keep track of the number of times each player wins and the number of times they tie. We can use the buttons A and B to do this. + +Pseudocode: + +* Press button A to record a win for player A +* Press button B to record a win for player B +* Press both button A and button B together to record a tie + +We already initialized these variables and now need to code to update the values at each round of the game. + +* Each time the scorekeeper presses button A to record a win for Player A, we want to add 1 to the current value of the variable `PlayerAWins`. +* Each time the scorekeeper presses button B, to record a win for Player B, we want to add 1 to the current value of the variable `PlayerBWins`. +* Each time the scorekeeper presses both button A and button B at the same time to record a tie, we want to add 1 to the current value of the variable `PlayersTie`. + +From the Input menu, drag 3 of the ‘on button A pressed’ event handlers to your Programming Workspace. + +![onButtonPressed A](/static/courses/csintro/variables/on-button-pressed.png) + +Leave one block with ‘A’. Use the drop-down menu in the block to choose ‘B’ for the second block and ‘A+B’ for the third block. + +From the Variables menu, drag 3 of the ‘change PlayersTie by 1’ blocks to your Programming Workspace. + +![Change variable](/static/courses/csintro/variables/change-variable.png) + +Place one change block into each of the Button Pressed blocks. + +Choose the appropriate variable from the pull down menus in the change blocks. + +```blocks +let PlayerAWins = 0 +let PlayerBWins = 0 +let PlayersTie = 0 + +input.onButtonPressed(Button.A, () => { + PlayerAWins += 1 +}) +input.onButtonPressed(Button.B, () => { + PlayerBWins += 1 +}) +input.onButtonPressed(Button.AB, () => { + PlayersTie += 1 +}) +``` + +## User feedback + +Whenever the scorekeeper presses button A, button B, or both buttons together, we will give the user visual feedback acknowledging that the user pressed a button. We can do this by coding our program to display: + +* an ‘A’ each time the user presses button A to record a win for Player A, +* a ‘B’ for each time the user presses button ‘B’ to record a win for Player B, +* a ‘T’ for each time the user presses both button A and button B together to record a tie. + +We can display an ‘A’, ‘B’, or ‘T’ using either the ‘show leds’ block or the ‘show string’ block. + +![Show LEDs](/static/courses/csintro/variables/show-leds.png) + +In this example, we have used the ‘show leds’ block. + +```blocks +let PlayerAWins = 0 +let PlayerBWins = 0 +let PlayersTie = 0 + +input.onButtonPressed(Button.A, () => { + PlayerAWins += 1 + basic.showLeds(` + . # # # . + . # . # . + . # # # . + . # . # . + . # . # . + `) + basic.clearScreen() +}) +input.onButtonPressed(Button.B, () => { + PlayerBWins += 1 + basic.showLeds(` + . # # . . + . # . # . + . # # # . + . # . # . + . # # . . + `) + basic.clearScreen() +}) +input.onButtonPressed(Button.AB, () => { + PlayersTie += 1 + basic.showLeds(` + . # # # . + . . # . . + . . # . . + . . # . . + . . # . . + `) + basic.clearScreen() +}) +``` +Notice that we added a ‘clear screen’ block after showing ‘A’, ‘B’, or ‘T’. +What do you think would happen if we did not clear the screen? Try it. + +## Showing the final values of the variables + +To finish our program, we can add code that tells the micro:bit to display the final values of our variables. +Since we have already used buttons A and B, we can use the ‘on shake’ event handler block to trigger this event. +We can use the ‘show string’, ‘show leds’, ‘pause’, and ‘show number’ blocks to display these final values in a clear way. +Here is the complete program. + +```blocks +let PlayersTie = 0 +let PlayerBWins = 0 +let PlayerAWins = 0 +input.onButtonPressed(Button.A, () => { + PlayerAWins += 1 + basic.showLeds(` + . # # # . + . # . # . + . # # # . + . # . # . + . # . # . + `) + basic.clearScreen() +}) +input.onButtonPressed(Button.B, () => { + PlayerBWins += 1 + basic.showLeds(` + . # # . . + . # . # . + . # # # . + . # . # . + . # # . . + `) + basic.clearScreen() +}) +input.onButtonPressed(Button.AB, () => { + PlayersTie += 1 + basic.showLeds(` + . # # # . + . . # . . + . . # . . + . . # . . + . . # . . + `) + basic.clearScreen() +}) +input.onGesture(Gesture.Shake, () => { + basic.showString("Wins:") + basic.showLeds(` + . # # # . + . # . # . + . # # # . + . # . # . + . # . # . + `) + basic.showNumber(PlayerAWins) + basic.pause(1000) + basic.showLeds(` + . # # . . + . # . # . + . # # # . + . # . # . + . # # . . + `) + basic.showNumber(PlayerBWins) + basic.pause(1000) + basic.showString("Ties:") + basic.showNumber(PlayersTie) + basic.pause(1000) + basic.clearScreen() +}) +PlayerAWins = 0 +PlayerBWins = 0 +PlayersTie = 0 +``` + +### ~ hint + +Buttons have been used as human input devices since computers first existed. Watch this video and see how they let the user tell the micro:bit to do something. + +[https://www.youtube.com/watch?v=t_Qujjd_38o](https://www.youtube.com/watch?v=t_Qujjd_38o) + +### ~ + +## Try it out! + +Download the Scorekeeper program to the micro:bit, and find someone to play *Rock, Paper, Scissors* with you using your micro:bit to act as the Scorekeeper! + +## 'Adding' on with mathematical operations + +There is more we can do with the input we received using this program. We can use mathematical operations on our variables. + +Example: Perhaps you’d like to keep track of, and show the player the total number of ‘rounds’ that were played. To do this, we can add the values stored in the variables we created to keep track of how many times each player won and how many times they tied. + +In order to do this, we can add the code to our program under the 'on shake' event handler. + +* First, display a string to show the player that the following sum represents the total number of rounds played. +* Our program will add the values stored in the variables `PlayerAWins`, `PlayerBWins`, and `PlayersTie` and then display the sum of this mathematical operation. +* The blocks for the mathematical operations adding, subtracting, multiplying, and dividing are listed in the Math section of the Toolbox. +**Note:** Even though there are 4 blocks shown for these 4 operations, you can access any of the four operations from any of the four blocks, and you can also access the exponent operation from these blocks. + +![Adding block](/static/courses/csintro/variables/adding-block.png) + +![Operator selector](/static/courses/csintro/variables/operator-selector.png) + +* Replace the default values of zero with the names of the variables we want to add together. + +Notice that because we are adding three variables together we need a second math block. First we add the values for `PlayerAWins` and `PlayerBWins`, then add `PlayersTie`. + +```blocks +let PlayersTie = 0 +let PlayerBWins = 0 +let PlayerAWins = 0 + +input.onGesture(Gesture.Shake, () => { + basic.showString("Total rounds played:") + basic.showNumber(PlayerAWins + PlayerBWins + PlayersTie) +}) +``` +* Save, download, and try the program again to make sure that it runs correctly and displays the correct numbers for each variable. + +Remember that the micro:bit is a device that processes input and displays it as output in some way. By storing values in variables, you can perform mathematical operations on that data that provides you with useful information. + +What other math operations could provide valuable information from the values stored in these variables? + +Examples: + +* Calculate and display a player’s wins and/or losses as a percentage of all rounds played. +* Calculate a display the number of tied games as a percentage of all rounds played. + +## Knowledge Check + +Questions: + +1. What's the difference between a constant and a variable? +2. Why is it important to name variables in a clear and meaningful way? +3. **True or false:** You can only use the default variable names provided in the Variables toolbox drawer. + +Answers: + +1. A constant has a value that doesn’t change. A variable has a value that may change. +2. Variable names should clearly describe what type of information they hold so they are easily recognizable in the program and you can find problems or bugs easier. +3. **False.** You can make a variable with any name you want/need for a program with the Make a Variable button. \ No newline at end of file diff --git a/docs/test/courses/csintro/variables/overview.md b/docs/test/courses/csintro/variables/overview.md new file mode 100644 index 00000000000..b0a732f3fb9 --- /dev/null +++ b/docs/test/courses/csintro/variables/overview.md @@ -0,0 +1,29 @@ +# Introduction + +From our previous lesson, we learned that computer programs process information. Some of the information that is input, stored, and used in a computer program has a value that is **constant**, meaning it does not change throughout the course of the program. An example of a constant in math is “pi” because “pi” has one value that never changes (it is 3.14). Other pieces of information have values that vary or change during the running of a program. Programmers create **variables** to hold the value of information that may change. In a game program, a variable may be created to hold the player’s current score, since that value would change (hopefully!) during the course of the game. + +Try and think of some pieces of information from your daily life that are constants and others that are variables. + +* What pieces of information have values that don’t change during the course of a single day (i.e., are constants)? + +* What pieces of information have values that do change during the course of a single day (i.e., are variables)? + +## Examples + +In one school day… + +* Constants: The day of the week, the year, student’s name, the school’s address, the student’s birthday + +* Variables: The temperature/weather, the current time, the current class, whether they are standing or sitting… + +Variables hold a specific type of information. The micro:bit’s variables can keep track of **numbers, strings, Booleans, sprites,** and **arrays**. The first time you use a variable, its type is assigned to match whatever it is holding. From that point forward, you can only change the value of that variable to another value of that same type. + +* A **number** variable could hold numerical data such as the year, the temperature, or the degree of acceleration. + +* A **string** variable holds a string of alphanumeric characters such as a person’s name, a password, or the day of the week. + +* A **Boolean** variable has only two values: true or false. For example, you might have certain things that happen only when the variable called GameOver is false. + +* A **sprite** is a special variable that represents a single dot on the screen and holds two separate values for the row and column the dot is currently in. + +* An **array** is another special type of variable that holds a list of multiple items. \ No newline at end of file diff --git a/docs/test/courses/csintro/variables/project.md b/docs/test/courses/csintro/variables/project.md new file mode 100644 index 00000000000..f74703f64e9 --- /dev/null +++ b/docs/test/courses/csintro/variables/project.md @@ -0,0 +1,101 @@ +# Project: Everything counts + +In this assignment, you'll come up with a micro:bit program that counts something. Your program should keep track of input by storing values in variables and provide output in some visual and useful way. You should also perform mathematical operations on the variables to give useful output. + +## Input +Review all the different inputs available to you through the micro:bit. + +![micro:bit input list](/static/courses/csintro/variables/input-list.png) + +* Acceleration +* Light level +* Button is pressed +* Compass heading +* Temperature +* Running time +* On shake +* On button pressed +* On logo down +* On logo up +* One pin pressed +* On screen down +* On screen up +* Pin is pressed + +## Project Ideas + +### Duct tape wallet + +You can see the instructions for creating a durable, fashionable wallet or purse out of duct tape: [Duct tape wallet](/projects/wallet). Create a place for the micro:bit to fit securely. Use Button A to add dollars to the wallet, and Button B to subtract dollars from the wallet. + +**Extra mod:** Use other inputs to handle cents, and provide a way to display how much money is in the wallet in dollars and cents. + +### Umpire’s baseball counter (pitches and strikes) + +In baseball during an at-bat, umpires must keep track of how many pitches have been thrown to each batter. Use Button A to record the number of balls (up to 4) and the number of strikes (up to 3). + +**Extra mod:** Create a way to reset both variables to zero, create a way to see the number of balls and strikes on the screen at the same time. + +### Shake counter + +Using the 'On Shake' block, you can detect when the micro:bit has been shaken and increment a variable accordingly. Try attaching the micro:bit to a lacrosse stick and keep track of how many times you have successfully thrown the ball up in the air and caught it. + +**Extra mod:** Make the micro:bit create a sound of increasing pitch every time you successfully catch the ball. + +### Pedometer + +See if you can count your steps while running or doing other physical activities carrying the micro:bit. Where is it best mounted? + +**Extra Mod:** Design a wearable band or holder that can carry the micro:bit securely so it doesn’t slip out during exercise. + +### Calculator + +Create an adding machine. Use Button A to increment the first number, and Button B to increment the second number. Then, use Shake or Buttons A + B to add the two numbers and display their sum. + +**Extra mod:** Find a way to select and perform other math operations. + +![micro:bit top and spin counter](/static/courses/csintro/variables/microbit-spinner.png) +Homemade top with micro:bit revolution counter + +![Duct tape wallet](/static/courses/csintro/variables/duct-tape-wallet.jpg) +Duct tape wallet with micro:bit display + +![Baseball pitch counter](/static/courses/csintro/variables/baseball-counter.jpg) +Baseball pitch counter + +## Process + +In any design project, it's important to start by understanding the problem. You can begin this activity by interviewing people around you who might have encountered the problem you are trying to solve. For example, if you are designing a wallet, ask your friends how they store their money, credit cards, identification, etc. What are some challenges with their current system? What do they like about it? What else do they use their wallets for? + +If you are designing something else, think about how you might find out more information about your problem through interviewing or observing people using current solutions. + +Then start brainstorming. Sketch out a variety of different ideas. Remember that it's okay if the ideas seem far-out or impractical. Some of the best products come out of seemingly wild ideas that can ultimately be worked into the design of something useful. What kind of holder can you design to hold the micro:bit securely? How will it be used in the real world, as part of a physical design? + +Use the simulator to do your programming, and test out a number of different ideas. What is the easiest way to keep track of data? If you are designing for the accelerometer, try to see what different values are generated through different actions (you can display the value the accelerometer is currently reading using the 'Show Number' block; clear the screen afterward so you can see the reading). + +```blocks +basic.forever(() => { + basic.showNumber(input.acceleration(Dimension.X)) + basic.showLeds(` + . . . . . + . . . . . + . . . . . + . . . . . + . . . . . + `) +}) +``` + +## Reflection + +Write a short reflection (150–300 words) about your project, addressing the following points: + +* What was the problem you were trying to solve with this project? +* What were the Variables that you used to keep track of information? +* What mathematical operations did you perform on your variables? What information did you provide? +* Describe what the physical component of your micro:bit project was (e.g., an armband, a wallet, a holder, etc.) +* How well did your prototype work? What were you happy with? What would you change? +* What was something that was surprising to you about the process of creating this project? +* Describe a difficult point in the process of designing this project, and explain how you resolved it. + + diff --git a/docs/test/courses/csintro/variables/standards.md b/docs/test/courses/csintro/variables/standards.md new file mode 100644 index 00000000000..a775b6ac86c --- /dev/null +++ b/docs/test/courses/csintro/variables/standards.md @@ -0,0 +1,9 @@ +# Standards + +## CSTA K-12 Computer Science Standards + +* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities +* CT.L1:6-01 Understand and use the basic steps in algorithmic problem-solving +* CT.L1:6-02 Develop a simple understanding of an algorithm using computer-free exercises +* CPP.L1:6-05 Construct a program as a set of step-by-step instructions to be acted out +* 2-A-5-7 Create variables that represent different types of data and manipulate their values. diff --git a/docs/test/courses/csintro/variables/unplugged.md b/docs/test/courses/csintro/variables/unplugged.md new file mode 100644 index 00000000000..2517d6b6541 --- /dev/null +++ b/docs/test/courses/csintro/variables/unplugged.md @@ -0,0 +1,22 @@ +# Unplugged: Keeping score + +The objective of this activity is to experience creating and working with variables by pairing up and playing _Rock Paper Scissors_. + +![Rock-paper-scissors hands](/static/courses/csintro/variables/rps-sketch.jpg) + +Find someone to play Rock, Paper, Scissors with you. On a separate sheet of paper, keep track of how many times each player wins as well as the number of times you end up in a tie. + +**Play**: Play Rock Paper Scissors for a few minutes. When done, add up your scores and how many ‘rounds’ you played. + +Take a look at how you kept track of your player scores. Usually, scorekeepers will write down the players’ names and then beside or below the names, marks representing the ‘wins’ of each player. You may have made a separate place for recording ties. + +![Score sheet](/static/courses/csintro/variables/mary-doug-score.jpg) +Sample score-keeping sheet + +Now think about what parts of the score sheet represent **constants**: values that do not change through the course of a gaming session. + +**Example**: The players’ names are constants. + +Consider what parts of the score sheet represent **variables**: values that do change through the course of a gaming session. + +**Example**: The players’ number of wins are variables. diff --git a/docs/test/static/courses/csintro/algorithms/add-comment.png b/docs/test/static/courses/csintro/algorithms/add-comment.png new file mode 100644 index 00000000000..aa23ed132ae Binary files /dev/null and b/docs/test/static/courses/csintro/algorithms/add-comment.png differ diff --git a/docs/test/static/courses/csintro/algorithms/write-comment.png b/docs/test/static/courses/csintro/algorithms/write-comment.png new file mode 100644 index 00000000000..5927d4981b8 Binary files /dev/null and b/docs/test/static/courses/csintro/algorithms/write-comment.png differ